@sankhyalabs/sankhyablocks 5.6.0 → 5.8.0

package/dist/collection/components/snk-filter-bar/filter-modal/snk-filter-modal.js

@@ -1,66 +1,91 @@
 import { h } from '@stencil/core';
-import { ModalAction, ModalButtonStatus } from "@sankhyalabs/ezui/dist/collection/components/ez-modal-container";
-import { ArrayUtils } from '@sankhyalabs/core';
-import { CheckMode } from "@sankhyalabs/ezui/dist/collection/utils";
+import { ModalAction } from "@sankhyalabs/ezui/dist/collection/components/ez-modal-container";
+import FilterType from '../types/filter-type.enum';
+import FilterItemType from '../filter-item/filter-item-type.enum';
 export class SnkFilterModal {
   constructor() {
-    this._filterArgument = undefined;
     this.getMessage = undefined;
-    this.items = undefined;
-    this.modalTitle = undefined;
-    this.modalSubTitle = undefined;
-    this.cancelButtonLabel = undefined;
-    this.okButtonLabel = undefined;
-    this.infoText = undefined;
-    this.useSearch = undefined;
-    this.processModalAction = undefined;
+    this.filters = undefined;
+    this.applyFilters = undefined;
+    this.clearAll = undefined;
+    this.closeModal = undefined;
   }
-  updateValue(id, value = undefined) {
-    this.items = this.items.map(item => {
-      if (item.id === id && item.enabled) {
-        if (value == undefined) {
-          value = !item.active;
-        }
-        return Object.assign(Object.assign({}, item), { active: value });
-      }
-      return item;
-    });
+  getCustomMessage(key, params) {
+    var _a;
+    return (_a = this.getMessage) === null || _a === void 0 ? void 0 : _a.call(this, `snkFilterBar.filterModal.${key}`, params);
+  }
+  handleClearAll() {
+    const cleanedFilters = this.clearAll(this.filters);
+    this.filters = cleanedFilters;
   }
-  getActiveFiltersMsg() {
-    const activeFilters = this.items.filter(item => item.active).length;
-    if (activeFilters === 0) {
-      return this.getMessage("snkFilterBar.noActiveFilters");
+  modalActionListener(evt) {
+    const modalAction = evt.detail;
+    switch (modalAction) {
+      case ModalAction.CANCEL:
+        this.handleClearAll();
+        break;
+      case ModalAction.OK:
+        this.applyFilters(this.filters);
+      case ModalAction.CLOSE:
+        this.closeModal();
+      default:
+        break;
     }
-    return this.getMessage(activeFilters > 1 ? "snkFilterBar.activeFilters" : "snkFilterBar.activeFilter", { ACTIVE_FILTERS: activeFilters });
   }
-  buildItems(list) {
-    return list.map(item => {
-      return (h("button", { onClick: () => this.updateValue(item.id), class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { id: `checkbox_${item.id}`, tabIndex: -1, class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: CheckMode.SWITCH }), h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)));
-    });
+  handleFilterChange(filterConfig) {
+    this.filters = this.filters.map(filter => filter.id === filterConfig.id ? filterConfig : filter);
   }
-  itemKeyBoardSelect(event, item) {
-    if (event.key === "Enter" || event.key === " ") {
-      this.updateValue(item.id);
-    }
+  handleClearFilters(filterList) {
+    this.filters = this.filters.map(filter => filterList.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
   }
-  modalActionListener(evt) {
-    const modalAction = evt.detail;
-    if (modalAction === ModalAction.LOAD) {
-      if (this._filterInput) {
-        this._filterInput.setFocus();
+  renderFilterItem(filterItem, fullRow) {
+    return (h("snk-filter-modal-item", { class: fullRow ? 'ez-col ez-col--sd-12' : 'ez-col ez-col--sd-6 ez-padding--small', filterItem: filterItem, onFilterChange: (event) => this.handleFilterChange(event.detail) }));
+  }
+  mountFiltersLines(filters) {
+    const MAX_LINE_LENGTH = 2;
+    let currentLine = 0;
+    let forceAddCurrent = false;
+    const filtersLines = {};
+    for (let curr = 0; curr < filters.length; curr++) {
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      const item = filters[curr];
+      const isLast = curr === filters.length - 1;
+      const currentItemMatch = [FilterItemType.TEXT, FilterItemType.NUMBER].includes(item.type);
+      const nextItemMatch = isLast ? false : [FilterItemType.TEXT, FilterItemType.NUMBER].includes(filters[curr + 1].type);
+      if ((currentItemMatch && nextItemMatch) || forceAddCurrent) {
+        filtersLines[currentLine].push(item);
+        forceAddCurrent = filtersLines[currentLine].length < MAX_LINE_LENGTH;
+        if (filtersLines[currentLine].length === MAX_LINE_LENGTH)
+          ++currentLine;
+        continue;
       }
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      filtersLines[currentLine].push(item);
+      ++currentLine;
     }
-    else {
-      this.processModalAction(modalAction);
-    }
+    return Object.values(filtersLines);
+  }
+  renderFilterLine(filters) {
+    const fullLine = filters.length === 1;
+    return (h("div", { class: "ez-row" }, filters.map((filter) => this.renderFilterItem(filter, fullLine))));
+  }
+  renderCollapsibleFilterBox(label, listItems) {
+    if (!listItems.length)
+      return null;
+    const appliedFilters = listItems.filter(filterItem => !!filterItem.value).length;
+    const lines = this.mountFiltersLines(listItems);
+    return (h("ez-collapsible-box", { className: "snk-filter__modal-collapsible-box", headerSize: "medium", value: true, label: label }, !!appliedFilters && (h("ez-badge", { className: "ez-badge--primary-subtle", slot: "rightSlot", label: appliedFilters })), lines.map(this.renderFilterLine.bind(this)), h("div", { class: "ez-flex ez-flex--justify-end grow" }, h("ez-button", { className: "ez-button--tertiary", size: "medium", label: "Limpar", onClick: () => this.handleClearFilters(listItems) }))));
+  }
+  componentWillRender() {
+    this._modalTitle = this.getCustomMessage('title');
+    this._okButtonLabel = this.getCustomMessage('okButtonLabel');
+    this._cancelButtonLabel = this.getCustomMessage('cancelButtonLabel');
   }
   render() {
-    const allowCancel = this.items.filter(item => item.active).length > 0;
-    const items = (this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items) : []);
-    return (h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.modalActionListener(evt), cancelButtonStatus: allowCancel ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ?
-      h("ez-filter-input", { ref: ref => this._filterInput = ref, label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail })
-      :
-        undefined), items.length > 0 ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, h("div", null, this.buildItems(items)), h("div", { class: "ez-text ez-text--large ez-align--middle ez-text--secondary ez-text--center ez-padding-bottom--large" }, this.infoText))));
+    const customFilters = this.filters.filter(filter => filter.filterType === FilterType.CUSTOM_FILTER);
+    const quickFilters = this.filters.filter(filter => filter.filterType === FilterType.QUICK_FILTER);
+    const otherFilters = this.filters.filter(filter => filter.filterType === FilterType.OTHER_FILTERS);
+    return (h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this._modalTitle, cancelButtonLabel: this._cancelButtonLabel, okButtonLabel: this._okButtonLabel, onEzModalAction: this.modalActionListener.bind(this) }, h("div", { class: "snk-filter__modal-content" }, this.renderCollapsibleFilterBox(this.getCustomMessage('customFilters'), customFilters), this.renderCollapsibleFilterBox(this.getCustomMessage('quickFilters'), quickFilters), otherFilters.map(filter => this.renderCollapsibleFilterBox(filter.label, [filter])))));
   }
   static get is() { return "snk-filter-modal"; }
   static get originalStyleUrls() {
@@ -90,18 +115,19 @@ export class SnkFilterModal {
           "text": "Usado pra flexibilizar os verbetes e mensagens de acordo com o SnkMessageBuilder."
         }
       },
-      "items": {
+      "filters": {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Array<ModalItem>",
-          "resolved": "ModalItem[]",
+          "original": "Array<SnkFilterItemConfig>",
+          "resolved": "SnkFilterItemConfig[]",
           "references": {
             "Array": {
               "location": "global"
             },
-            "ModalItem": {
-              "location": "local"
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../filter-item/snk-filter-item"
             }
           }
         },
@@ -109,136 +135,70 @@ export class SnkFilterModal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Guarda a lista de filtros."
+          "text": "Filtros a serem apresentados"
         }
       },
-      "modalTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o t\u00EDtulo do filtro."
-        },
-        "attribute": "modal-title",
-        "reflect": false
-      },
-      "modalSubTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o subt\u00EDtulo do filtro."
-        },
-        "attribute": "modal-sub-title",
-        "reflect": false
-      },
-      "cancelButtonLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o label do bot\u00E3o de cancelar."
-        },
-        "attribute": "cancel-button-label",
-        "reflect": false
-      },
-      "okButtonLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o label do bot\u00E3o de confirmar."
-        },
-        "attribute": "ok-button-label",
-        "reflect": false
-      },
-      "infoText": {
-        "type": "string",
+      "applyFilters": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "(updatedFilterConfig: Array<SnkFilterItemConfig>) => void",
+          "resolved": "(updatedFilterConfig: SnkFilterItemConfig[]) => void",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../filter-item/snk-filter-item"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define a descri\u00E7\u00E3o do filtro."
-        },
-        "attribute": "info-text",
-        "reflect": false
+          "text": "A\u00E7\u00E3o executada ao aplicar os filtros"
+        }
       },
-      "useSearch": {
-        "type": "boolean",
+      "clearAll": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "(configSnapshot: SnkFilterItemConfig[]) => Array<SnkFilterItemConfig>",
+          "resolved": "(configSnapshot: SnkFilterItemConfig[]) => SnkFilterItemConfig[]",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../filter-item/snk-filter-item"
+            },
+            "Array": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Se `true`, exibe a barra de pesquisa do filtro."
-        },
-        "attribute": "use-search",
-        "reflect": false
+          "text": "A\u00E7\u00E3o executada ao limpar os filtros"
+        }
       },
-      "processModalAction": {
+      "closeModal": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(action: ModalAction) => void",
-          "resolved": "(action: ModalAction) => void",
-          "references": {
-            "ModalAction": {
-              "location": "import",
-              "path": "@sankhyalabs/ezui/dist/collection/components/ez-modal-container"
-            }
-          }
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "\u00C9 disparado em qualquer intera\u00E7\u00E3o com o filtro."
+          "text": "A\u00E7\u00E3o disparada ao fechar o modal"
         }
       }
     };
   }
-  static get states() {
-    return {
-      "_filterArgument": {}
-    };
-  }
 }

package/dist/collection/components/snk-filter-bar/filter-modal/subcomponents/snk-filter-modal-item.css

@@ -0,0 +1,8 @@
+
+.grow{
+    flex-grow: 1;
+  }
+
+.gap{
+  gap: 4px;
+}

package/dist/collection/components/snk-filter-bar/filter-modal/subcomponents/snk-filter-modal-item.js

@@ -0,0 +1,116 @@
+import { h, Host } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import FilterItemType from "../../filter-item/filter-item-type.enum";
+import FilterType from '../../types/filter-type.enum';
+import { EPresentationMode } from '../../filter-item/editors/enum/presentationMode';
+export class SnkFilterModalItem {
+  constructor() {
+    this.filterItem = undefined;
+  }
+  observeFilterItem(newValue) {
+    this.filterChange.emit(newValue);
+  }
+  getContentEditorConfig() {
+    const variations = { presentationMode: EPresentationMode.MODAL };
+    switch (this.filterItem.type) {
+      case FilterItemType.BINARY_SELECT:
+        return { tag: "snk-filter-binary-select", variations };
+      case FilterItemType.MULTI_SELECT:
+        return { tag: "snk-filter-multi-select" };
+      case FilterItemType.PERIOD:
+        return { tag: "snk-filter-period", variations };
+      case FilterItemType.SEARCH:
+        return { tag: "snk-filter-search" };
+      case FilterItemType.NUMBER:
+        return { tag: "snk-filter-number" };
+      case FilterItemType.PERSONALIZED:
+        return { tag: "snk-filter-personalized" };
+      case FilterItemType.MULTI_LIST:
+        return { tag: "snk-entity-list" };
+    }
+    return { tag: "snk-filter-text" };
+  }
+  updateFilterValue(newValue) {
+    const isVisble = !this.filterItem.visible ? newValue !== undefined : true;
+    this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: newValue, visible: isVisble });
+  }
+  canShowDetailModal() {
+    return this.filterItem.filterType !== FilterType.OTHER_FILTERS && this.filterItem.type !== FilterItemType.BINARY_SELECT;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+      const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      this._idContentEditor = `${dataElementIdDoFilterItem}_${this.filterItem.id}`;
+    }
+  }
+  render() {
+    const { tag: ContentEditor, variations } = this.getContentEditorConfig();
+    return (h(Host, null, h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-title ez-title--small ez-title--primary grow" }, this.filterItem.detailModal))), h(ContentEditor, Object.assign({ config: this.filterItem, value: this.filterItem.value, onValueChanged: (event) => this.updateFilterValue(event.detail), "data-element-id": this._idContentEditor }, variations)))));
+  }
+  static get is() { return "snk-filter-modal-item"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-filter-modal-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-filter-modal-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "filterItem": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../../filter-item/snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "filterChange",
+        "name": "filterChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../../filter-item/snk-filter-item"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "filterItem",
+        "methodName": "observeFilterItem"
+      }];
+  }
+}

package/dist/collection/components/snk-filter-bar/snk-filter-bar.js

@@ -1,15 +1,10 @@
-import { h, Host } from '@stencil/core';
-import { ApplicationContext, ElementIDUtils, ErrorException, ObjectUtils, StringUtils } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils, ErrorException, ObjectUtils } from '@sankhyalabs/core';
 import { EzScrollDirection } from '@sankhyalabs/ezui/dist/collection/components/ez-scroller/EzScrollDirection';
-import FilterItemType from './filter-item/filter-item-type.enum';
-import { ModalAction } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
-import buildFilter from './filter-item/dataunitfilter/data-unit-filter-builder';
+import { h, Host } from '@stencil/core';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
-const PERSONALIZED_FILTER = "PERSONALIZED_FILTER";
-const DEFAULT_FILTER = "DEFAULT_FILTER";
-const CLEAR_ALL_FILTERS = "CLEAR_ALL_FILTERS";
-const ADD_FILTER = "ADD_FILTER";
-const APPLIED_FILTERS = "APPLIED_FILTERS";
+import buildFilter from './filter-item/dataunitfilter/data-unit-filter-builder';
+import FilterItemType from './filter-item/filter-item-type.enum';
+import SnkFilterModalFactory from './utils/SnkFilterModalFactory';
 export class SnkFilterBar {
   constructor() {
     this._updateSequence = [];
@@ -96,9 +91,9 @@ export class SnkFilterBar {
    * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
    * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-filter-bar.msg.ts"
    */
-  getMessage(key, params) {
+  getMessage(key, params, defaultValue) {
     var _a;
-    return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
+    return ((_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params)) || defaultValue;
   }
   getFilter(_dataUnit) {
     var _a;
@@ -187,110 +182,6 @@ export class SnkFilterBar {
       return item;
     }).sort((a, b) => this._filtersComparator(a, b));
   }
-  getAddListItems() {
-    const hiddenItems = this.filterConfig
-      .filter(item => !item.visible && this.isListable(item));
-    const footerItems = [{ name: PERSONALIZED_FILTER, label: this.getMessage("snkFilterBar.customFilter"), iconName: "tune", kind: "FOOTER" }];
-    if (this.allowDefault) {
-      footerItems.push({ name: DEFAULT_FILTER, label: this.getMessage("snkFilterBar.defaultFilter"), iconName: "configuration", kind: "FOOTER" });
-    }
-    return hiddenItems.map(filter => { return { name: filter.id, label: filter.label, kind: "FILTER", iconName: null }; })
-      .concat(footerItems);
-  }
-  getActiveClass() {
-    const filterApplied = this.filterConfig.filter(item => item.value != undefined).length > 0;
-    return filterApplied ? "sc-snk-filter-bar snk-filter-bar__filter-list-items-button--active" : "";
-  }
-  isListable(item, allowPersonalized = false) {
-    return item.type !== FilterItemType.DEFAULT_FILTER && (allowPersonalized || item.type !== FilterItemType.PERSONALIZED);
-  }
-  getAppliedListItems() {
-    const appliedItems = this.filterConfig
-      .filter(item => this.isActiveFilter(item) && this.isListable(item, true));
-    return appliedItems.map(filter => {
-      return { name: filter.id, label: filter.label, kind: "FILTER", iconName: null };
-    }).concat([
-      { name: CLEAR_ALL_FILTERS, label: this.getMessage("snkFilterBar.clearAllFilters"), iconName: "cleaning", kind: "FOOTER" }
-    ]);
-  }
-  addPersonalizedFilters(personalizedItems) {
-    const activeFilters = {};
-    personalizedItems.forEach(item => {
-      if (item.active) {
-        activeFilters[item.id] = true;
-      }
-    });
-    this.filterConfig = this.filterConfig.map(item => {
-      var _a, _b;
-      if (item.type === FilterItemType.PERSONALIZED) {
-        const visible = activeFilters[item.id];
-        if (!item.visible && visible) {
-          this.calculateUpdateSequence(item);
-          if (((_b = (_a = item.props) === null || _a === void 0 ? void 0 : _a.personalizedFilter) === null || _b === void 0 ? void 0 : _b.parameters) != undefined) {
-            this._pendingFilters.push(item.id);
-          }
-        }
-        return this.normalizeItem(visible ? Object.assign(Object.assign({}, item), { visible }) : Object.assign(Object.assign({}, item), { visible, value: undefined, fixed: undefined }));
-      }
-      return item;
-    }).sort((a, b) => this._filtersComparator(a, b));
-  }
-  openDefaultFilterModal() {
-    const filterModal = document.createElement("snk-filter-modal");
-    const defaultFilter = this.filterConfig.filter(item => item.type === FilterItemType.DEFAULT_FILTER);
-    filterModal.getMessage = (key, props) => this.getMessage(key, props);
-    filterModal.modalTitle = this.getMessage("snkFilterBar.modalDefaultFilterTitle");
-    filterModal.infoText = this.getMessage(defaultFilter.length == 0 ? "snkFilterBar.modalInfoTextCreateDefault" : "snkFilterBar.modalInfoTextEditDefault");
-    filterModal.items = defaultFilter.map(item => {
-      return { id: item.id, active: true, enabled: false, label: item.label };
-    });
-    filterModal.processModalAction = (_action) => {
-      this._application.closeModal();
-    };
-    this._application.showModal(filterModal);
-  }
-  openPersonalizedModal() {
-    const filterModal = document.createElement("snk-filter-modal");
-    const personalizedFilter = this.filterConfig
-      .filter(item => item.type === FilterItemType.PERSONALIZED)
-      .sort((itemA, itemB) => StringUtils.compare(itemA.label, itemB.label));
-    filterModal.getMessage = (key, props) => this.getMessage(key, props);
-    filterModal.modalTitle = this.getMessage("snkFilterBar.modalPersonalizedFilterTitle");
-    filterModal.modalSubTitle = this.getMessage("snkFilterBar.modalPersonalizedFilterSubTitle");
-    filterModal.okButtonLabel = this.getMessage("snkFilterBar.modalOkButtonLabel");
-    filterModal.cancelButtonLabel = this.getMessage("snkFilterBar.modalCancelButtonLabel");
-    filterModal.infoText = this.getMessage("snkFilterBar.modalInfoTextCreateEditPersonalized");
-    filterModal.useSearch = true;
-    filterModal.items = personalizedFilter.map(item => {
-      return { id: item.id, active: item.visible, enabled: true, label: item.label };
-    });
-    filterModal.processModalAction = (action) => {
-      if (action === ModalAction.CANCEL) {
-        // O Botão de cancelar, tem efeito específico:
-        //  - Desmarcar todos os filtros personalizados.
-        filterModal.items = filterModal.items.map(item => {
-          return Object.assign(Object.assign({}, item), { active: false });
-        });
-      }
-      else {
-        if (action === ModalAction.OK) {
-          this.addPersonalizedFilters(filterModal.items);
-        }
-        this._application.closeModal();
-      }
-    };
-    this._application.showModal(filterModal);
-  }
-  clearFilters() {
-    let changed = false;
-    this.filterConfig = this.filterConfig.map(item => {
-      if (item.value != undefined) {
-        changed = true;
-      }
-      return Object.assign(Object.assign({}, item), { value: undefined });
-    }).sort((a, b) => this._filtersComparator(a, b));
-    return changed;
-  }
   loadPermitions() {
     this._application.isUserSup().then(value => this.allowDefault = value);
   }
@@ -339,31 +230,17 @@ export class SnkFilterBar {
   filterChangeListener(evt) {
     this.updateFilter(evt.detail);
   }
-  addFilterHandler(itemName) {
-    const filterItem = this.filterConfig.find(currentFilter => currentFilter.id === itemName);
-    if (itemName === PERSONALIZED_FILTER) {
-      this.openPersonalizedModal();
-    }
-    else if (itemName === DEFAULT_FILTER) {
-      this.openDefaultFilterModal();
-    }
-    else if (filterItem) {
-      this._pendingFilters.push(itemName);
-      this.updateFilter(Object.assign(Object.assign({}, filterItem), { visible: true }));
-    }
-  }
-  appliedFilterHandler(itemName) {
-    if (itemName === CLEAR_ALL_FILTERS) {
-      if (this.clearFilters()) {
-        this._application.info(this.getMessage("snkFilterBar.successfullyCleaned"), { iconName: "check" });
-      }
-    }
-    else {
-      const filterItemElement = this._element.querySelector("#filter-" + itemName);
-      if (filterItemElement) {
-        filterItemElement.showUp(true);
-      }
-    }
+  async showFilterModal() {
+    const callbackOnApplyFilter = (filters) => {
+      this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
+    };
+    const factoryParams = {
+      filterConfig: this.filterConfig,
+      onComplete: callbackOnApplyFilter,
+      getMessage: (key, props) => this.getMessage(key, props)
+    };
+    const factory = new SnkFilterModalFactory(factoryParams);
+    await factory.showModal();
   }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -380,7 +257,7 @@ export class SnkFilterBar {
     if (!this.dataUnit || !this.filterConfig || this.filterConfig.length === 0) {
       return undefined;
     }
-    return (h(Host, null, h("ez-scroller", { direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, this.getFilterItems()), h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail), "data-element-id": "apppliedFilters" }), h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail), "data-element-id": "addFilters" }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
+    return (h(Host, null, h("ez-scroller", { direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, this.getFilterItems()), h("ez-button", { class: "ez-padding-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
   }
   static get is() { return "snk-filter-bar"; }
   static get encapsulation() { return "scoped"; }