@sankhyalabs/ezui 4.18.2 → 4.19.0

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

@@ -1,3 +1,4 @@
+import { calcFilterColumnLeftPosition } from '../AgGridUtils';
 export class EzGridCustomHeader {
   init(agParams) {
     var _a;
@@ -29,9 +30,14 @@ export class EzGridCustomHeader {
   configFilterButton() {
     this.filterButton = this.element.querySelector('#ez-grid-filter-icon');
     this.filterButton.style.display = this.params.hasFilter() ? 'flex' : 'none';
-    this.onFilterButtonClickListener = this.params.showColumnFilter.bind(this);
+    this.onFilterButtonClickListener = this.onClickFilter.bind(this);
     this.filterButton.addEventListener('click', this.onFilterButtonClickListener);
   }
+  onClickFilter() {
+    var _a;
+    const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
+    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`);
+  }
   configSortIcon() {
     this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
     this.sortUpIcon.style.display = this.params.column.isSortAscending() ? 'flex' : 'none';
@@ -77,5 +83,6 @@ export class EzGridCustomHeader {
       this.filterButton.removeEventListener('click', this.onFilterButtonClickListener);
     }
     this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
+    this.params.column.removeEventListener('applyFilterColumnOptions', this.onFilterAppliedListener);
   }
 }

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

@@ -19,12 +19,10 @@
 }
 
 .grid-header {
-  /*private*/
-  display: flex;
+  display: grid;
   justify-content: space-between;
   align-items: center;
-
-  /*public*/
+  grid-template-columns: 1fr;
   background-color: var(--ez-grid__header--background-color, #FFF);
   z-index: var(--visible);
 }
@@ -39,12 +37,24 @@
   background-color: var(--ez-grid__header--background-color);
 }
 
+.grid-header__popover {
+  position: relative;
+  top: var(--space--sm, 16px);
+}
+
 .grid-header__container {
   /*private*/
   display: flex;
   align-items: center;
 }
 
+.grid-header__position {
+  /*private*/
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .grid__selection-counter {
   /*private*/
   position: fixed;

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

@@ -1,11 +1,14 @@
-import { ElementIDUtils, JSUtils } from "@sankhyalabs/core";
-import { h, Host } from "@stencil/core";
-import AgGridController from "./controller/ag-grid/AgGridController";
-import { SelectionCounter } from "./subcomponents/selection-counter";
-import { SelectionMode } from "@sankhyalabs/core/dist/dataunit/DataUnit";
+import { ElementIDUtils, JSUtils } from '@sankhyalabs/core';
+import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
+import { Host, h } from '@stencil/core';
+import AgGridController from './controller/ag-grid/AgGridController';
+import { SelectionCounter } from './subcomponents/selection-counter';
+const windowInstace = window;
 export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
+    this.timeFadeOutInMs = 3000;
+    this.toastMessageToUpdateFilterColumn = 'Filtro de coluna aplicado com sucesso!';
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
@@ -17,6 +20,7 @@ export class EzGrid {
     this.serverUrl = undefined;
     this.dataUnit = undefined;
     this.statusResolver = undefined;
+    this.columnfilterDataSource = undefined;
   }
   /**
    * Aplica a definição de colunas.
@@ -88,7 +92,6 @@ export class EzGrid {
   onSelectPageRecords() {
     var _a;
     (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.setSelection(this.dataUnit.records.map(record => record.__record__id__)).then(selection => this.setSelection(selection));
-    ;
   }
   onClearSelectedRecords() {
     var _a;
@@ -104,7 +107,7 @@ export class EzGrid {
           newConfigColumn['width'] = columnState.width;
         }
         if (columnState.sort) {
-          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['ascending'] = columnState.sort.toUpperCase() === 'ASC';
           newConfigColumn['orderIndex'] = columnState.sortIndex;
         }
         else {
@@ -128,23 +131,23 @@ export class EzGrid {
         return;
       }
       const limitBottom = boundingContainer.bottom - 30;
-      this._gridSelectionCounter.style.bottom = (document.body.clientHeight - limitBottom) + 'px';
+      this._gridSelectionCounter.style.bottom = document.body.clientHeight - limitBottom + 'px';
     }
     else {
-      this._gridSelectionCounter.style.bottom = "";
+      this._gridSelectionCounter.style.bottom = '';
     }
   }
   setEvents() {
-    window.removeEventListener("scroll", this.positionSelectionCounter.bind(this));
-    window.addEventListener("scroll", this.positionSelectionCounter.bind(this));
+    window.removeEventListener('scroll', this.positionSelectionCounter.bind(this));
+    window.addEventListener('scroll', this.positionSelectionCounter.bind(this));
   }
   resizeSelectionCounter() {
     if (this._gridSelectionCounter == undefined) {
       return;
     }
-    this._gridSelectionCounter.style.width = "";
+    this._gridSelectionCounter.style.width = '';
     if (this._gridSelectionCounter.clientHeight > 42) {
-      this._gridSelectionCounter.style.width = "min-content";
+      this._gridSelectionCounter.style.width = 'min-content';
     }
     this.positionSelectionCounter();
   }
@@ -203,8 +206,8 @@ export class EzGrid {
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-    const dtInfo = { id: "ezGrid" };
-    ElementIDUtils.addIDInfo(this._refPaginationControl, "pagination", dtInfo);
+    const dtInfo = { id: 'ezGrid' };
+    ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {
@@ -224,7 +227,7 @@ export class EzGrid {
       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("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" })
+        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" }),
       ];
     }
     return null;
@@ -250,7 +253,7 @@ export class EzGrid {
       allowMultipleSelection: this.multipleSelection,
       serverURL: this.serverUrl,
       dataUnit: this.dataUnit,
-      statusResolver: this.statusResolver
+      statusResolver: this.statusResolver,
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -258,15 +261,21 @@ export class EzGrid {
     this.buildDataElementId();
     this.setEvents();
     this.componentReady.emit();
+    this._gridController.configFilterColumn(this._filterColumn);
   }
   componentWillRender() {
     this.configSelectionCounter();
   }
+  componentDidRender() {
+    windowInstace.addEventListener('onSubmitFilter', () => {
+      this.toastElementRef.show(this.toastMessageToUpdateFilterColumn, this.timeFadeOutInMs, true, true);
+    });
+  }
   render() {
     var _a;
-    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", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), h("div", { ref: (ref) => this._gridSelectionCounter = ref, class: `grid__selection-counter
-          ${this._showSelectionCounter ? "grid__selection-counter--opened" : ""}
-        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, hasPagination: !!this._paginationInfo, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
+    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", dataSource: this.columnfilterDataSource, dataUnit: this.dataUnit, ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
+          ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
+        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, hasPagination: !!this._paginationInfo, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" })), h("ez-toast", { ref: (element) => (this.toastElementRef = element) }, h("ez-icon", { slot: "icon", iconName: "check" }))));
   }
   static get is() { return "ez-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -380,6 +389,26 @@ export class EzGrid {
           "tags": [],
           "text": "Define um `IStatusResolver` respons\u00E1vel pelo estado da coluna de status."
         }
+      },
+      "columnfilterDataSource": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IMultiSelectionListDataSource",
+          "resolved": "IMultiSelectionListDataSource",
+          "references": {
+            "IMultiSelectionListDataSource": {
+              "location": "import",
+              "path": "../ez-multi-selection-list/interfaces/IMultiSelectionListDataSource"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define um `IMultiSelectionListDataSource` respons\u00E1vel por alimentar o filtro de colunas."
+        }
       }
     };
   }

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

@@ -0,0 +1,34 @@
+.filter-column {
+  padding: var(--space--2xs, 8px);
+  position: relative;
+}
+
+.filter-column__header {
+  margin-bottom: var(--space--2xs, 8px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--space--xl, 32px);
+}
+
+.filter-column__footer {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  padding-top: var(--space--2xs, 8px);
+  border-top: var(--border--medium) var(--color--disable-secondary);
+}
+
+.filter-column__popover {
+  position: absolute;
+}
+
+.filter-column__header-title {
+  margin-left: 8px;
+}

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

@@ -0,0 +1,297 @@
+import { UserInterface } from '@sankhyalabs/core';
+import { h } from '@stencil/core';
+const windowInstace = window;
+const onSubmitFilter = new CustomEvent('onSubmitFilter', {
+  detail: {
+    showToast: true,
+  },
+});
+export class FilterColumn {
+  constructor() {
+    this.TOP_POSITION = '65px';
+    this.opened = true;
+    this.columnName = undefined;
+    this.columnLabel = undefined;
+    this.dataSource = undefined;
+    this.dataUnit = undefined;
+    this.options = undefined;
+    this.selectedItems = undefined;
+    this.fieldDescriptor = undefined;
+    this.useOptions = false;
+  }
+  async hide() {
+    await this.ezPopoverElement.hide();
+    await this.clearConfigs();
+  }
+  /**
+   * Abre o filtro de coluna.
+   * @Params IFilterColumnConfigs informações para configurar o filtro
+   */
+  async show(configs) {
+    if (this.canShow(configs)) {
+      await this.hide();
+      this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
+      this.setOptions(configs.filteredOptions);
+      this.columnName = configs.columnName;
+      this.columnLabel = configs.columnLabel;
+      await this.ezPopoverElement.show(this.TOP_POSITION, configs.leftPosition);
+    }
+  }
+  async clearConfigs() {
+    var _a;
+    await ((_a = this.ezMultiSelectionList) === null || _a === void 0 ? void 0 : _a.clearFilteredOptions());
+    this.options = null;
+    this.columnName = null;
+  }
+  canShow(configs) {
+    return !this.ezPopoverElement.opened || configs.columnName !== this.columnName;
+  }
+  submit() {
+    this.applyFilterColumnOptions.emit({ field: this.columnName, values: this.selectedItems });
+    windowInstace.dispatchEvent(onSubmitFilter);
+    this.hide();
+  }
+  changeSelectedItems(items) {
+    this.selectedItems = items;
+  }
+  hasToUseOptions() {
+    return this.fieldDescriptor.userInterface === UserInterface.OPTIONSELECTOR
+      || this.fieldDescriptor.userInterface === UserInterface.SWITCH
+      || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
+  }
+  isCheckBoxOrSwitch() {
+    return this.fieldDescriptor.userInterface === UserInterface.SWITCH
+      || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
+  }
+  setOptions(selectedItems) {
+    const validateFieldUserInterfaceOptionSelector = this.hasToUseOptions();
+    this.useOptions = validateFieldUserInterfaceOptionSelector;
+    this.options = validateFieldUserInterfaceOptionSelector ? this.buildOptions(selectedItems) : (selectedItems !== null && selectedItems !== void 0 ? selectedItems : null);
+  }
+  buildOptions(selectedItems) {
+    var _a, _b;
+    if (selectedItems && selectedItems.length > 0) {
+      return selectedItems;
+    }
+    if (this.isCheckBoxOrSwitch()) {
+      return [
+        { label: "Sim", value: "true", check: true },
+        { label: "Não", value: "false", check: true }
+      ];
+    }
+    const optionsObject = JSON.parse((_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.options);
+    const objectKeys = Object.keys(optionsObject);
+    return objectKeys.map(key => {
+      return { label: optionsObject[key], value: key, check: true };
+    });
+  }
+  handleEzVisibilityChange(event) {
+    if (event.detail === false) {
+      this.clearConfigs();
+    }
+  }
+  render() {
+    return (h("ez-popover", { class: "filter-column__popover", "overlay-type": "none", ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: "filter-column" }, h("header", { class: "filter-column__header" }, h("span", { class: "ez-text ez-text--medium filter-column__header-title" }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: "icon", "icon-name": "close", class: "ez-button--tertiary", onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail) }), h("footer", { class: "filter-column__footer" }, h("ez-button", { label: "Aplicar", class: "ez-button--primary", onClick: this.submit.bind(this) })))));
+  }
+  static get is() { return "filter-column"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["filter-column.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["filter-column.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "opened": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "opened",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "columnName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "column-name",
+        "reflect": false
+      },
+      "columnLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "column-label",
+        "reflect": false
+      },
+      "dataSource": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IMultiSelectionListDataSource",
+          "resolved": "IMultiSelectionListDataSource",
+          "references": {
+            "IMultiSelectionListDataSource": {
+              "location": "import",
+              "path": "../../ez-multi-selection-list/interfaces/IMultiSelectionListDataSource"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IMultiSelectionOption[]",
+          "resolved": "IMultiSelectionOption[]",
+          "references": {
+            "IMultiSelectionOption": {
+              "location": "import",
+              "path": "../../ez-multi-selection-list/interfaces/IMultiSelectionOption"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedItems": {},
+      "fieldDescriptor": {},
+      "useOptions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "applyFilterColumnOptions",
+        "name": "applyFilterColumnOptions",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IAppliedFilterColumnOptions",
+          "resolved": "IAppliedFilterColumnOptions",
+          "references": {
+            "IAppliedFilterColumnOptions": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "show": {
+        "complexType": {
+          "signature": "(configs: IFilterColumnConfigs) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IFilterColumnConfigs": {
+              "location": "local"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Abre o filtro de coluna.",
+          "tags": [{
+              "name": "Params",
+              "text": "IFilterColumnConfigs informa\u00E7\u00F5es para configurar o filtro"
+            }]
+        }
+      }
+    };
+  }
+}

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

@@ -335,7 +335,6 @@ p {
 .items-container {
   width: 100%;
   max-height: 100%;
-  overflow-y: auto;
   outline: none;
   scrollbar-width: thin;