@sankhyalabs/ezui 4.16.1 → 4.18.0

package/dist/cjs/ez-grid.cjs.entry.js

@@ -118901,21 +118901,6 @@ const gridTerms = {
   ctrlV: "Ctrl+V"
 };
 
-const HeaderColumnTemplate = `<div class="ag-cell-label-container" role="presentation" title="{{HEADER_TITLE}}">
-    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
-    <div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
-        <span ref="eText" class="ag-header-cell-text" unselectable="on"></span>
-        <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true"></span>
-        <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"></span>
-        <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"></span>
-        <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon ag-hidden" aria-hidden="true"></span>
-    </div>
-</div>`;
-
-function getHeaderColumnTemplate(headerTooltip = "") {
-    return HeaderColumnTemplate.replaceAll("{{HEADER_TITLE}}", headerTooltip)
-}
-
 class DataSource {
   constructor(dataUnit, controller, options) {
     this.RECORD_ARCHIVE = "__RECORD_ARCHIVE__";
@@ -119101,6 +119086,88 @@ class SelectionHeader {
   }
 }
 
+class EzGridCustomHeader {
+  init(agParams) {
+    var _a;
+    this.params = agParams;
+    this.element = document.createElement('div');
+    this.element.classList.add('ag-cell-label-container');
+    this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
+    this.element.innerHTML = `
+          <div class='ez-flex ez-flex--justify-between'>
+            <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
+            <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
+          </div>
+          <div id='ez-header-container' class='ez-flex ez-flex--justify-between ag-header-cell-text'>
+            <span class='ag-header-cell-text'>${this.params.displayName}</span>
+            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
+            <i id='ez-grid-sort-icon-up' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
+          </div>
+    `;
+    this.configMenuClick();
+    this.configSortClick();
+    this.configSortListener();
+    this.configFilterButton();
+  }
+  refresh(agParams) {
+    this.params = agParams;
+    this.configFilterButton();
+    this.configSortIcon();
+  }
+  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.filterButton.addEventListener('click', this.onFilterButtonClickListener);
+  }
+  configSortIcon() {
+    this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
+    this.sortUpIcon.style.display = this.params.column.isSortAscending() ? 'flex' : 'none';
+  }
+  configSortListener() {
+    if (this.params.enableSorting) {
+      this.sortUpIcon = this.element.querySelector('#ez-grid-sort-icon-up');
+      this.sortDownIcon = this.element.querySelector('#ez-grid-sort-icon-down');
+      this.onSortChangedListener = this.configSortIcon.bind(this);
+      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
+      this.configSortIcon();
+    }
+  }
+  onSortClick(event) {
+    this.params.progressSort(event.shiftKey);
+  }
+  configSortClick() {
+    if (this.params.column.getColDef().sortable) {
+      this.headerContainer = this.element.querySelector('#ez-header-container');
+      this.onSortClickListener = this.onSortClick.bind(this);
+      this.headerContainer.addEventListener('click', this.onSortClickListener);
+    }
+  }
+  onMenuClick() {
+    this.params.showColumnMenu(this.menuButton);
+  }
+  configMenuClick() {
+    this.menuButton = this.element.querySelector('#ez-grid-menu-icon');
+    this.onMenuClickListener = this.onMenuClick.bind(this);
+    this.menuButton.addEventListener('click', this.onMenuClickListener);
+  }
+  getGui() {
+    return this.element;
+  }
+  destroy() {
+    if (this.onMenuClickListener) {
+      this.menuButton.removeEventListener('click', this.onMenuClickListener);
+    }
+    if (this.onSortClickListener) {
+      this.headerContainer.removeEventListener('click', this.onSortClickListener);
+    }
+    if (this.onFilterButtonClickListener) {
+      this.filterButton.removeEventListener('click', this.onFilterButtonClickListener);
+    }
+    this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
+  }
+}
+
 class AgGridController {
   constructor(enterprise) {
     this.DEFAULT_ROW_HEIGHT = 30;
@@ -119155,22 +119222,15 @@ class AgGridController {
         blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,
         navigateToNextCell: this.navigateToNextCell.bind(this),
         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"];
-          this._menuItems.forEach(m => items.push({
-            name: m.label,
-            action: () => m.action(column.getColId(), m.name)
-          }));
-          return items;
-        },
+        getMainMenuItems: (params) => this.buildMenuItemOptions(params),
         getRowHeight: this.getRowHeight.bind(this),
         defaultColDef: {
           headerClass: "ez-grid__cell-header",
           cellClass: "ez-grid__cell-body"
         },
         components: {
-          'ezGridHeaderComponent': SelectionHeader
+          'ezGridHeaderComponent': SelectionHeader,
+          'ezGridCustomHeader': EzGridCustomHeader,
         },
         context: {
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
@@ -119196,6 +119256,69 @@ class AgGridController {
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
     }
   }
+  buildMenuItemOptions(params) {
+    const col = params.column;
+    const items = [];
+    if (col.getColDef().sortable) {
+      items.push(this.buildMenuItemOptionSort(params, 'asc'));
+      items.push(this.buildMenuItemOptionSort(params, 'desc'));
+    }
+    /*
+        TODO: Adicionar quando filtro de colunar estiver finalizado.
+        items.push(this.buildMenuItemFilterColumn(params));
+    */
+    this._menuItems.forEach(m => items.push({
+      icon: m.icon,
+      name: m.label,
+      action: () => m.action(params),
+    }));
+    items.push(this.buildMenuItemOptionPin(params));
+    return items;
+  }
+  buildMenuItemOptionSort(params, sortOrder) {
+    return {
+      icon: `<div style="${sortOrder === "asc" ? 'transform: rotate(180deg); position: relative; top: -4px;' : ''}"><i class='ez-icon-arrow_downward'></i></div>`,
+      name: sortOrder === "asc" ? "Ordenar Ascendente" : "Ordenar Descendente",
+      action: () => this.sortDataByColumn(params, sortOrder)
+    };
+  }
+  /*
+  TODO: Voltar função quando for implementado o filtro de coluna
+  private buildMenuItemFilterColumn( _params: GetMainMenuItemsParams): MenuItemDef{
+      return {
+          icon: `<i class='ez-icon-filter'></i>`,
+          name: "Filtrar",
+          action: () => window.alert("Abrir popover de filtro")
+      }
+  }*/
+  buildMenuItemOptionPin(params) {
+    const { column, columnApi } = params;
+    const isPinned = params.column.isPinned();
+    return {
+      icon: `<i class='ez-icon-${isPinned ? 'un-pin' : 'push-pin'}'></i>`,
+      name: isPinned ? "Desafixar coluna" : "Fixar coluna",
+      action: () => {
+        columnApi.applyColumnState({
+          state: [{ colId: column.getColId(), pinned: column.isPinned() ? null : 'left' }],
+        });
+      }
+    };
+  }
+  sortDataByColumn(params, order) {
+    const col = params.column;
+    const colApi = params.columnApi;
+    if (col.getSort() === order) {
+      colApi.applyColumnState({
+        defaultState: { sort: null },
+      });
+    }
+    else {
+      colApi.applyColumnState({
+        state: [{ colId: col.getColId(), sort: order }],
+        defaultState: { sort: null },
+      });
+    }
+  }
   getRowHeight() {
     return this.DEFAULT_ROW_HEIGHT;
   }
@@ -119516,7 +119639,10 @@ class AgGridController {
     return this._gridOptions.api.getSelectedRows();
   }
   addColumnMenuItem(item) {
-    this._menuItems.push(item);
+    const itemsNames = this._menuItems.map(i => i.name);
+    if (!itemsNames.includes(item.name)) {
+      this._menuItems.push(item);
+    }
   }
   quickFilter(term) {
     if (term) {
@@ -119537,6 +119663,14 @@ class AgGridController {
     var _a;
     (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
   }
+  hasFilterColumn(_columnName) {
+    return false; //TODO: substituir pelo state dos filtros de colunas
+  }
+  showColumnFilter() {
+    /*
+    TODO: Implementar chamada para apresentar filtro de coluna na grid
+    */
+  }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
@@ -119552,8 +119686,11 @@ class AgGridController {
       field: source.name,
       sortable: propSortable,
       resizable: true,
+      headerComponent: 'ezGridCustomHeader',
       headerComponentParams: {
-        template: getHeaderColumnTemplate(tooltip)
+        tooltip: tooltip,
+        hasFilter: () => this.hasFilterColumn(source.name),
+        showColumnFilter: () => this.showColumnFilter()
       },
       valueFormatter: params => {
         return this.getFormatterByColumn(params, source);
@@ -119774,8 +119911,8 @@ const EzGrid = class {
   /**
    * Adiciona item de menu nas colunas.
    */
-  async addColumnMenuItem(label, name, action) {
-    this._gridController.addColumnMenuItem({ label, name, action });
+  async addColumnMenuItem(label, name, action, icon) {
+    this._gridController.addColumnMenuItem({ label, name, action, icon });
   }
   /**
    * Aplica o estado das colunas.

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

@@ -2,10 +2,10 @@ import { Grid as EnterpriseGrid, LicenseManager } from "ag-grid-enterprise";
 import { Grid } from "ag-grid-community";
 import { ApplicationContext, DataType, SortMode, UserInterface, NumberUtils, StringUtils } from "@sankhyalabs/core";
 import gridTerms from "./i18n/pt-BR.js";
-import getHeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
 import DataSource from "./DataSource";
 import { CellRendererStatus } from "./components/cellRendererStatus";
 import SelectionHeader from "./components/selectionHeader";
+import { EzGridCustomHeader } from './components/EzGridCustomHeader';
 export default class AgGridController {
   constructor(enterprise) {
     this.DEFAULT_ROW_HEIGHT = 30;
@@ -60,22 +60,15 @@ export default class AgGridController {
         blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,
         navigateToNextCell: this.navigateToNextCell.bind(this),
         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"];
-          this._menuItems.forEach(m => items.push({
-            name: m.label,
-            action: () => m.action(column.getColId(), m.name)
-          }));
-          return items;
-        },
+        getMainMenuItems: (params) => this.buildMenuItemOptions(params),
         getRowHeight: this.getRowHeight.bind(this),
         defaultColDef: {
           headerClass: "ez-grid__cell-header",
           cellClass: "ez-grid__cell-body"
         },
         components: {
-          'ezGridHeaderComponent': SelectionHeader
+          'ezGridHeaderComponent': SelectionHeader,
+          'ezGridCustomHeader': EzGridCustomHeader,
         },
         context: {
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
@@ -101,6 +94,69 @@ export default class AgGridController {
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
     }
   }
+  buildMenuItemOptions(params) {
+    const col = params.column;
+    const items = [];
+    if (col.getColDef().sortable) {
+      items.push(this.buildMenuItemOptionSort(params, 'asc'));
+      items.push(this.buildMenuItemOptionSort(params, 'desc'));
+    }
+    /*
+        TODO: Adicionar quando filtro de colunar estiver finalizado.
+        items.push(this.buildMenuItemFilterColumn(params));
+    */
+    this._menuItems.forEach(m => items.push({
+      icon: m.icon,
+      name: m.label,
+      action: () => m.action(params),
+    }));
+    items.push(this.buildMenuItemOptionPin(params));
+    return items;
+  }
+  buildMenuItemOptionSort(params, sortOrder) {
+    return {
+      icon: `<div style="${sortOrder === "asc" ? 'transform: rotate(180deg); position: relative; top: -4px;' : ''}"><i class='ez-icon-arrow_downward'></i></div>`,
+      name: sortOrder === "asc" ? "Ordenar Ascendente" : "Ordenar Descendente",
+      action: () => this.sortDataByColumn(params, sortOrder)
+    };
+  }
+  /*
+  TODO: Voltar função quando for implementado o filtro de coluna
+  private buildMenuItemFilterColumn( _params: GetMainMenuItemsParams): MenuItemDef{
+      return {
+          icon: `<i class='ez-icon-filter'></i>`,
+          name: "Filtrar",
+          action: () => window.alert("Abrir popover de filtro")
+      }
+  }*/
+  buildMenuItemOptionPin(params) {
+    const { column, columnApi } = params;
+    const isPinned = params.column.isPinned();
+    return {
+      icon: `<i class='ez-icon-${isPinned ? 'un-pin' : 'push-pin'}'></i>`,
+      name: isPinned ? "Desafixar coluna" : "Fixar coluna",
+      action: () => {
+        columnApi.applyColumnState({
+          state: [{ colId: column.getColId(), pinned: column.isPinned() ? null : 'left' }],
+        });
+      }
+    };
+  }
+  sortDataByColumn(params, order) {
+    const col = params.column;
+    const colApi = params.columnApi;
+    if (col.getSort() === order) {
+      colApi.applyColumnState({
+        defaultState: { sort: null },
+      });
+    }
+    else {
+      colApi.applyColumnState({
+        state: [{ colId: col.getColId(), sort: order }],
+        defaultState: { sort: null },
+      });
+    }
+  }
   getRowHeight() {
     return this.DEFAULT_ROW_HEIGHT;
   }
@@ -421,7 +477,10 @@ export default class AgGridController {
     return this._gridOptions.api.getSelectedRows();
   }
   addColumnMenuItem(item) {
-    this._menuItems.push(item);
+    const itemsNames = this._menuItems.map(i => i.name);
+    if (!itemsNames.includes(item.name)) {
+      this._menuItems.push(item);
+    }
   }
   quickFilter(term) {
     if (term) {
@@ -442,6 +501,14 @@ export default class AgGridController {
     var _a;
     (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
   }
+  hasFilterColumn(_columnName) {
+    return false; //TODO: substituir pelo state dos filtros de colunas
+  }
+  showColumnFilter() {
+    /*
+    TODO: Implementar chamada para apresentar filtro de coluna na grid
+    */
+  }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
@@ -457,8 +524,11 @@ export default class AgGridController {
       field: source.name,
       sortable: propSortable,
       resizable: true,
+      headerComponent: 'ezGridCustomHeader',
       headerComponentParams: {
-        template: getHeaderColumnTemplate(tooltip)
+        tooltip: tooltip,
+        hasFilter: () => this.hasFilterColumn(source.name),
+        showColumnFilter: () => this.showColumnFilter()
       },
       valueFormatter: params => {
         return this.getFormatterByColumn(params, source);

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

@@ -0,0 +1,81 @@
+export class EzGridCustomHeader {
+  init(agParams) {
+    var _a;
+    this.params = agParams;
+    this.element = document.createElement('div');
+    this.element.classList.add('ag-cell-label-container');
+    this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
+    this.element.innerHTML = `
+          <div class='ez-flex ez-flex--justify-between'>
+            <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
+            <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
+          </div>
+          <div id='ez-header-container' class='ez-flex ez-flex--justify-between ag-header-cell-text'>
+            <span class='ag-header-cell-text'>${this.params.displayName}</span>
+            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
+            <i id='ez-grid-sort-icon-up' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
+          </div>
+    `;
+    this.configMenuClick();
+    this.configSortClick();
+    this.configSortListener();
+    this.configFilterButton();
+  }
+  refresh(agParams) {
+    this.params = agParams;
+    this.configFilterButton();
+    this.configSortIcon();
+  }
+  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.filterButton.addEventListener('click', this.onFilterButtonClickListener);
+  }
+  configSortIcon() {
+    this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
+    this.sortUpIcon.style.display = this.params.column.isSortAscending() ? 'flex' : 'none';
+  }
+  configSortListener() {
+    if (this.params.enableSorting) {
+      this.sortUpIcon = this.element.querySelector('#ez-grid-sort-icon-up');
+      this.sortDownIcon = this.element.querySelector('#ez-grid-sort-icon-down');
+      this.onSortChangedListener = this.configSortIcon.bind(this);
+      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
+      this.configSortIcon();
+    }
+  }
+  onSortClick(event) {
+    this.params.progressSort(event.shiftKey);
+  }
+  configSortClick() {
+    if (this.params.column.getColDef().sortable) {
+      this.headerContainer = this.element.querySelector('#ez-header-container');
+      this.onSortClickListener = this.onSortClick.bind(this);
+      this.headerContainer.addEventListener('click', this.onSortClickListener);
+    }
+  }
+  onMenuClick() {
+    this.params.showColumnMenu(this.menuButton);
+  }
+  configMenuClick() {
+    this.menuButton = this.element.querySelector('#ez-grid-menu-icon');
+    this.onMenuClickListener = this.onMenuClick.bind(this);
+    this.menuButton.addEventListener('click', this.onMenuClickListener);
+  }
+  getGui() {
+    return this.element;
+  }
+  destroy() {
+    if (this.onMenuClickListener) {
+      this.menuButton.removeEventListener('click', this.onMenuClickListener);
+    }
+    if (this.onSortClickListener) {
+      this.headerContainer.removeEventListener('click', this.onSortClickListener);
+    }
+    if (this.onFilterButtonClickListener) {
+      this.filterButton.removeEventListener('click', this.onFilterButtonClickListener);
+    }
+    this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
+  }
+}

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

@@ -27,8 +27,8 @@ export class EzGrid {
   /**
    * Adiciona item de menu nas colunas.
    */
-  async addColumnMenuItem(label, name, action) {
-    this._gridController.addColumnMenuItem({ label, name, action });
+  async addColumnMenuItem(label, name, action, icon) {
+    this._gridController.addColumnMenuItem({ label, name, action, icon });
   }
   /**
    * Aplica o estado das colunas.
@@ -354,7 +354,7 @@ export class EzGrid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Unidade de dados. Respons\u00E1vel pelo controle de edi\u00E7\u00E3o de registros e \ninforma\u00E7\u00F5es pertinentes aos campos."
+          "text": "Unidade de dados. Respons\u00E1vel pelo controle de edi\u00E7\u00E3o de registros e\ninforma\u00E7\u00F5es pertinentes aos campos."
         }
       },
       "statusResolver": {
@@ -516,7 +516,7 @@ export class EzGrid {
       },
       "addColumnMenuItem": {
         "complexType": {
-          "signature": "(label: string, name: string, action: Function) => Promise<void>",
+          "signature": "(label: string, name: string, action: Function, icon: HTMLElement | string) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -526,6 +526,9 @@ export class EzGrid {
             }, {
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -533,6 +536,9 @@ export class EzGrid {
             },
             "Function": {
               "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"