@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-11997.0 → 0.0.0-bugfix-dev-KB-99999.0

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

@@ -0,0 +1,95 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { h } from '@stencil/core';
+import FilterItemType from '../filter-item-type.enum';
+export class SnkFilterCheckboxList {
+  constructor() {
+    this.config = undefined;
+    this.optionsList = [];
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
+  handleToggleCheck(itemChanged, checked) {
+    var _a, _b;
+    let configValueMap = (_a = this.config.value) !== null && _a !== void 0 ? _a : {};
+    configValueMap[itemChanged.name] = checked;
+    this.config = Object.assign(Object.assign({}, this.config), { value: configValueMap });
+    this.valueChanged.emit((_b = this.config) === null || _b === void 0 ? void 0 : _b.value);
+  }
+  renderOptions() {
+    return this.optionsList.map(option => (h("ez-check", { label: option.label, compact: true, onEzChange: (event) => this.handleToggleCheck(option, event.detail), value: !!this.isChecked(option.name) })));
+  }
+  isChecked(itemName) {
+    var _a;
+    return (_a = this.config.value) === null || _a === void 0 ? void 0 : _a[itemName];
+  }
+  buidOptions() {
+    var _a, _b, _c;
+    const propsOptions = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.options) !== null && _c !== void 0 ? _c : [];
+    this.optionsList = [...propsOptions];
+  }
+  componentWillRender() {
+    this.buidOptions();
+  }
+  render() {
+    if (!this.config || this.config.type !== FilterItemType.CHECK_BOX_LIST) {
+      return undefined;
+    }
+    return (h("div", { class: 'ez-flex ez-flex--column' }, this.renderOptions()));
+  }
+  static get is() { return "snk-filter-checkbox-list"; }
+  static get properties() {
+    return {
+      "config": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define as configura\u00E7\u00F5es do componente snk-filter-multi-select"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "optionsList": {}
+    };
+  }
+  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"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -1,15 +1,28 @@
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
 import FilterItemType from '../filter-item-type.enum';
+import { EPresentationMode } from './enum/presentationMode';
+import { FilterNumberVariation } from './enum/filterNumberVariation';
 export class SnkFilterPeriod {
   constructor() {
+    this._startIntervalLabel = 'Inicial';
+    this._endIntervalLabel = 'Final';
     this.config = undefined;
+    this.getMessage = undefined;
     this.value = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-number
    */
   ezChangeListener(evt) {
+    if (this.getVariation() === FilterNumberVariation.INTERVAL) {
+      const start = this._startInterval.value;
+      const end = this._endInterval.value;
+      this.value = (start || end ? { start, end } : undefined);
+      this.valueChanged.emit(this.value);
+      return;
+    }
     this.value = evt.detail;
     this.valueChanged.emit(this.value);
   }
@@ -17,19 +30,45 @@ export class SnkFilterPeriod {
    * Exibe o componente snk-filter-number
    */
   async show() {
+    if (this.getVariation() === FilterNumberVariation.INTERVAL) {
+      this._startInterval.setFocus();
+      return;
+    }
     this._numberElement.setFocus();
   }
+  getIntervalValue(prop) {
+    const objValue = this.value ? this.value[prop] : null;
+    return objValue !== null && objValue !== void 0 ? objValue : null;
+  }
+  buildLabel() {
+    if (this.presentationMode === EPresentationMode.CHIP) {
+      return h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9");
+    }
+  }
+  getVariation() {
+    var _a, _b;
+    return (_b = (_a = this.config.props) === null || _a === void 0 ? void 0 : _a.variation) !== null && _b !== void 0 ? _b : FilterNumberVariation.DEFAULT;
+  }
+  componentWillLoad() {
+    if (this.getMessage) {
+      this._startIntervalLabel = this.getMessage('snkFilterBar.labelStart');
+      this._endIntervalLabel = this.getMessage('snkFilterBar.labelEnd');
+    }
+  }
   componentDidLoad() {
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
     }
   }
   render() {
-    var _a;
+    var _a, _b, _c;
     if (!this.config || this.config.type !== FilterItemType.NUMBER) {
       return undefined;
     }
-    return (h("ez-number-input", { id: this.config.id, ref: ref => this._numberElement = ref, label: this.config.label, value: this.config.value, precision: (_a = this.config.props) === null || _a === void 0 ? void 0 : _a.precision }));
+    if (this.getVariation() === FilterNumberVariation.INTERVAL) {
+      return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-number-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this._startIntervalLabel, ref: ref => this._startInterval = ref, value: this.getIntervalValue("start"), precision: (_a = this.config.props) === null || _a === void 0 ? void 0 : _a.precision }), this.buildLabel(), h("ez-number-input", { id: `${this.config.id}_end`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this._endIntervalLabel, ref: ref => this._endInterval = ref, value: this.getIntervalValue("end"), precision: (_b = this.config.props) === null || _b === void 0 ? void 0 : _b.precision })));
+    }
+    return (h("ez-number-input", { id: this.config.id, ref: ref => this._numberElement = ref, label: this.config.label, value: this.config.value, precision: (_c = this.config.props) === null || _c === void 0 ? void 0 : _c.precision }));
   }
   static get is() { return "snk-filter-number"; }
   static get properties() {
@@ -54,13 +93,32 @@ export class SnkFilterPeriod {
           "text": "Define as configura\u00E7\u00F5es do componente snk-filter-number"
         }
       },
+      "getMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(key: string, props?: any) => string",
+          "resolved": "(key: string, props?: any) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado pra flexibilizar os verbetes e mensagens de acordo com o SnkMessageBuilder."
+        }
+      },
       "value": {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
+          "original": "FilterNumberValueType",
+          "resolved": "number | { start: number; end: number; }",
+          "references": {
+            "FilterNumberValueType": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -70,6 +128,29 @@ export class SnkFilterPeriod {
         },
         "attribute": "value",
         "reflect": false
+      },
+      "presentationMode": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "EPresentationMode",
+          "resolved": "EPresentationMode.CHIP | EPresentationMode.MODAL",
+          "references": {
+            "EPresentationMode": {
+              "location": "import",
+              "path": "./enum/presentationMode"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a varia\u00E7\u00E3o do componente"
+        },
+        "attribute": "presentation-mode",
+        "reflect": false,
+        "defaultValue": "EPresentationMode.CHIP"
       }
     };
   }
@@ -85,9 +166,13 @@ export class SnkFilterPeriod {
           "text": "Emitido quando o valor do filtro \u00E9 alterado."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "FilterNumberValueType",
+          "resolved": "number | { start: number; end: number; }",
+          "references": {
+            "FilterNumberValueType": {
+              "location": "global"
+            }
+          }
         }
       }];
   }

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

@@ -50,8 +50,8 @@ export class SnkFilterPeriod {
   }
   componentWillLoad() {
     if (this.getMessage) {
-      this._startDateLabel = this.getMessage('snkFilterBar.labelStartDatePeriod');
-      this._endDateLabel = this.getMessage('snkFilterBar.labelEndDatePeriod');
+      this._startDateLabel = this.getMessage('snkFilterBar.labelStart');
+      this._endDateLabel = this.getMessage('snkFilterBar.labelEnd');
     }
   }
   render() {

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

@@ -9,5 +9,6 @@ var FilterItemType;
   FilterItemType["DEFAULT_FILTER"] = "DEFAULT_FILTER";
   FilterItemType["PERSONALIZED"] = "PERSONALIZED";
   FilterItemType["MULTI_LIST"] = "MULTI_LIST";
+  FilterItemType["CHECK_BOX_LIST"] = "CHECK_BOX_LIST";
 })(FilterItemType || (FilterItemType = {}));
 export default FilterItemType;

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

@@ -51,6 +51,13 @@ export class SnkFilterDetail {
           }
         };
         return snkFilterPersonalizedProps;
+      case FilterItemType.CHECK_BOX_LIST:
+        return {
+          tag: "snk-filter-checkbox-list",
+          props: {
+            onValueChanged: evt => this.config = Object.assign(Object.assign({}, this.config), { value: evt.detail })
+          }
+        };
       case FilterItemType.MULTI_LIST:
         return {
           tag: "snk-entity-list",

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

@@ -1,6 +1,7 @@
 import { ElementIDUtils, FloatingManager, DateUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import FilterItemType from './filter-item-type.enum';
+import { FilterNumberVariation } from './editors/enum/filterNumberVariation';
 export class SnkFilterItem {
   constructor() {
     this.innerClickCheck = (_floatingContainer, node) => {
@@ -123,7 +124,7 @@ export class SnkFilterItem {
     }
   }
   getLabel(isTooltipLabel = false) {
-    var _a;
+    var _a, _b;
     const { type, value, label, props, groupedItems = [] } = this.config;
     if (value || groupedItems.length) {
       if (type === FilterItemType.BINARY_SELECT) {
@@ -163,10 +164,10 @@ export class SnkFilterItem {
         }
         else {
           if (start) {
-            return `${label}: ${this.getMessage('snkFilterBar.onlyStartPeriodToltip')} ${dateFormater.format(start)}`;
+            return `${label}: ${this.getMessage('snkFilterBar.onlyStartToltip')} ${dateFormater.format(start)}`;
           }
           else if (end) {
-            return `${label}: ${this.getMessage('snkFilterBar.onlyEndPeriodToltip')} ${dateFormater.format(end)}`;
+            return `${label}: ${this.getMessage('snkFilterBar.onlyEndToltip')} ${dateFormater.format(end)}`;
           }
           else {
             return label;
@@ -184,23 +185,46 @@ export class SnkFilterItem {
       }
       if (type === FilterItemType.MULTI_LIST) {
         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}`;
+        return this.getLabelFromCheckedOptions(selectedOptions, label, isTooltipLabel);
+      }
+      if (type === FilterItemType.CHECK_BOX_LIST) {
+        const selectedValues = Object.entries(value !== null && value !== void 0 ? value : {})
+          .filter(([_, value]) => value === true)
+          .map(([key, _]) => key);
+        const options = (_b = props.options) !== null && _b !== void 0 ? _b : [];
+        const selectedOptions = options.filter(option => selectedValues.includes(option.name));
+        return this.getLabelFromCheckedOptions(selectedOptions, label, isTooltipLabel);
+      }
+      if (type === FilterItemType.NUMBER && props.variation === FilterNumberVariation.INTERVAL) {
+        const { start, end } = value;
+        if (start && end) {
+          return this.getMessage('snkFilterBar.fullIntervalTooltip', { LABEL: label, START_LABEL: start, END_LABEL: end });
         }
-        if (checkedAmount > 1) {
-          if (isTooltipLabel) {
-            const selectedOptionsDescrptions = selectedOptions.map(item => item.label);
-            return `${label}: ${selectedOptionsDescrptions.join(',')}`;
-          }
-          return `${label}: ${checkedAmount} ${this.getMessage('snkFilterBar.multiListToltip')}`;
+        if (start) {
+          return `${label}: ${this.getMessage('snkFilterBar.onlyStartToltip')} ${Number(start)}`;
+        }
+        if (end) {
+          return `${label}: ${this.getMessage('snkFilterBar.onlyEndToltip')} ${Number(end)}`;
         }
-        return `${label}: ${selectedOptions[0].label}`;
       }
       return `${label}: ${value}`;
     }
     return label;
   }
+  getLabelFromCheckedOptions(selectedOptions, label, isTooltipLabel) {
+    const checkedAmount = selectedOptions.length;
+    if (checkedAmount === 0) {
+      return `${label}`;
+    }
+    if (checkedAmount > 1) {
+      if (isTooltipLabel) {
+        const selectedOptionsDescrptions = selectedOptions.map(item => item.label);
+        return `${label}: ${selectedOptionsDescrptions.join(',')}`;
+      }
+      return `${label}: ${checkedAmount} ${this.getMessage('snkFilterBar.multiListToltip')}`;
+    }
+    return `${label}: ${selectedOptions[0].label}`;
+  }
   calculateActiveCount(groupedItems) {
     return groupedItems.reduce((total, item) => {
       if (!!item.visible)
@@ -262,7 +286,7 @@ export class SnkFilterItem {
   }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (h(Host, null, 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", { 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 ez-elevation--16", 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-list/snk-filter-list.js

@@ -137,7 +137,7 @@ export class SnkFilterList {
     }
   }
   render() {
-    return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, "data-element-id": "serachFilters", mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
+    return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small ez-elevation--4", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, "data-element-id": "serachFilters", mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
   }
   static get is() { return "snk-filter-list"; }
   static get properties() {

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

@@ -5,6 +5,7 @@ import FilterType from '../types/filter-type.enum';
 import FilterItemType from '../filter-item/filter-item-type.enum';
 import { ObjectUtils } from '@sankhyalabs/core';
 import { PersonalizedFilterUtils } from '../../snk-personalized-filter/subcomponents/snk-filter-param-config/utils/PersonalizedFilterUtils';
+import { FilterNumberVariation } from '../filter-item/editors/enum/filterNumberVariation';
 export class SnkFilterModal {
   constructor() {
     this.getMessage = undefined;
@@ -14,6 +15,14 @@ export class SnkFilterModal {
     this.closeModal = undefined;
     this.addPersonalizedFilter = undefined;
     this.editPersonalizedFilter = undefined;
+    this.deletePersonalizedFilter = undefined;
+    this.filtersToDelete = [];
+  }
+  /**
+   * Emitido quando um filtro personalizado é deletado.
+   */
+  deletePersonalizedFilterListener(event) {
+    this.filtersToDelete.push(event.detail);
   }
   getCustomMessage(key, params) {
     var _a;
@@ -81,6 +90,12 @@ export class SnkFilterModal {
     if (this.isValidCustomFilter(filterPersonalized)) {
       this.applyFilters(this.filters);
     }
+    if (this.filtersToDelete.length > 0) {
+      this.filtersToDelete.forEach(filter => {
+        this.deletePersonalizedFilter(filter, this.configName);
+      });
+      this.filtersToDelete = [];
+    }
   }
   isValidCustomFilter(filterPersonalized) {
     const isValid = PersonalizedFilterUtils.validateVariableValues(filterPersonalized);
@@ -120,10 +135,15 @@ export class SnkFilterModal {
       const index = filterListCopy.findIndex(item => item.id === filterItem.id);
       filterListCopy.splice(index, 1, filterItemCopy);
       this.filters = ObjectUtils.copy(filterListCopy);
+      return;
     }
-    else {
-      this.filters.find(filter => filter.id === filterItem.id).value = undefined;
+    if (FilterItemType.CHECK_BOX_LIST === filterItem.type) {
+      const filterListCopy = ObjectUtils.copy(this.filters);
+      filterListCopy.find(filter => filter.id === filterItem.id).value = undefined;
+      this.filters = ObjectUtils.copy(filterListCopy);
+      return;
     }
+    this.filters.find(filter => filter.id === filterItem.id).value = undefined;
   }
   uncheckFilterValues(valueList) {
     valueList.forEach(value => {
@@ -136,6 +156,11 @@ export class SnkFilterModal {
   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, configName: this.configName, onFilterChange: (event) => this.handleFilterChange(event.detail), onEditPersonalizedFilter: evt => this.editPersonalizedFilter(evt.detail), onAddPersonalizedFilter: () => this.addPersonalizedFilter() }));
   }
+  isDefaultFilterNumberVariation(filter) {
+    var _a;
+    return filter.type === FilterItemType.NUMBER
+      && (!filter.props.variation || ((_a = filter.props) === null || _a === void 0 ? void 0 : _a.variation) === FilterNumberVariation.DEFAULT);
+  }
   mountFiltersLines(filters) {
     const MAX_LINE_LENGTH = 2;
     let currentLine = 0;
@@ -145,8 +170,8 @@ export class SnkFilterModal {
       filtersLines[currentLine] = filtersLines[currentLine] || [];
       const item = filters[curr];
       const isLast = curr === filters.length - 1;
-      const currentItemMatch = [FilterItemType.TEXT, FilterItemType.NUMBER].includes(item.type);
-      const nextItemMatch = isLast ? false : [FilterItemType.TEXT, FilterItemType.NUMBER].includes(filters[curr + 1].type);
+      const currentItemMatch = item.type === FilterItemType.TEXT || this.isDefaultFilterNumberVariation(item);
+      const nextItemMatch = isLast ? false : filters[curr + 1].type === FilterItemType.TEXT || this.isDefaultFilterNumberVariation(filters[curr + 1]);
       if ((currentItemMatch && nextItemMatch) || forceAddCurrent) {
         filtersLines[currentLine].push(item);
         forceAddCurrent = filtersLines[currentLine].length < MAX_LINE_LENGTH;
@@ -167,11 +192,17 @@ export class SnkFilterModal {
   getIformedFiltersCount(listItems) {
     let countInformedItens = 0;
     listItems.forEach(item => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f;
       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 (FilterItemType.CHECK_BOX_LIST === item.type) {
+        countInformedItens += Object.entries((_f = item.value) !== null && _f !== void 0 ? _f : {})
+          .filter(([_, value]) => value === true)
+          .map(([key, _]) => key).length;
+        return;
+      }
       if (item.groupedItems != undefined) {
         countInformedItens = item.groupedItems.filter(item => item.visible).length;
         return;
@@ -337,9 +368,59 @@ export class SnkFilterModal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "A\u00E7\u00E3o executada ao editart um filtro personalizado"
+          "text": "A\u00E7\u00E3o executada ao editar um filtro personalizado"
         }
+      },
+      "deletePersonalizedFilter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(filter: IPersonalizedFilter, configName: string) => void",
+          "resolved": "(filter: IPersonalizedFilter, configName: string) => void",
+          "references": {
+            "IPersonalizedFilter": {
+              "location": "import",
+              "path": "../../snk-personalized-filter/interfaces/IPersonalizedFilter"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A\u00E7\u00E3o executada ao deletar um filtro personalizado"
+        }
+      },
+      "filtersToDelete": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IPersonalizedFilter[]",
+          "resolved": "IPersonalizedFilter[]",
+          "references": {
+            "IPersonalizedFilter": {
+              "location": "import",
+              "path": "../../snk-personalized-filter/interfaces/IPersonalizedFilter"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Guarda filtros a serem deletados no Apply do modal"
+        },
+        "defaultValue": "[]"
       }
     };
   }
+  static get listeners() {
+    return [{
+        "name": "deleteFilter",
+        "method": "deletePersonalizedFilterListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -28,9 +28,11 @@ export class SnkFilterModalItem {
       case FilterItemType.SEARCH:
         return { tag: "snk-filter-search" };
       case FilterItemType.NUMBER:
-        return { tag: "snk-filter-number" };
+        return { tag: "snk-filter-number", props };
       case FilterItemType.PERSONALIZED:
         return this.buildSnkFilterPersonalizedProps();
+      case FilterItemType.CHECK_BOX_LIST:
+        return { tag: "snk-filter-checkbox-list", props };
       case FilterItemType.MULTI_LIST:
         return { tag: "snk-entity-list", props: { maxHeightList: "640px", rightListSlotBuilder: item => this.buildRightSlot(item) } };
     }
@@ -39,7 +41,6 @@ export class SnkFilterModalItem {
   buildSnkFilterPersonalizedProps() {
     return {
       tag: "snk-personalized-filter-editor", props: {
-        onDeleteFilter: (event) => this.handleDeleteFilter(event.detail, FilterItemType.PERSONALIZED),
         onEditFilter: (event) => this.editPersonalizedFilter.emit(event.detail),
         onAddFilter: () => this.addPersonalizedFilter.emit(),
       }
@@ -54,7 +55,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: this.filterItem.type === FilterItemType.SEARCH ? data : newValue, visible: this.isVisible(newValue) });
+      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: this.filterItem.type === (FilterItemType.SEARCH || FilterItemType.CHECK_BOX_LIST) ? data : newValue, visible: this.isVisible(newValue) });
     }
   }
   handleDeleteFilter(filter, filterItemType) {

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

@@ -3,7 +3,7 @@
   grid-template-columns: minmax(100px, 100%) 1fr 1fr;
 
    /*@doc Define o z-index do componente.*/
-   --snk-personalized-filter--z-index: var(--most-visible, 3);
+   --snk-personalized-filter--z-index: var(--elevation--20, 20);
    /*@doc Define a cor de fundo do componente.*/
    --snk-personalized-filter--background-color: var(--background--xlight, #fff);
 }
@@ -24,7 +24,7 @@
     width: 100%;
     height: 100%;
     overflow: auto;
-  
+
     /*public*/
     z-index: var(--snk-personalized-filter--z-index);
     background-color: var(--snk-personalized-filter--background-color);
@@ -38,9 +38,8 @@
   width: fit-content;
   height: fit-content;
   min-width: 265px;
-  
+
   /*public*/
-  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);
@@ -162,7 +161,7 @@
   background-color: var(--background--medium, #f0f3f7);
   border: none;
   width: 100%;
-  
+
 }
 
 .snk-filter-bar__filter-modal-item:focus-visible{
@@ -181,4 +180,4 @@
   grid-template-rows: auto auto 1fr auto;
   width: 99%;
   height: 100%;
-}
+}