@sankhyalabs/ezui 1.1.92 → 1.1.95

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

@@ -37,6 +37,9 @@
   /*@doc Define a cor do texto da mensagem.*/
   --dialog__body--color: var(--text--primary, #626e82);
   
+  /* Ícones */
+  /*@doc Define a cor dos ícones dos indicadores de modo.*/
+  --dialog__icon--color: var(--text--inverted, #fff);
   /*@doc Define a cor de fundo dos indicadores do modo crítico.*/
   --dialog__critical--background-color: var(--color--alert-error-800, #BD0025);
   /*@doc Define a cor de fundo da lista de opções.*/
@@ -130,8 +133,17 @@ h2 {
 }
 
 .changeable__icon {
-  width: 15px;
-  height: 15px;
+  background: var(--dialog__warning--background-color);
+  color: var(--dialog__icon--color);
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+}
+
+.changeable__icon.critical{
+  background: var(--dialog__critical--background-color);
 }
 
 .title {

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

@@ -69,14 +69,12 @@ export class EzDialog {
             h("div", { class: "title__container" },
               h("div", { class: "title__box" },
                 this._currentMessage.icon ?
-                  h("svg", { class: "changeable__icon", role: "img" },
-                    h("use", { xlinkHref: this._currentMessage.icon }))
+                  h("ez-icon", { class: this._currentMessage.critical ? "changeable__icon critical" : "changeable__icon", size: "small", iconName: this._currentMessage.icon })
                   :
                     h("div", { class: this._currentMessage.critical ? "title-icon title-icon--critical" : "title-icon" }),
-                h("div", { class: "title title--label" },
-                  h("h2", null, this._currentMessage.title))),
+                h("div", { class: "title title--label", innerHTML: this._currentMessage.title })),
               h("button", { class: "btn-close", onClick: () => this.handleButtonClick(false) })),
-            h("div", { class: "message" }, this._currentMessage.message),
+            h("div", { class: "message", innerHTML: this._currentMessage.message }),
             this._currentMessage.confirm ?
               h("div", { class: "button-yes-no__container" },
                 h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick(false) }),

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, optionLoader: (_argument) => { }, "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

@@ -50,10 +50,11 @@ export const buildFromConfig = (fields, dataUnit) => {
     var _a;
     if (config.visible !== false) {
       const tab = config.tab || "Geral";
+      const tabConfig = (typeof tab === "string" ? { label: tab, visible: true } : tab);
       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 isRequired = config.required === undefined ? descriptor.required : config.required;
         if (isRequired) {
@@ -63,7 +64,7 @@ export const buildFromConfig = (fields, dataUnit) => {
         if (clearOnCopy) {
           cleanOnCopyFields.push(config.name);
         }
-        const tabItens = sheets.get(tab);
+        const tabItens = sheets.get(tabConfig);
         const fieldMD = { config, descriptor };
         const group = config.group;
         if (group) {
@@ -82,10 +83,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

@@ -3,11 +3,26 @@ import { Grid } from "ag-grid-community";
 import gridTerms from "./i18n/pt-BR.js";
 import HeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
 import DataSource from "./DataSource";
+import { DataType } from "@sankhyalabs/core";
+import { SortMode } from "@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata";
 export default class AgGridController {
   constructor(enterprise) {
     this._menuItems = [];
     this._enterprise = enterprise;
   }
+  getSort() {
+    const sortedColumns = [];
+    this._gridOptions.api.getSortModel().forEach(({ colId, sort }) => {
+      if (sort) {
+        const field = this._dataUnit.getField(colId);
+        const mode = sort === "asc" ? SortMode.ASC : SortMode.DESC;
+        const sortField = field ? { field: field.name, dataType: field.dataType, mode } : { field: colId, dataType: DataType.TEXT, mode };
+        sortedColumns.push(sortField);
+      }
+    });
+    return sortedColumns;
+  }
+  ;
   initDatagrid(container, options) {
     if (this._grid === undefined) {
       this._columnStateChangeCallback = options.onColumnStateChange;
@@ -18,6 +33,7 @@ export default class AgGridController {
       this._pageSize = options.pageSize;
       this._serverURL = options.serverURL;
       this._dataUnit = options.dataUnit;
+      this._dataUnit.sortingProvider = this;
       this._gridOptions = {
         localeText: gridTerms,
         rowModelType: "serverSide",
@@ -81,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-list/ez-list.css

@@ -59,6 +59,12 @@
   /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
   --ez-list__over--border--color: var(--color--primary, #008561);
 
+  /*@doc Define o espaçamento do container de itens arrastáveis .*/
+  --ez-list__draggable__list--padding-bottom: var(--space--small, 6px);
+
+  /*@doc Define a altura do container para arrasto para última posição .*/
+  --ez-list__last-droppable-space--height: var(--space--small, 6px);
+
   /*@doc Define o raio da borda da barra de rolagem do componente.*/
   --ez-list__draggable__scrollbar--border-radius: var(--border--radius-large, 24px);
   /*@doc Define a largura da barra de rolagem do componente.*/
@@ -75,9 +81,14 @@
   z-index: var(--ez-list__host--z-index);
 }
 
+p {
+  margin: 0;
+}
+
 .draggable {
   display: flex;
   align-items: center;
+  border-top: 1px dashed #fff;
   justify-content: space-between;
   background-color: #fff;
   font-family: var(--ez-list__item--font-family);
@@ -117,8 +128,6 @@
   margin: 0;
   width: 100%;
   max-height: 100%;
-  /* height: 100%; */
-  padding-bottom: var(--space--small);
 }
 
 .draggable-list li {
@@ -135,6 +144,10 @@
   border-top: 1px dashed var(--ez-list__over--border--color);
 }
 
+.last-droppable-space {
+  height: var(--ez-list__last-droppable-space--height);
+}
+
 .draggable-selected {
   background-color: var(--background--strong) !important;
 }
@@ -207,6 +220,10 @@
   font-size: var(--ez-list__group--font-size);
   font-weight: var(--ez-list__group--font-weight);
   padding-bottom: var(--ez-list__group--padding-bottom);
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .group {
@@ -286,6 +303,10 @@
   cursor: pointer;
 }
 
+.presetedHeight {
+  min-height: 100px;
+}
+
 .overlay-text {
   position: absolute;
   top: 50%;