@sankhyalabs/sankhyablocks 8.9.0-dev.2 → 8.9.0-dev.4

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/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) => {
@@ -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;
@@ -197,6 +198,18 @@ export class SnkFilterItem {
         }
         return `${label}: ${selectedOptions[0].label}`;
       }
+      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 (start) {
+          return `${label}: ${this.getMessage('snkFilterBar.onlyStartToltip')} ${Number(start)}`;
+        }
+        if (end) {
+          return `${label}: ${this.getMessage('snkFilterBar.onlyEndToltip')} ${Number(end)}`;
+        }
+      }
       return `${label}: ${value}`;
     }
     return label;

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;
@@ -136,6 +137,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 +151,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;

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

@@ -28,7 +28,7 @@ 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.MULTI_LIST:

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

@@ -76,6 +76,44 @@ export class SnkFilterBar {
   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();
+  }
   componentDidLoad() {
     if (this._element) {
       const dataInfo = { dataUnit: this.dataUnit };
@@ -492,6 +530,84 @@ export class SnkFilterBar {
           "text": "Faz o recarregamento da filterbar buscando o state no servidor.",
           "tags": []
         }
+      },
+      "getFilterItem": {
+        "complexType": {
+          "signature": "(id: string) => Promise<SnkFilterItemConfig | undefined>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          },
+          "return": "Promise<SnkFilterItemConfig>"
+        },
+        "docs": {
+          "text": "Retorna um item de filtro pelo ID.",
+          "tags": []
+        }
+      },
+      "updateFilterItem": {
+        "complexType": {
+          "signature": "(newFilterItem: SnkFilterItemConfig) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atualiza um item do filtro.",
+          "tags": [{
+              "name": "param",
+              "text": "filterItem - Item com as informa\u00E7\u00F5es atualizadas, caso o item n\u00E3o seja encontrado no array ele m\u00E3o ser\u00E1 modificado"
+            }]
+        }
+      },
+      "addFilterItem": {
+        "complexType": {
+          "signature": "(filterItem: SnkFilterItemConfig) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "filterItem - Item a ser adicionado, caso o item j\u00E1 exista com o ID ele n\u00E3o ser\u00E1 adicionado novamente"
+                }],
+              "text": "- Item a ser adicionado, caso o item j\u00E1 exista com o ID ele n\u00E3o ser\u00E1 adicionado novamente"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Adiciona um item de filtro.",
+          "tags": [{
+              "name": "param",
+              "text": "filterItem - Item a ser adicionado, caso o item j\u00E1 exista com o ID ele n\u00E3o ser\u00E1 adicionado novamente"
+            }]
+        }
       }
     };
   }

package/dist/collection/lib/message/resources/snk-filter-bar.msg.js

@@ -30,11 +30,12 @@ const snkFilterBarMessages = {
   "modalCancelButtonLabel": "Limpar",
   "binarySelectTooltip": "Exibindo registros",
   "multiListToltip": "selecionado(a)s",
-  "onlyStartPeriodToltip": "A partir de",
-  "onlyEndPeriodToltip": "Até",
+  "onlyStartToltip": "A partir de",
+  "onlyEndToltip": "Até",
   "fullPeriodTooltip": "Data de {{LABEL}}: {{START_LABEL}} até {{END_LABEL}}",
-  "labelStartDatePeriod": "Inicial",
-  "labelEndDatePeriod": "Final",
+  "labelStart": "Inicial",
+  "labelEnd": "Final",
+  "fullIntervalTooltip": "{{LABEL}}: {{START_LABEL}} até {{END_LABEL}}",
   "filters": "Filtros",
   "personalizedCount": "{{activeCount}} selecionado(s)",
   "filterModal": {

package/dist/components/SnkMessageBuilder.js

@@ -63,11 +63,12 @@ const snkFilterBarMessages = {
   "modalCancelButtonLabel": "Limpar",
   "binarySelectTooltip": "Exibindo registros",
   "multiListToltip": "selecionado(a)s",
-  "onlyStartPeriodToltip": "A partir de",
-  "onlyEndPeriodToltip": "Até",
+  "onlyStartToltip": "A partir de",
+  "onlyEndToltip": "Até",
   "fullPeriodTooltip": "Data de {{LABEL}}: {{START_LABEL}} até {{END_LABEL}}",
-  "labelStartDatePeriod": "Inicial",
-  "labelEndDatePeriod": "Final",
+  "labelStart": "Inicial",
+  "labelEnd": "Final",
+  "fullIntervalTooltip": "{{LABEL}}: {{START_LABEL}} até {{END_LABEL}}",
   "filters": "Filtros",
   "personalizedCount": "{{activeCount}} selecionado(s)",
   "filterModal": {

package/dist/components/filterNumberVariation.js

@@ -0,0 +1,7 @@
+var FilterNumberVariation;
+(function (FilterNumberVariation) {
+  FilterNumberVariation["DEFAULT"] = "DEFAULT";
+  FilterNumberVariation["INTERVAL"] = "INTERVAL";
+})(FilterNumberVariation || (FilterNumberVariation = {}));
+
+export { FilterNumberVariation as F };

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

@@ -5,6 +5,7 @@ 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';
@@ -116,6 +117,38 @@ function buildText(item) {
 }
 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) }] };
 }
@@ -272,6 +305,44 @@ 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();
+  }
   componentDidLoad() {
     if (this._element) {
       const dataInfo = { dataUnit: this.dataUnit };
@@ -542,7 +613,10 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "scrollerLocked": [32],
     "showPersonalizedFilter": [32],
     "personalizedFilterId": [32],
-    "reload": [64]
+    "reload": [64],
+    "getFilterItem": [64],
+    "updateFilterItem": [64],
+    "addFilterItem": [64]
   }, [[0, "filterChange", "filterChangeListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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 {
@@ -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;
@@ -203,6 +204,18 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         }
         return `${label}: ${selectedOptions[0].label}`;
       }
+      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 (start) {
+          return `${label}: ${this.getMessage('snkFilterBar.onlyStartToltip')} ${Number(start)}`;
+        }
+        if (end) {
+          return `${label}: ${this.getMessage('snkFilterBar.onlyEndToltip')} ${Number(end)}`;
+        }
+      }
       return `${label}: ${value}`;
     }
     return label;

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

@@ -43,7 +43,7 @@ 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.MULTI_LIST:

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)}";
 
@@ -139,6 +140,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 +154,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;