@sankhyalabs/sankhyablocks 5.9.2 → 5.10.0

package/dist/collection/components/snk-entity-list/snk-entity-list.js

@@ -0,0 +1,250 @@
+import { h, Host } from "@stencil/core";
+import { ApplicationContext } from "@sankhyalabs/core";
+export class SnkEntityList {
+  constructor() {
+    this._searchValue = undefined;
+    this._ezListSource = [];
+    this.config = undefined;
+    this.rightListSlotBuilder = undefined;
+    this.maxHeightList = "";
+  }
+  async reloadList() {
+    this.loadListSource();
+    this.saveConfig.emit(this.config);
+  }
+  observeConfig() {
+    var _a, _b;
+    (_b = (_a = this._searchElement) === null || _a === void 0 ? void 0 : _a['clearValue']) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  ezListChangeListener(evt) {
+    var _a, _b, _c, _d;
+    (_c = ((_a = this.config.value) !== null && _a !== void 0 ? _a : (_b = this.config.value) === null || _b === void 0 ? void 0 : _b.elements)) === null || _c === void 0 ? void 0 : _c.forEach(value => {
+      var _a, _b;
+      if (value && value.id === ((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.id)) {
+        value.check = (_b = evt.detail) === null || _b === void 0 ? void 0 : _b.check;
+      }
+    });
+    this.saveConfig.emit(this.config);
+    this.valueChanged.emit((_d = this.config) === null || _d === void 0 ? void 0 : _d.value);
+  }
+  loadListSource() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    this._ezListSource = [];
+    (_h = ((_e = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.elements) !== null && _e !== void 0 ? _e : (_g = (_f = this.config) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.members)) === null || _h === void 0 ? void 0 : _h.forEach(value => {
+      if (value) {
+        this._ezListSource.push({
+          label: `${value.id} - ${value.label}`,
+          check: value.check,
+          id: value.id
+        });
+      }
+    });
+  }
+  componentDidLoad() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    let configValue = (_f = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.elements) !== null && _c !== void 0 ? _c : (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.members) !== null && _f !== void 0 ? _f : (_g = this.config) === null || _g === void 0 ? void 0 : _g.value;
+    let configValueArray = [];
+    if (Array.isArray(configValue)) {
+      configValueArray = configValue;
+    }
+    else {
+      configValueArray.push((_j = (_h = this.config) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.members);
+    }
+    this.config.value = configValueArray;
+    this._entityName = (_m = (_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.props) === null || _l === void 0 ? void 0 : _l.searchContext) === null || _m === void 0 ? void 0 : _m.entity;
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this.loadListSource();
+  }
+  optionLoader({ mode, argument }) {
+    var _a, _b, _c, _d;
+    if (this._application === undefined) {
+      return;
+    }
+    const searchOptions = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.searchContext) === null || _c === void 0 ? void 0 : _c.searchOptions;
+    const options = {
+      entityDescription: (_d = this.config) === null || _d === void 0 ? void 0 : _d.label,
+      entity: this._entityName,
+      searchOptions: searchOptions
+    };
+    return this._application.executePreparedSearch(mode, argument, options);
+  }
+  onEzSearchChange(evt) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (evt.detail != undefined && ((_e = ((_c = (_a = this.config.value) !== null && _a !== void 0 ? _a : (_b = this.config.value) === null || _b === void 0 ? void 0 : _b.elements) !== null && _c !== void 0 ? _c : (_d = this.config.value) === null || _d === void 0 ? void 0 : _d.members)) === null || _e === void 0 ? void 0 : _e.find(i => { var _a; return (i === null || i === void 0 ? void 0 : i.id) == ((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); })) === undefined) {
+      this.config = Object.assign(Object.assign({}, this.config), { value: [
+          ...((_g = (_f = this.config) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : []),
+          {
+            id: evt.detail.value,
+            check: true,
+            label: evt.detail.label
+          }
+        ] });
+      this.loadListSource();
+      this.saveConfig.emit(this.config);
+      this.valueChanged.emit((_h = this.config) === null || _h === void 0 ? void 0 : _h.value);
+    }
+  }
+  getMessage(key, params) {
+    var _a;
+    return (_a = this._application) === null || _a === void 0 ? void 0 : _a.messagesBuilder.getMessage(key, params);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("ez-search", { ref: elem => this._searchElement = elem, optionLoader: argument => this.optionLoader(argument), value: this._searchValue, label: (_a = this.config) === null || _a === void 0 ? void 0 : _a.label, onEzChange: evt => this.onEzSearchChange(evt) }), h("label", { class: "label" }, this.getMessage("snkEntityList.selected")), h("div", { style: this.maxHeightList ? { 'max-height': this.maxHeightList } : {}, class: { "snk-entity-list--overflow": !!this.maxHeightList } }, h("ez-list", { ref: (el) => this._ezList = el, id: "snkEntityList", listMode: "check", dataSource: this._ezListSource, hoverFeedback: true, itemSlotBuilder: this.rightListSlotBuilder, onEzCheckChange: evt => this.ezListChangeListener(evt) }))));
+  }
+  static get is() { return "snk-entity-list"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-entity-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-entity-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "config": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../snk-filter-bar/filter-item/snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Configura\u00E7\u00F5es para carregar os dados do componente"
+        }
+      },
+      "rightListSlotBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "(item: ListItem, group?: ListGroup) => HTMLElement | string",
+          "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "../snk-filter-bar/filter-list/snk-filter-list"
+            },
+            "ListGroup": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-list/ez-list"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "M\u00E9todo que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No React ele se transforma em VNode e n\u00E3o HTMLElement."
+        }
+      },
+      "maxHeightList": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Permite definir uma altura m\u00E1xima para o ez-list, adicionando um scroll ao atingir esta medida"
+        },
+        "attribute": "max-height-list",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_searchValue": {},
+      "_ezListSource": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emite um evento customizado ao realizar altera\u00E7\u00E3o nos valores do componente"
+        },
+        "complexType": {
+          "original": "CustomEvent",
+          "resolved": "CustomEvent<any>",
+          "references": {
+            "CustomEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "saveConfig",
+        "name": "saveConfig",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido ao realizar alguma a\u00E7\u00E3o que altera os dados do config.value permitindo salvar estas informa\u00E7\u00F5es"
+        },
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../snk-filter-bar/filter-item/snk-filter-item"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "reloadList": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "config",
+        "methodName": "observeConfig"
+      }];
+  }
+}

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

@@ -1,7 +1,8 @@
 import { h, Host, Fragment } from '@stencil/core';
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 import FilterItemType from './filter-item-type.enum';
-import { ElementIDUtils, DataType } from '@sankhyalabs/core';
+import { ElementIDUtils, DataType, ApplicationContext } from '@sankhyalabs/core';
+import FilterBarConfigFetcher from '../../../lib/http/data-fetcher/fetchers/filter-bar-config-fetcher';
 export class SnkFilterDetail {
   constructor() {
     this.config = undefined;
@@ -12,10 +13,15 @@ export class SnkFilterDetail {
    */
   async show() {
     var _a, _b;
-    (_b = (_a = this._editor)["show"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+    (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a["show"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  observeConfig() {
+    var _a, _b;
+    (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a["reloadList"]) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   componentDidLoad() {
     if (this._element) {
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
       ElementIDUtils.addIDInfo(this._element);
       const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       this._idContentEditor = `${dataElementIdDoFilterItem}_${this.config.id}`;
@@ -38,6 +44,8 @@ export class SnkFilterDetail {
         return "snk-filter-number";
       case FilterItemType.PERSONALIZED:
         return "snk-filter-personalized";
+      case FilterItemType.MULTI_LIST:
+        return "snk-entity-list";
     }
     return "snk-filter-text";
   }
@@ -108,16 +116,43 @@ export class SnkFilterDetail {
   }
   /* WARNING: Temporário.*/
   clear() {
-    this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
+    var _a, _b;
+    if (FilterItemType.MULTI_LIST === this.config.type) {
+      (_a = this.config.value) === null || _a === void 0 ? void 0 : _a.forEach(value => {
+        if (!!value)
+          value.check = false;
+      });
+      (_b = this._editor) === null || _b === void 0 ? void 0 : _b['reloadList']();
+    }
+    else {
+      this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
+    }
   }
   onKeyDonwListener(event) {
     if (event.key === "Enter") {
       this._applyButton.setFocus().then(() => this.apply());
     }
   }
+  buildRightSlot(item) {
+    return h("ez-icon", { iconName: "delete", onClick: () => this.removeValueFromConfig(item) });
+  }
+  removeValueFromConfig(item) {
+    var _a, _b, _c, _d, _e, _f;
+    const index = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.findIndex(i => (i === null || i === void 0 ? void 0 : i.id) === item.id);
+    (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.splice(index, 1);
+    (_f = (_e = this._editor) === null || _e === void 0 ? void 0 : _e["reloadList"]) === null || _f === void 0 ? void 0 : _f.call(_e);
+  }
+  saveConfig(newConfig) {
+    var _a;
+    (_a = this._application) === null || _a === void 0 ? void 0 : _a.getResourceID().then(resourceId => {
+      const fetcher = new FilterBarConfigFetcher();
+      fetcher.saveEntityListConfig(newConfig, resourceId, this._application.configName);
+      this.config = newConfig;
+    });
+  }
   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, 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" }))));
+    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, { maxHeightList: '240px', 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, onSaveConfig: evt => this.saveConfig(evt.detail), rightListSlotBuilder: item => this.buildRightSlot(item) }), 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" }))));
   }
   static get is() { return "snk-filter-detail"; }
   static get properties() {
@@ -203,4 +238,10 @@ export class SnkFilterDetail {
     };
   }
   static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "config",
+        "methodName": "observeConfig"
+      }];
+  }
 }

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

@@ -111,6 +111,7 @@ export class SnkFilterItem {
     }
   }
   getLabel(isTooltipLabel = false) {
+    var _a;
     const { type, value, label, props } = this.config;
     if (value) {
       if (type === FilterItemType.BINARY_SELECT) {
@@ -167,16 +168,19 @@ export class SnkFilterItem {
         return label;
       }
       if (type === FilterItemType.MULTI_LIST) {
-        const selectedOptions = value.filter(item => item.check);
+        const selectedOptions = ((_a = value.elements) !== null && _a !== void 0 ? _a : value).filter(item => item === null || item === void 0 ? void 0 : item.check);
         const checkedAmount = selectedOptions.length;
+        if (checkedAmount === 0) {
+          return `${label}`;
+        }
         if (checkedAmount > 1) {
           if (isTooltipLabel) {
-            const selectedOptionsDescrptions = selectedOptions.map(item => item.description);
+            const selectedOptionsDescrptions = selectedOptions.map(item => item.label);
             return `${label}: ${selectedOptionsDescrptions.join(',')}`;
           }
           return `${label}: ${checkedAmount} ${this.getMessage('snkFilterBar.multiListToltip')}`;
         }
-        return `${label}: ${value.description}`;
+        return `${label}: ${selectedOptions[0].label}`;
       }
       return `${label}: ${value}`;
     }
@@ -226,8 +230,9 @@ export class SnkFilterItem {
     return undefined;
   }
   render() {
+    var _a, _b, _c, _d;
     const leftIcon = this.getLeftIconName();
-    return (h(Host, Object.assign({}, this.applyTooltip()), h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
+    return (h(Host, Object.assign({}, this.applyTooltip()), h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: (FilterItemType.MULTI_LIST != this.config.type && this.config.value != undefined) || (((_d = (_c = ((_b = (_a = this.config.value) === null || _a === void 0 ? void 0 : _a.elements) !== null && _b !== void 0 ? _b : this.config.value)) === null || _c === void 0 ? void 0 : _c.filter(value => value === null || value === void 0 ? void 0 : value.check)) === null || _d === void 0 ? void 0 : _d.length) > 0) }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
   }
   static get is() { return "snk-filter-item"; }
   static get properties() {

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

@@ -36,7 +36,15 @@ export class SnkFilterModal {
     this.filters = this.filters.map(filter => filter.id === filterConfig.id ? filterConfig : filter);
   }
   handleClearFilters(filterList) {
-    this.filters = this.filters.map(filter => filterList.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
+    this.filters = this.filters.map(filter => filterList.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: FilterItemType.MULTI_LIST === filter.type ? this.uncheckFilterValues(filter.value) : undefined })) : filter);
+  }
+  uncheckFilterValues(valueList) {
+    valueList.forEach(value => {
+      if (!!value) {
+        value.check = false;
+      }
+    });
+    return valueList;
   }
   renderFilterItem(filterItem, fullRow) {
     return (h("snk-filter-modal-item", { class: fullRow ? 'ez-col ez-col--sd-12' : 'ez-col ez-col--sd-6 ez-padding--small', filterItem: filterItem, onFilterChange: (event) => this.handleFilterChange(event.detail) }));
@@ -69,12 +77,27 @@ export class SnkFilterModal {
     const fullLine = filters.length === 1;
     return (h("div", { class: "ez-row" }, filters.map((filter) => this.renderFilterItem(filter, fullLine))));
   }
+  getIformedFiltersCount(listItems) {
+    let countInformedItens = 0;
+    listItems.forEach(item => {
+      var _a, _b, _c, _d, _e;
+      if (FilterItemType.MULTI_LIST === item.type) {
+        countInformedItens += (_e = (_d = (_c = ((_b = (_a = item.value) === null || _a === void 0 ? void 0 : _a.elements) !== null && _b !== void 0 ? _b : item.value)) === null || _c === void 0 ? void 0 : _c.filter(value => value === null || value === void 0 ? void 0 : value.check)) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0;
+        return;
+      }
+      if (!!item.value) {
+        countInformedItens++;
+      }
+    });
+    return countInformedItens;
+  }
   renderCollapsibleFilterBox(label, listItems) {
     if (!listItems.length)
       return null;
-    const appliedFilters = listItems.filter(filterItem => !!filterItem.value).length;
+    const appliedFilters = this.getIformedFiltersCount(listItems);
     const lines = this.mountFiltersLines(listItems);
-    return (h("ez-collapsible-box", { className: "snk-filter__modal-collapsible-box", headerSize: "medium", value: true, label: label }, !!appliedFilters && (h("ez-badge", { className: "ez-badge--primary-subtle", slot: "rightSlot", label: appliedFilters })), lines.map(this.renderFilterLine.bind(this)), h("div", { class: "ez-flex ez-flex--justify-end grow" }, h("ez-button", { className: "ez-button--tertiary", size: "medium", label: "Limpar", onClick: () => this.handleClearFilters(listItems) }))));
+    return (h("ez-collapsible-box", { className: "snk-filter__modal-collapsible-box", headerSize: "medium", value: true, label: label }, !!appliedFilters &&
+      h("ez-badge", { className: "ez-badge--primary-subtle", slot: "rightSlot", label: appliedFilters }), lines.map(this.renderFilterLine.bind(this)), h("div", { class: "ez-flex ez-flex--justify-end grow" }, h("ez-button", { className: "ez-button--tertiary", size: "medium", label: "Limpar", onClick: () => this.handleClearFilters(listItems) }))));
   }
   componentWillRender() {
     this._modalTitle = this.getCustomMessage('title');

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

@@ -1,14 +1,18 @@
 import { h, Host } from '@stencil/core';
-import { ElementIDUtils } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import FilterItemType from "../../filter-item/filter-item-type.enum";
 import FilterType from '../../types/filter-type.enum';
 import { EPresentationMode } from '../../filter-item/editors/enum/presentationMode';
+import FilterBarConfigFetcher from '../../../../lib/http/data-fetcher/fetchers/filter-bar-config-fetcher';
 export class SnkFilterModalItem {
   constructor() {
     this.filterItem = undefined;
   }
   observeFilterItem(newValue) {
+    var _a, _b;
+    (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a['reloadList']) === null || _b === void 0 ? void 0 : _b.call(_a);
     this.filterChange.emit(newValue);
+    this.saveConfig();
   }
   getContentEditorConfig() {
     const variations = { presentationMode: EPresentationMode.MODAL };
@@ -26,13 +30,16 @@ export class SnkFilterModalItem {
       case FilterItemType.PERSONALIZED:
         return { tag: "snk-filter-personalized" };
       case FilterItemType.MULTI_LIST:
-        return { tag: "snk-entity-list" };
+        return { tag: "snk-entity-list", variations: { maxHeightList: "640px", rightListSlotBuilder: item => this.buildRightSlot(item) } };
     }
     return { tag: "snk-filter-text" };
   }
   updateFilterValue(newValue) {
     const isVisble = !this.filterItem.visible ? newValue !== undefined : true;
     this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: newValue, visible: isVisble });
+    if (FilterItemType.MULTI_LIST === this.filterItem.type) {
+      this.saveConfig();
+    }
   }
   canShowDetailModal() {
     return this.filterItem.filterType !== FilterType.OTHER_FILTERS && this.filterItem.type !== FilterItemType.BINARY_SELECT;
@@ -42,11 +49,29 @@ export class SnkFilterModalItem {
       ElementIDUtils.addIDInfo(this._element);
       const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       this._idContentEditor = `${dataElementIdDoFilterItem}_${this.filterItem.id}`;
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     }
   }
+  buildRightSlot(item) {
+    return h("ez-icon", { iconName: "delete", onClick: () => this.removeValueFromConfig(item) });
+  }
+  removeValueFromConfig(item) {
+    var _a, _b, _c, _d, _e, _f;
+    const index = (_b = (_a = this.filterItem) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.findIndex(i => (i === null || i === void 0 ? void 0 : i.id) === item.id);
+    (_d = (_c = this.filterItem) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.splice(index, 1);
+    (_f = (_e = this._editor) === null || _e === void 0 ? void 0 : _e["reloadList"]) === null || _f === void 0 ? void 0 : _f.call(_e);
+    this.saveConfig();
+  }
+  saveConfig() {
+    var _a;
+    (_a = this._application) === null || _a === void 0 ? void 0 : _a.getResourceID().then(resourceId => {
+      const fetcher = new FilterBarConfigFetcher();
+      fetcher.saveEntityListConfig(this.filterItem, resourceId, this._application.configName);
+    });
+  }
   render() {
     const { tag: ContentEditor, variations } = this.getContentEditorConfig();
-    return (h(Host, null, h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-title ez-title--small ez-title--primary grow" }, this.filterItem.detailModal))), h(ContentEditor, Object.assign({ config: this.filterItem, value: this.filterItem.value, onValueChanged: (event) => this.updateFilterValue(event.detail), "data-element-id": this._idContentEditor }, variations)))));
+    return (h(Host, null, h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-title ez-title--small ez-title--primary grow" }, this.filterItem.detailModal))), h(ContentEditor, Object.assign({ ref: ref => this._editor = ref, config: this.filterItem, value: this.filterItem.value, onValueChanged: (event) => this.updateFilterValue(event.detail), "data-element-id": this._idContentEditor }, variations)))));
   }
   static get is() { return "snk-filter-modal-item"; }
   static get originalStyleUrls() {

package/dist/collection/lib/http/data-fetcher/fetchers/filter-bar-config-fetcher.js

@@ -1,5 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import FilterItemType from "../../../../components/snk-filter-bar/filter-item/filter-item-type.enum";
 import { ResourceFetcher } from "./resource-fetcher";
-function normalizeValue(value) {
+function normalizeValue(value, type) {
   if (value == undefined) {
     return value;
   }
@@ -8,13 +21,19 @@ function normalizeValue(value) {
   }
   if (typeof value === "object") {
     if (value instanceof Array) {
-      return value.map(item => normalizeValue(item));
+      return value.map(item => {
+        if (FilterItemType.MULTI_LIST === type) {
+          const { label: _ } = item, values = __rest(item, ["label"]);
+          return normalizeValue(values);
+        }
+        return normalizeValue(item);
+      });
     }
     else {
       const normalized = Object.assign({}, value);
       Object.keys(value).forEach(prop => {
         if (value[prop]) {
-          normalized[prop] = normalizeValue(value[prop]);
+          normalized[prop] = normalizeValue(value[prop], type);
         }
         else {
           delete normalized[prop];
@@ -28,10 +47,10 @@ function normalizeValue(value) {
 export default class FilterBarConfigFetcher extends ResourceFetcher {
   saveConfig(items, resourceID, configName) {
     const state = items.map(item => {
-      const { id, value, fixed, visible } = item;
+      const { id, value, fixed, visible, type } = item;
       const stateItem = { id };
       if (value) {
-        stateItem["value"] = normalizeValue(value);
+        stateItem["value"] = normalizeValue(value, type);
       }
       if (fixed) {
         stateItem["fixed"] = fixed;
@@ -59,6 +78,30 @@ export default class FilterBarConfigFetcher extends ResourceFetcher {
       });
     });
   }
+  saveEntityListConfig(item, resourceID, configName) {
+    return new Promise((accept, reject) => {
+      this.getConfig(resourceID, configName).then(config => {
+        const state = config.map(({ id, value, fixed, visible, type }) => {
+          return Object.assign(Object.assign(Object.assign({ id }, (value && { value: normalizeValue(value, type) })), (fixed && { fixed })), (visible && { visible: true }));
+        });
+        const index = state.findIndex(({ id }) => id === item.id);
+        const newItem = { id: item.id, value: normalizeValue(item.value, item.type), fixed: item.fixed, visible: true };
+        if (index > -1) {
+          state[index] = newItem;
+        }
+        else {
+          state.push(newItem);
+        }
+        this.saveResource(state, this.getPath(resourceID, configName)).then(resp => {
+          accept(resp);
+        }).catch(exception => {
+          reject(exception);
+        });
+      }).catch(exception => {
+        reject(exception);
+      });
+    });
+  }
   getPath(resourceID, name) {
     if (name) {
       return `cfg://filter/FilterBarState:${resourceID}/${name}`;

package/dist/collection/lib/message/SnkMessageBuilder.js

@@ -14,6 +14,7 @@ import { snkFilterFieldSearchMessages } from "./resources/snk-filter-field-searc
 import { snkSimpleBarMessages } from './resources/snk-simple-bar.msg.js';
 import { snkAttachMessages } from "./resources/snk-attach.msg";
 import { snkPersonalizedFilterMessages } from "./resources/snk-personalized-filter.msg.js";
+import { snkEntityListMessages } from "./resources/snk-entity-list.msg.js";
 export class SnkMessageBuilder {
   constructor(domainName) {
     this._defaults = {
@@ -36,7 +37,8 @@ export class SnkMessageBuilder {
       snkFilterFieldSearch: snkFilterFieldSearchMessages,
       snkSimpleBar: snkSimpleBarMessages,
       snkAttach: snkAttachMessages,
-      snkPersonalizedFilter: snkPersonalizedFilterMessages
+      snkPersonalizedFilter: snkPersonalizedFilterMessages,
+      snkEntityList: snkEntityListMessages
     };
     this._currentOperation = OperationMap.CLEAN;
     this._domainName = domainName;

package/dist/collection/lib/message/resources/snk-entity-list.msg.js

@@ -0,0 +1,3 @@
+export const snkEntityListMessages = {
+  selected: "Selecionados:"
+};