@sankhyalabs/ezui 5.22.0-dev.12 → 5.22.0-dev.121

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, ApplicationContext, KeyboardManager, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { Host, h } from '@stencil/core';
 import { ApplicationUtils } from '../../utils';
@@ -25,6 +25,8 @@ export class EzGrid {
     this._selectionCount = undefined;
     this._hasLeftButtons = false;
     this._customFormatters = new Map();
+    this.enableLockManagerLoadingComp = false;
+    this.enableLockManagerTaskbarClick = true;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -36,6 +38,13 @@ export class EzGrid {
     this.recordsValidator = undefined;
     this.canEdit = true;
     this.autoFocus = true;
+    this.paginationCounterMode = 'show';
+    this.enableGridInsert = false;
+    this.enableContinuousInsert = true;
+    this.suppressCheckboxColumn = false;
+    this.outlineMode = false;
+    this.enableRowTableStriped = true;
+    this.compact = false;
   }
   /**
    * Aplica a definição de colunas.
@@ -160,10 +169,23 @@ export class EzGrid {
   async setFocus() {
     this._gridController.setFocus();
   }
+  /**
+   * Para a edição da grade.
+   */
+  async stopEdit() {
+    this._gridController.stopEdit();
+  }
+  async checkStopEditOutsideClick(event) {
+    var _a;
+    if ((_a = this._container) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+      return;
+    this._gridController.stopEdit();
+  }
   observeConfig(config) {
     this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
   }
   updatePaginationTooltip() {
+    this.handleShowCancelPagination();
     if (!this._refPaginationLabelTooltip)
       return;
     const alreadyDefined = this._refPaginationLabelTooltip.getAttribute('data-tooltip');
@@ -171,12 +193,23 @@ export class EzGrid {
       this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
     }
   }
+  observePaginationCounterMode(newValue) {
+    if (newValue === 'hidden') {
+      this._hidePaginationDescription();
+    }
+    if (newValue === 'show') {
+      this._showPaginationDescription();
+    }
+  }
   onSelectionChange(evt) {
     this._currentPageSelected = evt.detail.selectionHeaderStatus === true;
     if (this.dataUnit) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
   }
+  async handleClick(event) {
+    this.checkStopEditOutsideClick(event);
+  }
   setSelection(selectionInfo) {
     var _a;
     this._selectionCount = (_a = selectionInfo === null || selectionInfo === void 0 ? void 0 : selectionInfo.length) !== null && _a !== void 0 ? _a : 0;
@@ -329,18 +362,57 @@ export class EzGrid {
         .then(() => this.resetPaginationState());
     }
   }
+  nextRecord() {
+    if (this.dataUnit) {
+      if (this.dataUnit.getSelectionInfo().records.length === 0) {
+        this.dataUnit.selectFirst();
+        return;
+      }
+      this.dataUnit.nextRecord();
+    }
+  }
+  previousRecord() {
+    if (this.dataUnit) {
+      this.dataUnit.previousRecord();
+    }
+  }
   resetPaginationState() {
     var _a;
     this._paginationChangedByKeyboard = false;
-    (_a = this._gridApi) === null || _a === void 0 ? void 0 : _a.clearRangeSelection();
+    (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
+  }
+  resolvePaginationClassMode() {
+    if (this.paginationCounterMode == 'show')
+      return "pagination-expanded";
+    return "pagination-contracted";
+  }
+  async handleCancelPagination() {
+    var _a;
+    this.dataUnit.cancelPagination = true;
+    await ((_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide());
+  }
+  renderCancelPagination() {
+    return (h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": 'none', autoClose: false }, h("div", { class: 'cancel-pagination' }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), h("span", { onClick: () => this.handleCancelPagination(), class: 'cancel-pagination-btn' }, "Cancelar pagina\u00E7\u00E3o"))));
+  }
+  handleShowCancelPagination() {
+    var _a, _b, _c;
+    if (!this._hasToShowCancelPagination()) {
+      (_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide();
+      return;
+    }
+    if ((_b = this._cancelPaginationPopoverElement) === null || _b === void 0 ? void 0 : _b.opened)
+      return;
+    (_c = this._cancelPaginationPopoverElement) === null || _c === void 0 ? void 0 : _c.show("15px");
   }
   getPaginationControl() {
     if (!this._paginationInfo)
       return null;
     const { currentPage, hasMore } = this._paginationInfo;
-    return (h("div", { class: "grid-header__container grid-header__pagination", ref: ref => (this._refPaginationControl = ref) }, h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this._getRemainingPageLabel())), h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium" }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+    return (h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, this.paginationCounterMode == 'show' && h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.paginationCounterMode == 'show' && this._getRemainingPageLabel())), h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
   }
   componentDidLoad() {
+    const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this.enableLockManagerLoadingComp = (!_application || (_application === null || _application === void 0 ? void 0 : _application.enableLockManagerLoadingApp)) ? this.enableLockManagerLoadingComp : false;
     this._gridController.initDatagrid(this._container, {
       onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
@@ -362,11 +434,17 @@ export class EzGrid {
       editionIsDisabled: () => !this.canEdit,
       customFormatters: this._customFormatters,
       autoFocus: this.autoFocus,
+      enableGridInsert: this.enableGridInsert,
+      enableContinuousInsert: this.enableContinuousInsert,
+      suppressCheckBoxCol: this.suppressCheckboxColumn,
       onRefresh: () => {
         if (this.dataUnit) {
           this.setSelection(this.dataUnit.getSelectionInfo());
         }
-      }
+      },
+      enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick,
+      enableLockManagerLoadingComp: this.enableLockManagerLoadingComp,
+      enableRowTableStriped: this.enableRowTableStriped,
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -378,7 +456,9 @@ export class EzGrid {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    this._initHeaderOverflowWatcher();
+    if (this.paginationCounterMode === 'auto')
+      this._initHeaderOverflowWatcher();
+    this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
     var _a;
@@ -401,11 +481,18 @@ export class EzGrid {
     const { total, count } = this._paginationInfo;
     return `${total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`}`;
   }
+  _hasToShowCancelPagination() {
+    var _a;
+    const { total, count } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
+    const hasMore = (total === undefined);
+    return !this.dataUnit.cancelPagination && hasMore && count > this.dataUnit.pageSize;
+  }
   _getPaginationTooltip() {
     return this._getActualPageLabel() + this._getRemainingPageLabel();
   }
   _initHeaderOverflowWatcher() {
-    this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
+    if (this._refPaginationControl)
+      this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
   }
   buildOverFlowWatcherParams() {
     return {
@@ -436,8 +523,14 @@ export class EzGrid {
     this._refPaginationLabelTooltip.removeAttribute('data-tooltip');
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
+    (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.destroy();
+    this.removeShortcuts();
+  }
+  connectedCallback() {
+    var _a;
+    (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.registryListeners();
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -454,20 +547,73 @@ export class EzGrid {
   }
   componentDidUpdate() {
     this._gridController.setAutoFocus(this.autoFocus);
-    if (this.dataUnit) {
+    this._gridController.setEnableGridInsert(this.enableGridInsert);
+    this._gridController.setEnableContinuousInsert(this.enableContinuousInsert);
+    if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
   }
   getDataSource() {
-    var _a;
-    return (_a = this.columnfilterDataSource) !== null && _a !== void 0 ? _a : new InMemoryFilterColumnDataSource(this.dataUnit);
+    if (!this.columnfilterDataSource) {
+      this.columnfilterDataSource = new InMemoryFilterColumnDataSource(this.dataUnit);
+    }
+    return this.columnfilterDataSource;
   }
   hideHeader() {
-    return (!!this._element.getAttribute("no-header") && !this._paginationInfo);
+    return !this._hasLeftButtons && !this._paginationInfo;
+  }
+  resolveLeftHeaderClass() {
+    if (this.paginationCounterMode == 'show')
+      return "left__header-expanded";
+    return "left__header-contracted";
+  }
+  async initKeyboardManager() {
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
+    this._keyboardManager
+      .bind("ctrl + .", () => {
+      if (!this._paginationInfo)
+        return;
+      this.nextRecord();
+    }, { description: "Avança para o próximo registro.", element: this._element })
+      .bind("ctrl + ,", () => {
+      if (!this._paginationInfo)
+        return;
+      this.previousRecord();
+    }, { description: "Retorna ao registro anterior.", element: this._element })
+      .bind("ctrl + alt + ArrowLeft", () => {
+      if (!this._paginationInfo)
+        return;
+      const { currentPage } = this._paginationInfo;
+      if (currentPage > 0) {
+        this.previousPage();
+      }
+    }, { description: "Retorna a pagina anterior.", element: this._element })
+      .bind("ctrl + alt + ArrowRight", () => {
+      if (!this._paginationInfo)
+        return;
+      const { hasMore } = this._paginationInfo;
+      if (hasMore) {
+        this.nextPage();
+      }
+    }, { description: "Avança para a próxima página.", element: this._element });
+  }
+  async removeShortcuts() {
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
   }
   render() {
     var _a;
-    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container grid-header__left-container" }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: {
+        'grid__container ez-grid': true,
+        'outline-mode': this.outlineMode,
+        'shadow-mode': !this.outlineMode,
+        'no-padding': this.compact,
+        'header-overlay': !this.hideHeader(),
+      }, ref: elem => (this._container = elem) }), h("div", { class: {
+        'ez-box ez-padding--small grid-header': true,
+        'outline-mode': this.outlineMode,
+        'shadow-mode': !this.outlineMode && !this.hideHeader(),
+      } }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
@@ -486,6 +632,42 @@ export class EzGrid {
   static get assetsDirs() { return ["../assets"]; }
   static get properties() {
     return {
+      "enableLockManagerLoadingComp": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente deve usar o LockManager para controle de carregamento da aplica\u00E7\u00E3o"
+        },
+        "attribute": "enable-lock-manager-loading-comp",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableLockManagerTaskbarClick": {
+        "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 pela Taskbar."
+        },
+        "attribute": "enable-lock-manager-taskbar-click",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "multipleSelection": {
         "type": "boolean",
         "mutable": false,
@@ -697,6 +879,132 @@ export class EzGrid {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "paginationCounterMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'show' | 'hidden' | 'auto'",
+          "resolved": "\"auto\" | \"hidden\" | \"show\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se a grid ser\u00E1 focada ao ser carregada."
+        },
+        "attribute": "pagination-counter-mode",
+        "reflect": false,
+        "defaultValue": "'show'"
+      },
+      "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"
+      },
+      "suppressCheckboxColumn": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Informa se a coluna de chechbox deve ser suprimida"
+        },
+        "attribute": "suppress-checkbox-column",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "outlineMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Altera visualmente as sombras e bordas do componente\nQuando false, aplica o padr\u00E3o de sombras ao componente (Utilizar quando for o elemento principal do layout)\nQuando true, aplica o padr\u00E3o de outline ao componente (Utilizar quando estiver contido em outro elemento como um painel ou pop-up)"
+        },
+        "attribute": "outline-mode",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableRowTableStriped": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Ativa modo de linhas com cores alternadas."
+        },
+        "attribute": "enable-row-table-striped",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "compact": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se a grade deve ser exibida em modo compacto"
+        },
+        "attribute": "compact",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -1201,6 +1509,47 @@ export class EzGrid {
           "text": "Atribui o foco para a grade.",
           "tags": []
         }
+      },
+      "stopEdit": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Para a edi\u00E7\u00E3o da grade.",
+          "tags": []
+        }
+      },
+      "checkStopEditOutsideClick": {
+        "complexType": {
+          "signature": "(event: MouseEvent) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "MouseEvent": {
+              "location": "global"
+            },
+            "Node": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
@@ -1212,6 +1561,9 @@ export class EzGrid {
       }, {
         "propName": "_paginationInfo",
         "methodName": "updatePaginationTooltip"
+      }, {
+        "propName": "paginationCounterMode",
+        "methodName": "observePaginationCounterMode"
       }];
   }
   static get listeners() {
@@ -1221,6 +1573,12 @@ export class EzGrid {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
       }];
   }
 }

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

@@ -31,4 +31,8 @@
 
 .filter-column__header-title {
   margin-left: 8px;
+}
+
+#filter-column-selection-list {
+  --ez-multi-selection-default-height: unset;
 }

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

@@ -1,5 +1,6 @@
 import { UserInterface } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
+import { PRESENTATION_FROM_COL_PROP_NAME } from '../../../utils/constants';
 const windowInstace = window;
 const onSubmitFilter = new CustomEvent('onSubmitFilter', {
   detail: {
@@ -8,13 +9,6 @@ const onSubmitFilter = new CustomEvent('onSubmitFilter', {
 });
 export class FilterColumn {
   constructor() {
-    this.TOP_POSITION = '65';
-    this.TOP_POSITION_HEADER_HIDDEN = '18';
-    this.TOP_POSITION_NO_TASKBAR = '32';
-    this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
-    this.DEFAULT_HEIGHT = 430;
-    this.FIX_MARGIN = 60;
-    this.FILTER_COLUMN_WIDTH = 330;
     this.opened = true;
     this.columnName = undefined;
     this.columnLabel = undefined;
@@ -37,57 +31,22 @@ export class FilterColumn {
    * @Params IFilterColumnConfigs informações para configurar o filtro
    */
   async show(configs) {
+    var _a;
     if (this.canShow(configs)) {
       await this.hide();
-      this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
+      this.fieldDescriptor = (_a = configs.fieldDescriptor) !== null && _a !== void 0 ? _a : this.dataUnit.getField(configs.columnName);
       this.buildIsTextSearch();
       this.columnName = configs.columnName;
       this.columnLabel = configs.columnLabel;
-      await this.setOptions(configs.filteredOptions);
-      await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
-    }
-  }
-  calculateLeftPosition({ leftPosition, fromIcon }) {
-    const leftPositionCalculated = this.calcFilterColumnLeftPosition(leftPosition);
-    if (!fromIcon) {
-      return `${leftPositionCalculated}px`;
+      await this.setOptions(configs);
+      await this.ezPopoverElement.showUnder(`filter-column-${configs.columnName}-${this.dataUnit.dataUnitId}`);
     }
-    const difference = this.ezPopoverElement.getBoundingClientRect().left;
-    const leftResolved = (leftPositionCalculated + 16) - difference;
-    return `${(leftResolved > 0 ? leftResolved : 0)}px`;
-  }
-  calcFilterColumnLeftPosition(leftReference) {
-    var _a, _b;
-    const gridReference = this.ezPopoverElement.closest("ez-grid");
-    const gridLimit = (_a = gridReference.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.right;
-    const popoverDiff = (_b = this.ezPopoverElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left;
-    const maxLeft = gridLimit - (this.FILTER_COLUMN_WIDTH + popoverDiff);
-    const leftInt = leftReference - (this.FIX_MARGIN + popoverDiff);
-    return leftInt > maxLeft ? maxLeft : leftInt;
   }
   buildIsTextSearch() {
     var _a, _b;
     const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;
     this.isTextSearch = !(userInterface === UserInterface.DECIMALNUMBER || userInterface === UserInterface.INTEGERNUMBER);
   }
-  calcTopPosition() {
-    const referencePosition = this.buildReferenceTopPosition();
-    const totalPopoverHeight = parseInt(referencePosition) + this.DEFAULT_HEIGHT;
-    const popoverPosition = Math.round(this.ezPopoverElement.getBoundingClientRect().top);
-    const popoverBottomPosition = popoverPosition + totalPopoverHeight;
-    const windowHeight = window.innerHeight;
-    if (windowHeight > popoverBottomPosition) {
-      return `${referencePosition}px`;
-    }
-    const differenceBetween = windowHeight - popoverBottomPosition;
-    return `${differenceBetween}px`;
-  }
-  buildReferenceTopPosition() {
-    if (this.noHeaderTaskBar) {
-      return this.gridHeaderHidden ? this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN : this.TOP_POSITION_NO_TASKBAR;
-    }
-    return this.gridHeaderHidden ? this.TOP_POSITION_HEADER_HIDDEN : this.TOP_POSITION;
-  }
   async clearConfigs() {
     var _a;
     await ((_a = this.ezMultiSelectionList) === null || _a === void 0 ? void 0 : _a.clearFilteredOptions());
@@ -117,14 +76,22 @@ export class FilterColumn {
     return this.fieldDescriptor.userInterface === UserInterface.SWITCH
       || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
   }
-  async setOptions(selectedItems) {
+  async setOptions(config) {
+    var _a, _b, _c, _d;
+    const selectedItems = config.filteredOptions;
     const validateFieldUserInterfaceOptionSelector = this.hasToUseOptions();
     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);
+    let colName = this.columnName;
+    const staticOptionsConfig = { onlyLabel: false };
+    if ((_b = (_a = config.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_FROM_COL_PROP_NAME]) {
+      colName = (_d = (_c = config.fieldDescriptor) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d[PRESENTATION_FROM_COL_PROP_NAME];
+      staticOptionsConfig.onlyLabel = true;
+    }
+    const options = await this.dataSource.getStaticOptions(colName, staticOptionsConfig);
     if (options != undefined) {
       const selected = new Set((selectedItems || []).filter(item => item.check).map(item => item.label));
       this.useOptions = true;
@@ -145,7 +112,13 @@ export class FilterColumn {
         { 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 options = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.options;
+    if (Array.isArray(options)) {
+      return options.map((option) => {
+        return { label: option.value, value: option.value, check: true };
+      });
+    }
+    const optionsObject = JSON.parse(options);
     const objectKeys = Object.keys(optionsObject);
     return objectKeys.map(key => {
       return { label: optionsObject[key], value: key, check: true };
@@ -157,7 +130,7 @@ export class FilterColumn {
     }
   }
   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), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
+    return (h("ez-popover-plus", { ref: (element) => (this.ezPopoverElement = element), class: 'filter-column__popover', "overlay-type": 'none', 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", { id: 'filter-column-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), isTextSearch: this.isTextSearch }), 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() {