@sankhyalabs/ezui 1.1.130 → 1.1.133

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, forceUpdate, Host, getAssetPath, setAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { FloatingManager, DateUtils, TimeFormatter, UserInterface, Action, ApplicationContext, DataUnitAction, DataUnit, DataType, StringUtils, NumberUtils, MaskFormatter } from '@sankhyalabs/core';
+import { FloatingManager, DateUtils, TimeFormatter, UserInterface, Action, ApplicationContext, DataUnitAction, DataUnit, NumberUtils, DataType, StringUtils, MaskFormatter } from '@sankhyalabs/core';
 import { UserInterface as UserInterface$1, SortMode } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
 
 const ezActionChipCss = ":host{--ez-action-chip--height:36px;--ez-action-chip--border-radius:var(--border--radius-large, 24px);--ez-action-chip__border:1px solid;--ez-action-chip__border-color-strokes:var(--color--strokes, #DCE0E8);--ez-action-chip--font-size:var(--text--medium, 14px);--ez-action-chip--font-family:var(--font-pattern, Arial);--ez-action-chip--font-weight:var(--text-weight--large, 500);--ez-action-chip__label--title--primary:var(--title--primary, #919191);--ez-action-chip__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-action-chip__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ez-action-chip__label__default--border-color--hover:var(--color--primary-600, #007a5a)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;cursor:pointer;color:var(--ez-action-chip__label--title--primary);fill:var(--ez-action-chip__label--title--primary);border:var(--ez-action-chip__border);border-radius:var(--ez-action-chip--border-radius);border-color:var(--ez-action-chip__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px)}.label__container:hover{border-color:var(--ez-action-chip__label__default--border-color--hover);background-color:var(--ez-action-chip__label__default--background-color--hover)}label{display:flex;align-items:center;font-weight:var(--text-weight--large, 600);cursor:pointer;height:var(--ez-action-chip--height);font-family:var(--ez-action-chip--font-family);font-size:var(--ez-action-chip--font-size)}";
@@ -1793,7 +1793,12 @@ class DataBinder {
     const oldValue = field["value"];
     const newValue = this._dataUnit.getFieldValue(fieldName);
     if (oldValue != newValue) {
-      field["value"] = newValue;
+      if (newValue === undefined) {
+        field.removeAttribute("value");
+      }
+      else {
+        field["value"] = newValue;
+      }
     }
   }
   updateBind(fieldName, field) {
@@ -1801,7 +1806,13 @@ class DataBinder {
     if (oldBind) {
       oldBind.destroy();
     }
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    const value = this._dataUnit.getFieldValue(fieldName);
+    if (value === undefined) {
+      field.removeAttribute("value");
+    }
+    else {
+      field["value"] = value;
+    }
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);
@@ -1928,7 +1939,7 @@ let EzForm$1 = class extends HTMLElement$1 {
         .filter(f => f.dataset.required)
         .map(f => f.dataset.fieldName)
         .concat(metadata.getRequiredFields());
-      const records = this.dataUnit.records;
+      const records = this.dataUnit.getModifiedRecords();
       for (let i = 0; i < records.length; i++) {
         if (!this.validateRequired(requiredFields, records[i])) {
           reject();
@@ -112090,8 +112101,11 @@ class DataSource {
 
 class AgGridController {
   constructor(enterprise) {
+    this.DEFAULT_ROW_HEIGHT = 25;
     this._menuItems = [];
     this._idAttribName = "__record__id__";
+    this._isFirstRecordOfPage = true;
+    this._isLastRecordOfPage = false;
     this._enterprise = enterprise;
   }
   getSort() {
@@ -112119,7 +112133,9 @@ class AgGridController {
       this._pageSize = options.pageSize;
       this._serverURL = options.serverURL;
       this._dataUnit = options.dataUnit;
-      this._dataUnit.sortingProvider = this;
+      if (this._dataUnit) {
+        this._dataUnit.sortingProvider = this;
+      }
       this._dataSource = new DataSource(this._dataUnit, this._serverURL);
       this._gridOptions = {
         localeText: gridTerms,
@@ -112128,7 +112144,7 @@ class AgGridController {
         rowSelection: this._multipleSelection ? "multiple" : "single",
         serverSideDatasource: this._dataSource,
         sortingOrder: ['desc', 'asc', null],
-        getRowNodeId: (params) => typeof params === "string" ? params : params[this._idAttribName],
+        getRowNodeId: this._dataUnit ? (params) => typeof params === "string" ? params : params[this._idAttribName] : undefined,
         getMainMenuItems: (params) => {
           const column = params.column;
           const items = [column.isPinned() ? "clearPinned" : "pinLeft", "separator"];
@@ -112138,14 +112154,12 @@ class AgGridController {
           }));
           return items;
         },
-        getRowHeight: () => {
-          //FIXME: Existe um bug no PartialStore.prototype.destroyAllBlocks do ag-grid, pois
-          //apesar de destruir os blocos, mantém a variável "blockHeights" com o tamanho antigo
-          //dos blocos, então, quando removemos uma linha, a altura do bloco não é recalculada.
-          //Descobri que setando manualmente a altura das linhas, apesar do bloco ficar com 
-          //tamanho errado, isso afeta menos o componente.
-          return 25;
-        }
+        //FIXME: Existe um bug no PartialStore.prototype.destroyAllBlocks do ag-grid, pois
+        //apesar de destruir os blocos, mantém a variável "blockHeights" com o tamanho antigo
+        //dos blocos, então, quando removemos uma linha, a altura do bloco não é recalculada.
+        //Descobri que setando manualmente a altura das linhas, apesar do bloco ficar com 
+        //tamanho errado, isso afeta menos o componente.
+        rowHeight: this.DEFAULT_ROW_HEIGHT
       };
       this.setOptionsEvents(this._gridOptions);
       this.setOptionsPagination(this._gridOptions);
@@ -112168,16 +112182,17 @@ class AgGridController {
     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());
-      }
-    };
+  }
+  syncSelection() {
+    if (this._dataUnit) {
+      this.selectRows(this._dataUnit.getSelection());
+    }
   }
   setOptionsPagination(opt) {
     opt.pagination = (this._pageSize > -1);
     opt.paginationPageSize = this._pageSize;
     opt.cacheBlockSize = this._pageSize;
+    opt.maxBlocksInCache = 1;
   }
   setOptionsSupress(opt) {
     opt.suppressDragLeaveHidesColumns = true;
@@ -112213,7 +112228,7 @@ class AgGridController {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    this._gridOptions.api.refreshServerSideStore({});
+    this._gridOptions.api.refreshServerSideStore({ purge: true });
   }
   changeValues(changes, rowIds) {
     if (this._grid === undefined) {
@@ -112350,6 +112365,75 @@ class AgGridController {
     this.goToPage(0);
     this._gridOptions.api.refreshServerSideStore({ purge: true });
   }
+  isLastOfPage() {
+    return this._isLastRecordOfPage;
+  }
+  isFirstOfPage() {
+    return this._isFirstRecordOfPage;
+  }
+  previousRecord() {
+    const pagination = this.getPaginationStatus();
+    if (this._isFirstRecordOfPage && pagination.hasPrevious) {
+      this.previousPage();
+    }
+    else {
+      if (this._dataUnit) {
+        this._dataUnit.previousRecord();
+      }
+      else {
+        const node = this._gridOptions.api.getSelectedNodes()[0];
+        this.setSelectedIndex(node.rowIndex - 1);
+      }
+    }
+  }
+  nextRecord() {
+    const pagination = this.getPaginationStatus();
+    if (this._isLastRecordOfPage && pagination.hasNext) {
+      this.nextPage();
+    }
+    else {
+      if (this._dataUnit) {
+        this._dataUnit.nextRecord();
+      }
+      else {
+        const node = this._gridOptions.api.getSelectedNodes()[0];
+        this.setSelectedIndex(node.rowIndex + 1);
+      }
+    }
+  }
+  setSelectedIndex(index) {
+    var _a;
+    (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
+  }
+  hasPreviousRecord() {
+    const pagination = this.getPaginationStatus();
+    if (this._isFirstRecordOfPage) {
+      return pagination.hasPrevious;
+    }
+    else {
+      if (this._dataUnit) {
+        return this._dataUnit.hasPrevious();
+      }
+      else {
+        return pagination.hasPrevious || this._gridOptions.api.getSelectedRows()[0].rowIndex > 0;
+      }
+    }
+  }
+  hasNextRecord() {
+    const pagination = this.getPaginationStatus();
+    if (this._isLastRecordOfPage) {
+      return pagination.hasNext;
+    }
+    else {
+      if (this._dataUnit) {
+        return this._dataUnit.hasNext() || this.getPaginationStatus().hasNext;
+      }
+      else {
+        const api = this._gridOptions.api;
+        return pagination.hasNext || api.getSelectedRows()[0].rowIndex < api.getDisplayedRowCount();
+      }
+    }
+  }
   buildColDef(source) {
     return {
       headerName: source.label,
@@ -112384,19 +112468,24 @@ class AgGridController {
       });
       return optionSelected === null || optionSelected === void 0 ? void 0 : optionSelected.label;
     }
-    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "SWITCH") {
-      if ((params === null || params === void 0 ? void 0 : params.value) === "S" || (params === null || params === void 0 ? void 0 : params.value) === true) {
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface$1.SWITCH) {
+      if ((params === null || params === void 0 ? void 0 : params.value) === "S" || (params === null || params === void 0 ? void 0 : params.value) === true || (params === null || params === void 0 ? void 0 : params.value) === "true") {
         return "Sim";
       }
-      else if ((params === null || params === void 0 ? void 0 : params.value) === "N" || (params === null || params === void 0 ? void 0 : params.value) === false) {
+      else if ((params === null || params === void 0 ? void 0 : params.value) === "N" || (params === null || params === void 0 ? void 0 : params.value) === false || (params === null || params === void 0 ? void 0 : params.value) === "false") {
         return "Não";
       }
     }
-    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "SEARCH") {
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface$1.SEARCH) {
       if (params.value !== undefined) {
         return ((_a = params === null || params === void 0 ? void 0 : params.value) === null || _a === void 0 ? void 0 : _a.value) + " - " + ((_b = params === null || params === void 0 ? void 0 : params.value) === null || _b === void 0 ? void 0 : _b.label);
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface$1.DECIMALNUMBER) {
+      if (params.value !== undefined) {
+        return NumberUtils.format(params.value.toString(), 2, 2);
+      }
+    }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface$1.DATE || (source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface$1.DATETIME) {
       if (params.value !== undefined) {
         return params.value.toLocaleDateString();
@@ -112426,31 +112515,44 @@ class AgGridController {
     return false;
   }
   onSelectionChange(e) {
+    const selectedNodes = e.api.getSelectedNodes();
+    if (selectedNodes.length > 0) {
+      this._isFirstRecordOfPage = selectedNodes[0].rowIndex === e.api.getFirstDisplayedRow();
+      this._isLastRecordOfPage = selectedNodes[0].rowIndex === e.api.getLastDisplayedRow();
+    }
     if (this._selectionChangeCallback) {
-      this._selectionChangeCallback(e.api.getSelectedRows());
+      this._selectionChangeCallback({
+        selection: e.api.getSelectedRows(),
+        isFirstOfPage: this._isFirstRecordOfPage,
+        isLastOfPage: this._isLastRecordOfPage
+      });
     }
   }
   onPaginationChange() {
+    this.syncSelection();
     if (this._paginationChangeCallback) {
       if (this._gridOptions.api) {
-        const api = this._gridOptions.api;
-        const currentPage = api.paginationGetCurrentPage();
-        const isLastPage = api.paginationGetTotalPages() === (currentPage + 1);
-        const pageSize = api.paginationGetPageSize();
-        const totalRows = api.paginationGetRowCount();
-        const pageStart = currentPage * pageSize + 1;
-        const pageEnd = Math.min(totalRows, (currentPage + 1) * pageSize);
-        this._paginationChangeCallback({
-          hasPrevious: currentPage > 0,
-          hasNext: !isLastPage,
-          currentPage: currentPage + 1,
-          pageStart,
-          pageEnd,
-          totalRows
-        });
+        this._paginationChangeCallback(this.getPaginationStatus());
       }
     }
   }
+  getPaginationStatus() {
+    const api = this._gridOptions.api;
+    const currentPage = api.paginationGetCurrentPage();
+    const isLastPage = api.paginationGetTotalPages() === (currentPage + 1);
+    const pageSize = api.paginationGetPageSize();
+    const totalRows = api.paginationGetRowCount();
+    const pageStart = currentPage * pageSize + 1;
+    const pageEnd = Math.min(totalRows, (currentPage + 1) * pageSize);
+    return {
+      hasPrevious: currentPage > 0,
+      hasNext: !isLastPage,
+      currentPage: currentPage + 1,
+      pageStart,
+      pageEnd,
+      totalRows
+    };
+  }
   onRowDoubleClick(evt) {
     if (this._doubleClickCallBack) {
       this._doubleClickCallBack(evt.data);
@@ -112474,10 +112576,6 @@ class DataUnitBridge {
           const { records } = action.payload;
           this._gridController.removeRows(records);
           break;
-        case Action.RECORDS_ADDED:
-        case Action.RECORDS_COPIED:
-          this._gridController.addRows(action.payload);
-          break;
         case Action.EDITION_CANCELED:
         case Action.DATA_SAVED:
           this._gridController.refresh();
@@ -112486,6 +112584,10 @@ class DataUnitBridge {
           const { selection } = action.payload;
           this._gridController.selectRows(selection);
           break;
+        case Action.NEXT_SELECTED:
+        case Action.PREVIOUS_SELECTED:
+          this._gridController.selectRows(this._dataUnit.getSelection());
+          break;
         case Action.DATA_CHANGED:
           const changes = Object.assign({}, action.payload);
           delete changes.records;
@@ -112502,7 +112604,12 @@ class DataUnitBridge {
       this._dataUnit.metadata.fields.forEach(f => {
         var _a;
         if (f.visible !== false) {
-          columnDefs.push({ label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options });
+          const props = new Map();
+          const properties = this._dataUnit.getField(f.name).properties;
+          for (const value in properties) {
+            props.set(value, properties[value]);
+          }
+          columnDefs.push({ label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props });
         }
       });
     }
@@ -112524,7 +112631,7 @@ let EzGrid$1 = class extends HTMLElement$1 {
     this.ezDoubleClick = createEvent(this, "ezDoubleClick", 7);
     this.configChange = createEvent(this, "configChange", 7);
     this._gridController = new AgGridController(false);
-    this._popUpVisible = false;
+    this._popUpGridConfig = false;
     /**
     * Determina o número de linhas de cada página. Caso informado o valor -1
     * não haverá paginação.
@@ -112586,6 +112693,74 @@ let EzGrid$1 = class extends HTMLElement$1 {
   async quickFilter(term) {
     this._gridController.quickFilter(term);
   }
+  /**
+  * Método para fazer um filtro rápido na grid.
+  */
+  async nextPage() {
+    this._gridController.nextPage();
+  }
+  /**
+  * Método para fazer um filtro rápido na grid.
+  */
+  async previousPage() {
+    this._gridController.previousPage();
+  }
+  /**
+  * Método para fazer um filtro rápido na grid.
+  */
+  async hasNextPage() {
+    return new Promise(resolve => {
+      resolve(this._navigationHasNext);
+    });
+  }
+  /**
+  * Método para fazer um filtro rápido na grid.
+  */
+  async hasPreviousPage() {
+    return new Promise(resolve => {
+      resolve(this._navigationHasPrevious);
+    });
+  }
+  /**
+  * Método para verificar se o registro selecionado é o ultimo da página.
+  */
+  async isLastOfPage() {
+    return new Promise(resolve => {
+      resolve(this._gridController.isLastOfPage());
+    });
+  }
+  /**
+  * Método para verificar se o registro selecionado é o primeiro da página.
+  */
+  async isFirstOfPage() {
+    return new Promise(resolve => {
+      resolve(this._gridController.isFirstOfPage());
+    });
+  }
+  /**
+  * Método para navegar para o proxímo registro da grid.
+  */
+  async nextRecord() {
+    this._gridController.nextRecord();
+  }
+  /**
+  * Método para navegar para o registro anterior da grid.
+  */
+  async previousRecord() {
+    this._gridController.previousRecord();
+  }
+  /**
+  * Método para verificar se existem proximos registros.
+  */
+  async hasNextRecord() {
+    return Promise.resolve(this._gridController.hasNextRecord());
+  }
+  /**
+  * Método para verificar se existem registros anteriores.
+  */
+  async hasPreviousRecord() {
+    return Promise.resolve(this._gridController.hasPreviousRecord());
+  }
   componentWillLoad() {
     if (this.dataUnit) {
       this._dataUnitBridge = new DataUnitBridge(this._gridController, this.dataUnit);
@@ -112658,7 +112833,7 @@ let EzGrid$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     this._gridController.initDatagrid(this._container, {
       onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
-      onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
+      onSelectionChange: (state) => this.ezSelectionChange.emit(state.selection),
       onPaginationChange: (status) => {
         this._navigationHasPrevious = status.hasPrevious;
         this._navigationHasNext = status.hasNext;
@@ -112692,24 +112867,24 @@ let EzGrid$1 = class extends HTMLElement$1 {
     }
     return [
       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" })
+      h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this.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.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
   applyConfig(config) {
     this._gridController.setColumnsState(config.columns);
-    this.closeConfig();
+    this.closeGridConfig();
   }
-  closeConfig() {
-    this._popUpVisible = false;
+  closeGridConfig() {
+    this._popUpGridConfig = false;
   }
-  openConfig() {
+  openGridConfig() {
     this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
     this._gridConfig.selectedTab = "Colunas";
-    this._popUpVisible = true;
+    this._popUpGridConfig = true;
   }
   render() {
-    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() }))));
+    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("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, 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.closeGridConfig() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   static get watchers() { return {
@@ -112909,6 +113084,17 @@ let EzList$1 = class extends HTMLElement$1 {
     this._listItemsHistory = [];
   }
   /**
+  * Responsável por dar um scroll top no componente da lista.
+  */
+  async scrollToTop() {
+    if (this.useGroups) {
+      this._element.shadowRoot.querySelector('.group-container').scrollTop = 0;
+    }
+    else {
+      this._element.shadowRoot.querySelector('.items-container').scrollTop = 0;
+    }
+  }
+  /**
   * 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) {
@@ -113362,6 +113548,7 @@ let EzModal$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezCloseModal = createEvent(this, "ezCloseModal", 7);
+    this.ezOpenModal = createEvent(this, "ezOpenModal", 7);
     /**
     * Controle de exibição do Modal
     */
@@ -113395,6 +113582,11 @@ let EzModal$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     this.handleopenedChange();
   }
+  componentDidRender() {
+    if (this.opened) {
+      this.ezOpenModal.emit();
+    }
+  }
   onMouseDownHandler(event) {
     if (this.closeOutsideClick && event.target === this._overlay) {
       this.closeModal();
@@ -113456,7 +113648,7 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
   }
   changeValue(newValue) {
     this.errorMessage = "";
-    if (newValue && newValue !== this.value) {
+    if (newValue !== this.value) {
       this.value = newValue;
       this.ezChange.emit(this.value);
     }
@@ -114093,14 +114285,16 @@ let EzTextInput$1 = class extends HTMLElement$1 {
   }
   showError() {
     var _a, _b;
-    const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
-    if (hasError) {
-      this._inputElem.classList.add("hasError");
-      (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
-    }
-    else {
-      this._inputElem.classList.remove("hasError");
-      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+    if (this._inputElem) {
+      const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
+      if (hasError) {
+        this._inputElem.classList.add("hasError");
+        (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
+      }
+      else {
+        this._inputElem.classList.remove("hasError");
+        (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+      }
     }
   }
   prepareMask() {
@@ -114856,6 +115050,7 @@ let GridConfig$1 = class extends HTMLElement$1 {
     this._orderPriorityList = [];
     this._columListItems = [];
     this._selectedIndex = -1;
+    this._dataChanged = false;
     this.selectedTab = "Colunas";
   }
   /* Creation Methods */
@@ -114931,6 +115126,7 @@ let GridConfig$1 = class extends HTMLElement$1 {
   }
   updateOrder(sortOrder, updatedItemLabel) {
     var _a;
+    this._dataChanged = true;
     let newList = [...this.columns];
     let newItem = newList.find(item => item.label === updatedItemLabel);
     if (newItem) {
@@ -114959,6 +115155,7 @@ let GridConfig$1 = class extends HTMLElement$1 {
   switchColumnGroup(ev, switchedItem) {
     ev.stopPropagation();
     let newList = [...this._columListItems];
+    this._dataChanged = true;
     if (ev.detail === true) {
       let hiddenGroup = newList.find(group => group.group === "Ocultas");
       let index = hiddenGroup.items.findIndex(item => item.label === switchedItem.label);
@@ -114998,6 +115195,9 @@ let GridConfig$1 = class extends HTMLElement$1 {
       });
     });
     this.columns = newColumnList;
+    this._dataChanged = false;
+    this.closeConfig();
+    ApplicationUtils.info("As configurações foram salvas com sucesso!");
     this.save();
   }
   save() {
@@ -115180,13 +115380,46 @@ let GridConfig$1 = class extends HTMLElement$1 {
     return false;
   }
   closeConfig() {
-    this.configCancel.emit();
-    this._orderList.clearHistory();
+    this._orderList.scrollToTop();
+    this._columnList.scrollToTop();
+    this._searchElement.value = "";
+    if (this._dataChanged) {
+      let options = {
+        canClose: false,
+        labelCancel: "Descartar",
+        labelConfirm: "Salvar",
+        btnConfirmDanger: false
+      };
+      ApplicationUtils.confirm("Aviso", "As alterações realizadas serão descartadas. Gostaria de salvar antes de sair?", null, false, options)
+        .then(response => {
+        if (!response) {
+          this._dataChanged = false;
+          this.configCancel.emit();
+          this._orderList.clearHistory();
+        }
+        else {
+          this.finish();
+        }
+      });
+    }
+    else {
+      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 (this.selectedTab !== ev.target.selectedTab) {
+        if (ev.target.selectedTab === "Colunas") {
+          this._orderList.scrollToTop();
+        }
+        else if (ev.target.selectedTab === "Ordenação das linhas") {
+          this._columnList.scrollToTop();
+        }
+        this._searchElement.value = "";
+      }
       if (ev.target.selectedTab === "Ordenação das linhas") {
         this.createOrderList();
       }
@@ -115198,6 +115431,7 @@ let GridConfig$1 = class extends HTMLElement$1 {
     if (ev.detail) {
       let visibleItems = (_a = ev.detail.find(group => group.group === "Visíveis")) === null || _a === void 0 ? void 0 : _a.items;
       if (visibleItems) {
+        this._dataChanged = true;
         this._orderListItems = visibleItems;
       }
     }
@@ -115206,6 +115440,7 @@ let GridConfig$1 = class extends HTMLElement$1 {
     if (ev.detail) {
       let orderPriorityList = ev.detail;
       if (orderPriorityList) {
+        this._dataChanged = true;
         this._orderPriorityList = orderPriorityList;
       }
     }
@@ -115320,7 +115555,7 @@ const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"e
 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"],"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 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],"_popUpGridConfig":[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]}]);

package/dist/esm/ez-form.entry.js

@@ -637,7 +637,12 @@ class DataBinder {
     const oldValue = field["value"];
     const newValue = this._dataUnit.getFieldValue(fieldName);
     if (oldValue != newValue) {
-      field["value"] = newValue;
+      if (newValue === undefined) {
+        field.removeAttribute("value");
+      }
+      else {
+        field["value"] = newValue;
+      }
     }
   }
   updateBind(fieldName, field) {
@@ -645,7 +650,13 @@ class DataBinder {
     if (oldBind) {
       oldBind.destroy();
     }
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    const value = this._dataUnit.getFieldValue(fieldName);
+    if (value === undefined) {
+      field.removeAttribute("value");
+    }
+    else {
+      field["value"] = value;
+    }
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);
@@ -732,7 +743,7 @@ let EzForm = class {
         .filter(f => f.dataset.required)
         .map(f => f.dataset.fieldName)
         .concat(metadata.getRequiredFields());
-      const records = this.dataUnit.records;
+      const records = this.dataUnit.getModifiedRecords();
       for (let i = 0; i < records.length; i++) {
         if (!this.validateRequired(requiredFields, records[i])) {
           reject();