@sankhyalabs/ezui 4.16.0 → 4.17.0

package/dist/cjs/ez-combo-box.cjs.entry.js

@@ -118,10 +118,7 @@ const EzComboBox = class {
     if (!this.showSelectedValue || currentValue.value == undefined) {
       return currentValue.label;
     }
-    if (!currentValue.label) {
-      return;
-    }
-    return `${currentValue.value} - ${currentValue.label}`;
+    return currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
   }
   getText() {
     const currentValue = this.getSelectedOption(this.value);
@@ -184,7 +181,7 @@ const EzComboBox = class {
   }
   buildItem(opt, index$1) {
     const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
-    opt.label = opt.label || (opt.value ? `<SEM ${this.getFieldLabel()}>` : "");
+    opt.label = opt.label || opt.value;
     return index.h("li", { class: index$1 === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index$1 }, this.showOptionValue
       ? index.h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
       : undefined, index.h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
@@ -355,10 +352,7 @@ const EzComboBox = class {
     }
     let value = this.value;
     if (typeof value === "object") {
-      if (!core.StringUtils.isEmpty(value.label)) {
-        return;
-      }
-      value = value.value;
+      return;
     }
     if (core.StringUtils.isEmpty(value)) {
       return;
@@ -397,9 +391,6 @@ const EzComboBox = class {
       this.showNoResultMessage();
       return;
     }
-    if (!value.label) {
-      value.label = `<SEM ${this.getFieldLabel()}>`;
-    }
     this._lookupMode = true;
     this.value = value;
   }

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,84 @@ 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-up' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: 14px;align-self: center;'></i>
+            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: 14px;align-self: center;'></i>
+          </div>
+    `;
+    this.configMenuClick();
+    this.configSortClick();
+    this.configSortListener();
+    this.configFilterButton();
+  }
+  refresh(agParams) {
+    this.params = agParams;
+    this.configFilterButton();
+  }
+  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);
+  }
+  onSortChanged() {
+    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.onSortChanged.bind(this);
+      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
+    }
+  }
+  onSortClick(event) {
+    this.params.progressSort(event.shiftKey);
+  }
+  configSortClick() {
+    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;
@@ -119170,7 +119233,8 @@ class AgGridController {
           cellClass: "ez-grid__cell-body"
         },
         components: {
-          'ezGridHeaderComponent': SelectionHeader
+          'ezGridHeaderComponent': SelectionHeader,
+          'ezGridCustomHeader': EzGridCustomHeader,
         },
         context: {
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
@@ -119537,6 +119601,12 @@ class AgGridController {
     var _a;
     (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
   }
+  hasFilterColumn(_columnName) {
+    return false;
+  }
+  showColumnFilter() {
+    //TODO: Implementar apresentação dos filtros
+  }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
@@ -119552,8 +119622,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);

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -106,10 +106,7 @@ export class EzComboBox {
     if (!this.showSelectedValue || currentValue.value == undefined) {
       return currentValue.label;
     }
-    if (!currentValue.label) {
-      return;
-    }
-    return `${currentValue.value} - ${currentValue.label}`;
+    return currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
   }
   getText() {
     const currentValue = this.getSelectedOption(this.value);
@@ -172,7 +169,7 @@ export class EzComboBox {
   }
   buildItem(opt, index) {
     const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
-    opt.label = opt.label || (opt.value ? `<SEM ${this.getFieldLabel()}>` : "");
+    opt.label = opt.label || opt.value;
     return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index }, this.showOptionValue
       ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
       : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
@@ -343,10 +340,7 @@ export class EzComboBox {
     }
     let value = this.value;
     if (typeof value === "object") {
-      if (!StringUtils.isEmpty(value.label)) {
-        return;
-      }
-      value = value.value;
+      return;
     }
     if (StringUtils.isEmpty(value)) {
       return;
@@ -385,9 +379,6 @@ export class EzComboBox {
       this.showNoResultMessage();
       return;
     }
-    if (!value.label) {
-      value.label = `<SEM ${this.getFieldLabel()}>`;
-    }
     this._lookupMode = true;
     this.value = value;
   }

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;
@@ -75,7 +75,8 @@ export default class AgGridController {
           cellClass: "ez-grid__cell-body"
         },
         components: {
-          'ezGridHeaderComponent': SelectionHeader
+          'ezGridHeaderComponent': SelectionHeader,
+          'ezGridCustomHeader': EzGridCustomHeader,
         },
         context: {
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
@@ -442,6 +443,12 @@ 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;
+  }
+  showColumnFilter() {
+    //TODO: Implementar apresentação dos filtros
+  }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
@@ -457,8 +464,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,77 @@
+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-up' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: 14px;align-self: center;'></i>
+            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: 14px;align-self: center;'></i>
+          </div>
+    `;
+    this.configMenuClick();
+    this.configSortClick();
+    this.configSortListener();
+    this.configFilterButton();
+  }
+  refresh(agParams) {
+    this.params = agParams;
+    this.configFilterButton();
+  }
+  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);
+  }
+  onSortChanged() {
+    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.onSortChanged.bind(this);
+      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
+    }
+  }
+  onSortClick(event) {
+    this.params.progressSort(event.shiftKey);
+  }
+  configSortClick() {
+    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/custom-elements/index.js

@@ -2174,10 +2174,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     if (!this.showSelectedValue || currentValue.value == undefined) {
       return currentValue.label;
     }
-    if (!currentValue.label) {
-      return;
-    }
-    return `${currentValue.value} - ${currentValue.label}`;
+    return currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
   }
   getText() {
     const currentValue = this.getSelectedOption(this.value);
@@ -2240,7 +2237,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   }
   buildItem(opt, index) {
     const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
-    opt.label = opt.label || (opt.value ? `<SEM ${this.getFieldLabel()}>` : "");
+    opt.label = opt.label || opt.value;
     return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index }, this.showOptionValue
       ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
       : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
@@ -2411,10 +2408,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     }
     let value = this.value;
     if (typeof value === "object") {
-      if (!StringUtils$1.isEmpty(value.label)) {
-        return;
-      }
-      value = value.value;
+      return;
     }
     if (StringUtils$1.isEmpty(value)) {
       return;
@@ -2453,9 +2447,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
       this.showNoResultMessage();
       return;
     }
-    if (!value.label) {
-      value.label = `<SEM ${this.getFieldLabel()}>`;
-    }
     this._lookupMode = true;
     this.value = value;
   }
@@ -123378,21 +123369,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__";
@@ -123578,6 +123554,84 @@ 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-up' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: 14px;align-self: center;'></i>
+            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: 14px;align-self: center;'></i>
+          </div>
+    `;
+    this.configMenuClick();
+    this.configSortClick();
+    this.configSortListener();
+    this.configFilterButton();
+  }
+  refresh(agParams) {
+    this.params = agParams;
+    this.configFilterButton();
+  }
+  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);
+  }
+  onSortChanged() {
+    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.onSortChanged.bind(this);
+      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
+    }
+  }
+  onSortClick(event) {
+    this.params.progressSort(event.shiftKey);
+  }
+  configSortClick() {
+    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;
@@ -123647,7 +123701,8 @@ class AgGridController {
           cellClass: "ez-grid__cell-body"
         },
         components: {
-          'ezGridHeaderComponent': SelectionHeader
+          'ezGridHeaderComponent': SelectionHeader,
+          'ezGridCustomHeader': EzGridCustomHeader,
         },
         context: {
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
@@ -124014,6 +124069,12 @@ class AgGridController {
     var _a;
     (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
   }
+  hasFilterColumn(_columnName) {
+    return false;
+  }
+  showColumnFilter() {
+    //TODO: Implementar apresentação dos filtros
+  }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
@@ -124029,8 +124090,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);

package/dist/esm/ez-combo-box.entry.js

@@ -114,10 +114,7 @@ const EzComboBox = class {
     if (!this.showSelectedValue || currentValue.value == undefined) {
       return currentValue.label;
     }
-    if (!currentValue.label) {
-      return;
-    }
-    return `${currentValue.value} - ${currentValue.label}`;
+    return currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
   }
   getText() {
     const currentValue = this.getSelectedOption(this.value);
@@ -180,7 +177,7 @@ const EzComboBox = class {
   }
   buildItem(opt, index) {
     const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
-    opt.label = opt.label || (opt.value ? `<SEM ${this.getFieldLabel()}>` : "");
+    opt.label = opt.label || opt.value;
     return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index }, this.showOptionValue
       ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
       : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
@@ -351,10 +348,7 @@ const EzComboBox = class {
     }
     let value = this.value;
     if (typeof value === "object") {
-      if (!StringUtils.isEmpty(value.label)) {
-        return;
-      }
-      value = value.value;
+      return;
     }
     if (StringUtils.isEmpty(value)) {
       return;
@@ -393,9 +387,6 @@ const EzComboBox = class {
       this.showNoResultMessage();
       return;
     }
-    if (!value.label) {
-      value.label = `<SEM ${this.getFieldLabel()}>`;
-    }
     this._lookupMode = true;
     this.value = value;
   }