@sankhyalabs/sankhyablocks 6.0.6 → 6.0.7

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

@@ -62,7 +62,9 @@ export class SnkFilterDetail {
     return { tag: "snk-filter-text" };
   }
   removeItem() {
-    const removedConfig = Object.assign(Object.assign({}, this.config), { visible: false, fixed: false, value: undefined });
+    const hasMultiValues = this.config.type === FilterItemType.MULTI_LIST && Array.isArray(this.config.value);
+    const newValue = hasMultiValues ? this.config.value.map((valueItem) => (Object.assign(Object.assign({}, valueItem), { check: false }))) : undefined;
+    const removedConfig = Object.assign(Object.assign({}, this.config), { visible: false, fixed: false, value: newValue });
     if (removedConfig.groupedItems != undefined) {
       removedConfig.groupedItems = removedConfig.groupedItems.map(item => (Object.assign(Object.assign({}, item), { visible: false, fixed: false, value: undefined })));
     }
@@ -81,12 +83,19 @@ export class SnkFilterDetail {
     buttonElement.removeAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
     ElementIDUtils.addIDInfoIfNotExists(buttonElement, "button", dataElement);
   }
+  clearBinarySelectValues() {
+    var _a;
+    const editor = this._editor || {};
+    (_a = editor.resetValues) === null || _a === void 0 ? void 0 : _a.call(editor);
+    this.config = ObjectUtils.copy(this.originalConfig);
+    this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
+  }
   apply() {
     const isValid = PersonalizedFilterUtils.validateVariableValues(this.config, this._editor["value"]);
     if (!isValid) {
       return ApplicationUtils.alert(this.getMessage('snkFilterBar.filterModal.validations.notFullFilled.title'), this.getMessage('snkFilterBar.filterModal.validations.notFullFilled.message'));
     }
-    const valuesArray = this._editor["value"] || this.config.value;
+    const valuesArray = this._editor["value"] !== undefined ? this._editor["value"] : this.config.value;
     this.changeConfig(Object.assign(Object.assign({}, this.config), { visible: this.isVisible(), value: valuesArray }));
   }
   isVisible() {
@@ -97,14 +106,17 @@ export class SnkFilterDetail {
   }
   clear() {
     var _a;
+    if (this.config.type === FilterItemType.BINARY_SELECT) {
+      this.clearBinarySelectValues();
+      return;
+    }
     if (FilterItemType.MULTI_LIST === this.config.type) {
       const configCopy = ObjectUtils.copy(this.config);
       (_a = configCopy.value) === null || _a === void 0 ? void 0 : _a.forEach(value => !!value && (value.check = false));
       this.config = ObjectUtils.copy(configCopy);
+      return;
     }
-    else {
-      this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
-    }
+    this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
   }
   filterCanBeCleared() {
     return this.config.type !== FilterItemType.PERSONALIZED;
@@ -134,6 +146,9 @@ export class SnkFilterDetail {
       this.config = newConfig;
     });
   }
+  componentWillLoad() {
+    this.originalConfig = ObjectUtils.copy(this.config);
+  }
   render() {
     const { tag: CustomElement, props } = 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(CustomElement, Object.assign({ 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) }, props)), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, this.filterCanBeCleared() && (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" }))));

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

@@ -64,6 +64,17 @@ export class SnkFilterItem {
     window.removeEventListener("scroll", this.updatePosition.bind(this));
     window.addEventListener("scroll", this.updatePosition.bind(this));
   }
+  getConfigChanges() {
+    var _a;
+    const configToBeCleared = this.config;
+    if (!!((_a = configToBeCleared.groupedItems) === null || _a === void 0 ? void 0 : _a.length)) {
+      configToBeCleared.visible = false;
+      configToBeCleared.groupedItems = configToBeCleared.groupedItems.map(item => (Object.assign(Object.assign({}, item), { visible: false })));
+    }
+    const hasMultiValues = configToBeCleared.type === FilterItemType.MULTI_LIST && Array.isArray(configToBeCleared.value);
+    const newValue = hasMultiValues ? configToBeCleared.value.map((valueItem) => (Object.assign(Object.assign({}, valueItem), { check: false }))) : undefined;
+    return Object.assign(Object.assign({}, configToBeCleared), { value: newValue });
+  }
   /**
    * Oculta os detalhes de um item da lista.
    */
@@ -87,8 +98,9 @@ export class SnkFilterItem {
   //---------------------------------------------
   clickListener(evt) {
     if ([this._chipElement, this._leftIconElement, this._rightIconElement].includes(evt.target)) {
-      if (evt.target === this._rightIconElement && this.config.value != undefined) {
-        this.filterChange.emit(Object.assign(Object.assign({}, this.config), { value: undefined }));
+      if (evt.target === this._rightIconElement && this.canClearFilter()) {
+        const configChanged = this.getConfigChanges();
+        this.filterChange.emit(configChanged);
       }
       else {
         if (this.detailIsVisible) {
@@ -223,10 +235,13 @@ export class SnkFilterItem {
   filterChangeListener() {
     this.hideDetail();
   }
+  canClearFilter() {
+    const { value, groupedItems = [] } = this.config;
+    return value !== undefined || groupedItems.some(item => item.visible);
+  }
   getRightIconName() {
-    if (this.config.value != undefined) {
+    if (this.canClearFilter())
       return "close";
-    }
     return this.detailIsVisible ? "chevron-up" : "chevron-down";
   }
   getLeftIconName() {
@@ -248,7 +263,7 @@ export class SnkFilterItem {
   }
   render() {
     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.getEnabledChip() }, 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, null, h("ez-chip", Object.assign({ id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip(), showNativeTooltip: false }, this.applyTooltip()), 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

@@ -21,12 +21,32 @@ export class SnkFilterModal {
   }
   //TODO: tratar clear all dos filtros personalizados
   handleClearAll() {
-    const quickFilters = this.filters.filter(filter => filter.filterType === FilterType.QUICK_FILTER);
-    const customFilters = this.filters.filter(filter => filter.filterType === FilterType.CUSTOM_FILTER);
-    const otherFilters = this.filters.filter(filter => filter.filterType === FilterType.OTHER_FILTERS);
+    const { customFilters, quickFilters, otherFilters, multiListFilters } = this.filters.reduce((acc, filter) => {
+      if (filter.type === FilterItemType.MULTI_LIST) {
+        acc.multiListFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.QUICK_FILTER) {
+        acc.quickFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.CUSTOM_FILTER) {
+        acc.customFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.OTHER_FILTERS) {
+        acc.otherFilters.push(filter);
+        return acc;
+      }
+      return acc;
+    }, { quickFilters: [], customFilters: [], otherFilters: [], multiListFilters: [] });
     this.handleClearFilterList(quickFilters);
     this.handleClearCustomFilters(customFilters);
-    otherFilters.forEach(this.handleClearSigleFilter.bind(this));
+    this.handleClearOthersFilters(otherFilters);
+    multiListFilters.forEach(multiListFilter => this.handleClearSigleFilter(multiListFilter));
+  }
+  handleClearOthersFilters(otherFilters) {
+    this.filters = this.filters.map(filter => otherFilters.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
   }
   handleClearCustomFilters(customFilters) {
     this.filters.forEach((filter, index) => {

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

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 import { ApplicationContext, ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
-import FilterItemType from "../../filter-item/filter-item-type.enum";
+import FilterItemType from '../../filter-item/filter-item-type.enum';
 import { EPresentationMode } from '../../filter-item/editors/enum/presentationMode';
 import { ConfigStorage } from '../../../../lib/configs/ConfigStorage';
 import FilterType from '../../types/filter-type.enum';
@@ -53,7 +53,7 @@ export class SnkFilterModalItem {
       this.filterItem = Object.assign(Object.assign({}, this.filterItem), { visible: newValue > 0, value: newValue, groupedItems: data.items });
     }
     else {
-      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: newValue, visible: this.isVisible(newValue) });
+      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: this.filterItem.type === FilterItemType.SEARCH ? data : newValue, visible: this.isVisible(newValue) });
     }
     this.saveConfig();
   }

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

@@ -77,6 +77,20 @@
   margin-bottom: var(--space--small);
 }
 
+.snk-filter-bar__scroller {
+  height: calc(100% + var(--space-extra-small, 3px));
+}
+
+.snk-filter-bar__filter-item-container {
+  display: flex;
+  align-self: center;
+}
+
+.snk-filter-bar__scroller :first-child {
+  margin-left: var(--space-extra-small, 3px);
+}
+
+
 .snk-filter-bar__filter-list-items-container{
   overflow-y: auto;
   max-height: 360px;

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

@@ -140,7 +140,7 @@ export class SnkFilterBar {
     if (item.type === FilterItemType.DEFAULT_FILTER) {
       return true;
     }
-    return item.visible && (item.groupedItems || item.value != undefined);
+    return this.filterActiveFilter(item) && (item.groupedItems || item.value != undefined);
   }
   registryFilterProvider() {
     this.dataUnit.addFilterProvider(this);
@@ -171,7 +171,7 @@ export class SnkFilterBar {
       .forEach((item, index) => {
       item = ObjectUtils.copy(item);
       const itemId = `filter-${item.id}`;
-      const filterItem = (h("snk-filter-item", { onVisibleChanged: (evt) => this.scrollerLocked = evt.detail, onFocusin: () => this.itemFocused(itemId), id: itemId, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
+      const filterItem = (h("snk-filter-item", { onVisibleChanged: (evt) => this.scrollerLocked = evt.detail, onFilterChange: (event) => this.updateFilter(event.detail), onFocusin: () => this.itemFocused(itemId), id: itemId, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
       if (item.fixed || item.hardFixed) {
         pinnedItems.push(filterItem);
       }
@@ -319,7 +319,7 @@ export class SnkFilterBar {
     if (this.showPersonalizedFilter) {
       return h("snk-personalized-filter", { class: "filter-bar__personalized-filter", filterId: this.personalizedFilterId, ref: (el) => this._elPersonalizedFilter = el, onEzCancel: () => this.hidePersonalizedFilter(), entityUri: this.dataUnit.name, configName: this.configName });
     }
-    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" })));
+    return (h(Host, null, h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
   }
   static get is() { return "snk-filter-bar"; }
   static get encapsulation() { return "scoped"; }

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

@@ -22,6 +22,8 @@ const buildFilter = (item) => {
       return buildDefault(item);
     case FilterItemType.BINARY_SELECT:
       return buildBinary(item);
+    case FilterItemType.MULTI_SELECT:
+      return buildMultSelect(item);
     case FilterItemType.MULTI_LIST:
       return buildMultiList(item);
     case FilterItemType.PERIOD:
@@ -47,6 +49,10 @@ function buildBinary(item) {
   const selectedOption = options.find(opt => opt.name === value);
   return { name: id, expression: selectedOption.expression, params: [] };
 }
+function buildMultSelect(item) {
+  const { id, value, props } = item;
+  return { name: id, expression: props.expression, params: [{ name: id, dataType: DataType.TEXT, value }] };
+}
 function buildMultiList(item) {
   const { id, value, props } = item;
   const parsedValues = parseMultiListValues(value);
@@ -175,7 +181,7 @@ class SnkFilterModalFactory {
   }
 }
 
-const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr;--snk-personalized-filter--z-index:var(--more-visible, 2);--snk-personalized-filter--background-color:var(--background--xlight, #fff)}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.filter-bar__personalized-filter.sc-snk-filter-bar{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;z-index:var(--snk-personalized-filter--z-index);background-color:var(--snk-personalized-filter--background-color)}.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 snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr;--snk-personalized-filter--z-index:var(--more-visible, 2);--snk-personalized-filter--background-color:var(--background--xlight, #fff)}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.filter-bar__personalized-filter.sc-snk-filter-bar{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;z-index:var(--snk-personalized-filter--z-index);background-color:var(--snk-personalized-filter--background-color)}.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__scroller.sc-snk-filter-bar{height:calc(100% + var(--space-extra-small, 3px))}.snk-filter-bar__filter-item-container.sc-snk-filter-bar{display:flex;align-self:center}.snk-filter-bar__scroller.sc-snk-filter-bar .sc-snk-filter-bar:first-child{margin-left:var(--space-extra-small, 3px)}.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 SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -313,7 +319,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (item.type === FilterItemType.DEFAULT_FILTER) {
       return true;
     }
-    return item.visible && (item.groupedItems || item.value != undefined);
+    return this.filterActiveFilter(item) && (item.groupedItems || item.value != undefined);
   }
   registryFilterProvider() {
     this.dataUnit.addFilterProvider(this);
@@ -344,7 +350,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       .forEach((item, index) => {
       item = ObjectUtils.copy(item);
       const itemId = `filter-${item.id}`;
-      const filterItem = (h("snk-filter-item", { onVisibleChanged: (evt) => this.scrollerLocked = evt.detail, onFocusin: () => this.itemFocused(itemId), id: itemId, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
+      const filterItem = (h("snk-filter-item", { onVisibleChanged: (evt) => this.scrollerLocked = evt.detail, onFilterChange: (event) => this.updateFilter(event.detail), onFocusin: () => this.itemFocused(itemId), id: itemId, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
       if (item.fixed || item.hardFixed) {
         pinnedItems.push(filterItem);
       }
@@ -492,7 +498,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (this.showPersonalizedFilter) {
       return h("snk-personalized-filter", { class: "filter-bar__personalized-filter", filterId: this.personalizedFilterId, ref: (el) => this._elPersonalizedFilter = el, onEzCancel: () => this.hidePersonalizedFilter(), entityUri: this.dataUnit.name, configName: this.configName });
     }
-    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" })));
+    return (h(Host, null, h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, 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 {

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

@@ -31,6 +31,12 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.value = evt.detail === this._noOptionValue ? undefined : evt.detail;
     this._radioButtonValue = evt.detail;
   }
+  /**
+   * Redefine os valores padrão do componente.
+   */
+  async resetValues() {
+    this.ezChangeListener({ detail: this._noOptionValue });
+  }
   assertCheckedOption(updatingCheck) {
     if (updatingCheck === this._checkOne) {
       this._checkTwo.value = true;
@@ -49,13 +55,22 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     }
     this.valueChanged.emit(this.value);
   }
+  setRadioValue() {
+    this._radioButtonValue = this.value || this._noOptionValue;
+  }
   componentDidLoad() {
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
     }
   }
   componentWillLoad() {
-    this._radioButtonValue = this.value || this._noOptionValue;
+    this.setRadioValue();
+  }
+  componentShouldUpdate() {
+    this.setRadioValue();
+  }
+  disconnectedCallback() {
+    this.value = this.config.value;
   }
   render() {
     if (!this.config || this.config.type !== FilterItemType.BINARY_SELECT) {
@@ -71,7 +86,8 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
 }, [0, "snk-filter-binary-select", {
     "value": [1544],
     "config": [16],
-    "presentationMode": [2, "presentation-mode"]
+    "presentationMode": [2, "presentation-mode"],
+    "resetValues": [64]
   }, [[0, "ezChange", "ezChangeListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -66,7 +66,9 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return { tag: "snk-filter-text" };
   }
   removeItem() {
-    const removedConfig = Object.assign(Object.assign({}, this.config), { visible: false, fixed: false, value: undefined });
+    const hasMultiValues = this.config.type === FilterItemType.MULTI_LIST && Array.isArray(this.config.value);
+    const newValue = hasMultiValues ? this.config.value.map((valueItem) => (Object.assign(Object.assign({}, valueItem), { check: false }))) : undefined;
+    const removedConfig = Object.assign(Object.assign({}, this.config), { visible: false, fixed: false, value: newValue });
     if (removedConfig.groupedItems != undefined) {
       removedConfig.groupedItems = removedConfig.groupedItems.map(item => (Object.assign(Object.assign({}, item), { visible: false, fixed: false, value: undefined })));
     }
@@ -85,12 +87,19 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     buttonElement.removeAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
     ElementIDUtils.addIDInfoIfNotExists(buttonElement, "button", dataElement);
   }
+  clearBinarySelectValues() {
+    var _a;
+    const editor = this._editor || {};
+    (_a = editor.resetValues) === null || _a === void 0 ? void 0 : _a.call(editor);
+    this.config = ObjectUtils.copy(this.originalConfig);
+    this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
+  }
   apply() {
     const isValid = PersonalizedFilterUtils.validateVariableValues(this.config, this._editor["value"]);
     if (!isValid) {
       return ApplicationUtils.alert(this.getMessage('snkFilterBar.filterModal.validations.notFullFilled.title'), this.getMessage('snkFilterBar.filterModal.validations.notFullFilled.message'));
     }
-    const valuesArray = this._editor["value"] || this.config.value;
+    const valuesArray = this._editor["value"] !== undefined ? this._editor["value"] : this.config.value;
     this.changeConfig(Object.assign(Object.assign({}, this.config), { visible: this.isVisible(), value: valuesArray }));
   }
   isVisible() {
@@ -101,14 +110,17 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   clear() {
     var _a;
+    if (this.config.type === FilterItemType.BINARY_SELECT) {
+      this.clearBinarySelectValues();
+      return;
+    }
     if (FilterItemType.MULTI_LIST === this.config.type) {
       const configCopy = ObjectUtils.copy(this.config);
       (_a = configCopy.value) === null || _a === void 0 ? void 0 : _a.forEach(value => !!value && (value.check = false));
       this.config = ObjectUtils.copy(configCopy);
+      return;
     }
-    else {
-      this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
-    }
+    this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
   }
   filterCanBeCleared() {
     return this.config.type !== FilterItemType.PERSONALIZED;
@@ -138,6 +150,9 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       this.config = newConfig;
     });
   }
+  componentWillLoad() {
+    this.originalConfig = ObjectUtils.copy(this.config);
+  }
   render() {
     const { tag: CustomElement, props } = 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(CustomElement, Object.assign({ 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) }, props)), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, this.filterCanBeCleared() && (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" }))));

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

@@ -70,6 +70,17 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     window.removeEventListener("scroll", this.updatePosition.bind(this));
     window.addEventListener("scroll", this.updatePosition.bind(this));
   }
+  getConfigChanges() {
+    var _a;
+    const configToBeCleared = this.config;
+    if (!!((_a = configToBeCleared.groupedItems) === null || _a === void 0 ? void 0 : _a.length)) {
+      configToBeCleared.visible = false;
+      configToBeCleared.groupedItems = configToBeCleared.groupedItems.map(item => (Object.assign(Object.assign({}, item), { visible: false })));
+    }
+    const hasMultiValues = configToBeCleared.type === FilterItemType.MULTI_LIST && Array.isArray(configToBeCleared.value);
+    const newValue = hasMultiValues ? configToBeCleared.value.map((valueItem) => (Object.assign(Object.assign({}, valueItem), { check: false }))) : undefined;
+    return Object.assign(Object.assign({}, configToBeCleared), { value: newValue });
+  }
   /**
    * Oculta os detalhes de um item da lista.
    */
@@ -93,8 +104,9 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //---------------------------------------------
   clickListener(evt) {
     if ([this._chipElement, this._leftIconElement, this._rightIconElement].includes(evt.target)) {
-      if (evt.target === this._rightIconElement && this.config.value != undefined) {
-        this.filterChange.emit(Object.assign(Object.assign({}, this.config), { value: undefined }));
+      if (evt.target === this._rightIconElement && this.canClearFilter()) {
+        const configChanged = this.getConfigChanges();
+        this.filterChange.emit(configChanged);
       }
       else {
         if (this.detailIsVisible) {
@@ -229,10 +241,13 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   filterChangeListener() {
     this.hideDetail();
   }
+  canClearFilter() {
+    const { value, groupedItems = [] } = this.config;
+    return value !== undefined || groupedItems.some(item => item.visible);
+  }
   getRightIconName() {
-    if (this.config.value != undefined) {
+    if (this.canClearFilter())
       return "close";
-    }
     return this.detailIsVisible ? "chevron-up" : "chevron-down";
   }
   getLeftIconName() {
@@ -254,7 +269,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     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.getEnabledChip() }, 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, null, h("ez-chip", Object.assign({ id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip(), showNativeTooltip: false }, this.applyTooltip()), 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 }))));
   }
   get _filterItemElement() { return this; }
   static get watchers() { return {

package/dist/components/snk-filter-modal-item2.js

@@ -68,7 +68,7 @@ const SnkFilterModalItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       this.filterItem = Object.assign(Object.assign({}, this.filterItem), { visible: newValue > 0, value: newValue, groupedItems: data.items });
     }
     else {
-      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: newValue, visible: this.isVisible(newValue) });
+      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: this.filterItem.type === FilterItemType.SEARCH ? data : newValue, visible: this.isVisible(newValue) });
     }
     this.saveConfig();
   }

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

@@ -26,12 +26,32 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   //TODO: tratar clear all dos filtros personalizados
   handleClearAll() {
-    const quickFilters = this.filters.filter(filter => filter.filterType === FilterType.QUICK_FILTER);
-    const customFilters = this.filters.filter(filter => filter.filterType === FilterType.CUSTOM_FILTER);
-    const otherFilters = this.filters.filter(filter => filter.filterType === FilterType.OTHER_FILTERS);
+    const { customFilters, quickFilters, otherFilters, multiListFilters } = this.filters.reduce((acc, filter) => {
+      if (filter.type === FilterItemType.MULTI_LIST) {
+        acc.multiListFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.QUICK_FILTER) {
+        acc.quickFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.CUSTOM_FILTER) {
+        acc.customFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.OTHER_FILTERS) {
+        acc.otherFilters.push(filter);
+        return acc;
+      }
+      return acc;
+    }, { quickFilters: [], customFilters: [], otherFilters: [], multiListFilters: [] });
     this.handleClearFilterList(quickFilters);
     this.handleClearCustomFilters(customFilters);
-    otherFilters.forEach(this.handleClearSigleFilter.bind(this));
+    this.handleClearOthersFilters(otherFilters);
+    multiListFilters.forEach(multiListFilter => this.handleClearSigleFilter(multiListFilter));
+  }
+  handleClearOthersFilters(otherFilters) {
+    this.filters = this.filters.map(filter => otherFilters.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
   }
   handleClearCustomFilters(customFilters) {
     this.filters.forEach((filter, index) => {

package/dist/esm/{index-8c3d76a6.js → index-a7d3d3f1.js}

@@ -1547,6 +1547,11 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
                 }
             }
             if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
+                if (instance.componentShouldUpdate) {
+                    if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+                        return;
+                    }
+                }
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
                 // queue that we need to do an update, but don't worry about queuing

package/dist/esm/{index-d60ca0ac.js → index-bdf75557.js}

@@ -1,4 +1,4 @@
-import { a as getRenderingRef, f as forceUpdate } from './index-8c3d76a6.js';
+import { a as getRenderingRef, f as forceUpdate } from './index-a7d3d3f1.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);