@sankhyalabs/ezui 1.1.94 → 1.1.97

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

@@ -15,6 +15,14 @@ export class EzComboBox {
      * Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
      */
     this.showOptionValue = false;
+    /**
+     * Remove a opção vazia da lista de opções
+     */
+    this.suppressEmptyOption = false;
+    /**
+     * Permite exibir a mensagem de erro.
+     */
+    this.canShowError = true;
   }
   internalUpdate() {
     if (this._inputElement) {
@@ -45,7 +53,12 @@ export class EzComboBox {
       const upperCriteria = this._criteria.toUpperCase();
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
-    this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
+    if (this.suppressEmptyOption) {
+      this._visibleOptions = opts;
+    }
+    else {
+      this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
+    }
   }
   buildItem(opt, index) {
     return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined },
@@ -59,7 +72,7 @@ export class EzComboBox {
     //FIXME: Provavelmente isso fará com que o popup abra em uma 
     //posição errada no futuro. Preferi fazer simples no começo,
     //porque não quis onerar o text input com essa funcionalidade...
-    const top = this.errorMessage ? "0px" : "-17px";
+    const top = (this.errorMessage || !this.canShowError) ? "0px" : "-17px";
     this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
     window.requestAnimationFrame(() => {
       this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
@@ -232,7 +245,7 @@ export class EzComboBox {
   }
   render() {
     return (h(Host, null,
-      h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), errorMessage: this.errorMessage }, this.searchMode ?
+      h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage }, this.searchMode ?
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
         :
           h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })),
@@ -414,6 +427,42 @@ export class EzComboBox {
         "tags": [],
         "text": "Fun\u00E7\u00E3o respons\u00E1vel por carregar as op\u00E7\u00F5es dinamicamente"
       }
+    },
+    "suppressEmptyOption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Remove a op\u00E7\u00E3o vazia da lista de op\u00E7\u00F5es"
+      },
+      "attribute": "suppress-empty-option",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "canShowError": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Permite exibir a mensagem de erro."
+      },
+      "attribute": "can-show-error",
+      "reflect": true,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {

package/dist/collection/components/ez-form/DataBinder.js

@@ -1,3 +1,4 @@
+import { ApplicationContext } from "@sankhyalabs/core";
 export default class DataBinder {
   constructor(dataUnit) {
     this._fields = new Map();
@@ -25,6 +26,7 @@ export default class DataBinder {
       oldBind.destroy();
     }
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
+    this.bindSearchOptionsLoader(fieldName, field);
   }
   setFieldValue(fieldName, newValue) {
     if (this._dataUnit.records.length === 0) {
@@ -32,6 +34,17 @@ export default class DataBinder {
     }
     this._dataUnit.setFieldValue(fieldName, newValue);
   }
+  bindSearchOptionsLoader(fieldName, field) {
+    if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] === undefined) {
+      const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+      if (loader) {
+        const fm = this._dataUnit.getField(fieldName);
+        field["optionLoader"] = (arg) => {
+          loader(arg, fm.properties, this._dataUnit);
+        };
+      }
+    }
+  }
 }
 class Bind {
   destroy() {

package/dist/collection/components/ez-form/fieldbuilder/FieldBuilder.js

@@ -24,7 +24,6 @@ export const buildField = (field) => {
   let builder;
   let props;
   if (descriptor) {
-    builder = uiBuilders.get(descriptor.userInterface);
     if (!config.label) {
       config.label = descriptor.label;
     }
@@ -34,7 +33,11 @@ export const buildField = (field) => {
     if (config.required === undefined) {
       config.required = descriptor.required;
     }
+    if (config.readOnly === undefined) {
+      config.readOnly = descriptor.readOnly;
+    }
     props = descriptor.properties;
+    builder = uiBuilders.get(descriptor.userInterface);
   }
   if (config.required) {
     config.label = `* ${config.label} (obrigatório)`;

package/dist/collection/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.js

@@ -1,11 +1,11 @@
 import { h } from "@stencil/core";
 export const buildSwitch = (fieldConfig) => {
-  return buildField(fieldConfig.name, fieldConfig.label, true);
+  return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
 };
 export const buildCheckBox = (fieldConfig) => {
-  return buildField(fieldConfig.name, fieldConfig.label, false);
+  return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
 };
-function buildField(fieldName, fieldLabel, switchMode = false) {
+function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
   return (h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" },
-    h("ez-check", { label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
+    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
 }

package/dist/collection/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const buildComboBox = ({ name, label }, properties) => {
+export const buildComboBox = ({ name, label, readOnly }, properties) => {
   const prop = properties === null || properties === void 0 ? void 0 : properties.options;
   let options;
   if (typeof prop === "string") {
@@ -10,5 +10,5 @@ export const buildComboBox = ({ name, label }, properties) => {
     options = prop;
   }
   return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-    h("ez-combo-box", { label: label, "data-field-name": name, key: name, options: options })));
+    h("ez-combo-box", { enabled: !readOnly, label: label, "data-field-name": name, key: name, options: options })));
 };

package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-export const buildDate = ({ name, label }) => {
+export const buildDate = ({ name, label, readOnly }) => {
   return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-    h("ez-date-input", { label: label, "data-field-name": name, key: name })));
+    h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
 export const buildTimeDate = ({ name, label }) => {
   return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },

package/dist/collection/components/ez-form/fieldbuilder/tpl/FileInput.tpl.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const buildFile = ({ name, label }) => {
+export const buildFile = ({ name, label, readOnly }) => {
   return (h("div", { class: "col col--sd-12 padding--small" },
-    h("ez-upload", { label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
+    h("ez-upload", { enabled: !readOnly, label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
 };

package/dist/collection/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.js

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
-export const buildDecimal = ({ name, label }, properties) => {
+export const buildDecimal = ({ name, label, readOnly }, properties) => {
   const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
   const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
-  return buildNumeric(name, label, precision, prettyPrecision);
+  return buildNumeric(name, label, readOnly, precision, prettyPrecision);
 };
-export const buildInteger = ({ name, label }) => {
-  return buildNumeric(name, label, 0, 0);
+export const buildInteger = ({ name, label, readOnly }) => {
+  return buildNumeric(name, label, readOnly, 0, 0);
 };
-function buildNumeric(fieldName, fieldLabel, precision, prettyPrecision) {
+function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
   return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-    h("ez-number-input", { label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
+    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
 }

package/dist/collection/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const buildSearch = ({ name, label }) => {
+export const buildSearch = ({ name, label, readOnly }) => {
   return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
-    h("ez-search", { label: label, optionLoader: (_argument) => { }, "data-field-name": name, key: name })));
+    h("ez-search", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };

package/dist/collection/components/ez-form/fieldbuilder/tpl/TextArea.tpl.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const buildTextArea = ({ name, label }) => {
+export const buildTextArea = ({ name, label, readOnly }) => {
   return (h("div", { class: "col col--sd-12 padding--small", key: name },
-    h("ez-text-area", { label: label, "data-field-name": name })));
+    h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
 };

package/dist/collection/components/ez-form/structure/FormSheetMetadata.js

@@ -42,6 +42,10 @@ export const buildFromDataUnit = (dataUnit) => {
   }
   return metadata;
 };
+function getTabConfig(tab, sheets) {
+  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
+  return tabConfig || { label: tab, visible: true };
+}
 export const buildFromConfig = (fields, dataUnit) => {
   const sheets = new Map();
   const requiredFields = [];
@@ -49,12 +53,13 @@ export const buildFromConfig = (fields, dataUnit) => {
   fields.forEach(config => {
     var _a;
     if (config.visible !== false) {
-      const tab = config.tab || "Geral";
+      const tabConfig = getTabConfig(config.tab || "Geral", sheets);
       const descriptor = dataUnit.getField(config.name);
-      if (descriptor) {
-        if (!sheets.has(tab)) {
-          sheets.set(tab, new Map());
+      if (descriptor && tabConfig.visible) {
+        if (!sheets.has(tabConfig)) {
+          sheets.set(tabConfig, new Map());
         }
+        const tabItens = sheets.get(tabConfig);
         const isRequired = config.required === undefined ? descriptor.required : config.required;
         if (isRequired) {
           requiredFields.push(config.name);
@@ -63,7 +68,6 @@ export const buildFromConfig = (fields, dataUnit) => {
         if (clearOnCopy) {
           cleanOnCopyFields.push(config.name);
         }
-        const tabItens = sheets.get(tab);
         const fieldMD = { config, descriptor };
         const group = config.group;
         if (group) {
@@ -82,10 +86,12 @@ export const buildFromConfig = (fields, dataUnit) => {
     }
   });
   const metadata = new FormMetadata();
-  sheets.forEach((value, key) => {
+  Array.from(sheets.entries())
+    .sort((a, b) => (a[0].order || 10000) - (b[0].order || 10000))
+    .forEach(([key, value]) => {
     metadata.addSheet({
-      label: key,
-      name: key,
+      label: key.label,
+      name: key.label,
       items: Array.from(value.values()),
       requiredFields,
       cleanOnCopyFields

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -97,8 +97,9 @@ export default class AgGridController {
         headerName: "",
         checkboxSelection: true,
         headerCheckboxSelection: false,
-        width: 100,
-        suppressMovable: true
+        width: 24,
+        suppressMovable: true,
+        suppressMenu: true
       });
     }
     cols.forEach(c => {

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

@@ -14,6 +14,14 @@
   align-items: center;
 
   /*public*/
+  background-color: var(--ezgrid__header--background-color, #FFF);
+  z-index: var(--visible);
+}
+
+.grid__container{
+  box-shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
+  padding-top: 15px;
+  margin-top: -12px;
   background-color: var(--ezgrid__header--background-color);
 }
 

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

@@ -91,8 +91,8 @@ export class EzGrid {
       h("div", { class: "text text--primary text--medium margin-right--medium" },
         h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
         ` de ${this._navigationTotalRows}`),
-      h("ez-button", { size: "small", iconName: "chevron-left", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
-      h("ez-button", { size: "small", iconName: "chevron-right", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+      h("ez-button", { size: "small", iconName: "chevron-left", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
+      h("ez-button", { size: "small", iconName: "chevron-right", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
   applyConfig(cols) {
@@ -109,7 +109,7 @@ export class EzGrid {
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "box box--shadow padding--medium grid-header margin-bottom--small" },
+      h("div", { class: "box box--shadow padding--medium grid-header" },
         h("div", { class: "grid-header__container" },
           h("slot", { name: "leftButtons" })),
         h("div", { class: "grid-header__container" },

package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.css

@@ -17,7 +17,7 @@
 
     --ez-grid-config__title--font-family: var(--font-pattern, "Sora");
 
-    --ez-grid-config__title--font-weight: var(--text-weight--large, 14px);
+    --ez-grid-config__title--font-weight: var(--text-weight--large, 700);
 
     /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
     --ez-grid-config__subtitle--font-size: var(--text--medium, 14px);
@@ -31,6 +31,15 @@
     /*@doc Define o raio da borda da barra de rolagem do componente.*/
     --ez-grid-config__main__scrollbar--border-radius: var(--border--radius-medium, 12px);
 
+    /* @doc Define o estilo do texto do grupo da lista. */
+    --ez-grid__group--font-family: var(--font-pattern, "Sora");
+    /* @doc Define o tamanho do texto do grupo da lista. */
+    --ez-grid__group--font-size: var(--text--medium, 14px);
+    /* @doc Define o peso do texto do grupo da lista. */
+    --ez-grid__group--font-weight: var(--text-weight--large, 600);
+    /* @doc Define o espaçamento inferior do grupo da lista. */
+    --ez-grid__group--padding-bottom: var(--space-small, 6px);
+
     display: grid;
     grid-template-rows: auto 1fr auto;
     max-height: 100%;
@@ -44,6 +53,9 @@
 ez-list {
     height: 100%;
 }
+.heigth-calc{
+    max-height: calc(100% - 24px);
+}
 
 .grid-config__footer {
     padding-top: var(--ez-grid-config__footer--padding-top);
@@ -71,21 +83,27 @@ ez-list {
 
 .title-container {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
+    width: 359px;
 }
 
 .subtitle {
     font-family: var(--ez-grid-config__subtitle--font-family);
     font-size: var(--ez-grid-config__subtitle--font-size);
+    color: var(--text--primary);
 }
 
 .title {
     display: flex;
-    font-family: var(--ez-grid-config__title--font-family);
     margin: 0;
+    font-family: var(--ez-grid-config__title--font-family);
+    font-size: var(--title--large);
     font-weight: var(--ez-grid-config__title--font-weight);
-    line-height: 1.3;
+    line-height: normal;
+    letter-spacing: 0em;
+    text-align: left;
+    color: var(--title--primary);
 }
 
 .grid-config__main::-webkit-scrollbar-track {
@@ -102,4 +120,10 @@ ez-list {
     width: var(--ez-grid-config__scrollbar--width);
     max-width: var(--ez-grid-config__scrollbar--width);
     min-width: var(--ez-grid-config__scrollbar--width);
+}
+.group-name {
+    font-family: var(--ez-grid__group--font-family);
+    font-size: var(--ez-grid__group--font-size);
+    font-weight: var(--ez-grid__group--font-weight);
+    padding-bottom: var(--ez-grid__group--padding-bottom);
 }

package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.js

@@ -65,7 +65,7 @@ export class GridConfig {
     let newList = [...this.columns];
     let newItem = newList.find(item => item.label === updatedItem.label);
     if (newItem) {
-      newItem.sort = sortOrder;
+      newItem.sort = sortOrder.value;
     }
     this.columns = newList;
   }
@@ -122,7 +122,7 @@ export class GridConfig {
       searchingText = (_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
     }
     let newSelected = -1;
-    if (this.selectedTab === "Ordenação") {
+    if (this.selectedTab === "Ordenação das linhas") {
       if (searchingText) {
         const matchedIndexes = [];
         let orderListDatasource;
@@ -210,7 +210,7 @@ export class GridConfig {
   handleTabChange(ev) {
     var _a;
     if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.selectedTab) {
-      if (ev.target.selectedTab === "Ordenação") {
+      if (ev.target.selectedTab === "Ordenação das linhas") {
         this._columnListHistory = this._columnList.dataSource;
         this.createOrderList();
       }
@@ -249,13 +249,14 @@ export class GridConfig {
           h("div", { class: "button-close" },
             h("ez-button", { mode: 'icon', image: getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))),
         h("div", { class: "tabselector-container" },
-          h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: 0, onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o' })),
+          h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: 0, onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o das linhas' })),
         h("div", null,
           h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) },
             h("ez-icon", { slot: "leftIcon", size: "medium", href: getSpritePath("search") })))),
       h("div", { class: "grid-config__main" },
         h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }),
-        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação" ? "" : "hidden", dataSource: this._orderListItems, ezSelectable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
+        h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"),
+        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
       h("div", { class: "grid-config__footer" },
         h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }),
         h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));

package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.css

@@ -1,7 +1,10 @@
-select {
-    border: 1px solid #DCE0E8;
-    font-family: 'Sora';
-    border-radius: 3px;
-    outline: none;
-    cursor: pointer;
-}
+
+ez-combo-box{
+    width: 100px;
+}
+
+.grid-config-combo{
+    --ez-text-input--height: 28px;
+    --ez-text-input__input--background-color: #fff;
+    --ez-text-input__input--border-color: #dce0e8;
+}

package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.js

@@ -1,20 +1,10 @@
 import { Component, Event, h, Prop } from '@stencil/core';
 export class SelectBox {
-  changeSelection() {
-    this.ezChange.emit(this._selectElem.value);
-  }
-  componentDidRender() {
-    if (this._selectElem) {
-      if (this.selectedOption) {
-        this._selectElem.value = this.selectedOption;
-      }
-      else {
-        this._selectElem.value = "na";
-      }
-    }
+  constructor() {
+    this.selectedOption = { value: "na", label: "N/A" };
   }
   render() {
-    return (h("select", { ref: (el) => this._selectElem = el, onChange: () => { this.changeSelection(); } },
+    return (h("ez-combo-box", { class: "grid-config-combo inverted", label: "", value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true },
       h("option", { value: "na" }, "N/A"),
       h("option", { value: "asc" }, "A-Z"),
       h("option", { value: "desc" }, "Z-A")));
@@ -33,9 +23,13 @@ export class SelectBox {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "Option|string",
+        "resolved": "Option | string",
+        "references": {
+          "Option": {
+            "location": "global"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -44,7 +38,8 @@ export class SelectBox {
         "text": ""
       },
       "attribute": "selected-option",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "{value: \"na\", label: \"N/A\"}"
     }
   }; }
   static get events() { return [{

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

@@ -37,6 +37,11 @@ svg {
   width: 30px;
   height: 30px;
 }
+
+[class^="ez-icon-"], [class*=" ez-icon-"] {
+  color: var(--ez-icon--color);
+}
+
 /*
   START CSS GENERATED BY EZ-DESIGN ICONS, SEE MORE AT ez-design\scripts\fontsGenerator.js.
   WHEN ADD NEW ICONS THIS CSS NEED TO BE UPDATED

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

@@ -55,7 +55,7 @@ export class EzList {
         newList.forEach(groupItem => {
           groupItem.items.forEach(item => {
             if (item.label == selectedItem.label) {
-              item.selected = !item.selected;
+              item.selected = true;
             }
             else {
               item.selected = false;
@@ -68,7 +68,7 @@ export class EzList {
         let newList = [...this._listItems];
         newList.forEach(item => {
           if (item.label === selectedItem.label) {
-            item.selected = !item.selected;
+            item.selected = true;
           }
           else {
             item.selected = false;

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

@@ -15,7 +15,7 @@
   /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
   --ez-text-input--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label do componente.*/
-  --ez-text-input--font-weight: var(--text-weight--large, 500);
+  --ez-text-input--font-weight: var(--text-weight--medium, 400);
   /*@doc Define a cor da fonte do input e label do componente.*/
   --ez-text-input--color: var(--title--primary, #000);
 
@@ -28,7 +28,7 @@
   --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.*/
-  --ez-text-input__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
+  --ez-text-input__input--focus--border-color: var(--color--primary, #008561);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
   --ez-text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
   /*@doc Define a cor do texto do input.*/

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

@@ -6,6 +6,10 @@ export class EzTextInput {
      * Deixa o campo disponível ou não para digitação.
      */
     this.enabled = true;
+    /**
+     * Permite exibir a mensagem de erro.
+     */
+    this.canShowError = true;
   }
   showError() {
     const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
@@ -178,7 +182,8 @@ export class EzTextInput {
         : null,
       h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }),
       h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+      this.canShowError &&
+        h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   static get is() { return "ez-text-input"; }
   static get encapsulation() { return "shadow"; }
@@ -292,6 +297,24 @@ export class EzTextInput {
       "attribute": "mask",
       "reflect": false
     },
+    "canShowError": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Permite exibir a mensagem de erro."
+      },
+      "attribute": "can-show-error",
+      "reflect": true,
+      "defaultValue": "true"
+    },
     "restrict": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/test-du/test-du.js

@@ -51,7 +51,7 @@ export class TestDu {
     ]));
   }
   render() {
-    return (h("ez-grid", { dataUnit: this.dataUnit }));
+    return (h("ez-form", { dataUnit: this.dataUnit }));
   }
   static get is() { return "test-du"; }
   static get originalStyleUrls() { return {

package/dist/collection/utils/CSSVarsUtils.js

@@ -3,6 +3,7 @@ export default class CSSVarsUtils {
     if (child) {
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--background-color');
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--border-color');
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input--height');
     }
   }
   static applyIfExists(host, element, varName) {