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

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

@@ -1,10 +1,11 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { DataType, ObjectUtils, ElementIDUtils, ErrorException, ApplicationContext } from '@sankhyalabs/core';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { DataType, StringUtils, ObjectUtils, ElementIDUtils, ErrorException, ApplicationContext } from '@sankhyalabs/core';
 import { EzScrollDirection } from '@sankhyalabs/ezui/dist/collection/components/ez-scroller/EzScrollDirection';
 import { C as ConfigStorage } from './ConfigStorage.js';
 import { toString } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 import { a as FilterOperand, P as PersonalizedFilterUtils } from './PersonalizedFilterUtils.js';
+import { F as FilterNumberVariation } from './filterNumberVariation.js';
 import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
 import { d as defineCustomElement$a } from './snk-expression-group2.js';
 import { d as defineCustomElement$9 } from './snk-expression-item2.js';
@@ -37,6 +38,8 @@ const buildFilter = (item) => {
       return buildNumber(item);
     case FilterItemType.PERSONALIZED:
       return buildPersonalized(item);
+    case FilterItemType.CHECK_BOX_LIST:
+      return buildCheckboxList(item);
     default:
       return undefined;
   }
@@ -69,6 +72,23 @@ function buildMultiList(item) {
     };
   }
 }
+function buildCheckboxList(item) {
+  var _a;
+  const { id, value, props } = item;
+  const selectedOptionNames = Object.entries(value !== null && value !== void 0 ? value : {})
+    .filter(([_, valueChecked]) => valueChecked === true)
+    .map(([key, _]) => key);
+  const selectedOptionsObject = (_a = props.options) === null || _a === void 0 ? void 0 : _a.filter(option => selectedOptionNames.includes(option.name));
+  return { name: id, expression: buildCheckboxListExpression(selectedOptionsObject), params: [] };
+}
+function buildCheckboxListExpression(options) {
+  let expression = "";
+  options.forEach((option, index) => {
+    var _a;
+    expression += ` ${index > 0 ? ((_a = option.operand) !== null && _a !== void 0 ? _a : 'OR') : ''} ${option.expression}`;
+  });
+  return expression.trim();
+}
 function parseMultiListValues(multiListValue) {
   var _a, _b;
   const value = (_b = (_a = multiListValue === null || multiListValue === void 0 ? void 0 : multiListValue.elements) !== null && _a !== void 0 ? _a : multiListValue === null || multiListValue === void 0 ? void 0 : multiListValue.members) !== null && _b !== void 0 ? _b : multiListValue;
@@ -107,15 +127,62 @@ function buildSearch(item) {
   return { name: id, expression, params: [{ name: id, dataType: DataType.TEXT, value: toString(DataType.TEXT, value.value) }] };
 }
 function buildText(item) {
-  const { id, value, props } = item;
+  let { id, value, props } = item;
   const expression = props.expression;
+  if (!StringUtils.isEmpty(props.likeAs)) {
+    value = buildLikeValue(value, props.likeAs);
+  }
   return { name: id, expression, params: [{ name: id, dataType: DataType.TEXT, value: toString(DataType.TEXT, value) }] };
 }
 function buildNumber(item) {
   const { id, value, props } = item;
+  const variation = props.variation;
+  if (variation === FilterNumberVariation.INTERVAL) {
+    const { start, end } = value !== null && value !== void 0 ? value : { start: 0, end: 0 };
+    if (start && end) {
+      return {
+        name: id,
+        expression: props.intervalExpression.fullfill,
+        params: [
+          { name: `${id}.START`, dataType: DataType.NUMBER, value: toString(DataType.NUMBER, start) },
+          { name: `${id}.END`, dataType: DataType.NUMBER, value: toString(DataType.NUMBER, end) }
+        ]
+      };
+    }
+    if (start) {
+      return {
+        name: id,
+        expression: props.intervalExpression.onlystart,
+        params: [
+          { name: id, dataType: DataType.NUMBER, value: toString(DataType.NUMBER, start) }
+        ]
+      };
+    }
+    if (end) {
+      return {
+        name: id,
+        expression: props.intervalExpression.onlyend,
+        params: [
+          { name: id, dataType: DataType.NUMBER, value: toString(DataType.NUMBER, end) }
+        ]
+      };
+    }
+  }
   const expression = props.expression;
   return { name: id, expression, params: [{ name: id, dataType: DataType.NUMBER, value: toString(DataType.NUMBER, value) }] };
 }
+function buildLikeValue(valueAsString, likeAs) {
+  if (likeAs === "CONTANIS") {
+    return `%${valueAsString}%`;
+  }
+  else if (likeAs === "STARTS_WITH") {
+    return `${valueAsString}%`;
+  }
+  else if (likeAs === "ENDS_WITH") {
+    return `%${valueAsString}`;
+  }
+  return valueAsString;
+}
 function buildPersonalized(item) {
   const { id, groupedItems = [] } = item;
   const activeFilters = groupedItems.filter(groupItem => !!groupItem.visible);
@@ -142,13 +209,14 @@ function buildPersonalized(item) {
 }
 
 class SnkFilterModalFactory {
-  constructor({ filterConfig, configName, onComplete, getMessage, onAddPersonalizedFilter, onEditPersonalizedFilter }) {
+  constructor({ filterConfig, configName, onComplete, getMessage, onAddPersonalizedFilter, onEditPersonalizedFilter, onDeletePersonalizedFilter }) {
     this._filterConfig = filterConfig;
     this._configName = configName;
     this._onComplete = onComplete;
     this._getMessage = getMessage;
     this._addPersonalizedFilterFn = onAddPersonalizedFilter;
     this._editPersonalizedFilterFn = onEditPersonalizedFilter;
+    this._onDeletePersonalizedFilter = onDeletePersonalizedFilter;
   }
   applyFilters(newFilterConfig) {
     this._onComplete(newFilterConfig);
@@ -164,6 +232,7 @@ class SnkFilterModalFactory {
     filterModal.closeModal = () => this._closeModal();
     filterModal.addPersonalizedFilter = () => this._addPersonalizedFilterFn();
     filterModal.editPersonalizedFilter = (id) => this._editPersonalizedFilterFn(id);
+    filterModal.deletePersonalizedFilter = (filter, configName) => this._onDeletePersonalizedFilter(filter, configName);
     return filterModal;
   }
   async showModal() {
@@ -182,12 +251,13 @@ 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(--most-visible, 3);--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 snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr;--snk-personalized-filter--z-index:var(--elevation--20, 20);--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;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() {
     super();
     this.__registerHost();
+    this.configUpdated = createEvent(this, "configUpdated", 7);
     this._updateSequence = [];
     this._loadingPending = false;
     this._configUpdated = false;
@@ -246,6 +316,8 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         });
       }
     }
+    if (this._loadingPending || this._configUpdated)
+      this.configUpdated.emit(newValue);
     this.processAfterUpdateConfig();
   }
   /**
@@ -254,6 +326,61 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   async reload() {
     this.loadConfigFromStorage();
   }
+  /**
+   * Retorna um item de filtro pelo ID.
+   */
+  async getFilterItem(id) {
+    const item = this.filterConfig.find(item => item.id === id);
+    return Promise.resolve(ObjectUtils.copy(item));
+  }
+  /**
+  * Atualiza um item do filtro.
+  *
+  * @param filterItem - Item com as informações atualizadas, caso o item não seja encontrado no array ele mão será modificado
+  */
+  async updateFilterItem(newFilterItem) {
+    const itemIndex = this.filterConfig.findIndex(item => item.id === newFilterItem.id);
+    if (itemIndex == -1) {
+      console.warn("[SnkFilterBar.updateFilterItem] FilterItem não encontrado, o mesmo não será atualizado.");
+      return Promise.resolve();
+    }
+    this._loadingPending = true;
+    this.updateFilter(newFilterItem);
+    return Promise.resolve();
+  }
+  /**
+  * Adiciona um item de filtro.
+  *
+  * @param filterItem - Item a ser adicionado, caso o item já exista com o ID ele não será adicionado novamente
+  */
+  async addFilterItem(filterItem) {
+    const itemIndex = this.filterConfig.findIndex(item => item.id === filterItem.id);
+    if (itemIndex > -1) {
+      console.warn("[SnkFilterBar.addFilterItem] FilterItem já existe , o mesmo não será adicionado novamente.");
+      return Promise.resolve();
+    }
+    this.filterConfig.push(filterItem);
+    this._loadingPending = true;
+    this.updateFilter(filterItem);
+    return Promise.resolve();
+  }
+  /**
+  * Remove um item de filtro.
+  *
+  * @param filterID - ID do a ser adicionado
+  *
+  * @returns {Promise<SnkFilterItemConfig|undefined>} - Retorna o item de filtro removido, ou undefined caso não encontrado.
+  */
+  async removeFilterItem(filterID) {
+    const itemIndex = this.filterConfig.findIndex(item => item.id === filterID);
+    if (itemIndex > -1) {
+      console.warn("[SnkFilterBar.removeFilterItem] FilterItem não encontrado");
+      return Promise.resolve(undefined);
+    }
+    const itemToRemove = this.filterConfig[itemIndex];
+    this.filterConfig = this.filterConfig.filter(item => item.id !== filterID);
+    return Promise.resolve(itemToRemove);
+  }
   componentDidLoad() {
     if (this._element) {
       const dataInfo = { dataUnit: this.dataUnit };
@@ -278,6 +405,8 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   async processAfterUpdateConfig() {
     if (this._loadingPending) {
+      if (await this._application.isLoadedByPk() && !this._configUpdated)
+        return;
       const personalizedFilter = this.getPersonalizedFilterItem();
       this._pendingVariables = !PersonalizedFilterUtils.validateVariableValues(personalizedFilter);
       if (this._pendingVariables) {
@@ -449,13 +578,18 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const callbackOnApplyFilter = (filters) => {
       this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
     };
+    let filtersConfigCopy = ObjectUtils.copy(this.filterConfig);
+    filtersConfigCopy = filtersConfigCopy.sort((itemA, itemB) => {
+      return itemA.originOrder - itemB.originOrder;
+    });
     const factoryParams = {
-      filterConfig: ObjectUtils.copy(this.filterConfig),
+      filterConfig: filtersConfigCopy,
       configName: this.configName,
       onComplete: callbackOnApplyFilter,
       getMessage: (key, props) => this.getMessage(key, props),
       onAddPersonalizedFilter: () => this.addPersonalizedFilter(),
-      onEditPersonalizedFilter: (id) => this.editPersonalizedFilter(id)
+      onEditPersonalizedFilter: (id) => this.editPersonalizedFilter(id),
+      onDeletePersonalizedFilter: (filter, configName) => this.deletePersonalizedFilter(filter, FilterItemType.PERSONALIZED, configName),
     };
     this._filterModalFactory = new SnkFilterModalFactory(factoryParams);
     await this._filterModalFactory.showModal();
@@ -473,11 +607,24 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.showPersonalizedFilter = true;
     this.personalizedFilterId = id;
   }
+  deletePersonalizedFilter(filter, filterItemType, configName) {
+    if (filterItemType === FilterItemType.PERSONALIZED) {
+      ConfigStorage.removePersonalizedFilter(filter, this.resourceID, configName);
+    }
+  }
+  handleHidePersonalizedFilter(reloadFilterBar) {
+    if (reloadFilterBar) {
+      this.loadConfigFromStorage().then(() => {
+        this.hidePersonalizedFilter();
+      });
+    }
+    else {
+      this.hidePersonalizedFilter();
+    }
+  }
   hidePersonalizedFilter() {
-    this.loadConfigFromStorage().then(() => {
-      this.personalizedFilterId = undefined;
-      this.showPersonalizedFilter = false;
-    });
+    this.personalizedFilterId = undefined;
+    this.showPersonalizedFilter = false;
   }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -495,7 +642,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return undefined;
     }
     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, resourceID: this.resourceID });
+      return h("snk-personalized-filter", { class: "filter-bar__personalized-filter", filterId: this.personalizedFilterId, ref: (el) => this._elPersonalizedFilter = el, onEzCancel: () => this.handleHidePersonalizedFilter(false), onEzAfterSave: () => this.handleHidePersonalizedFilter(true), entityUri: this.dataUnit.name, configName: this.configName, resourceID: this.resourceID });
     }
     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" }))));
   }
@@ -514,7 +661,11 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "scrollerLocked": [32],
     "showPersonalizedFilter": [32],
     "personalizedFilterId": [32],
-    "reload": [64]
+    "reload": [64],
+    "getFilterItem": [64],
+    "updateFilterItem": [64],
+    "addFilterItem": [64],
+    "removeFilterItem": [64]
   }, [[0, "filterChange", "filterChangeListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/snk-filter-checkbox-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkFilterCheckboxList extends Components.SnkFilterCheckboxList, HTMLElement {}
+export const SnkFilterCheckboxList: {
+  prototype: SnkFilterCheckboxList;
+  new (): SnkFilterCheckboxList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-filter-checkbox-list.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { F as FilterItemType } from './filter-item-type.enum.js';
+
+const SnkFilterCheckboxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    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()));
+  }
+  get _element() { return this; }
+}, [0, "snk-filter-checkbox-list", {
+    "config": [1040],
+    "optionsList": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-filter-checkbox-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-filter-checkbox-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFilterCheckboxList$1);
+      }
+      break;
+  } });
+}
+
+const SnkFilterCheckboxList = SnkFilterCheckboxList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkFilterCheckboxList, defineCustomElement };

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

@@ -55,6 +55,13 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
           }
         };
         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/components/snk-filter-item2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { FloatingManager, DateUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
+import { F as FilterNumberVariation } from './filterNumberVariation.js';
 import { d as defineCustomElement$1 } from './snk-filter-detail2.js';
 
 const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -129,7 +130,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   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) {
@@ -169,10 +170,10 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         }
         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;
@@ -190,23 +191,46 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
       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)
@@ -268,7 +292,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   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 }))));
   }
   get _filterItemElement() { return this; }
   static get watchers() { return {

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

@@ -141,7 +141,7 @@ const SnkFilterList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
   }
   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))));
   }
   get _element() { return this; }
 }, [4, "snk-filter-list", {

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

@@ -43,9 +43,11 @@ const SnkFilterModalItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       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) } };
     }
@@ -54,7 +56,6 @@ const SnkFilterModalItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   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(),
       }
@@ -69,7 +70,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: 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/components/snk-filter-modal.js

@@ -5,6 +5,7 @@ import { F as FilterType, d as defineCustomElement$2 } from './snk-filter-modal-
 import { F as FilterItemType } from './filter-item-type.enum.js';
 import { ObjectUtils } from '@sankhyalabs/core';
 import { P as PersonalizedFilterUtils } from './PersonalizedFilterUtils.js';
+import { F as FilterNumberVariation } from './filterNumberVariation.js';
 
 const snkFilterModalCss = "ez-modal{--ez-modal-content-padding:24px 12px}.snk-filter-modal__container{width:344px;max-width:344px;min-width:344px;overflow:hidden}.snk-filter-modal__content{display:flex;flex-direction:column;gap:var(--space--medium, 12px);padding-right:var(--space--3xs, 4px)}.snk-filter-modal__collapsible-box{border:var(--border--small, 1px solid) var(--color--strokes, #DCE0E8);border-radius:var(--border--radius-medium);padding:var(--space--medium, 12px) var(--space--small, 6px)}.snk-filter-modal__rendered-items{max-height:760px;overflow-x:clip;overflow-y:auto}.snk-filter-modal__rendered-items::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
 
@@ -19,6 +20,14 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     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;
@@ -86,6 +95,12 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     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);
@@ -123,10 +138,15 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       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 => {
@@ -139,6 +159,11 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   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;
@@ -148,8 +173,8 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       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;
@@ -170,11 +195,17 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   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;
@@ -215,8 +246,10 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "applyFilters": [16],
     "closeModal": [16],
     "addPersonalizedFilter": [16],
-    "editPersonalizedFilter": [16]
-  }]);
+    "editPersonalizedFilter": [16],
+    "deletePersonalizedFilter": [16],
+    "filtersToDelete": [16]
+  }, [[0, "deleteFilter", "deletePersonalizedFilterListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;