@sankhyalabs/sankhyablocks 5.6.0 → 5.7.0

package/dist/components/snk-crud.js

@@ -5,19 +5,17 @@ import './DataFetcher.js';
 import './pesquisa-fetcher.js';
 import { P as PresentationMode } from './index2.js';
 import { V as VIEW_MODE } from './constants.js';
-import { d as defineCustomElement$p } from './snk-attach2.js';
-import { d as defineCustomElement$o } from './snk-config-options2.js';
-import { d as defineCustomElement$n } from './snk-configurator2.js';
-import { d as defineCustomElement$m } from './snk-data-exporter2.js';
-import { d as defineCustomElement$l } from './snk-data-unit2.js';
-import { d as defineCustomElement$7, a as defineCustomElement$k } from './snk-detail-view2.js';
-import { d as defineCustomElement$j } from './snk-exporter-email-sender2.js';
-import { d as defineCustomElement$i } from './snk-field-config2.js';
-import { d as defineCustomElement$h } from './snk-filter-bar2.js';
-import { d as defineCustomElement$g } from './snk-filter-detail2.js';
-import { d as defineCustomElement$f } from './snk-filter-item2.js';
-import { d as defineCustomElement$e } from './snk-filter-list2.js';
-import { d as defineCustomElement$d } from './snk-filter-modal2.js';
+import { d as defineCustomElement$n } from './snk-attach2.js';
+import { d as defineCustomElement$m } from './snk-config-options2.js';
+import { d as defineCustomElement$l } from './snk-configurator2.js';
+import { d as defineCustomElement$k } from './snk-data-exporter2.js';
+import { d as defineCustomElement$j } from './snk-data-unit2.js';
+import { d as defineCustomElement$7, a as defineCustomElement$i } from './snk-detail-view2.js';
+import { d as defineCustomElement$h } from './snk-exporter-email-sender2.js';
+import { d as defineCustomElement$g } from './snk-field-config2.js';
+import { d as defineCustomElement$f } from './snk-filter-bar2.js';
+import { d as defineCustomElement$e } from './snk-filter-detail2.js';
+import { d as defineCustomElement$d } from './snk-filter-item2.js';
 import { d as defineCustomElement$c } from './snk-form-config2.js';
 import { d as defineCustomElement$b } from './snk-form-summary2.js';
 import { d as defineCustomElement$a } from './snk-form-view2.js';
@@ -163,7 +161,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-crud", "snk-attach", "snk-config-options", "snk-configurator", "snk-data-exporter", "snk-data-unit", "snk-detail-view", "snk-exporter-email-sender", "snk-field-config", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-filter-list", "snk-filter-modal", "snk-form-config", "snk-form-summary", "snk-form-view", "snk-grid", "snk-grid-config", "snk-guides-viewer", "snk-select-box", "snk-simple-bar", "snk-simple-crud", "snk-tab-config", "snk-taskbar"];
+  const components = ["snk-crud", "snk-attach", "snk-config-options", "snk-configurator", "snk-data-exporter", "snk-data-unit", "snk-detail-view", "snk-exporter-email-sender", "snk-field-config", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-form-config", "snk-form-summary", "snk-form-view", "snk-grid", "snk-grid-config", "snk-guides-viewer", "snk-select-box", "snk-simple-bar", "snk-simple-crud", "snk-tab-config", "snk-taskbar"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-crud":
       if (!customElements.get(tagName)) {
@@ -171,66 +169,56 @@ function defineCustomElement$1() {
       }
       break;
     case "snk-attach":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$p();
-      }
-      break;
-    case "snk-config-options":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$o();
-      }
-      break;
-    case "snk-configurator":
       if (!customElements.get(tagName)) {
         defineCustomElement$n();
       }
       break;
-    case "snk-data-exporter":
+    case "snk-config-options":
       if (!customElements.get(tagName)) {
         defineCustomElement$m();
       }
       break;
-    case "snk-data-unit":
+    case "snk-configurator":
       if (!customElements.get(tagName)) {
         defineCustomElement$l();
       }
       break;
-    case "snk-detail-view":
+    case "snk-data-exporter":
       if (!customElements.get(tagName)) {
         defineCustomElement$k();
       }
       break;
-    case "snk-exporter-email-sender":
+    case "snk-data-unit":
       if (!customElements.get(tagName)) {
         defineCustomElement$j();
       }
       break;
-    case "snk-field-config":
+    case "snk-detail-view":
       if (!customElements.get(tagName)) {
         defineCustomElement$i();
       }
       break;
-    case "snk-filter-bar":
+    case "snk-exporter-email-sender":
       if (!customElements.get(tagName)) {
         defineCustomElement$h();
       }
       break;
-    case "snk-filter-detail":
+    case "snk-field-config":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }
       break;
-    case "snk-filter-item":
+    case "snk-filter-bar":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }
       break;
-    case "snk-filter-list":
+    case "snk-filter-detail":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "snk-filter-modal":
+    case "snk-filter-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }

package/dist/components/snk-detail-view2.js

@@ -8,23 +8,21 @@ import { P as PresentationMode } from './index2.js';
 import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
 import { V as VIEW_MODE } from './constants.js';
 import { T as TaskbarProcessor } from './taskbar-processor.js';
-import { d as defineCustomElement$k } from './snk-config-options2.js';
-import { d as defineCustomElement$j } from './snk-configurator2.js';
-import { d as defineCustomElement$i } from './snk-data-exporter2.js';
-import { d as defineCustomElement$h } from './snk-data-unit2.js';
+import { d as defineCustomElement$i } from './snk-config-options2.js';
+import { d as defineCustomElement$h } from './snk-configurator2.js';
+import { d as defineCustomElement$g } from './snk-data-exporter2.js';
+import { d as defineCustomElement$f } from './snk-data-unit2.js';
 import { S as SnkMessageBuilder } from './SnkMessageBuilder.js';
-import { d as defineCustomElement$g } from './snk-exporter-email-sender2.js';
-import { d as defineCustomElement$e } from './snk-filter-bar2.js';
-import { d as defineCustomElement$d } from './snk-filter-detail2.js';
-import { d as defineCustomElement$c } from './snk-filter-item2.js';
-import { d as defineCustomElement$b } from './snk-filter-list2.js';
-import { d as defineCustomElement$a } from './snk-filter-modal2.js';
+import { d as defineCustomElement$e } from './snk-exporter-email-sender2.js';
+import { d as defineCustomElement$c } from './snk-filter-bar2.js';
+import { d as defineCustomElement$b } from './snk-filter-detail2.js';
+import { d as defineCustomElement$a } from './snk-filter-item2.js';
 import { d as defineCustomElement$8 } from './snk-form-summary2.js';
 import { d as defineCustomElement$7 } from './snk-form-view2.js';
 import { d as defineCustomElement$6 } from './snk-grid2.js';
 import { d as defineCustomElement$5 } from './snk-grid-config2.js';
 import { d as defineCustomElement$4 } from './snk-select-box2.js';
-import { d as defineCustomElement$f } from './snk-field-config2.js';
+import { d as defineCustomElement$d } from './snk-field-config2.js';
 import { d as defineCustomElement$9 } from './snk-form-config2.js';
 import { d as defineCustomElement$3 } from './snk-tab-config2.js';
 
@@ -361,7 +359,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-guides-viewer", "snk-config-options", "snk-configurator", "snk-data-exporter", "snk-data-unit", "snk-detail-view", "snk-exporter-email-sender", "snk-field-config", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-filter-list", "snk-filter-modal", "snk-form-config", "snk-form-summary", "snk-form-view", "snk-grid", "snk-grid-config", "snk-select-box", "snk-tab-config", "snk-taskbar"];
+  const components = ["snk-guides-viewer", "snk-config-options", "snk-configurator", "snk-data-exporter", "snk-data-unit", "snk-detail-view", "snk-exporter-email-sender", "snk-field-config", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-form-config", "snk-form-summary", "snk-form-view", "snk-grid", "snk-grid-config", "snk-select-box", "snk-tab-config", "snk-taskbar"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-guides-viewer":
       if (!customElements.get(tagName)) {
@@ -370,22 +368,22 @@ function defineCustomElement$1() {
       break;
     case "snk-config-options":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$i();
       }
       break;
     case "snk-configurator":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$h();
       }
       break;
     case "snk-data-exporter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$g();
       }
       break;
     case "snk-data-unit":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$f();
       }
       break;
     case "snk-detail-view":
@@ -394,36 +392,26 @@ function defineCustomElement$1() {
       }
       break;
     case "snk-exporter-email-sender":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "snk-field-config":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "snk-filter-bar":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "snk-filter-detail":
+    case "snk-field-config":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }
       break;
-    case "snk-filter-item":
+    case "snk-filter-bar":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }
       break;
-    case "snk-filter-list":
+    case "snk-filter-detail":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }
       break;
-    case "snk-filter-modal":
+    case "snk-filter-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
@@ -706,7 +694,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-detail-view", "snk-data-exporter", "snk-data-unit", "snk-exporter-email-sender", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-filter-list", "snk-filter-modal", "snk-form-summary", "snk-form-view", "snk-grid", "snk-grid-config", "snk-select-box", "snk-taskbar"];
+  const components = ["snk-detail-view", "snk-data-exporter", "snk-data-unit", "snk-exporter-email-sender", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-form-summary", "snk-form-view", "snk-grid", "snk-grid-config", "snk-select-box", "snk-taskbar"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-detail-view":
       if (!customElements.get(tagName)) {
@@ -715,40 +703,30 @@ function defineCustomElement() {
       break;
     case "snk-data-exporter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$g();
       }
       break;
     case "snk-data-unit":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$f();
       }
       break;
     case "snk-exporter-email-sender":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "snk-filter-bar":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "snk-filter-detail":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "snk-filter-item":
+    case "snk-filter-bar":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }
       break;
-    case "snk-filter-list":
+    case "snk-filter-detail":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }
       break;
-    case "snk-filter-modal":
+    case "snk-filter-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }

package/dist/components/snk-filter-bar2.js

@@ -1,14 +1,12 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { DataType, ObjectUtils, ElementIDUtils, StringUtils, ErrorException, ApplicationContext } from '@sankhyalabs/core';
+import { DataType, ObjectUtils, ElementIDUtils, ErrorException, ApplicationContext } from '@sankhyalabs/core';
 import { EzScrollDirection } from '@sankhyalabs/ezui/dist/collection/components/ez-scroller/EzScrollDirection';
-import { F as FilterItemType } from './filter-item-type.enum.js';
-import { ModalAction } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
-import { toString } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
 import { C as ConfigStorage } from './ConfigStorage.js';
-import { d as defineCustomElement$4 } from './snk-filter-detail2.js';
-import { d as defineCustomElement$3 } from './snk-filter-item2.js';
-import { d as defineCustomElement$2 } from './snk-filter-list2.js';
-import { d as defineCustomElement$1 } from './snk-filter-modal2.js';
+import { toString } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
+import { F as FilterItemType } from './filter-item-type.enum.js';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+import { d as defineCustomElement$2 } from './snk-filter-detail2.js';
+import { d as defineCustomElement$1 } from './snk-filter-item2.js';
 
 const buildFilter = (item) => {
   switch (item.type) {
@@ -107,13 +105,43 @@ function buildPersonalized(item) {
   };
 }
 
+class SnkFilterModalFactory {
+  constructor({ filterConfig, onComplete, getMessage }) {
+    this._filterConfig = filterConfig;
+    this._onComplete = onComplete;
+    this._getMessage = getMessage;
+  }
+  applyFilters(newFilterConfig) {
+    this._onComplete(newFilterConfig);
+    this._closeModal();
+  }
+  clearAll(filterConfigSnapshot) {
+    return filterConfigSnapshot.map(filterItem => (Object.assign(Object.assign({}, filterItem), { value: undefined })));
+  }
+  buildFilterModal() {
+    const filterModal = document.createElement("snk-filter-modal");
+    filterModal.filters = this._filterConfig;
+    filterModal.getMessage = this._getMessage.bind(this);
+    filterModal.applyFilters = this.applyFilters.bind(this);
+    filterModal.clearAll = this.clearAll.bind(this);
+    filterModal.closeModal = () => this._closeModal();
+    return filterModal;
+  }
+  async showModal() {
+    const filterModal = this.buildFilterModal();
+    const modalProps = {
+      content: filterModal,
+      position: 'left',
+      heightMode: 'full',
+      closeOutsideClick: false,
+      useScrimLight: true
+    };
+    this._closeModal = await ApplicationUtils.showModal(modalProps);
+  }
+}
+
 const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;z-index:var(--most-visible, 3);background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:99%;height:100%}";
 
-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";
 const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -202,9 +230,9 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * - 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;
@@ -293,110 +321,6 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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);
   }
@@ -445,31 +369,17 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   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);
+    };
+    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__");
@@ -486,7 +396,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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" }))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -505,7 +415,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-filter-list", "snk-filter-modal"];
+  const components = ["snk-filter-bar", "snk-filter-detail", "snk-filter-item"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-filter-bar":
       if (!customElements.get(tagName)) {
@@ -513,21 +423,11 @@ function defineCustomElement() {
       }
       break;
     case "snk-filter-detail":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "snk-filter-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "snk-filter-list":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
       break;
-    case "snk-filter-modal":
+    case "snk-filter-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/snk-filter-binary-select.js

@@ -1,13 +1,16 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
+import { E as EPresentationMode } from './presentationMode.js';
 
 const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.value = undefined;
     this.config = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   isSelected(option) {
     return this.value == undefined || this.value === option;
@@ -42,6 +45,7 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     else {
       this.value = undefined;
     }
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-binary-select
@@ -54,12 +58,16 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
       return undefined;
     }
     const [optOne, optTwo] = this.config.props.options;
+    if (this.presentationMode === EPresentationMode.MODAL) {
+      return (h(Host, null, h("div", { class: "ez-flex ez-flex--row ez-flex--align-items-center" }, h("label", { class: "ez-text ez-text--medium ez-text--primary", style: { flex: '1 1 0', width: '0px' } }, this.config.detailModal), h("ez-check", { compact: true, style: { flex: '1 1 0', width: '0px' }, id: `${this.config.id}_${optOne.name || "option1"}`, label: optOne.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkOne = ref, value: this.isSelected(optOne.name) }), h("ez-check", { compact: true, style: { flex: '1 1 0', width: '0px' }, id: `${this.config.id}_${optTwo.name || "option2"}`, label: optTwo.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkTwo = ref, value: this.isSelected(optTwo.name) }))));
+    }
     return (h(Host, null, h("ez-check", { id: `${this.config.id}_${optOne.name || "option1"}`, label: optOne.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkOne = ref, value: this.isSelected(optOne.name) }), h("ez-check", { id: `${this.config.id}_${optTwo.name || "option2"}`, label: optTwo.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkTwo = ref, value: this.isSelected(optTwo.name) })));
   }
   get _element() { return this; }
 }, [0, "snk-filter-binary-select", {
     "value": [1544],
     "config": [16],
+    "presentationMode": [2, "presentation-mode"],
     "show": [64]
   }, [[0, "ezChange", "ezChangeListener"]]]);
 function defineCustomElement$1() {