@sankhyalabs/ezui 1.1.75 → 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':
+    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-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-text-input/ez-text-input.css

@@ -1,58 +1,58 @@
 :host {
   /* dimensions */
   /*@doc Define a altura do componente.*/
-  --text-input--height: 42px;
+  --ez-text-input--height: 42px;
   /*@doc Define a largura do componente.*/
-  --text-input--width: 100%;
+  --ez-text-input--width: 100%;
   /*@doc Define a largura do slot que contém o ícone.*/
-  --text-input__icon--width: 48px;
+  --ez-text-input__icon--width: 48px;
 
   /* general */
   /*@doc Define o raio da borda do input do componente.*/
-  --text-input--border-radius: var(--border--radius-medium, 12px);
+  --ez-text-input--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define o tamanho da fonte do input e label do componente.*/
-  --text-input--font-size: var(--text--medium, 14px);
+  --ez-text-input--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
-  --text-input--font-family: var(--font-pattern, Arial);
+  --ez-text-input--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label do componente.*/
-  --text-input--font-weight: var(--text-weight--large, 500);
+  --ez-text-input--font-weight: var(--text-weight--large, 500);
   /*@doc Define a cor da fonte do input e label do componente.*/
-  --text-input--color: var(--title--primary, #000);
+  --ez-text-input--color: var(--title--primary, #000);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --text-input__input--background-color: var(--background--medium, #e0e0e0);
+  --ez-text-input__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define o estilo da borda do input.*/
-  --text-input__input--border: var(--border--medium, 2px solid);
+  --ez-text-input__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
-  --text-input__input--border-color: var(--text-input__input--background-color);
+  --ez-text-input__input--border-color: var(--ez-text-input__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.*/
-  --text-input__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
+  --ez-text-input__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --ez-text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
   /*@doc Define a cor do texto do input.*/
-  --text-input__input--disabled--color: var(--text--disable, #AFB6C0);
+  --ez-text-input__input--disabled--color: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda do input quando com erro.*/
-  --text-input__input--error--border-color: #CC2936;
+  --ez-text-input__input--error--border-color: #CC2936;
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --text-input__message_box--font-size: var(--text--small, 12px);
+  --ez-text-input__message_box--font-size: var(--text--small, 12px);
   /*@doc Define a cor da fonte da mensagem quando info.*/
-  --text-input__message_box--info--color: var(--color--success, #22085d);
+  --ez-text-input__message_box--info--color: var(--color--success, #22085d);
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --text-input__message_box--error--color: var(--color--error, #FF0000);
+  --ez-text-input__message_box--error--color: var(--color--error, #FF0000);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
-  --text-input__label--floating--top: 6px;
+  --ez-text-input__label--floating--top: 6px;
   /*@doc Define o posicionamento do label.*/
-  --text-input__label--padding-top: 12px;
+  --ez-text-input__label--padding-top: 12px;
   /*@doc Define o espaçamento esquerdo do label.*/
-  --text-input__label--padding-left: 14px;
+  --ez-text-input__label--padding-left: 14px;
   /*@doc Define o espaçamento direito do label.*/
-  --text-input__label--padding-right: 12px;
+  --ez-text-input__label--padding-right: 12px;
 
 
   /***************
@@ -63,7 +63,7 @@
   flex-wrap: wrap;
   position: relative;
   /*public*/
-  width: var(--text-input--width);
+  width: var(--ez-text-input--width);
 }
 
 input {
@@ -74,40 +74,40 @@ input {
   font-weight: var(--text-weight--large, 600);
 
   /*public*/
-  height: var(--text-input--height);
-  border-radius: var(--text-input--border-radius);
-  font-family: var(--text-input--font-family);
-  font-size: var(--text-input--font-size);
-  border: var(--text-input__input--border);
-  border-color: var(--text-input__input--border-color);
-  background-color: var(--text-input__input--background-color);
-  color: var(--text-input--color);
+  height: var(--ez-text-input--height);
+  border-radius: var(--ez-text-input--border-radius);
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  border: var(--ez-text-input__input--border);
+  border-color: var(--ez-text-input__input--border-color);
+  background-color: var(--ez-text-input__input--background-color);
+  color: var(--ez-text-input--color);
 }
 
 input:disabled {
   /*public*/
-  background-color: var(--text-input__input--disabled--background-color);
-  color: var(--text-input__input--disabled--color);
+  background-color: var(--ez-text-input__input--disabled--background-color);
+  color: var(--ez-text-input__input--disabled--color);
 }
 
 input:focus {
   /*private*/
   outline: none;
   /*public*/
-  border-color: var(--text-input__input--focus--border-color);
+  border-color: var(--ez-text-input__input--focus--border-color);
 }
 
 input.icon--left {
-  padding-left: var(--text-input__icon--width);
+  padding-left: var(--ez-text-input__icon--width);
 }
 
 input.icon--right {
-  padding-right: var(--text-input__icon--width);
+  padding-right: var(--ez-text-input__icon--width);
 }
 
 input.hasError {
-  color: var(--text-input--color);
-  border-color: var(--text-input__input--error--border-color);
+  color: var(--ez-text-input--color);
+  border-color: var(--ez-text-input__input--error--border-color);
 }
 
 input.text--right {
@@ -126,14 +126,14 @@ input.text--right {
   white-space: nowrap;
 
   /*public*/
-  font-family: var(--text-input--font-family);
-  font-size: var(--text-input__message_box--font-size);
-  color: var(--text-input__message_box--info--color);
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input__message_box--font-size);
+  color: var(--ez-text-input__message_box--info--color);
 }
 
 .hasError {
   /*public*/
-  color: var(--text-input__message_box--error--color);
+  color: var(--ez-text-input__message_box--error--color);
 }
 
 .input__label {
@@ -146,49 +146,49 @@ input.text--right {
   white-space: nowrap;
   -webkit-transition: font-size .05s, top .05s;
   transition: font-size .05s, top .05s;
-  width: calc(100% - var(--text-input__label--padding-right));
-  left: var(--text-input--space--medium);
+  width: calc(100% - var(--ez-text-input__label--padding-right));
+  left: var(--ez-text-input--space--medium);
 
   /*public*/
-  font-family: var(--text-input--font-family);
-  font-size: var(--text-input--font-size);
-  font-weight: var(--text-input--font-weight);
-  color: var(--text-input--color);
-  top: var(--text-input__label--padding-top);
-  left: var(--text-input__label--padding-left);
-  padding-right: var(--text-input__label--padding-right);
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+  top: var(--ez-text-input__label--padding-top);
+  left: var(--ez-text-input__label--padding-left);
+  padding-right: var(--ez-text-input__label--padding-right);
 }
 
 .input__label--floated {
-  font-family: var(--text-input--font-family);
+  font-family: var(--ez-text-input--font-family);
   font-size: var(--text--extra-small);
   color: var(--text--primary);
-  top: var(--text-input__label--floating--top);
+  top: var(--ez-text-input__label--floating--top);
 }
 
 .input__label--disabled {
-  color: var(--text-input__input--disabled--color);
+  color: var(--ez-text-input__input--disabled--color);
 }
 
 .input__label--left {
   /*public*/
   text-align: left;
-  left: calc(var(--text-input__icon--width) + 2px);
+  left: calc(var(--ez-text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--text-input__icon--width));
+  width: calc(100% - var(--ez-text-input__icon--width));
 }
 
 .input__label--right {
   /*public*/
-  right: var(--text-input__icon--width);
-  width: calc(100% - var(--text-input__icon--width));
+  right: var(--ez-text-input__icon--width);
+  width: calc(100% - var(--ez-text-input__icon--width));
 }
 
 /* ISSO TA ERRADO CRIAR INPUT__LABEL--BOTH */
 .input__label--left.input__label--right {
-  left: calc(var(--text-input__icon--width) + 2px);
+  left: calc(var(--ez-text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--text-input__icon--width) * 2);
+  width: calc(100% - var(--ez-text-input__icon--width) * 2);
 }
 
 .input--with--label {

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -1,5 +1,5 @@
-import { Component, Prop, h, Watch, Host, Method, Event, Element } from '@stencil/core';
-import { MaskFormatter } from '@sankhyalabs/core';
+import { Component, Prop, h, Watch, Host, Method, Event, Element } from "@stencil/core";
+import { MaskFormatter } from "@sankhyalabs/core";
 export class EzTextInput {
   constructor() {
     /**
@@ -8,14 +8,14 @@ export class EzTextInput {
     this.enabled = true;
   }
   showError() {
-    const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
+    const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
     if (hasError) {
-      this._inputElem.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
+      this._inputElem.classList.add("hasError");
+      this._messageBoxElem.classList.add("hasError");
     }
     else {
-      this._inputElem.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
+      this._inputElem.classList.remove("hasError");
+      this._messageBoxElem.classList.remove("hasError");
     }
   }
   prepareMask() {
@@ -33,7 +33,7 @@ export class EzTextInput {
       this._inputElem.value = this.value;
     }
     this.handleChange();
-    this.ezChange.emit();
+    this.ezChange.emit(this.value);
     this.adjustFloatingLabel();
   }
   adjustFloatingLabel() {
@@ -118,22 +118,22 @@ export class EzTextInput {
       content.style.justifyContent = "center";
       content.style.overflow = "hidden";
       content.style.top = "0px";
-      content.style.width = "var(--text-input__icon--width)";
-      content.style.height = "var(--text-input--height)";
+      content.style.width = "var(--ez-text-input__icon--width)";
+      content.style.height = "var(--ez-text-input--height)";
       if (slot.name == "leftIcon") {
         content.style.left = "0px";
-        content.style.borderRadius = "var(--text-input--border-radius) 0 0 var(--text-input--border-radius)";
-        this._inputElem.classList.add('icon--left');
+        content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
+        this._inputElem.classList.add("icon--left");
         if (this._labelElem) {
-          this._labelElem.classList.add('input__label--left');
+          this._labelElem.classList.add("input__label--left");
         }
       }
       else if (slot.name == "rightIcon") {
         content.style.right = "0px";
-        content.style.borderRadius = "0 var(--text-input--border-radius) var(--text-input--border-radius) 0";
-        this._inputElem.classList.add('icon--right');
+        content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
+        this._inputElem.classList.add("icon--right");
         if (this._labelElem) {
-          this._labelElem.classList.add('input__label--right');
+          this._labelElem.classList.add("input__label--right");
         }
       }
     }

package/dist/collection/components/ez-time-input/ez-time-input.js

@@ -1,6 +1,7 @@
-import { Element, Component, Prop, h, Watch, Host, Method, getAssetPath } from "@stencil/core";
+import { Element, Component, Prop, h, Watch, Host, Method } from "@stencil/core";
 import { TimeFormatter, MaskFormatter, NumberUtils } from "@sankhyalabs/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import { getSpritePath } from "../../utils/AssetsUtils";
 export class EzTimeInput {
   constructor() {
     /**
@@ -97,7 +98,7 @@ export class EzTimeInput {
   render() {
     return (h(Host, null,
       h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage },
-        h("ez-icon", { slot: "leftIcon", href: getAssetPath("../assets/actions-sprite.svg") + "#timer-outline" }))));
+        h("ez-icon", { slot: "leftIcon", href: getSpritePath("timer-outline") }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/utils/AssetsUtils.js

@@ -0,0 +1,19 @@
+import { getAssetPath, setAssetPath } from "@stencil/core";
+export const getSpritePath = (sprite) => `${getContextAssetsPath("../assets/actions-sprite.svg")}#${sprite}`;
+let ctxLoaded = false;
+function getContextAssetsPath(resource) {
+  if (!ctxLoaded) {
+    const scriptElem = document.querySelector("script[data-ezui-assets-url]");
+    if (scriptElem) {
+      let assetsPath = scriptElem.dataset.ezuiAssetsUrl;
+      if (assetsPath) {
+        if (assetsPath.startsWith('/')) {
+          assetsPath = window.location.origin + assetsPath;
+        }
+        setAssetPath(assetsPath);
+      }
+    }
+    ctxLoaded = true;
+  }
+  return getAssetPath(resource);
+}