@sankhyalabs/sankhyablocks 5.6.0 → 5.8.0

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).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__");
@@ -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,18 @@
-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._noOptionValue = 'NO_VALUE';
+    this._radioButtonValue = undefined;
     this.value = undefined;
     this.config = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   isSelected(option) {
     return this.value == undefined || this.value === option;
@@ -16,15 +21,15 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
    * Emitido quando acontece a alteração de valor do componente snk-filter-binary-select
    */
   ezChangeListener(evt) {
-    if (!evt.detail) {
-      this.assertCheckedOption(evt.target);
-    }
-    this.updateValue();
-  }
-  componentDidLoad() {
-    if (this._element) {
-      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    if (this.presentationMode === EPresentationMode.MODAL) {
+      if (!evt.detail) {
+        this.assertCheckedOption(evt.target);
+      }
+      this.updateValue();
+      return;
     }
+    this.value = evt.detail === this._noOptionValue ? undefined : evt.detail;
+    this._radioButtonValue = evt.detail;
   }
   assertCheckedOption(updatingCheck) {
     if (updatingCheck === this._checkOne) {
@@ -42,25 +47,31 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     else {
       this.value = undefined;
     }
+    this.valueChanged.emit(this.value);
   }
-  /**
-   * Exibe o componente snk-filter-binary-select
-   */
-  async show() {
-    this._checkOne.setFocus();
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
+  componentWillLoad() {
+    this._radioButtonValue = this.value || this._noOptionValue;
   }
   render() {
     if (!this.config || this.config.type !== FilterItemType.BINARY_SELECT) {
       return undefined;
     }
     const [optOne, optTwo] = this.config.props.options;
-    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) })));
+    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-title--small ez-title--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-radio-button", { value: this._radioButtonValue }, h("ez-radio-button-option", { id: `${this.config.id}_${optOne.name || "option1"}`, class: "sc-snk-filter-bar editor__ez-check", label: optOne.label, value: optOne.name }), h("ez-radio-button-option", { id: `${this.config.id}_${optTwo.name || "option2"}`, class: "sc-snk-filter-bar editor__ez-check", label: optTwo.label, value: optTwo.name }), h("ez-radio-button-option", { id: `${this.config.id}_option3`, class: "sc-snk-filter-bar editor__ez-check", label: `${optOne.label} + ${optTwo.label}`, value: this._noOptionValue }))));
   }
   get _element() { return this; }
 }, [0, "snk-filter-binary-select", {
     "value": [1544],
     "config": [16],
-    "show": [64]
+    "presentationMode": [2, "presentation-mode"]
   }, [[0, "ezChange", "ezChangeListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 import { ElementIDUtils, DataType } from '@sankhyalabs/core';
@@ -15,7 +15,8 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * Exibe o componente snk-filter-detail.
    */
   async show() {
-    this._editor["show"]();
+    var _a, _b;
+    (_b = (_a = this._editor)["show"]) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   componentDidLoad() {
     if (this._element) {
@@ -48,13 +49,7 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.changeConfig(Object.assign(Object.assign({}, this.config), { visible: false, fixed: false, value: undefined }));
   }
   getPopUpHeaderButtons() {
-    if (this.config.hardFixed) {
-      return undefined;
-    }
-    return ([
-      this.buildIcon(this.getMessage("snkFilterBar.removeFilter"), "delete", () => this.removeItem()),
-      this.buildIcon(this.getMessage(this.config.fixed ? "snkFilterBar.unpinFilter" : "snkFilterBar.pinFilter"), this.config.fixed ? "un-pin" : "push-pin", () => this.changeConfig(Object.assign(Object.assign({}, this.config), { fixed: !this.config.fixed })))
-    ]);
+    return (h(Fragment, null, !this.config.removalBlocked && this.buildIcon(this.getMessage("snkFilterBar.removeFilter"), "delete", () => this.removeItem()), !this.config.hardFixed && this.buildIcon(this.getMessage(this.config.fixed ? "snkFilterBar.unpinFilter" : "snkFilterBar.pinFilter"), this.config.fixed ? "un-pin" : "push-pin", () => this.changeConfig(Object.assign(Object.assign({}, this.config), { fixed: !this.config.fixed })))));
   }
   buildIcon(title, iconName, action) {
     return (h("button", { onClick: () => action(), class: "sc-snk-filter-bar snk-filter-item__editor-header-button", ref: elem => elem && this.buildIdButton(elem, title) }, h("ez-icon", Object.assign({ title: title, iconName: iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`_${title}`)}` }))));
@@ -126,7 +121,7 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   render() {
     const ContentEditor = this.getContentEditor();
-    return (h(Host, null, h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-text ez-title ez-title--small ez-padding--small sc-snk-filter-bar snk-filter-item__editor-header" }, this.config.detailTitle), this.getPopUpHeaderButtons()), h(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config, onKeyDown: evt => this.onKeyDonwListener(evt), "data-element-id": this._idContentEditor }), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" }), h("ez-button", { ref: ref => this._applyButton = ref, label: this.getMessage("snkFilterBar.applyFilter"), onClick: () => this.apply(), size: "small", class: "ez-button--primary ez-padding-left--medium" }))));
+    return (h(Host, null, h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-text ez-title ez-title--small ez-padding--small sc-snk-filter-bar snk-filter-item__editor-header" }, this.config.detailTitle), this.getPopUpHeaderButtons()), h(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config, onKeyDown: evt => this.onKeyDonwListener(evt), "data-element-id": this._idContentEditor, getMessage: this.getMessage }), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" }), h("ez-button", { ref: ref => this._applyButton = ref, label: this.getMessage("snkFilterBar.applyFilter"), onClick: () => this.apply(), size: "small", class: "ez-button--primary ez-padding-left--medium" }))));
   }
   get _element() { return this; }
 }, [0, "snk-filter-detail", {