@sankhyalabs/ezui 5.22.0-dev.2 → 5.22.0-dev.21

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

@@ -41,6 +41,8 @@ export default class AgGridController {
     this._filteredColumns = new Map();
     this._filterColumnleftPosition = 0;
     this._customFormatters = new Map();
+    this._gridShowDom = false;
+    this.peddingExecutionsOnGridShow = [];
     this._enterprise = enterprise;
   }
   getGridConfig() {
@@ -126,7 +128,7 @@ export default class AgGridController {
       this._doubleClickCallBack = options.onDoubleClick;
       this._multipleSelection = options.allowMultipleSelection;
       this._dataUnit = options.dataUnit;
-      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled, options.customEditors || this._customEditors, options.customRenders || this._customRenders);
+      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled, options.customEditors || this._customEditors, options.customRenders || this._customRenders, options.enableContinuousInsert);
       this._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
@@ -146,6 +148,9 @@ export default class AgGridController {
         defaultColDef: {
           headerClass: 'ez-grid__cell-header',
           cellClass: 'ez-grid__cell-body',
+          cellClassRules: {
+            'invalidValue': (params) => this._editionManager.hasInvalidField(params.colDef.field, params.data["__record__id__"]),
+          },
           cellStyle: {
             height: '100%'
           }
@@ -176,10 +181,6 @@ export default class AgGridController {
       else {
         this._grid = new Grid(container, this._gridOptions);
       }
-      container.addEventListener('focusout', (event) => {
-        if (!container.contains(event.relatedTarget))
-          this._gridOptions.api.clearFocusedCell();
-      });
       const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectionInfo();
       if (selection === null || selection === void 0 ? void 0 : selection.isAllRecords()) {
         this.selectAll(true);
@@ -189,6 +190,23 @@ export default class AgGridController {
       }
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
       this._customFormatters = options.customFormatters;
+      const observerCallback = (entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            this._gridShowDom = true;
+            this.peddingExecutionsOnGridShow.forEach(func => func());
+            this.peddingExecutionsOnGridShow = [];
+          }
+          else {
+            this._gridShowDom = false;
+          }
+        });
+      };
+      this.observer = new IntersectionObserver(observerCallback, {
+        root: null,
+        threshold: 0.1
+      });
+      this.observer.observe(container);
     }
   }
   processFormatterCellCallback(params) {
@@ -379,10 +397,16 @@ export default class AgGridController {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
   }
-  updateRows() {
+  updateRows(rows) {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
+    rows === null || rows === void 0 ? void 0 : rows.forEach(row => this.updateRowData(row));
+  }
+  updateRowData(row) {
+    const node = this._gridOptions.api.getRowNode(row[this._idAttribName]);
+    node.setData(Object.assign({}, row));
+    this._editionManager.recordValidate();
   }
   selectAll(quietly = false) {
     try {
@@ -465,14 +489,42 @@ export default class AgGridController {
         });
         r.setData(data);
       });
+      this._gridOptions.api.refreshCells({ force: true });
+      const invalidCell = this._editionManager.getInvalidCell();
+      if (invalidCell) {
+        const rowNode = this._gridOptions.api.getRowNode(invalidCell.recordId);
+        if (rowNode && invalidCell.field) {
+          this.startEdition(rowNode.rowIndex, this._gridOptions.columnApi.getColumn(invalidCell.field.name));
+        }
+      }
     }
   }
-  refresh() {
+  savingCanceled(fields, recordId) {
+    const displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
+    const rowIndex = this._gridOptions.api.getRowNode(recordId).rowIndex;
+    const columnFocus = displayedColumns.find(column => this.isColumnEditable(rowIndex, column) && fields.find(field => field.name === column.getColId()));
+    this.focusByCollAndRow(columnFocus, rowIndex);
+    this.startEdition(rowIndex, columnFocus);
+  }
+  refresh(scrollToSelectedRow = false) {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.refreshServerSide({ purge: true });
     this._options.onRefresh();
+    if (scrollToSelectedRow)
+      this.scrollToSelectedRow();
+  }
+  scrollToSelectedRow() {
+    const rowNode = this._gridOptions.api.getSelectedNodes();
+    if (!rowNode || rowNode.length === 0)
+      return;
+    if (this._gridShowDom) {
+      this._gridOptions.api.ensureNodeVisible(rowNode[0]);
+    }
+    else {
+      this.peddingExecutionsOnGridShow.push(() => this._gridOptions.api.ensureNodeVisible(rowNode[0]));
+    }
   }
   focusOnGridContainer() {
     this._container.setAttribute('tabindex', '-1');
@@ -491,6 +543,14 @@ export default class AgGridController {
     var _a;
     (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.setAutoFocus(autoFocus);
   }
+  setEnableGridInsert(enable) {
+    var _a;
+    (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.setEnableGridInsert(enable);
+  }
+  setEnableContinuousInsert(enable) {
+    var _a;
+    (_a = this._editionManager) === null || _a === void 0 ? void 0 : _a.setEnableContinuousInsert(enable);
+  }
   setFocusFirstRow() {
     const firstRow = this._gridOptions.api.getDisplayedRowAtIndex(0);
     if (firstRow) {
@@ -506,9 +566,38 @@ export default class AgGridController {
       this.setFocusOnRow(lastRow.rowIndex);
     }
   }
+  startEditionOnRowByIndex(rowIndex) {
+    const firstCol = this.getFirstEditableColl(rowIndex);
+    this.focusByCollAndRow(firstCol, rowIndex);
+    this.startEdition(rowIndex, firstCol);
+  }
+  startEdition(rowIndex, firstCol) {
+    this._gridOptions.api.clearRangeSelection();
+    this._gridOptions.api.addCellRange({ rowStartIndex: rowIndex, rowEndIndex: rowIndex, columns: [firstCol] });
+    this._gridOptions.api.setFocusedCell(rowIndex, firstCol);
+    this._gridOptions.api.startEditingCell({ rowIndex, colKey: firstCol });
+    const cellEditor = this._gridOptions.api.getCellEditorInstances()[0];
+    if (cellEditor) {
+      cellEditor.focusIn();
+    }
+  }
+  getFirstEditableColl(rowIndex) {
+    const displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
+    return displayedColumns.find(column => this.isColumnEditable(rowIndex, column));
+  }
+  isColumnEditable(rowIndex, column) {
+    if (column.getColDef().headerName === '' || rowIndex === -1)
+      return false;
+    const rowId = this._dataUnit.records[rowIndex][this._idAttribName];
+    const rowNode = this._gridOptions.api.getRowNode(rowId);
+    return column.isCellEditable(rowNode);
+  }
   setFocusOnRow(rowIndex) {
     let displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
-    let firstCell = displayedColumns.find(column => column.getColDef().headerName !== '');
+    let firstColl = displayedColumns.find(column => column.getColDef().headerName !== '');
+    this.focusByCollAndRow(firstColl, rowIndex);
+  }
+  focusByCollAndRow(firstCell, rowIndex) {
     this._gridOptions.api.ensureColumnVisible(firstCell);
     this._gridOptions.api.ensureIndexVisible(rowIndex);
     this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
@@ -888,4 +977,13 @@ export default class AgGridController {
     this._editionManager.setCellRenders(customRenders);
     (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.redrawRows();
   }
+  clearInvalidCells(action) {
+    if (!this._editionManager)
+      return;
+    this._editionManager.clearInvalidCells(action);
+    this._gridOptions.api.refreshCells({ force: true });
+  }
+  destroy() {
+    this.observer.disconnect();
+  }
 }

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

@@ -2,6 +2,73 @@ import { Action, ObjectUtils } from '@sankhyalabs/core';
 import { EZ_GRID_LOADING_SOURCE } from "../../../../utils/constants";
 import { DataSourceInterceptor } from "./DataSourceInterceptor";
 export default class DataSource {
+  handleSavingCanceled(action) {
+    var _a, _b, _c, _d;
+    if (!((_a = action.payload) === null || _a === void 0 ? void 0 : _a.fields) || !((_b = action.payload) === null || _b === void 0 ? void 0 : _b.recordId))
+      return;
+    this._controller.savingCanceled((_c = action.payload) === null || _c === void 0 ? void 0 : _c.fields, (_d = action.payload) === null || _d === void 0 ? void 0 : _d.recordId);
+  }
+  handleDataChanged(action) {
+    var _a, _b;
+    if (!this._options.enableGridInsert) {
+      this.handleRefresh(action);
+      return;
+    }
+    this.updateGridRowNodes((_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : []);
+  }
+  /**
+   *  Nesse ponto, o registro já se encontra atualizado no DU,
+   *  basta então passar seu valor para que a garde possa atualizar sua linha.
+  */
+  updateGridRowNodes(recordIDList) {
+    const recordsToUpdate = recordIDList === null || recordIDList === void 0 ? void 0 : recordIDList.map(id => this.getRecordById(id));
+    this._controller.updateRows(recordsToUpdate);
+  }
+  getRecordById(recordId) {
+    return this._dataUnit.records.find(record => record['__record__id__'] === recordId);
+  }
+  /**
+   * Em caso de necessidade de reload (isWaitingToReload), eh preciso chamar o dataUnit.gotoPage, pois ele aplica tambem a ordenacao dos registros,
+   * enquanto que o _controller.refresh apenas recarrega os dados na ordem que atua.
+   */
+  handleRefreshOrReload(action) {
+    if (this._dataUnit.isWaitingToReload()) {
+      this.handleReload();
+      return;
+    }
+    this.handleRefresh(action);
+  }
+  handleReload() {
+    this._dataUnit.setWaitingToReload(false);
+    this._dataUnit.gotoPage(0);
+  }
+  handleRefresh(action) {
+    if (this.isSilentChange(action)) {
+      return;
+    }
+    this._controller.refresh(action.type === Action.DATA_SAVED);
+  }
+  handleRecordsAdded() {
+    if (this._options.enableGridInsert) {
+      this._controller.refresh();
+      this.focusOnNewRecord();
+    }
+  }
+  focusOnNewRecord() {
+    /**
+     * O SetTimeout eh utilizado pois é preciso aguardar que o novo registro seja renderizado na grade.
+     * Tentamos utilizar a api da grade para adicionar um event listener, porém na versão que utilizamos, não existe
+     * algo que resolva nosso cenário.
+     *
+     * Sugiro no futuro utilizar algo como o applyServerSideTransaction, porém será preciso lidar com os handlers
+     * e callbacks implementados no AgGridController e GridEditionManager.
+     */
+    setTimeout(() => {
+      var _a;
+      const newRowIndex = ((_a = this._dataUnit.records) === null || _a === void 0 ? void 0 : _a.length) - 1;
+      this._controller.startEditionOnRowByIndex(newRowIndex);
+    }, 500);
+  }
   updateLoadedRecords(action) {
     const records = action.payload;
     if ((records === null || records === void 0 ? void 0 : records.length) > 0) {
@@ -53,15 +120,20 @@ export default class DataSource {
             this._options.onPaginationUpdate(this._dataUnit.getPaginationInfo());
           }
           break;
-        case Action.RECORDS_REMOVED:
+        case Action.RECORDS_ADDED:
+          this.handleRecordsAdded();
+          break;
         case Action.DATA_SAVED:
         case Action.EDITION_CANCELED:
+          this._controller.clearInvalidCells(action.type);
+          this.handleRefreshOrReload(action);
+          break;
         case Action.DATA_CHANGED:
         case Action.DATA_RESOLVED:
-          if (this.isSilentChange(action)) {
-            return;
-          }
-          this._controller.refresh();
+          this.handleDataChanged(action);
+          break;
+        case Action.RECORDS_REMOVED:
+          this.handleRefresh(action);
           break;
         case Action.SELECTION_CHANGED:
         case Action.NEXT_SELECTED:
@@ -71,6 +143,9 @@ export default class DataSource {
         case Action.RECORD_LOADED:
           this.updateLoadedRecords(action);
           break;
+        case Action.SAVING_CANCELED:
+          this.handleSavingCanceled(action);
+          break;
       }
     };
     this._dataUnit = dataUnit;
@@ -92,6 +167,9 @@ export default class DataSource {
   setAutoFocus(autoFocus) {
     this._options.autoFocus = autoFocus;
   }
+  setEnableGridInsert(enable) {
+    this._options.enableGridInsert = enable;
+  }
   getRows(params) {
     if (this.needReload(params)) {
       this._lastLoadingParams = params;

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

@@ -1,19 +1,20 @@
-import { UserInterface } from "@sankhyalabs/core";
+import { Action, UserInterface } from "@sankhyalabs/core";
 import { KeyCode } from "ag-grid-community";
 import { RecordValidationProcessor } from "../../../../utils/validators/recordvalidator/RecordValidationProcessor";
 import EzCellEditor from "./editor/EzCellEditor";
 import EzGridCustomCellEditor from "./components/EzGridCustomCellEditor";
 import EzGridCustomCellRender from "./components/EzGridCustomCellRender";
 export default class GridEditionManager {
-  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders) {
+  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders, enableContinuousInsert) {
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
-      markAsInvalid: () => { },
-      getMessageForField: () => null
+      markAsInvalid: (invalidField, recordId) => { this.setInvalidCell(invalidField, recordId); },
+      getMessageForField: () => null,
     }, recordsValidator);
     this._useEnterLikeTab = useEnterLikeTab;
     this._editionIsDisabled = editionIsDisabled;
+    this._enableContinuousInsert = enableContinuousInsert;
     this._customEditors = customEditors;
     this._customRenders = customRenders;
   }
@@ -28,27 +29,49 @@ export default class GridEditionManager {
     };
     return options;
   }
+  canContinuousInsert() {
+    var _a;
+    return this._enableContinuousInsert && (this._dataUnit.records.length - 1) === ((_a = this._lastCellEdited) === null || _a === void 0 ? void 0 : _a.rowIndex);
+  }
   proceedAutoSave() {
     if (!this._dataUnit.isDirty()) {
       this.saveSuccess();
       return;
     }
-    if (!this._isGridEdition) {
+    if (!this._isGridEdition || this._dataUnit.hasNewRecord()) {
       return;
     }
     const currentRercord = this._dataUnit.getSelectedRecord();
     if (currentRercord == undefined) {
       return;
     }
+    this._invalidCell = undefined;
     this._recordValidationProcessor
-      .validate()
+      .validate(true)
       .then(() => {
       this._dataUnit.saveData()
-        .then(() => this.saveSuccess())
+        .then(() => {
+        if (this.canContinuousInsert()) {
+          this._dataUnit.addRecord();
+        }
+        else {
+          this.saveSuccess();
+        }
+      })
         .catch(reason => this.saveFail(reason));
     })
       .catch(reason => this.saveFail(reason));
   }
+  async recordValidate() {
+    if (!this._dataUnit.isDirty())
+      return;
+    try {
+      this._invalidCell = undefined;
+      await this._recordValidationProcessor.validate(false);
+    }
+    catch (error) { }
+    this._gridOptions.api.refreshCells({ force: true });
+  }
   navigateByEnterKey(keyboardEvent) {
     const backwards = keyboardEvent.shiftKey;
     if (this._useEnterLikeTab) {
@@ -257,6 +280,34 @@ export default class GridEditionManager {
   setCellRenders(customRenders) {
     this._customRenders = customRenders;
   }
+  setInvalidCell(invalidCell, recordId) {
+    this._invalidCell = { field: invalidCell, recordId };
+  }
+  getInvalidCell() {
+    return this._invalidCell;
+  }
+  clearInvalidCells(action) {
+    this._invalidCell = undefined;
+    if (action === Action.EDITION_CANCELED) {
+      this._isGridEdition = false;
+    }
+    else if (action === Action.DATA_SAVED && this.canContinuousInsert()) {
+      this._dataUnit.addRecord();
+    }
+  }
+  setEnableContinuousInsert(enable) {
+    this._enableContinuousInsert = enable;
+  }
+  hasInvalidField(fieldName, recordId) {
+    if (!this.hasInvalidCell())
+      return false;
+    return this._invalidCell.field.name === fieldName && this._invalidCell.recordId === recordId;
+  }
+  hasInvalidCell() {
+    if (!this._invalidCell || !this._invalidCell.field || !this._invalidCell.recordId)
+      return false;
+    return true;
+  }
 }
 class TargetEdition {
   constructor(rowIndex, column, backwards) {

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

@@ -1,6 +1,7 @@
 import { HTMLBuilder } from "@sankhyalabs/core";
 import { CustomEditorSource } from "../../../../../utils/customEditor/interfaces/ICustomEditor";
 import EzCellEditor from "../editor/EzCellEditor";
+import { getViewPortHeight } from "../editor/GridEditorUtils";
 export default class EzGridCustomCellEditor extends EzCellEditor {
   init(params) {
     var _a, _b;
@@ -11,6 +12,8 @@ export default class EzGridCustomCellEditor extends EzCellEditor {
     this._defaultGui = this.getDefaultGui();
     const fieldMetadata = super.getFieldMetadata();
     this._params = {
+      cellPossition: getViewPortHeight(params.eGridCell),
+      eGridCell: params.eGridCell,
       value: params.value,
       charPress: params.charPress,
       currentEditor: this._defaultGui,
@@ -48,12 +51,17 @@ export default class EzGridCustomCellEditor extends EzCellEditor {
       const element = HTMLBuilder.parseElement(editorElement);
       return element;
     }
+    this._customGui = editorElement;
     return editorElement;
   }
   setValue(value) {
     this._value = value;
   }
   getValue() {
+    if (this._customGui.getValue)
+      return this._customGui.getValue();
+    if (this._customGui.hasAttribute('value'))
+      return this._customGui.value;
     return this._value;
   }
 }

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/Search.tpl.js

@@ -9,6 +9,7 @@ export const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) =
     />`);
   const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
   ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.fromGrid = true;
   ezSearch.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
   ezSearch.valueGetter = () => ezSearch.getValueAsync();
   return ezSearch;

package/dist/collection/components/ez-grid/controller/ag-grid/test/constants/GridEditionMock.js

@@ -36,5 +36,6 @@ export function buildOptions(dataUnit) {
     serverURL: '',
     statusResolver: {},
     useEnterLikeTab: true,
+    enableContinuousInsert: false,
   });
 }

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

@@ -36,6 +36,8 @@ export class EzGrid {
     this.recordsValidator = undefined;
     this.canEdit = true;
     this.autoFocus = true;
+    this.enableGridInsert = false;
+    this.enableContinuousInsert = true;
   }
   /**
    * Aplica a definição de colunas.
@@ -362,6 +364,8 @@ export class EzGrid {
       editionIsDisabled: () => !this.canEdit,
       customFormatters: this._customFormatters,
       autoFocus: this.autoFocus,
+      enableGridInsert: this.enableGridInsert,
+      enableContinuousInsert: this.enableContinuousInsert,
       onRefresh: () => {
         if (this.dataUnit) {
           this.setSelection(this.dataUnit.getSelectionInfo());
@@ -454,6 +458,11 @@ export class EzGrid {
   }
   componentDidUpdate() {
     this._gridController.setAutoFocus(this.autoFocus);
+    this._gridController.setEnableGridInsert(this.enableGridInsert);
+    this._gridController.setEnableContinuousInsert(this.enableContinuousInsert);
+    if (this.dataUnit) {
+      this.setSelection(this.dataUnit.getSelectionInfo());
+    }
   }
   getDataSource() {
     var _a;
@@ -694,6 +703,42 @@ export class EzGrid {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "enableGridInsert": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Ativa inser\u00E7\u00E3o de registros no modo grade."
+        },
+        "attribute": "enable-grid-insert",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableContinuousInsert": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Ativa/desativa a inser\u00E7\u00E3o continua na grade\nS\u00F3 funciona quando a prop enableGridInsert est\u00E1 ativa"
+        },
+        "attribute": "enable-continuous-insert",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -8,6 +8,7 @@ export class EzModal {
     this.opened = true;
     this.closeEsc = false;
     this.closeOutsideClick = false;
+    this.closeOutsideLeave = false;
     this.scrim = "medium";
   }
   observeOpened() {
@@ -39,6 +40,11 @@ export class EzModal {
       this.closeModal();
     }
   }
+  onMouseLeaveHandler() {
+    if (this.closeOutsideLeave) {
+      this.closeModal();
+    }
+  }
   render() {
     const positionSufix = this.align === "left" ? "left" : "right";
     const regularVerticalPaddingClass = this.heightMode === "regular" ? 'modal__vertical-padding' : '';
@@ -46,7 +52,7 @@ export class EzModal {
     const scrimType = `modal__screen-${this.scrim}`;
     return (h(Host, null, this.opened
       ?
-        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1 }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
+        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1 }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { onMouseLeave: () => this.onMouseLeaveHandler(), class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
       :
         undefined));
   }
@@ -174,6 +180,24 @@ export class EzModal {
         "reflect": false,
         "defaultValue": "false"
       },
+      "closeOutsideLeave": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o modal ser\u00E1 fechado se o mouse sair para fora do conte\u00FAdo."
+        },
+        "attribute": "close-outside-leave",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "scrim": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -11,6 +11,7 @@ export class EzModalContainer {
     this.okButtonLabel = undefined;
     this.cancelButtonStatus = undefined;
     this.okButtonStatus = undefined;
+    this.showCloseButton = true;
   }
   async handleEzModalAction(event) {
     var _a;
@@ -47,7 +48,7 @@ export class EzModalContainer {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }
@@ -182,6 +183,24 @@ export class EzModalContainer {
         },
         "attribute": "ok-button-status",
         "reflect": false
+      },
+      "showCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a visibilidade do bot\u00E3o de fechar."
+        },
+        "attribute": "show-close-button",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -96,7 +96,7 @@ export class EzMuiltiSelectionList {
   }
   async searchWithDataSource(searchArgument, fieldName) {
     const { argument, mode } = searchArgument;
-    if (mode !== 'PRELOAD') {
+    if (mode !== 'PRELOAD' && fieldName) {
       return this.dataSource.fetchData(argument, fieldName);
     }
   }

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

@@ -68,13 +68,17 @@
   border-radius: 12px;
   box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
   box-sizing: border-box;
-  padding: var(--ez-popup__container--padding)
+  padding: var(--ez-popup__container--padding);
 }
 
 .popup__container--auto {
   height: auto;
 }
 
+.popup__overflow-y--auto {
+  overflow-y: auto;
+}
+
 .popup__content {
   box-sizing: border-box;
   height: 100%;