@sankhyalabs/ezui 1.1.125 → 1.1.128

package/dist/custom-elements/index.js

@@ -407,7 +407,7 @@ let EzCheck$1 = class extends HTMLElement$1 {
   static get style() { return ezCheckCss; }
 };
 
-const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--height:42px;--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__btn--image--xsmall:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"12px\" width=\"7.5px\"><path d=\"M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z\"/></svg>');--ez-collapsible-box__btn--image--small:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"14px\" width=\"8.68px\"><path d=\"M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z\"/></svg>');--ez-collapsible-box__btn--image--medium:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-collapsible-box__btn--image--large:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"18px\" width=\"11.25px\"><path d=\"M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z\"/></svg>');--ez-collapsible-box__btn--image--xlarge:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"20px\" width=\"12.5px\"><path d=\"M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z\"/></svg>');--ez-collapsible-box__btn--fill:var(--ez-collapsible-box--color);--ez-collapsible-box__btn--width:10px;--ez-collapsible-box__btn--height:16px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box__title{width:100%;align-self:center;display:flex;box-sizing:border-box}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;width:100%;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__label--icon-right{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__btn{outline:none;border:none;background-color:unset;cursor:pointer;padding:1px 6px}.collapsible-box__btn::after{content:'';display:flex;background-color:var(--ez-collapsible-box__btn--fill);width:var(--ez-collapsible-box__btn--width);height:var(--ez-collapsible-box__btn--height);transition:transform var(--transition);transform:rotate(90deg)}.collapsible-box__btn--xsmall::after{width:7.5px;height:12px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--xsmall);mask-image:var(--ez-collapsible-box__btn--image--xsmall)}.collapsible-box__btn--small::after{width:8.68px;height:14px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--small);mask-image:var(--ez-collapsible-box__btn--image--small)}.collapsible-box__btn--medium::after{width:10px;height:16px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--medium);mask-image:var(--ez-collapsible-box__btn--image--medium)}.collapsible-box__btn--large::after{width:11.25px;height:18px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--large);mask-image:var(--ez-collapsible-box__btn--image--large)}.collapsible-box__btn--xlarge::after{width:12.5px;height:20px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--xlarge);mask-image:var(--ez-collapsible-box__btn--image--xlarge)}.collapsible-box__btn--collapsed::after{transform:rotate(0deg)}.font--xsmall{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--xlarge{font-size:20px}";
+const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;margin-bottom:var(--space--medium, 12px)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition);--ez-icon--color:var(--ez-collapsible-box__icon--color, --ez-collapsible-box--color)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
 
 let EzCollapsibleBox$1 = class extends HTMLElement$1 {
   constructor() {
@@ -416,7 +416,7 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
     /**
-     * Valor externalizado que garante a exibição ou não do componente
+     * Valor externalizado que garante a exibição ou não do componente.
      */
     this.value = false;
     /**
@@ -427,24 +427,37 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
     * Define o local onde o ícone será renderizado.
     */
     this.iconPlacement = "left";
+    /**
+    * Define se o titulo irá ocupar toda a largura do componente.
+    */
+    this.stretchTitle = false;
   }
-  observeValue() {
+  observeCollapsedValue() {
     this.ezChange.emit(this.value);
   }
   /**
-   * Esconde ou revela o conteúdo do componente
+   * Esconde ou revela o conteúdo do componente.
    */
   async showHide() {
     this.value = !this.value;
   }
+  /**
+   * Retorna o tamanho configurado do texto e do ícone.
+   */
+  getHeaderSize() {
+    const sizeAlias = ["xsmall", "xlarge"];
+    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
+    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
+    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
+    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
+  }
   render() {
-    return (h(Host, null, this.iconPlacement == "right" ?
-      h("div", { class: "collapsible-box__title" }, h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label), h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }))
-      :
-        h("div", { class: "collapsible-box__title" }, h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }), h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label)), !this.value ? h("slot", null) : null));
+    return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
+        (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
+        (this.stretchTitle ? " collapsible-box__title--stretched" : "") }, h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }), h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, h("slot", null))));
   }
   static get watchers() { return {
-    "value": ["observeValue"]
+    "value": ["observeCollapsedValue"]
   }; }
   static get style() { return ezCollapsibleBoxCss; }
 };
@@ -1148,12 +1161,12 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
 };
 
 const buildTextArea = ({ name, label, readOnly }) => {
-  return (h("div", { class: "col col--sd-12 padding-horizontal--small", key: name },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
 };
 
 const buildTextInput = ({ name, label }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-text-input", { label: label, "data-field-name": name, key: name })));
 };
 
@@ -1164,7 +1177,7 @@ const buildCheckBox = (fieldConfig) => {
   return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
 };
 function buildField$1(fieldName, fieldLabel, readOnly, switchMode = false) {
-  return (h("div", { class: "col col--sd-12 col--tb-3 align--middle padding-horizontal--small padding-bottom--large" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
     h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
 }
 
@@ -1178,30 +1191,30 @@ const buildComboBox = ({ name, label, readOnly, required }, properties) => {
   else {
     options = prop;
   }
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
 };
 
 const buildSearch = ({ name, label, readOnly, required }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
 };
 
 const buildFile = ({ name, label, readOnly }) => {
-  return (h("div", { class: "col col--sd-12 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
 
 const buildDate = ({ name, label, readOnly }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
 const buildTime = ({ name, label }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-time-input", { label: label, "data-field-name": name, key: name })));
 };
 const buildTimeDate = ({ name, label }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
 };
 
@@ -1214,7 +1227,7 @@ const buildInteger = ({ name, label, readOnly }) => {
   return buildNumeric(name, label, readOnly, 0, 0);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
 }
 
@@ -1263,7 +1276,7 @@ const buildField = (field) => {
 const FormItem = ({ source }) => {
   if ("items" in source) {
     const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
+    return h("ez-collapsible-box", { label: source.label, "header-size": "large" }, fieldSet.items.map(fi => buildField(fi)));
   }
   else {
     return buildField(source);
@@ -1271,8 +1284,8 @@ const FormItem = ({ source }) => {
 };
 
 const FormSheet = ({ store, source }) => {
-  return (h("div", { class: "box__container" },
-    h("div", { class: "row padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
+  return (h("div", { class: "dynamic-content ez-box__container" },
+    h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
 };
 
 class FormMetadata {
@@ -1323,6 +1336,9 @@ 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 };
 }
+function sortTabs(a, b) {
+  return a[0].label == 'Geral' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
+}
 const buildFromConfig = (fields, dataUnit) => {
   const sheets = new Map();
   const requiredFields = [];
@@ -1364,7 +1380,7 @@ const buildFromConfig = (fields, dataUnit) => {
   });
   const metadata = new FormMetadata();
   Array.from(sheets.entries())
-    .sort((a, b) => (a[0].order || 10000) - (b[0].order || 10000))
+    .sort(sortTabs)
     .forEach(([key, value]) => {
     metadata.addSheet({
       label: key.label,
@@ -1888,7 +1904,7 @@ ApplicationUtils.defaultMessageOptions = {
   btnConfirmDanger: false
 };
 
-const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}";
+const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}.dynamic-content ez-collapsible-box{--ez-collapsible-box__header--padding-right:var(--space-small, 6px);--ez-collapsible-box__header--padding-left:var(--space-small, 6px)}";
 
 let EzForm$1 = class extends HTMLElement$1 {
   constructor() {
@@ -112113,6 +112129,7 @@ class AgGridController {
         serverSideStoreType: "partial",
         rowSelection: this._multipleSelection ? "multiple" : "single",
         serverSideDatasource: this._dataSource,
+        sortingOrder: ['desc', 'asc', null],
         getRowNodeId: (params) => typeof params === "string" ? params : params[this._idAttribName],
         getMainMenuItems: (params) => {
           const column = params.column;
@@ -112152,6 +112169,7 @@ class AgGridController {
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onPaginationChanged = () => this.onPaginationChange();
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
+    opt.onDragStopped = evt => this.onCallStateChange("columnMovedEnd", evt);
     opt.onViewportChanged = () => {
       if (this._dataUnit) {
         this.selectRows(this._dataUnit.getSelection());
@@ -112239,6 +112257,7 @@ class AgGridController {
     const colDefs = [];
     if (showCheckSelection) {
       colDefs.push({
+        colId: "checkBoxColumn",
         headerName: "",
         checkboxSelection: true,
         headerCheckboxSelection: false,
@@ -112276,13 +112295,24 @@ class AgGridController {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    //TODO neste ponto estamos utilizando um método descontinuado, 
-    //pelo fato de que o applyColumnState não reordena as colunas conforme 
-    //o estado passado.
-    //https://stackoverflow.com/questions/51488241/ag-grid-how-to-save-and-reload-column-order
-    //Assim que for corrigido o applyColumnState devemos substituir o setColumnState por ele.
-    // this._gridOptions.columnApi.applyColumnState({ state: state.map(s => this.buildColState(s)) });
-    this._gridOptions.columnApi.setColumnState(state.map(s => this.buildColState(s)));
+    let columns = this.getColumnsDef();
+    let visibleColumns = [];
+    let sort = [];
+    state.forEach((cfgColumn, index) => {
+      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + 1);
+      this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, cfgColumn.width);
+      visibleColumns.push(cfgColumn.name);
+      if (cfgColumn.ascending !== undefined) {
+        sort.push({ colId: cfgColumn.name, sort: cfgColumn.ascending !== true ? 'desc' : 'asc', sortIndex: cfgColumn.orderIndex });
+      }
+    });
+    let invisibleColumns = columns.filter(column => !visibleColumns.includes(column.name)).map(column => column.name);
+    this._gridOptions.columnApi.setColumnsVisible(visibleColumns, true);
+    this._gridOptions.columnApi.setColumnsVisible(invisibleColumns, false);
+    this._gridOptions.columnApi.applyColumnState({
+      state: sort,
+      defaultState: { sort: null },
+    });
   }
   getColumnsState() {
     if (this._grid === undefined) {
@@ -112375,21 +112405,27 @@ class AgGridController {
       }
     }
   }
-  buildColState(source) {
-    return {
-      colId: source.name,
-      sort: source.sort,
-      sortIndex: source.sortIndex,
-      width: source.width,
-      pinned: source.pinned ? "left" : null,
-      hide: source.hidden
-    };
-  }
   onCallStateChange(type, e) {
     const finished = !("finished" in e) || e["finished"];
     if (finished && this._columnStateChangeCallback) {
-      this._columnStateChangeCallback(type, this.getColumnsState());
+      let info = {};
+      let isUserChange = this.isUIEvent(e['source'], e['type']);
+      if (type === 'columnResize') {
+        info['column'] = { colId: e['column'].colId, actualWidth: e['column'].actualWidth };
+      }
+      info['isUserChange'] = isUserChange;
+      this._columnStateChangeCallback(type, this.getColumnsState(), info);
+    }
+  }
+  isUIEvent(source, type) {
+    let optionsArr = ["uiColumnMoved", "uiColumnResized", "uiColumnDragged", "uiColumnExpanded", "uiColumnSorted"];
+    if (type === 'dragStopped') {
+      return true;
     }
+    if (source) {
+      return optionsArr.includes(source);
+    }
+    return false;
   }
   onSelectionChange(e) {
     if (this._selectionChangeCallback) {
@@ -112488,6 +112524,7 @@ let EzGrid$1 = class extends HTMLElement$1 {
     this.ezColumnStateChange = createEvent(this, "ezColumnStateChange", 7);
     this.ezSelectionChange = createEvent(this, "ezSelectionChange", 7);
     this.ezDoubleClick = createEvent(this, "ezDoubleClick", 7);
+    this.configChange = createEvent(this, "configChange", 7);
     this._gridController = new AgGridController(false);
     this._popUpVisible = false;
     /**
@@ -112557,9 +112594,72 @@ let EzGrid$1 = class extends HTMLElement$1 {
       addEventListener("ezSelectionChange", (evt) => this.dataUnit.setSelection(evt.detail.map((r) => r.__record__id__)));
     }
   }
+  onColumnStateChange(type, state, info) {
+    var _a;
+    this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
+    if (info.isUserChange) {
+      if (type === 'columnMovedEnd') {
+        let newConfig;
+        if (this.config) {
+          newConfig = { columns: [] };
+          state.forEach(columnState => {
+            let newConfigColumn = this.config.columns.find(column => column.name === columnState.name);
+            if (newConfigColumn) {
+              newConfigColumn.width = columnState.width;
+              newConfig.columns.push(newConfigColumn);
+            }
+          });
+        }
+        else {
+          newConfig = this.createConfigFromState(state);
+        }
+        if (newConfig.columns.length > 0) {
+          this.configChange.emit(newConfig);
+        }
+      }
+      else if (type === 'columnResize') {
+        if ((_a = info.column) === null || _a === void 0 ? void 0 : _a.colId) {
+          let newConfig;
+          if (this.config) {
+            newConfig = Object.assign({}, this.config);
+          }
+          else {
+            newConfig = this.createConfigFromState(state);
+          }
+          let newColumn = newConfig.columns.find(column => column.name === info.column.colId);
+          if (newColumn) {
+            newColumn.width = info.column.actualWidth;
+            this.configChange.emit(newConfig);
+          }
+        }
+      }
+    }
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach(columnState => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
+  }
   componentDidLoad() {
     this._gridController.initDatagrid(this._container, {
-      onColumnStateChange: (type, state) => this.ezColumnStateChange.emit({ type, state }),
+      onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
       onPaginationChange: (status) => {
         this._navigationHasPrevious = status.hasPrevious;
@@ -112579,6 +112679,9 @@ let EzGrid$1 = class extends HTMLElement$1 {
     if (this._dataUnitBridge) {
       this._gridController.setColumnsDef(this._dataUnitBridge.buildColumnDefs(), true);
     }
+    if (this.config) {
+      this.applyConfig(this.config);
+    }
   }
   disconnectedCallback() {
     if (this._dataUnitBridge) {
@@ -112590,13 +112693,13 @@ let EzGrid$1 = class extends HTMLElement$1 {
       return null;
     }
     return [
-      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: "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" })
+      h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
+      h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-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: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
-  applyConfig(cols) {
-    this._gridController.setColumnsState(cols);
+  applyConfig(config) {
+    this._gridController.setColumnsState(config.columns);
     this.closeConfig();
   }
   closeConfig() {
@@ -112608,9 +112711,12 @@ let EzGrid$1 = class extends HTMLElement$1 {
     this._popUpVisible = true;
   }
   render() {
-    return (h(Host, null, 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" }, this.getPaginationControl(), h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))), h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }), h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, h("grid-config", { ref: ref => this._gridConfig = ref, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
+    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container" }, this.getPaginationControl(), h("ez-button", { size: "small", iconName: "settings", class: "ez-button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }), h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.applyConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeConfig() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
+  static get watchers() { return {
+    "config": ["applyConfig"]
+  }; }
   static get style() { return ezGridCss; }
 };
 
@@ -112799,6 +112905,12 @@ let EzList$1 = class extends HTMLElement$1 {
     }
   }
   /**
+  * Responsável por limpar a lista de histórico do componente.
+  */
+  async clearHistory() {
+    this._listItemsHistory = [];
+  }
+  /**
   * Recebe   como argumento um ListItem {label: string} e um booleano que define se o componente deve fazer scroll para exibir o item específico (opcional).
   */
   async setSelection(selectedItem, scrollToOption) {
@@ -113629,7 +113741,7 @@ let EzSearch$1 = class extends HTMLElement$1 {
   static get style() { return ezSearchCss; }
 };
 
-const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.midle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
+const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
 
 let EzTabselector$1 = class extends HTMLElement$1 {
   constructor() {
@@ -113765,7 +113877,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
       else {
         this._forwardButton.classList.add("hidden");
       }
-      const classNames = ["", "startHidden", "endHidden", "midle"];
+      const classNames = ["", "startHidden", "endHidden", "middle"];
       const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
       classNames.forEach((name) => {
         if (name !== currentClass && container.classList.contains(name)) {
@@ -113834,6 +113946,10 @@ let EzTextArea$1 = class extends HTMLElement$1 {
      * Deixa o campo disponível ou não para digitação.
      */
     this.enabled = true;
+    /**
+     * Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
+     */
+    this.rows = 4;
     /**
      * Permite exibir a mensagem de erro.
      */
@@ -113865,11 +113981,17 @@ let EzTextArea$1 = class extends HTMLElement$1 {
     if (this._initialRows == undefined) {
       this._initialRows = this.rows > 0 ? this.rows : undefined;
     }
-    this.rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    const rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    if (rows !== this.rows) {
+      this.rows = rows;
+    }
   }
   adjustRowsValue() {
-    this.rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
-    this._initialRows = this.rows;
+    const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
+    if (rows !== this.rows) {
+      this.rows = rows;
+      this._initialRows = rows;
+    }
   }
   adjustFloatingLabel() {
     if (this.label && this._labelElem) {
@@ -114732,30 +114854,50 @@ let GridConfig$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.configFinish = createEvent(this, "configFinish", 7);
     this.configCancel = createEvent(this, "configCancel", 7);
-    this._columnListHistory = [];
     this._orderListItems = [];
+    this._orderPriorityList = [];
     this._columListItems = [];
-    this.selectedTab = "Colunas";
     this._selectedIndex = -1;
+    this.selectedTab = "Colunas";
   }
   /* Creation Methods */
   createOrderList() {
-    var _a;
     let newList = [];
-    if (((_a = this._columnListHistory) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this._columnListHistory.find(group => group.group === "Visíveis").items.forEach(column => {
-        let item = { label: column.label };
+    this.columns.forEach(column => {
+      var _a;
+      let configItem = (_a = this.config) === null || _a === void 0 ? void 0 : _a.columns.find(item => item.name === column.name);
+      let item = { name: column.name, label: column.label };
+      if (configItem) {
+        item['orderIndex'] = configItem.orderIndex;
+        item['ascending'] = configItem.ascending;
+      }
+      if (!column.hidden) {
         newList.push(item);
-      });
-    }
-    else {
-      this.columns.forEach(column => {
-        let item = { name: column.name, label: column.label };
-        if (!column.hidden) {
-          newList.push(item);
-        }
-      });
-    }
+      }
+    });
+    newList.sort((a, b) => {
+      //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
+      if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+        //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined && b.ascending != undefined) {
+        return (a.orderIndex - b.orderIndex);
+        //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined || b.ascending != undefined) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+      }
+      return (a.orderIndex - b.orderIndex);
+    });
     this._orderListItems = newList;
   }
   createColumnList() {
@@ -114777,27 +114919,42 @@ let GridConfig$1 = class extends HTMLElement$1 {
         visibleGroup.items.push(item);
       }
     });
-    if (this._columnListHistory.length <= 0) {
-      this._columListItems = [visibleGroup, hiddenGroup];
-    }
+    this._columListItems = [visibleGroup, hiddenGroup];
   }
   buildColumnListSlot(item, group) {
     return (h("div", null, h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
   }
   buildOrderListSlot(item) {
-    let existingItem = this.columns.find(columnItem => columnItem.label === item.label);
     let selectedOption = "na";
-    if (existingItem === null || existingItem === void 0 ? void 0 : existingItem.sort) {
-      selectedOption = existingItem.sort;
+    if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
+      selectedOption = item.ascending == true ? 'asc' : 'desc';
     }
-    return (h("div", null, h("select-box", { selectedOption: selectedOption, key: 'select-box' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item); } })));
+    return (h("div", null, h("select-box", { selectedOption: selectedOption, key: 'select-box' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item.label); } })));
   }
-  updateOrder(sortOrder, updatedItem) {
+  updateOrder(sortOrder, updatedItemLabel) {
+    var _a;
     let newList = [...this.columns];
-    let newItem = newList.find(item => item.label === updatedItem.label);
+    let newItem = newList.find(item => item.label === updatedItemLabel);
     if (newItem) {
       newItem.sort = sortOrder.value === "na" ? undefined : sortOrder.value;
     }
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._orderPriorityList.find(item => item.label === newItem.label).sort = sortOrder;
+      this._orderPriorityList.filter(item => item.sort).map((item, index) => {
+        if (item.label === newItem.label) {
+          newItem.sortIndex = index;
+        }
+      });
+    }
+    else {
+      orderArray = newList.filter(item => item.sort && item.hidden !== true).map((item, index) => {
+        return { label: item.label, orderIndex: index };
+      });
+      orderArray.forEach(element => {
+        newList.find(item => item.label === element.label).sortIndex = element.orderIndex;
+      });
+    }
     this.columns = newList;
   }
   /* Actions Methods */
@@ -114842,9 +114999,100 @@ let GridConfig$1 = class extends HTMLElement$1 {
         newColumnList.push(newColumnItem);
       });
     });
-    this._columnListHistory = [];
     this.columns = newColumnList;
-    this.configFinish.emit(this.columns);
+    this.save();
+  }
+  save() {
+    var _a;
+    let _newConfig;
+    if (this.config) {
+      _newConfig = this.config;
+    }
+    else {
+      _newConfig = this.createConfigFromState(this.columns);
+    }
+    let _newColumnConfigList = [];
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      orderArray = this.columns.filter(item => item.sort && item.hidden !== true).map((item) => {
+        return { label: item.label, orderIndex: 0 };
+      });
+      let indexCount = 0;
+      let newOrderArray = [];
+      this._orderPriorityList.forEach((orderPriorityItem) => {
+        let item = orderArray.find(column => column.label === orderPriorityItem.label);
+        if (item) {
+          item.orderIndex = indexCount;
+          newOrderArray.push(item);
+          indexCount++;
+        }
+      });
+      if (newOrderArray.length > 0) {
+        orderArray = newOrderArray;
+      }
+    }
+    for (let i = 0; i < this.columns.length; i++) {
+      const column = this.columns[i];
+      let _newColumnConfig = _newConfig.columns.find(_newColumnConfig => column.name === _newColumnConfig.name);
+      if (column.hidden === true && _newColumnConfig) {
+        continue;
+      }
+      if (_newColumnConfig) {
+        _newColumnConfig.width = column.width;
+      }
+      else if (column.hidden === false) {
+        _newColumnConfig = { name: column.name, width: column.width, orderIndex: 0 };
+      }
+      if (_newColumnConfig) {
+        if (column.sort) {
+          _newColumnConfig.ascending = column.sort.toUpperCase() === "ASC" ? true : false;
+          if (orderArray) {
+            adjustPriorityOrder(column, _newColumnConfig);
+          }
+          else {
+            _newColumnConfig.orderIndex = column.sortIndex;
+          }
+        }
+        else {
+          delete _newColumnConfig.ascending;
+          _newColumnConfig.orderIndex = 0;
+        }
+        _newColumnConfigList.push(_newColumnConfig);
+      }
+    }
+    _newConfig.columns = _newColumnConfigList;
+    this.configFinish.emit(_newConfig);
+    this._orderList.clearHistory();
+    function adjustPriorityOrder(column, _newColumnConfig) {
+      if (orderArray) {
+        let orderItem = orderArray.find(item => item.label === column.label);
+        if (orderItem) {
+          _newColumnConfig.orderIndex = orderItem.orderIndex;
+        }
+      }
+    }
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach(columnState => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
   }
   async locateColumn(evt, searchingText) {
     var _a;
@@ -114934,15 +115182,14 @@ let GridConfig$1 = class extends HTMLElement$1 {
     return false;
   }
   closeConfig() {
-    this._columnListHistory = [];
     this.configCancel.emit();
+    this._orderList.clearHistory();
   }
   /* Handlers */
   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 das linhas") {
-        this._columnListHistory = this._columnList.dataSource;
         this.createOrderList();
       }
       this.selectedTab = ev.target.selectedTab;
@@ -114957,11 +115204,18 @@ let GridConfig$1 = class extends HTMLElement$1 {
       }
     }
   }
+  handleOrderListChange(ev) {
+    if (ev.detail) {
+      let orderPriorityList = ev.detail;
+      if (orderPriorityList) {
+        this._orderPriorityList = orderPriorityList;
+      }
+    }
+  }
   componentWillRender() {
     var _a;
     if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
       this.createColumnList();
-      this.createOrderList();
     }
   }
   componentDidRender() {
@@ -114971,7 +115225,7 @@ let GridConfig$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), 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 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("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() }))));
+    return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), 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 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("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, onEzChange: ev => this.handleOrderListChange(ev), 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: "ez-button--primary", onClick: () => this.finish() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   static get style() { return gridConfigCss; }
@@ -114988,7 +115242,7 @@ let SelectBox$1 = class extends HTMLElement$1 {
     this.selectedOption = { value: "na", label: "N/A" };
   }
   render() {
-    return (h("ez-combo-box", { class: "grid-config-combo inverted", label: "", suppressSearch: true, 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")));
+    return (h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, 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")));
   }
   static get assetsDirs() { return ["../assets"]; }
   static get style() { return selectBoxCss; }
@@ -115060,15 +115314,15 @@ const EzActionChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$2, [1,"ez-actio
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
 const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]}]);
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]}]);
-const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
-const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"]}]);
+const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"mode":[513]}]);
+const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"stretchTitle":[516,"stretch-title"]}]);
 const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32]}]);
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"loading":[516],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"dataUnit":[1040],"config":[16]}]);
-const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"pageSize":[2,"page-size"],"serverUrl":[1,"server-url"],"dataUnit":[16],"_navigationHasPrevious":[32],"_navigationHasNext":[32],"_navigationFirstRow":[32],"_navigationLastRow":[32],"_navigationTotalRows":[32],"_popUpVisible":[32]}]);
+const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"pageSize":[2,"page-size"],"serverUrl":[1,"server-url"],"dataUnit":[16],"_navigationHasPrevious":[32],"_navigationHasNext":[32],"_navigationFirstRow":[32],"_navigationLastRow":[32],"_navigationTotalRows":[32],"_popUpVisible":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32]}]);
@@ -115083,7 +115337,7 @@ const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-i
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040]}]);
-const GridConfig = /*@__PURE__*/proxyCustomElement(GridConfig$1, [2,"grid-config",{"selectedTab":[1025,"selected-tab"],"columns":[1040]}]);
+const GridConfig = /*@__PURE__*/proxyCustomElement(GridConfig$1, [2,"grid-config",{"selectedTab":[1025,"selected-tab"],"columns":[1040],"config":[1040]}]);
 const SelectBox = /*@__PURE__*/proxyCustomElement(SelectBox$1, [1,"select-box",{"selectedOption":[1,"selected-option"]}]);
 const TestDu = /*@__PURE__*/proxyCustomElement(TestDu$1, [0,"test-du",{"isDirty":[32]}]);
 const defineCustomElements = (opts) => {