@sankhyalabs/sankhyablocks 5.5.0 → 5.7.0

package/dist/components/snk-expression-item2.js

@@ -0,0 +1,241 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { UserInterface, ApplicationContext } from '@sankhyalabs/core';
+import { a as SelectedItemType, d as defineCustomElement$2 } from './snk-filter-field-search2.js';
+import { ApplicationUtils, CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
+import { fieldBuilder } from '@sankhyalabs/ezui/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder';
+import { a as FilterOperand } from './index2.js';
+import { s as store } from './index3.js';
+import { d as defineCustomElement$1 } from './snk-filter-param-config2.js';
+
+const FilterOperandDefault = [
+  { value: FilterOperand.EQUAL, label: "Igual (=)" },
+  { value: FilterOperand.DIFFERENT, label: "Diferente (<>)" },
+  { value: FilterOperand.LIKE, label: "Contendo (LIKE)" },
+  { value: FilterOperand.IN, label: "Contido em (IN)" },
+  { value: FilterOperand.START_WITH, label: "Iniciado com (%?)" },
+  { value: FilterOperand.FINISHED_WITH, label: "Terminado com (?%)" },
+  { value: FilterOperand.NULL, label: "Vazio (NULL)" },
+  { value: FilterOperand.NOT_NULL, label: "Não Vazio (NOT NULL)" },
+  { value: FilterOperand.LARGER, label: "Maior (>)" },
+  { value: FilterOperand.LARGER_EQUAL, label: "Maior ou Igual (>=)" },
+  { value: FilterOperand.SMALLER, label: "Menor (<)" },
+  { value: FilterOperand.SMALLER_EQUAL, label: "Menor ou Igual (<=)" }
+];
+const FilterOperandTypeTextSearch = [
+  { value: FilterOperand.EQUAL, label: "Igual (=)" },
+  { value: FilterOperand.DIFFERENT, label: "Diferente (<>)" },
+  { value: FilterOperand.LIKE, label: "Contendo (LIKE)" },
+  { value: FilterOperand.IN, label: "Contido em (IN)" },
+  { value: FilterOperand.START_WITH, label: "Iniciado com (%?)" },
+  { value: FilterOperand.FINISHED_WITH, label: "Terminado com (?%)" },
+  { value: FilterOperand.NULL, label: "Vazio (NULL)" },
+  { value: FilterOperand.NOT_NULL, label: "Não Vazio (NOT NULL)" }
+];
+const FIELD_TYPE_SEARCH_AND_TEXT = [
+  UserInterface.SEARCH,
+  UserInterface.SHORTTEXT,
+  UserInterface.PASSWORD,
+  UserInterface.MASKEDTEXT,
+  UserInterface.LONGTEXT,
+  UserInterface.HTML
+];
+
+const snkExpressionItemCss = ".sc-snk-expression-item-h{display:flex;width:100%;--snk-expression-item--background-color:var(--background--xlight, #fff);--snk-expression-item__itens--padding:var(--space--small, 6px);--snk-expression-item__width--input-operator:220px;--snk-expression-item__width--input-value:240px;--snk-expression-item__width--input-value-variable:176px;--snk-expression-item--border-radius:var(--border--radius-medium, 12px);--snk-expression-item--border-color:var(--color--strokes, #DCE0E8);--snk-expression-item--border-style:var(--border--small, 1px solid)}.box.sc-snk-expression-item{width:100%;height:100%;background:var(--snk-expression-item--background-color);margin:var(--space--small, 6px);border:var(--snk-expression-item--border-color) var(--snk-expression-item--border-style);border-radius:var(--snk-expression-item--border-radius)}.box__container.sc-snk-expression-item{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;margin:var(--space--small, 6px)}.box__container--input-filter.sc-snk-expression-item{width:100%}.box__container--input-operator.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-operator);min-width:var(--snk-expression-item__width--input-operator)}.box__container--input-value.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-value);min-width:var(--snk-expression-item__width--input-value)}.box__container--input-value-variable.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-value-variable);min-width:var(--snk-expression-item__width--input-value-variable)}.box__container--button-delete.sc-snk-expression-item{display:flex}.box__container.sc-snk-expression-item>div.sc-snk-expression-item{padding-left:var(--snk-expression-item__itens--padding);padding-right:var(--snk-expression-item__itens--padding)}.box__container--button-delete--icon.sc-snk-expression-item{width:42px;min-width:42px}.box__container--input-value-variable--icon.sc-snk-expression-item{cursor:pointer}";
+
+const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.ezFilterItemChange = createEvent(this, "ezFilterItemChange", 7);
+    this.ezFilterItemRemove = createEvent(this, "ezFilterItemRemove", 7);
+    this.application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this.filterOperandDefault = FilterOperandDefault;
+    this.filterOperandTypeTextSearch = FilterOperandTypeTextSearch;
+    this._showValueVariable = false;
+    this._fieldSelected = undefined;
+    this._optionNotNull = false;
+    this.expression = undefined;
+    this.canRemove = true;
+    this.messagesBuilder = undefined;
+  }
+  expressionChanged(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.ezFilterItemChange.emit(newValue);
+    }
+  }
+  componentWillLoad() {
+    this._dataSourceFetcher = store.get("filterFieldsDataSource");
+    store.onChange('filterFieldsDataSource', () => {
+      this._dataSourceFetcher = store.get("filterFieldsDataSource");
+    });
+  }
+  setValueExpression(key, value) {
+    this.expression[key] = value;
+    this.expressionChanged(this.expression);
+  }
+  getMessage(key, params) {
+    return this.application.messagesBuilder.getMessage(key, params);
+  }
+  handleSelectItem(filterField) {
+    if (filterField.type === SelectedItemType.FIELD) {
+      const field = filterField;
+      this._fieldSelected = field;
+      this.setValueExpression("fieldName", field.name);
+    }
+  }
+  handleFocus() {
+    if (this._elFilterFieldSearch)
+      this._elFilterFieldSearch.show();
+  }
+  handleChangeFilterInput(evt) {
+    this._elFilterFieldSearch.applyFilter(evt.detail);
+  }
+  handleChangeValueVariable(showValueVariable) {
+    this._showValueVariable = showValueVariable;
+    if (this._elFieldDynamic) {
+      this._elFieldDynamic.value = undefined;
+      this._elFieldDynamic.enabled = !showValueVariable;
+    }
+  }
+  openSnkFilterParamConfig() {
+    var _a;
+    (_a = this._elFilterParamConfigRef) === null || _a === void 0 ? void 0 : _a.open(this.expression).then(this.onOpenPromiseReady.bind(this)).catch(error => {
+      console.error(error);
+    });
+  }
+  onOpenPromiseReady(changes) {
+    this.expression = changes;
+  }
+  buildOptionsOperator() {
+    var _a;
+    if (FIELD_TYPE_SEARCH_AND_TEXT.includes((_a = this._fieldSelected) === null || _a === void 0 ? void 0 : _a.userInterface)) {
+      return this.filterOperandTypeTextSearch;
+    }
+    else {
+      return this.filterOperandDefault;
+    }
+  }
+  handleChangeOperator(optionSelected) {
+    this.checkOptionIsNull(optionSelected);
+    this.setValueExpression("operand", optionSelected);
+  }
+  checkOptionIsNull(optionSelected) {
+    if (optionSelected === FilterOperand.NULL || optionSelected === FilterOperand.NOT_NULL) {
+      this._optionNotNull = true;
+      if (this._elFieldDynamic) {
+        this._elFieldDynamic.enabled = false;
+        this._elFieldDynamic.value = undefined;
+      }
+    }
+    else {
+      this._optionNotNull = false;
+      if (this._elFieldDynamic) {
+        this._elFieldDynamic.enabled = this._showValueVariable ? false : true;
+      }
+    }
+  }
+  confirmRemove(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirm.title"), this.getMessage("snkPersonalizedFilter.confirm.description"))
+      .then((canRemove) => {
+      if (canRemove) {
+        this.ezFilterItemRemove.emit(this.expression);
+      }
+    });
+  }
+  buildFieldByType() {
+    var _a, _b;
+    if (!this._fieldSelected)
+      return;
+    const inputFieldData = (_a = fieldBuilder(this.configureFieldByType())) === null || _a === void 0 ? void 0 : _a.$children$.shift();
+    if (this._optionNotNull && inputFieldData || ((_b = this._elValueVariable) === null || _b === void 0 ? void 0 : _b.value) && inputFieldData) {
+      inputFieldData.$attrs$.enabled = false;
+    }
+    return h(inputFieldData.$tag$, Object.assign(Object.assign({}, inputFieldData.$attrs$), { ref: (el) => {
+        this._elFieldDynamic = el;
+      } }));
+  }
+  configureFieldByType() {
+    const field = {
+      userInterface: this._fieldSelected.userInterface,
+      name: this._fieldSelected.name,
+      label: this._fieldSelected.label,
+      canShowError: false
+    };
+    switch (field.userInterface) {
+      case UserInterface.OPTIONSELECTOR:
+        field.props = {
+          options: this._fieldSelected.properties.map(option => ({
+            value: option.value,
+            label: option.name,
+          })),
+        };
+        break;
+      case UserInterface.LONGTEXT:
+        field.rows = 1;
+        break;
+      case UserInterface.SEARCH:
+        field.optionLoader = searchArgument => this.setCriteriaSearch(searchArgument, this.application);
+        break;
+    }
+    return field;
+  }
+  setCriteriaSearch({ mode, argument }, application) {
+    if (application == undefined)
+      return;
+    const searchOptions = {
+      showInactives: false
+    };
+    const options = {
+      entity: this._fieldSelected.properties.ENTITYNAME,
+      searchOptions: searchOptions,
+      entityDescription: this._fieldSelected.label
+    };
+    return application.executePreparedSearch(mode, argument, options);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { class: "box" }, h("div", { class: "box__container" }, h("div", { class: "box__container--input-filter" }, h("ez-filter-input", { value: (_a = this._fieldSelected) === null || _a === void 0 ? void 0 : _a.path, label: this.getMessage("snkPersonalizedFilter.info.labelSearchField"), canShowError: false, onEzChange: (evt) => this.handleChangeFilterInput(evt), onFocus: () => this.handleFocus() }), h("snk-filter-field-search", { ref: ref => this._elFilterFieldSearch = ref, searchable: false, onEzSelectFilterItem: (ev) => this.handleSelectItem(ev.detail), fieldsDataSource: this._dataSourceFetcher })), h("div", { class: "box__container--input-operator" }, h("ez-combo-box", { label: this.getMessage("snkPersonalizedFilter.info.labelOperator"), canShowError: false, options: this.buildOptionsOperator(), onEzChange: (evt) => this.handleChangeOperator(evt.detail.value), suppressEmptyOption: true })), h("div", { class: "box__container--input-value" }, !this._fieldSelected ?
+      h("ez-number-input", { label: "Valor", canShowError: false, enabled: (!this._showValueVariable && !this._optionNotNull) }) :
+      this.buildFieldByType()), h("div", { class: "box__container--input-value-variable", title: this.getMessage("snkPersonalizedFilter.info.titleTooltip") }, !this._optionNotNull &&
+      h("ez-check", { ref: ref => this._elValueVariable = ref, label: this.getMessage("snkPersonalizedFilter.info.labelValueVarible"), mode: CheckMode.SWITCH, onEzChange: (evt) => this.handleChangeValueVariable(evt.detail) }), (this._showValueVariable && !this._optionNotNull) &&
+      h("ez-icon", { class: "box__container--input-value-variable--icon", size: "large", iconName: "settings-inverted", onClick: () => this.openSnkFilterParamConfig() }), h("snk-filter-param-config", { ref: (el) => this._elFilterParamConfigRef = el, messagesBuilder: this.messagesBuilder })), h("div", { class: "box__container--button-delete" }, h("div", { class: "box__container--button-delete--icon" }, this.canRemove && h("ez-button", { mode: "icon", iconName: "delete", onClick: (evt) => this.confirmRemove(evt) })))))));
+  }
+  static get watchers() { return {
+    "expression": ["expressionChanged"]
+  }; }
+  static get style() { return snkExpressionItemCss; }
+}, [2, "snk-expression-item", {
+    "expression": [16],
+    "canRemove": [516, "can-remove"],
+    "messagesBuilder": [1040],
+    "_showValueVariable": [32],
+    "_fieldSelected": [32],
+    "_optionNotNull": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-expression-item", "snk-filter-field-search", "snk-filter-param-config"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-expression-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkExpressionItem);
+      }
+      break;
+    case "snk-filter-field-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "snk-filter-param-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SnkExpressionItem as S, defineCustomElement as d };

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() {