@sankhyalabs/ezui 5.13.0 → 5.14.0-dev.1

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

@@ -12,10 +12,8 @@
   --ez-dropdown--background-color: var(--background--xlight, #fff);
   /*@doc Define a fonte do componente.*/
   --ez-dropdown--font-family: var(--font-pattern, 'Roboto');
-  /*@doc Define a largura máxima do componente.*/
-  --ez-dropdown--max-width: 320px;
   /*@doc Define a altura máxima do componente.*/
-  --ez-dropdown--max-height: 440px;
+  --ez-dropdown--max-height: 415px;
 
   /* item*/
   /*@doc Define o espaçamento interno de cada item do componente.*/
@@ -120,6 +118,9 @@
   border-radius: var(--ez-dropdown--border-radius);
   background-color: var(--ez-dropdown--background-color);
   max-width: var(--ez-dropdown--max-width);
+}
+
+.ez-dropdown__max-height {
   max-height: var(--ez-dropdown--max-height);
 }
 

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

@@ -137,7 +137,7 @@ export class EzDropdown {
     const hasGroup = this.hasGroup(branchItems);
     const hasIcon = this.hasIcon(branchItems);
     const hasChildren = this.hasChildren(branchItems);
-    return (h("div", { class: "ez-dropdown", "data-level": level }, h("div", { class: "ez-dropdown__container" }, Object.keys(itemsByGroup)
+    return (h("div", { class: "ez-dropdown ez-dropdown__max-height", "data-level": level }, h("div", { class: "ez-dropdown__container" }, Object.keys(itemsByGroup)
       .map((groupLabel) => {
       return (h("div", Object.assign({ class: "ez-dropdown__group" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownGroup`) }), groupLabel !== "noGroup" &&
         h("label", { class: "ez-dropdown__group-label", title: groupLabel }, groupLabel), hasGroup &&

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

@@ -6,7 +6,7 @@ import { EzGridCustomHeader } from './components/EzGridCustomHeader';
 import { CellRendererStatus } from './components/cellRendererStatus';
 import SelectionHeader from './components/selectionHeader';
 import gridTerms from './i18n/pt-BR.js';
-import { DISTINCT_FILTER_NAME_PREFIX } from '../../../../utils/constants';
+import { EZ_GRID_LOADING_SOURCE, DISTINCT_FILTER_NAME_PREFIX } from '../../../../utils/constants';
 import { calcFilterColumnLeftPosition } from './AgGridUtils';
 import GridEditionManager from './GridEditionManager';
 export default class AgGridController {
@@ -18,7 +18,7 @@ export default class AgGridController {
     const applied = event.detail;
     this._filteredColumns.set(applied.field, applied.values);
     this._gridOptions.api.refreshHeader();
-    this._dataUnit.loadData();
+    this._dataUnit.loadData(undefined, undefined, undefined, EZ_GRID_LOADING_SOURCE);
   }
   showFilterColumn(configs) {
     var _a;
@@ -30,7 +30,7 @@ export default class AgGridController {
     this.CHECK_BOX_COL_ID = 'checkBoxColumn';
     this.STATUS_COL_ID = 'statusColumn';
     this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
-    this.BLOCK_LOAD_DEBOUNCE = 400;
+    this.BLOCK_LOAD_DEBOUNCE = 100;
     this.DEFAULT_FONT_SIZE = 14;
     this.DEFAULT_ICON_SIZE = 12;
     this.DEFAULT_MAX_SIZE = 200;
@@ -44,10 +44,7 @@ export default class AgGridController {
   getGridConfig() {
     return this._gridConfig;
   }
-  getGridApi() {
-    return this._gridOptions.api;
-  }
-  getSort() {
+  getSort(_dataUnitName, defaultSorting) {
     const sortedColumns = [];
     this._gridOptions.columnApi
       .getColumnState()
@@ -60,7 +57,7 @@ export default class AgGridController {
         sortedColumns.push(sortField);
       }
     });
-    return sortedColumns;
+    return sortedColumns.length === 0 && this._gridConfig === undefined ? defaultSorting : sortedColumns;
   }
   getFilter() {
     if (!this._filteredColumns || this._filteredColumns.size === 0) {
@@ -131,6 +128,7 @@ export default class AgGridController {
             height: '100%'
           }
         },
+        suppressFieldDotNotation: true,
         components: Object.assign({ ezGridHeaderComponent: SelectionHeader, ezGridCustomHeader: EzGridCustomHeader }, this._editionManager.getComponents()),
         context: {
           editionManager: this._editionManager,
@@ -149,6 +147,10 @@ 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);
@@ -424,7 +426,7 @@ export default class AgGridController {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
-    this._gridOptions.api.refreshServerSide({ purge: false });
+    this._gridOptions.api.refreshServerSide({ purge: true });
   }
   setFocusFirstRow() {
     const firstRow = this._gridOptions.api.getDisplayedRowAtIndex(0);

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

@@ -1,4 +1,5 @@
 import { Action, ObjectUtils } from "@sankhyalabs/core";
+import { EZ_GRID_LOADING_SOURCE } from "../../../../utils/constants";
 export default class DataSource {
   constructor(dataUnit, controller, options) {
     this.RECORD_ARCHIVE = "__RECORD_ARCHIVE__";
@@ -19,6 +20,11 @@ export default class DataSource {
           }
           this.updateSelection();
           break;
+        case Action.PAGINATION_UPDATED:
+          if (this._options) {
+            this._options.onPaginationChange(this._dataUnit.getPaginationInfo());
+          }
+          break;
         case Action.RECORDS_REMOVED:
         case Action.DATA_SAVED:
         case Action.EDITION_CANCELED:
@@ -51,7 +57,7 @@ export default class DataSource {
   getRows(params) {
     if (this.needReload(params)) {
       this._lastLoadingParams = params;
-      this._dataUnit.loadData(this.quickFilter).then(() => this.updateSelection());
+      this._dataUnit.loadData(this.quickFilter, undefined, true, EZ_GRID_LOADING_SOURCE).then(() => this.updateSelection());
     }
     else {
       this._lastLoadingParams = params;

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

@@ -8,7 +8,7 @@ export class CellRendererStatus {
   }
   refresh(params) {
     this.renderStatus(params);
-    return true;
+    return false;
   }
   destroy() {
     this._eGui = undefined;

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

@@ -217,21 +217,26 @@ export class EzGrid {
   }
   previousPage() {
     if (this.dataUnit) {
-      this.dataUnit.previousPage();
-      this._paginationChangedByKeyboard = false;
+      this.dataUnit.previousPage()
+        .then(() => this.resetPaginationState());
     }
   }
   nextPage() {
     if (this.dataUnit) {
-      this.dataUnit.nextPage();
-      this._paginationChangedByKeyboard = false;
+      this.dataUnit.nextPage()
+        .then(() => this.resetPaginationState());
     }
   }
+  resetPaginationState() {
+    var _a;
+    this._paginationChangedByKeyboard = false;
+    (_a = this._gridApi) === null || _a === void 0 ? void 0 : _a.clearRangeSelection();
+  }
   getPaginationControl() {
     if (this._paginationInfo) {
-      const { firstRecord, lastRecord, total, currentPage, hasMore } = this._paginationInfo;
+      const { firstRecord, lastRecord, total, count, currentPage, hasMore } = this._paginationInfo;
       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" }, `${firstRecord}-${lastRecord}`), ` de ${total}`),
+        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" }, `${firstRecord}-${lastRecord}`), total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`),
         h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
         h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }),
       ];
@@ -267,15 +272,13 @@ export class EzGrid {
     if (this.config) {
       this.observeConfig(this.config);
     }
+    if (this.dataUnit != undefined) {
+      this._paginationInfo = this.dataUnit.getPaginationInfo();
+    }
     this.buildDataElementId();
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    this._container.addEventListener('focusout', (event) => {
-      const api = this._gridController.getGridApi();
-      if (api && !this._container.contains(event.relatedTarget))
-        api.clearFocusedCell();
-    });
   }
   componentWillRender() {
     this.configSelectionCounter();

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -39,9 +39,9 @@ export class FilterColumn {
       await this.hide();
       this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
       this.buildIsTextSearch();
-      this.setOptions(configs.filteredOptions);
       this.columnName = configs.columnName;
       this.columnLabel = configs.columnLabel;
+      await this.setOptions(configs.filteredOptions);
       await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
     }
   }
@@ -106,10 +106,22 @@ export class FilterColumn {
     return this.fieldDescriptor.userInterface === UserInterface.SWITCH
       || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
   }
-  setOptions(selectedItems) {
+  async setOptions(selectedItems) {
     const validateFieldUserInterfaceOptionSelector = this.hasToUseOptions();
-    this.useOptions = validateFieldUserInterfaceOptionSelector;
-    this.options = validateFieldUserInterfaceOptionSelector ? this.buildOptions(selectedItems) : (selectedItems !== null && selectedItems !== void 0 ? selectedItems : null);
+    if (validateFieldUserInterfaceOptionSelector) {
+      this.useOptions = validateFieldUserInterfaceOptionSelector;
+      this.options = validateFieldUserInterfaceOptionSelector ? this.buildOptions(selectedItems) : (selectedItems !== null && selectedItems !== void 0 ? selectedItems : null);
+      return;
+    }
+    const options = await this.dataSource.getStaticOptions(this.columnName);
+    if (options != undefined) {
+      const selected = new Set((selectedItems || []).filter(item => item.check).map(item => item.label));
+      this.useOptions = true;
+      this.options = selected.size === 0 ? options : options.map(option => (Object.assign(Object.assign({}, option), { check: selected.has(option.label) })));
+      return;
+    }
+    this.useOptions = false;
+    this.options = null;
   }
   buildOptions(selectedItems) {
     var _a, _b;

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

@@ -11,6 +11,12 @@ export default class InMemoryFilterColumnDataSource {
     this.originalRecords = (_a = this.dataUnit.records) !== null && _a !== void 0 ? _a : [];
     this.dataUnit.subscribe(this.onDataUnitAction);
   }
+  getStaticOptions(fieldName) {
+    return new Promise(resolve => {
+      const options = this.originalRecords.map(item => this.buildFieldOption(item, fieldName));
+      resolve(this.removeDuplicatedOptions(options));
+    });
+  }
   fetchData(filterTerm, fieldName) {
     return new Promise(resolve => {
       const filteredRecords = this.originalRecords.filter(record => this.includesSearchTerm(record, fieldName, filterTerm));

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

@@ -52,8 +52,18 @@ export class EzMuiltiSelectionList {
   ordenationByCheckStateAndAlphabetically(filteredOptions) {
     const listWithSelectChecked = [];
     const listWithNotSelectChecked = [];
-    filteredOptions.forEach(item => (item.check ? listWithSelectChecked.push(item) : listWithNotSelectChecked.push(item)));
-    return [...ArrayUtils.sortAlphabetically(listWithSelectChecked), ...ArrayUtils.sortAlphabetically(listWithNotSelectChecked)];
+    let emptyElement;
+    filteredOptions.forEach(item => {
+      if (item.value == undefined || item.label === "") {
+        emptyElement = Object.assign(Object.assign({}, item), { label: "(Vazio)" });
+      }
+      else {
+        (item.check ? listWithSelectChecked.push(item) : listWithNotSelectChecked.push(item));
+      }
+    });
+    return (emptyElement == undefined ? [] : [emptyElement])
+      .concat(ArrayUtils.sortAlphabetically(listWithSelectChecked))
+      .concat(ArrayUtils.sortAlphabetically(listWithNotSelectChecked));
   }
   changeCheckAllValeuFromFilteredOptions() {
     var _a, _b, _c, _d;
@@ -152,13 +162,14 @@ export class EzMuiltiSelectionList {
   }
   scenarioToDisplay(view) {
     const scenarios = {
-      [ViewScenarios.DATASOURCE_INIT]: this.buildInitViewWithDataSource(),
-      [ViewScenarios.DATASOURCE_RESULTS]: this.buildViewList(true),
-      [ViewScenarios.DATASOURCE_RESULTS_EMPTY]: this.buildViewEmptyResults(),
-      [ViewScenarios.OPTIONS_EMPTY]: this.buildViewEmptyResults(),
-      [ViewScenarios.OPTIONS]: this.buildViewList(false),
+      [ViewScenarios.DATASOURCE_INIT]: () => this.buildInitViewWithDataSource(),
+      [ViewScenarios.DATASOURCE_RESULTS]: () => this.buildViewList(true),
+      [ViewScenarios.DATASOURCE_RESULTS_EMPTY]: () => this.buildViewEmptyResults(),
+      [ViewScenarios.OPTIONS_EMPTY]: () => this.buildViewEmptyResults(),
+      [ViewScenarios.OPTIONS]: () => this.buildViewList(false),
     };
-    return scenarios[view];
+    const scenarioBuilder = scenarios[view];
+    return scenarioBuilder ? scenarioBuilder() : undefined;
   }
   render() {
     return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
@@ -234,7 +245,7 @@ export class EzMuiltiSelectionList {
       },
       "options": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "IMultiSelectionOption[]",
           "resolved": "IMultiSelectionOption[]",

package/dist/collection/utils/constants.js

@@ -1,3 +1,4 @@
 export const REQUIRED_INFO = " (obrigatório) *";
 export const ALL_RECORD = "ALL_RECORD";
 export const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
+export const EZ_GRID_LOADING_SOURCE = "EZ_GRID_LOADING_SOURCE";