@jumpgroup/jump-design-system 0.3.72 → 0.3.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/cjs/jump-filter-range.cjs.entry.js +41 -12
  2. package/dist/cjs/jump-filter-range.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/jump-filter-range/jump-filter-range.js +53 -38
  4. package/dist/collection/components/jump-filter-range/jump-filter-range.js.map +1 -1
  5. package/dist/components/jump-filter-range.js +41 -12
  6. package/dist/components/jump-filter-range.js.map +1 -1
  7. package/dist/esm/jump-filter-range.entry.js +41 -12
  8. package/dist/esm/jump-filter-range.entry.js.map +1 -1
  9. package/dist/jump-design-system/jump-design-system.esm.js +1 -1
  10. package/dist/jump-design-system/p-9964d664.entry.js +2 -0
  11. package/dist/jump-design-system/p-9964d664.entry.js.map +1 -0
  12. package/dist/jump-design-system-elements.json +5 -5
  13. package/dist/types/components/jump-filter-range/jump-filter-range.d.ts +42 -9
  14. package/dist/types/components.d.ts +26 -16
  15. package/package.json +1 -1
  16. package/dist/jump-design-system/p-c19c86c7.entry.js +0 -2
  17. package/dist/jump-design-system/p-c19c86c7.entry.js.map +0 -1
package/dist/cjs/jump-filter-range.cjs.entry.js CHANGED
@@ -7,12 +7,16 @@ const index = require('./index-230bcbae.js');
7
7
  const jumpFilterRangeCss = ":host{--jump-range-track-height:4px;--jump-range-thumb-color:var(--neutral-white, #ffffff);--jump-range-thumb-size:18px;--jump-range-fill-color:var(--secondary-standard, #5e79ba);--jump-range-track-color:var(--gray-ultralight, #f8f8f8);display:block;width:100%}:host(.is-disabled){opacity:0.5;cursor:not-allowed;--jump-range-fill-color:var(--gray-light, #e0e0e0)}.label-container{display:flex;justify-content:space-between;margin-bottom:0.75rem;font-size:0.9em;color:#333}.slider-container{position:relative;height:var(--jump-range-thumb-size);display:flex;align-items:center}.slider-track,.slider-fill{position:absolute;left:0;height:var(--jump-range-track-height);border-radius:var(--jump-range-track-height);width:100%}.slider-track{background-color:var(--jump-range-track-color);z-index:1}.slider-fill{background-color:var(--jump-range-fill-color);z-index:2}.range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:100%;height:var(--jump-range-thumb-size);background:transparent;pointer-events:none;margin:0;z-index:3}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto;margin-top:calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2)}input[type=range]::-moz-range-thumb{-moz-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}input[type=range]::-moz-range-track{-moz-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}";
8
8
  const JumpFilterRangeStyle0 = jumpFilterRangeCss;
9
9
 
10
+ // La distanza minima tra i due slider, per evitare che si sovrappongano.
10
11
  const MIN_GAP = 0;
11
12
  const JumpFilterRange = class {
12
13
  constructor(hostRef) {
13
14
  index.registerInstance(this, hostRef);
14
- this.rangeChange = index.createEvent(this, "jump-range-change", 7);
15
15
  this.filterChange = index.createEvent(this, "jump-filterchange", 7);
16
+ /**
17
+ * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.
18
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
19
+ */
16
20
  this.handleMinInput = (event) => {
17
21
  const input = event.target;
18
22
  let newMinVal = parseInt(input.value, 10);
@@ -21,8 +25,11 @@ const JumpFilterRange = class {
21
25
  input.value = newMinVal.toString();
22
26
  }
23
27
  this.minVal = newMinVal;
24
- this.emitChangeEvents();
25
28
  };
29
+ /**
30
+ * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.
31
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
32
+ */
26
33
  this.handleMaxInput = (event) => {
27
34
  const input = event.target;
28
35
  let newMaxVal = parseInt(input.value, 10);
@@ -31,7 +38,19 @@ const JumpFilterRange = class {
31
38
  input.value = newMaxVal.toString();
32
39
  }
33
40
  this.maxVal = newMaxVal;
34
- this.emitChangeEvents();
41
+ };
42
+ /**
43
+ * Eseguito quando l'utente rilascia lo slider (evento onChange).
44
+ * Consolida il valore e emette l'evento finale.
45
+ */
46
+ this.handleCommit = () => {
47
+ console.log('Committing values:', this.minVal, this.maxVal);
48
+ const currentValues = [this.minVal, this.maxVal];
49
+ this.value = currentValues; // Sincronizza la prop
50
+ this.filterChange.emit({
51
+ name: this.name,
52
+ values: currentValues,
53
+ });
35
54
  };
36
55
  this.name = 'range-filter';
37
56
  this.labelMinBefore = 'Min:';
@@ -52,24 +71,25 @@ const JumpFilterRange = class {
52
71
  componentWillLoad() {
53
72
  this.setComponentValues(this.value);
54
73
  }
74
+ /**
75
+ * Imposta i valori interni del componente partendo da un array.
76
+ */
55
77
  setComponentValues(values) {
56
78
  if (values && values.length === 2) {
57
79
  this.minVal = values[0];
58
80
  this.maxVal = values[1];
59
81
  }
60
82
  else {
83
+ // Fallback ai valori di default se l'input non è valido
61
84
  this.minVal = this.min;
62
85
  this.maxVal = this.max;
63
86
  }
87
+ // Sincronizza la prop `value` con lo stato interno
64
88
  this.value = [this.minVal, this.maxVal];
65
89
  }
66
- emitChangeEvents() {
67
- const currentValues = [this.minVal, this.maxVal];
68
- this.value = currentValues;
69
- const eventDetail = { name: this.name, values: currentValues };
70
- this.rangeChange.emit(eventDetail);
71
- this.filterChange.emit(eventDetail);
72
- }
90
+ /**
91
+ * Calcola lo stile per la barra di riempimento tra i due slider.
92
+ */
73
93
  getFillStyle() {
74
94
  const range = this.max - this.min;
75
95
  if (range === 0)
@@ -78,24 +98,33 @@ const JumpFilterRange = class {
78
98
  const rightPercent = ((this.maxVal - this.min) / range) * 100;
79
99
  return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };
80
100
  }
101
+ /**
102
+ * Metodo pubblico per impostare il valore del filtro programmaticamente.
103
+ */
81
104
  async setValue(values, emitEvent = true) {
82
105
  if (this.disabled || !values || values.length !== 2) {
83
106
  return this.getValues();
84
107
  }
85
108
  this.setComponentValues(values);
86
109
  if (emitEvent) {
87
- this.emitChangeEvents();
110
+ this.handleCommit();
88
111
  }
89
112
  return this.getValues();
90
113
  }
114
+ /**
115
+ * Metodo pubblico per ottenere il valore corrente.
116
+ */
91
117
  async getValues() {
92
118
  return [this.minVal, this.maxVal];
93
119
  }
120
+ /**
121
+ * Metodo pubblico per ottenere il nome del filtro.
122
+ */
94
123
  async getName() {
95
124
  return this.name;
96
125
  }
97
126
  render() {
98
- return (index.h(index.Host, { key: '7db1339ac56ae016c5a050a7266bbc353b33bdb0', class: { 'is-disabled': this.disabled } }, index.h("div", { key: '81be4dbe27ecb9a0ae7e2ec8aa83630d8caf21b0', class: "label-container" }, index.h("label", { key: 'fc8ad6c1e5e2cef6aca4c3abe3358d51c23a05e8', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), index.h("label", { key: '5c21deff42c6e9e6b6bfd560b3f5af158ccdedbb', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), index.h("div", { key: '799c8f97eaecfffe4940e0b36879024cba0c0610', class: "slider-container" }, index.h("div", { key: 'f9f344075857009d4bbb9c6ed882363099d5fba9', class: "slider-track" }), index.h("div", { key: '0f7a60252ca1d39a43a8c5e98b4fd93daa80a4c9', class: "slider-fill", style: this.getFillStyle() }), index.h("input", { key: '0318aec31145df2a4193eefcb43011ab7df3464d', type: "range", min: this.min, max: this.max, step: this.step, value: this.minVal, onInput: this.handleMinInput, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), index.h("input", { key: '5340fe9c8ac6658d58cafcd95182cc7562571aee', type: "range", min: this.min, max: this.max, step: this.step, value: this.maxVal, onInput: this.handleMaxInput, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
127
+ return (index.h(index.Host, { key: '22efb08a200fb221558e31357db3ceb790b2ec62', class: { 'is-disabled': this.disabled } }, index.h("div", { key: '73a3d09acc2e4b05d06c1723487d7091da6979bf', class: "label-container" }, index.h("label", { key: '56c91ea288e74ebccf7c4969dfd1a74a56cfc99f', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), index.h("label", { key: 'fc374dc83e2b75648b58a3d2a444193c48db91a9', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), index.h("div", { key: '8ed46accf743cbef63dd0fa854b35c4f92f968ad', class: "slider-container" }, index.h("div", { key: 'ce33b796cad574e5094de1689aaab19ed82d6ddf', class: "slider-track" }), index.h("div", { key: '68495fbe0c68db2fc22884af8b62189b88270b4e', class: "slider-fill", style: this.getFillStyle() }), index.h("input", { key: 'c640ab76cd1b4c3a61354a813d5633e0b4234112', type: "range", min: this.min, max: this.max, step: this.step, value: this.minVal, onInput: this.handleMinInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), index.h("input", { key: 'd77b371d8be9fec561a5e9f447249aac4e4d252a', type: "range", min: this.min, max: this.max, step: this.step, value: this.maxVal, onInput: this.handleMaxInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
99
128
  }
100
129
  get host() { return index.getElement(this); }
101
130
  static get watchers() { return {
package/dist/cjs/jump-filter-range.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"jump-filter-range.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,k4DAAk4D,CAAC;AAC95D,8BAAe,kBAAkB;;ACCjC,MAAM,OAAO,GAAG,CAAC,CAAC;MAOL,eAAe;;;;;QAuDlB,mBAAc,GAAG,CAAC,KAAY;YACpC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC1C,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,EAAE;gBACrC,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBAClC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;aACpC;YACD,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAY;YACpC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC1C,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,EAAE;gBACrC,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBAClC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;aACpC;YACD,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,CAAC;oBAvEqB,cAAc;8BAIJ,MAAM;6BAEP,EAAE;8BAGD,MAAM;6BAEP,EAAE;mBAIZ,CAAC;mBAED,GAAG;oBAEF,CAAC;qBAEmB,EAAE;wBAEA,KAAK;;;;IAMlD,YAAY,CAAC,QAAkB;QAC7B,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;KACnC;IAKD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrC;IAEO,kBAAkB,CAAC,MAAgB;QACzC,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACjC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;SACzB;aAAM;YACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;YACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;SACxB;QACD,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACzC;IAwBO,gBAAgB;QACtB,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;QAC3B,MAAM,WAAW,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACrC;IAEO,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACpD,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,GAAG,CAAC;QAC7D,MAAM,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,GAAG,CAAC;QAC9D,OAAO,EAAE,IAAI,EAAE,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,GAAG,YAAY,GAAG,WAAW,GAAG,EAAE,CAAC;KAC7E;IAGD,MAAM,QAAQ,CAAC,MAAgB,EAAE,YAAqB,IAAI;QACxD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACnD,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;SACzB;QACD,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;QACD,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;KACzB;IAGD,MAAM,SAAS;QACb,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;IAGD,MAAM,OAAO;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC3CD,kEAAK,KAAK,EAAC,iBAAiB,IAE1BA,oEAAO,KAAK,EAAC,WAAW,IACrB,IAAI,CAAC,cAAc,OAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAChD,EAGRA,oEAAO,KAAK,EAAC,WAAW,IACrB,IAAI,CAAC,cAAc,OAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAChD,CACJ,EACNA,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,kEAAK,KAAK,EAAC,cAAc,GAAO,EAChCA,kEAAK,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAQ,EAC3DA,oEACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC7C,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,aAAa,gBAEP,IAAI,CAAC,cAAc,GAC/B,EACFA,oEACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC7C,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,aAAa,gBAEP,IAAI,CAAC,cAAc,GAC/B,CACE,CACD,EACP;KACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n --jump-range-track-height: 4px;\n --jump-range-thumb-color: var(--neutral-white, #ffffff);\n --jump-range-thumb-size: 18px;\n --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n display: block;\n width: 100%;\n}\n\n:host(.is-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n font-size: 0.9em;\n color: #333;\n}\n\n.slider-container {\n position: relative;\n height: var(--jump-range-thumb-size);\n display: flex;\n align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n position: absolute;\n left: 0;\n height: var(--jump-range-track-height);\n border-radius: var(--jump-range-track-height);\n width: 100%;\n}\n\n.slider-track {\n background-color: var(--jump-range-track-color);\n z-index: 1;\n}\n\n.slider-fill {\n background-color: var(--jump-range-fill-color);\n z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n width: 100%;\n height: var(--jump-range-thumb-size);\n background: transparent;\n pointer-events: none; // Permette di cliccare attraverso l'input\n margin: 0;\n z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n -moz-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n -moz-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato negli eventi */\n @Prop() name: string = 'range-filter';\n\n // --- Props delle etichette modificate ---\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n // --- Fine props modificate ---\n\n /** Il valore minimo possibile per lo slider */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max] */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n @Event({ eventName: 'jump-range-change' }) rangeChange: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter;\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n this.value = [this.minVal, this.maxVal];\n }\n\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n this.emitChangeEvents();\n };\n\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n this.emitChangeEvents();\n };\n\n private emitChangeEvents() {\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues;\n const eventDetail = { name: this.name, values: currentValues };\n this.rangeChange.emit(eventDetail);\n this.filterChange.emit(eventDetail);\n }\n\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.emitChangeEvents();\n }\n return this.getValues();\n }\n \n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n {/* Etichetta MIN aggiornata */}\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n \n {/* Etichetta MAX aggiornata */}\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"],"version":3}
1
+ {"file":"jump-filter-range.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n --jump-range-track-height: 4px;\n --jump-range-thumb-color: var(--neutral-white, #ffffff);\n --jump-range-thumb-size: 18px;\n --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n display: block;\n width: 100%;\n}\n\n:host(.is-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n font-size: 0.9em;\n color: #333;\n}\n\n.slider-container {\n position: relative;\n height: var(--jump-range-thumb-size);\n display: flex;\n align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n position: absolute;\n left: 0;\n height: var(--jump-range-track-height);\n border-radius: var(--jump-range-track-height);\n width: 100%;\n}\n\n.slider-track {\n background-color: var(--jump-range-track-color);\n z-index: 1;\n}\n\n.slider-fill {\n background-color: var(--jump-range-fill-color);\n z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n width: 100%;\n height: var(--jump-range-thumb-size);\n background: transparent;\n pointer-events: none; // Permette di cliccare attraverso l'input\n margin: 0;\n z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n -moz-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n -moz-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\n// La distanza minima tra i due slider, per evitare che si sovrappongano.\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato nell'evento finale. */\n @Prop() name: string = 'range-filter';\n\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n\n /** Il valore minimo possibile per lo slider. */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider. */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider. */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max]. */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n /**\n * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\n * Ideale per lanciare chiamate API o ricalcoli onerosi.\n */\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter<{ name: string; values: number[] }>;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n /**\n * Imposta i valori interni del componente partendo da un array.\n */\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n // Fallback ai valori di default se l'input non è valido\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n // Sincronizza la prop `value` con lo stato interno\n this.value = [this.minVal, this.maxVal];\n }\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n };\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n };\n\n /**\n * Eseguito quando l'utente rilascia lo slider (evento onChange).\n * Consolida il valore e emette l'evento finale.\n */\n private handleCommit = () => {\n console.log('Committing values:', this.minVal, this.maxVal);\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues; // Sincronizza la prop\n this.filterChange.emit({\n name: this.name,\n values: currentValues,\n });\n };\n\n /**\n * Calcola lo stile per la barra di riempimento tra i due slider.\n */\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n /**\n * Metodo pubblico per impostare il valore del filtro programmaticamente.\n */\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.handleCommit();\n }\n return this.getValues();\n }\n\n /**\n * Metodo pubblico per ottenere il valore corrente.\n */\n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n /**\n * Metodo pubblico per ottenere il nome del filtro.\n */\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"],"version":3}
package/dist/collection/components/jump-filter-range/jump-filter-range.js CHANGED
@@ -1,7 +1,12 @@
1
1
  import { Host, h } from "@stencil/core";
2
+ // La distanza minima tra i due slider, per evitare che si sovrappongano.
2
3
  const MIN_GAP = 0;
3
4
  export class JumpFilterRange {
4
5
  constructor() {
6
+ /**
7
+ * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.
8
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
9
+ */
5
10
  this.handleMinInput = (event) => {
6
11
  const input = event.target;
7
12
  let newMinVal = parseInt(input.value, 10);
@@ -10,8 +15,11 @@ export class JumpFilterRange {
10
15
  input.value = newMinVal.toString();
11
16
  }
12
17
  this.minVal = newMinVal;
13
- this.emitChangeEvents();
14
18
  };
19
+ /**
20
+ * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.
21
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
22
+ */
15
23
  this.handleMaxInput = (event) => {
16
24
  const input = event.target;
17
25
  let newMaxVal = parseInt(input.value, 10);
@@ -20,7 +28,19 @@ export class JumpFilterRange {
20
28
  input.value = newMaxVal.toString();
21
29
  }
22
30
  this.maxVal = newMaxVal;
23
- this.emitChangeEvents();
31
+ };
32
+ /**
33
+ * Eseguito quando l'utente rilascia lo slider (evento onChange).
34
+ * Consolida il valore e emette l'evento finale.
35
+ */
36
+ this.handleCommit = () => {
37
+ console.log('Committing values:', this.minVal, this.maxVal);
38
+ const currentValues = [this.minVal, this.maxVal];
39
+ this.value = currentValues; // Sincronizza la prop
40
+ this.filterChange.emit({
41
+ name: this.name,
42
+ values: currentValues,
43
+ });
24
44
  };
25
45
  this.name = 'range-filter';
26
46
  this.labelMinBefore = 'Min:';
@@ -41,24 +61,25 @@ export class JumpFilterRange {
41
61
  componentWillLoad() {
42
62
  this.setComponentValues(this.value);
43
63
  }
64
+ /**
65
+ * Imposta i valori interni del componente partendo da un array.
66
+ */
44
67
  setComponentValues(values) {
45
68
  if (values && values.length === 2) {
46
69
  this.minVal = values[0];
47
70
  this.maxVal = values[1];
48
71
  }
49
72
  else {
73
+ // Fallback ai valori di default se l'input non è valido
50
74
  this.minVal = this.min;
51
75
  this.maxVal = this.max;
52
76
  }
77
+ // Sincronizza la prop `value` con lo stato interno
53
78
  this.value = [this.minVal, this.maxVal];
54
79
  }
55
- emitChangeEvents() {
56
- const currentValues = [this.minVal, this.maxVal];
57
- this.value = currentValues;
58
- const eventDetail = { name: this.name, values: currentValues };
59
- this.rangeChange.emit(eventDetail);
60
- this.filterChange.emit(eventDetail);
61
- }
80
+ /**
81
+ * Calcola lo stile per la barra di riempimento tra i due slider.
82
+ */
62
83
  getFillStyle() {
63
84
  const range = this.max - this.min;
64
85
  if (range === 0)
@@ -67,24 +88,33 @@ export class JumpFilterRange {
67
88
  const rightPercent = ((this.maxVal - this.min) / range) * 100;
68
89
  return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };
69
90
  }
91
+ /**
92
+ * Metodo pubblico per impostare il valore del filtro programmaticamente.
93
+ */
70
94
  async setValue(values, emitEvent = true) {
71
95
  if (this.disabled || !values || values.length !== 2) {
72
96
  return this.getValues();
73
97
  }
74
98
  this.setComponentValues(values);
75
99
  if (emitEvent) {
76
- this.emitChangeEvents();
100
+ this.handleCommit();
77
101
  }
78
102
  return this.getValues();
79
103
  }
104
+ /**
105
+ * Metodo pubblico per ottenere il valore corrente.
106
+ */
80
107
  async getValues() {
81
108
  return [this.minVal, this.maxVal];
82
109
  }
110
+ /**
111
+ * Metodo pubblico per ottenere il nome del filtro.
112
+ */
83
113
  async getName() {
84
114
  return this.name;
85
115
  }
86
116
  render() {
87
- return (h(Host, { key: '7db1339ac56ae016c5a050a7266bbc353b33bdb0', class: { 'is-disabled': this.disabled } }, h("div", { key: '81be4dbe27ecb9a0ae7e2ec8aa83630d8caf21b0', class: "label-container" }, h("label", { key: 'fc8ad6c1e5e2cef6aca4c3abe3358d51c23a05e8', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), h("label", { key: '5c21deff42c6e9e6b6bfd560b3f5af158ccdedbb', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), h("div", { key: '799c8f97eaecfffe4940e0b36879024cba0c0610', class: "slider-container" }, h("div", { key: 'f9f344075857009d4bbb9c6ed882363099d5fba9', class: "slider-track" }), h("div", { key: '0f7a60252ca1d39a43a8c5e98b4fd93daa80a4c9', class: "slider-fill", style: this.getFillStyle() }), h("input", { key: '0318aec31145df2a4193eefcb43011ab7df3464d', type: "range", min: this.min, max: this.max, step: this.step, value: this.minVal, onInput: this.handleMinInput, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), h("input", { key: '5340fe9c8ac6658d58cafcd95182cc7562571aee', type: "range", min: this.min, max: this.max, step: this.step, value: this.maxVal, onInput: this.handleMaxInput, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
117
+ return (h(Host, { key: '22efb08a200fb221558e31357db3ceb790b2ec62', class: { 'is-disabled': this.disabled } }, h("div", { key: '73a3d09acc2e4b05d06c1723487d7091da6979bf', class: "label-container" }, h("label", { key: '56c91ea288e74ebccf7c4969dfd1a74a56cfc99f', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), h("label", { key: 'fc374dc83e2b75648b58a3d2a444193c48db91a9', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), h("div", { key: '8ed46accf743cbef63dd0fa854b35c4f92f968ad', class: "slider-container" }, h("div", { key: 'ce33b796cad574e5094de1689aaab19ed82d6ddf', class: "slider-track" }), h("div", { key: '68495fbe0c68db2fc22884af8b62189b88270b4e', class: "slider-fill", style: this.getFillStyle() }), h("input", { key: 'c640ab76cd1b4c3a61354a813d5633e0b4234112', type: "range", min: this.min, max: this.max, step: this.step, value: this.minVal, onInput: this.handleMinInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), h("input", { key: 'd77b371d8be9fec561a5e9f447249aac4e4d252a', type: "range", min: this.min, max: this.max, step: this.step, value: this.maxVal, onInput: this.handleMaxInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
88
118
  }
89
119
  static get is() { return "jump-filter-range"; }
90
120
  static get encapsulation() { return "shadow"; }
@@ -112,7 +142,7 @@ export class JumpFilterRange {
112
142
  "optional": false,
113
143
  "docs": {
114
144
  "tags": [],
115
- "text": "Nome identificativo del filtro, utilizzato negli eventi"
145
+ "text": "Nome identificativo del filtro, utilizzato nell'evento finale."
116
146
  },
117
147
  "attribute": "name",
118
148
  "reflect": false,
@@ -202,7 +232,7 @@ export class JumpFilterRange {
202
232
  "optional": false,
203
233
  "docs": {
204
234
  "tags": [],
205
- "text": "Il valore minimo possibile per lo slider"
235
+ "text": "Il valore minimo possibile per lo slider."
206
236
  },
207
237
  "attribute": "min",
208
238
  "reflect": false,
@@ -220,7 +250,7 @@ export class JumpFilterRange {
220
250
  "optional": false,
221
251
  "docs": {
222
252
  "tags": [],
223
- "text": "Il valore massimo possibile per lo slider"
253
+ "text": "Il valore massimo possibile per lo slider."
224
254
  },
225
255
  "attribute": "max",
226
256
  "reflect": false,
@@ -238,7 +268,7 @@ export class JumpFilterRange {
238
268
  "optional": false,
239
269
  "docs": {
240
270
  "tags": [],
241
- "text": "L'incremento tra i valori dello slider"
271
+ "text": "L'incremento tra i valori dello slider."
242
272
  },
243
273
  "attribute": "step",
244
274
  "reflect": false,
@@ -256,7 +286,7 @@ export class JumpFilterRange {
256
286
  "optional": false,
257
287
  "docs": {
258
288
  "tags": [],
259
- "text": "I valori iniziali dello slider, come array [min, max]"
289
+ "text": "I valori iniziali dello slider, come array [min, max]."
260
290
  },
261
291
  "defaultValue": "[]"
262
292
  },
@@ -272,7 +302,7 @@ export class JumpFilterRange {
272
302
  "optional": false,
273
303
  "docs": {
274
304
  "tags": [],
275
- "text": "Stato disabilitato dello slider"
305
+ "text": "Stato disabilitato dello slider."
276
306
  },
277
307
  "attribute": "disabled",
278
308
  "reflect": true,
@@ -288,21 +318,6 @@ export class JumpFilterRange {
288
318
  }
289
319
  static get events() {
290
320
  return [{
291
- "method": "rangeChange",
292
- "name": "jump-range-change",
293
- "bubbles": true,
294
- "cancelable": true,
295
- "composed": true,
296
- "docs": {
297
- "tags": [],
298
- "text": ""
299
- },
300
- "complexType": {
301
- "original": "any",
302
- "resolved": "any",
303
- "references": {}
304
- }
305
- }, {
306
321
  "method": "filterChange",
307
322
  "name": "jump-filterchange",
308
323
  "bubbles": true,
@@ -310,11 +325,11 @@ export class JumpFilterRange {
310
325
  "composed": true,
311
326
  "docs": {
312
327
  "tags": [],
313
- "text": ""
328
+ "text": "Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\nIdeale per lanciare chiamate API o ricalcoli onerosi."
314
329
  },
315
330
  "complexType": {
316
- "original": "any",
317
- "resolved": "any",
331
+ "original": "{ name: string; values: number[] }",
332
+ "resolved": "{ name: string; values: number[]; }",
318
333
  "references": {}
319
334
  }
320
335
  }];
@@ -342,7 +357,7 @@ export class JumpFilterRange {
342
357
  "return": "Promise<number[]>"
343
358
  },
344
359
  "docs": {
345
- "text": "",
360
+ "text": "Metodo pubblico per impostare il valore del filtro programmaticamente.",
346
361
  "tags": []
347
362
  }
348
363
  },
@@ -359,7 +374,7 @@ export class JumpFilterRange {
359
374
  "return": "Promise<number[]>"
360
375
  },
361
376
  "docs": {
362
- "text": "",
377
+ "text": "Metodo pubblico per ottenere il valore corrente.",
363
378
  "tags": []
364
379
  }
365
380
  },
@@ -376,7 +391,7 @@ export class JumpFilterRange {
376
391
  "return": "Promise<string>"
377
392
  },
378
393
  "docs": {
379
- "text": "",
394
+ "text": "Metodo pubblico per ottenere il nome del filtro.",
380
395
  "tags": []
381
396
  }
382
397
  }
package/dist/collection/components/jump-filter-range/jump-filter-range.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"jump-filter-range.js","sourceRoot":"","sources":["../../../src/components/jump-filter-range/jump-filter-range.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7G,MAAM,OAAO,GAAG,CAAC,CAAC;AAOlB,MAAM,OAAO,eAAe;;QAuDlB,mBAAc,GAAG,CAAC,KAAY,EAAE,EAAE;YACxC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC1C,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,EAAE,CAAC;gBACtC,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBAClC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrC,CAAC;YACD,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAY,EAAE,EAAE;YACxC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC1C,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,EAAE,CAAC;gBACtC,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBAClC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrC,CAAC;YACD,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC;oBAvEqB,cAAc;8BAIJ,MAAM;6BAEP,EAAE;8BAGD,MAAM;6BAEP,EAAE;mBAIZ,CAAC;mBAED,GAAG;oBAEF,CAAC;qBAEmB,EAAE;wBAEA,KAAK;;;;IAMlD,YAAY,CAAC,QAAkB;QAC7B,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACpC,CAAC;IAKD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAEO,kBAAkB,CAAC,MAAgB;QACzC,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;YACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QACzB,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAwBO,gBAAgB;QACtB,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;QAC3B,MAAM,WAAW,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACtC,CAAC;IAEO,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACpD,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;QAC7D,MAAM,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;QAC9D,OAAO,EAAE,IAAI,EAAE,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,GAAG,YAAY,GAAG,WAAW,GAAG,EAAE,CAAC;IAC9E,CAAC;IAGD,KAAK,CAAC,QAAQ,CAAC,MAAgB,EAAE,YAAqB,IAAI;QACxD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACpD,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;QAC1B,CAAC;QACD,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,SAAS,EAAE,CAAC;YACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;QACD,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;IAGD,KAAK,CAAC,SAAS;QACb,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAGD,KAAK,CAAC,OAAO;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC3C,4DAAK,KAAK,EAAC,iBAAiB;gBAE1B,8DAAO,KAAK,EAAC,WAAW;oBACrB,IAAI,CAAC,cAAc;;oBAAG,IAAI,CAAC,MAAM;oBAAE,IAAI,CAAC,aAAa,CAChD;gBAGR,8DAAO,KAAK,EAAC,WAAW;oBACrB,IAAI,CAAC,cAAc;;oBAAG,IAAI,CAAC,MAAM;oBAAE,IAAI,CAAC,aAAa,CAChD,CACJ;YACN,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,cAAc,GAAO;gBAChC,4DAAK,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAQ;gBAC3D,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC7C,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,aAAa,gBAEP,IAAI,CAAC,cAAc,GAC/B;gBACF,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC7C,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,aAAa,gBAEP,IAAI,CAAC,cAAc,GAC/B,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato negli eventi */\n @Prop() name: string = 'range-filter';\n\n // --- Props delle etichette modificate ---\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n // --- Fine props modificate ---\n\n /** Il valore minimo possibile per lo slider */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max] */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n @Event({ eventName: 'jump-range-change' }) rangeChange: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter;\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n this.value = [this.minVal, this.maxVal];\n }\n\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n this.emitChangeEvents();\n };\n\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n this.emitChangeEvents();\n };\n\n private emitChangeEvents() {\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues;\n const eventDetail = { name: this.name, values: currentValues };\n this.rangeChange.emit(eventDetail);\n this.filterChange.emit(eventDetail);\n }\n\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.emitChangeEvents();\n }\n return this.getValues();\n }\n \n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n {/* Etichetta MIN aggiornata */}\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n \n {/* Etichetta MAX aggiornata */}\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"]}
1
+ {"version":3,"file":"jump-filter-range.js","sourceRoot":"","sources":["../../../src/components/jump-filter-range/jump-filter-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\n// La distanza minima tra i due slider, per evitare che si sovrappongano.\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato nell'evento finale. */\n @Prop() name: string = 'range-filter';\n\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n\n /** Il valore minimo possibile per lo slider. */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider. */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider. */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max]. */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n /**\n * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\n * Ideale per lanciare chiamate API o ricalcoli onerosi.\n */\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter<{ name: string; values: number[] }>;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n /**\n * Imposta i valori interni del componente partendo da un array.\n */\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n // Fallback ai valori di default se l'input non è valido\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n // Sincronizza la prop `value` con lo stato interno\n this.value = [this.minVal, this.maxVal];\n }\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n };\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n };\n\n /**\n * Eseguito quando l'utente rilascia lo slider (evento onChange).\n * Consolida il valore e emette l'evento finale.\n */\n private handleCommit = () => {\n console.log('Committing values:', this.minVal, this.maxVal);\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues; // Sincronizza la prop\n this.filterChange.emit({\n name: this.name,\n values: currentValues,\n });\n };\n\n /**\n * Calcola lo stile per la barra di riempimento tra i due slider.\n */\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n /**\n * Metodo pubblico per impostare il valore del filtro programmaticamente.\n */\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.handleCommit();\n }\n return this.getValues();\n }\n\n /**\n * Metodo pubblico per ottenere il valore corrente.\n */\n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n /**\n * Metodo pubblico per ottenere il nome del filtro.\n */\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"]}
package/dist/components/jump-filter-range.js CHANGED
@@ -3,14 +3,18 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
3
3
  const jumpFilterRangeCss = ":host{--jump-range-track-height:4px;--jump-range-thumb-color:var(--neutral-white, #ffffff);--jump-range-thumb-size:18px;--jump-range-fill-color:var(--secondary-standard, #5e79ba);--jump-range-track-color:var(--gray-ultralight, #f8f8f8);display:block;width:100%}:host(.is-disabled){opacity:0.5;cursor:not-allowed;--jump-range-fill-color:var(--gray-light, #e0e0e0)}.label-container{display:flex;justify-content:space-between;margin-bottom:0.75rem;font-size:0.9em;color:#333}.slider-container{position:relative;height:var(--jump-range-thumb-size);display:flex;align-items:center}.slider-track,.slider-fill{position:absolute;left:0;height:var(--jump-range-track-height);border-radius:var(--jump-range-track-height);width:100%}.slider-track{background-color:var(--jump-range-track-color);z-index:1}.slider-fill{background-color:var(--jump-range-fill-color);z-index:2}.range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:100%;height:var(--jump-range-thumb-size);background:transparent;pointer-events:none;margin:0;z-index:3}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto;margin-top:calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2)}input[type=range]::-moz-range-thumb{-moz-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}input[type=range]::-moz-range-track{-moz-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}";
4
4
  const JumpFilterRangeStyle0 = jumpFilterRangeCss;
5
5
 
6
+ // La distanza minima tra i due slider, per evitare che si sovrappongano.
6
7
  const MIN_GAP = 0;
7
8
  const JumpFilterRange$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterRange extends HTMLElement {
8
9
  constructor() {
9
10
  super();
10
11
  this.__registerHost();
11
12
  this.__attachShadow();
12
- this.rangeChange = createEvent(this, "jump-range-change", 7);
13
13
  this.filterChange = createEvent(this, "jump-filterchange", 7);
14
+ /**
15
+ * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.
16
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
17
+ */
14
18
  this.handleMinInput = (event) => {
15
19
  const input = event.target;
16
20
  let newMinVal = parseInt(input.value, 10);
@@ -19,8 +23,11 @@ const JumpFilterRange$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterRange
19
23
  input.value = newMinVal.toString();
20
24
  }
21
25
  this.minVal = newMinVal;
22
- this.emitChangeEvents();
23
26
  };
27
+ /**
28
+ * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.
29
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
30
+ */
24
31
  this.handleMaxInput = (event) => {
25
32
  const input = event.target;
26
33
  let newMaxVal = parseInt(input.value, 10);
@@ -29,7 +36,19 @@ const JumpFilterRange$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterRange
29
36
  input.value = newMaxVal.toString();
30
37
  }
31
38
  this.maxVal = newMaxVal;
32
- this.emitChangeEvents();
39
+ };
40
+ /**
41
+ * Eseguito quando l'utente rilascia lo slider (evento onChange).
42
+ * Consolida il valore e emette l'evento finale.
43
+ */
44
+ this.handleCommit = () => {
45
+ console.log('Committing values:', this.minVal, this.maxVal);
46
+ const currentValues = [this.minVal, this.maxVal];
47
+ this.value = currentValues; // Sincronizza la prop
48
+ this.filterChange.emit({
49
+ name: this.name,
50
+ values: currentValues,
51
+ });
33
52
  };
34
53
  this.name = 'range-filter';
35
54
  this.labelMinBefore = 'Min:';
@@ -50,24 +69,25 @@ const JumpFilterRange$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterRange
50
69
  componentWillLoad() {
51
70
  this.setComponentValues(this.value);
52
71
  }
72
+ /**
73
+ * Imposta i valori interni del componente partendo da un array.
74
+ */
53
75
  setComponentValues(values) {
54
76
  if (values && values.length === 2) {
55
77
  this.minVal = values[0];
56
78
  this.maxVal = values[1];
57
79
  }
58
80
  else {
81
+ // Fallback ai valori di default se l'input non è valido
59
82
  this.minVal = this.min;
60
83
  this.maxVal = this.max;
61
84
  }
85
+ // Sincronizza la prop `value` con lo stato interno
62
86
  this.value = [this.minVal, this.maxVal];
63
87
  }
64
- emitChangeEvents() {
65
- const currentValues = [this.minVal, this.maxVal];
66
- this.value = currentValues;
67
- const eventDetail = { name: this.name, values: currentValues };
68
- this.rangeChange.emit(eventDetail);
69
- this.filterChange.emit(eventDetail);
70
- }
88
+ /**
89
+ * Calcola lo stile per la barra di riempimento tra i due slider.
90
+ */
71
91
  getFillStyle() {
72
92
  const range = this.max - this.min;
73
93
  if (range === 0)
@@ -76,24 +96,33 @@ const JumpFilterRange$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterRange
76
96
  const rightPercent = ((this.maxVal - this.min) / range) * 100;
77
97
  return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };
78
98
  }
99
+ /**
100
+ * Metodo pubblico per impostare il valore del filtro programmaticamente.
101
+ */
79
102
  async setValue(values, emitEvent = true) {
80
103
  if (this.disabled || !values || values.length !== 2) {
81
104
  return this.getValues();
82
105
  }
83
106
  this.setComponentValues(values);
84
107
  if (emitEvent) {
85
- this.emitChangeEvents();
108
+ this.handleCommit();
86
109
  }
87
110
  return this.getValues();
88
111
  }
112
+ /**
113
+ * Metodo pubblico per ottenere il valore corrente.
114
+ */
89
115
  async getValues() {
90
116
  return [this.minVal, this.maxVal];
91
117
  }
118
+ /**
119
+ * Metodo pubblico per ottenere il nome del filtro.
120
+ */
92
121
  async getName() {
93
122
  return this.name;
94
123
  }
95
124
  render() {
96
- return (h(Host, { key: '7db1339ac56ae016c5a050a7266bbc353b33bdb0', class: { 'is-disabled': this.disabled } }, h("div", { key: '81be4dbe27ecb9a0ae7e2ec8aa83630d8caf21b0', class: "label-container" }, h("label", { key: 'fc8ad6c1e5e2cef6aca4c3abe3358d51c23a05e8', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), h("label", { key: '5c21deff42c6e9e6b6bfd560b3f5af158ccdedbb', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), h("div", { key: '799c8f97eaecfffe4940e0b36879024cba0c0610', class: "slider-container" }, h("div", { key: 'f9f344075857009d4bbb9c6ed882363099d5fba9', class: "slider-track" }), h("div", { key: '0f7a60252ca1d39a43a8c5e98b4fd93daa80a4c9', class: "slider-fill", style: this.getFillStyle() }), h("input", { key: '0318aec31145df2a4193eefcb43011ab7df3464d', type: "range", min: this.min, max: this.max, step: this.step, value: this.minVal, onInput: this.handleMinInput, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), h("input", { key: '5340fe9c8ac6658d58cafcd95182cc7562571aee', type: "range", min: this.min, max: this.max, step: this.step, value: this.maxVal, onInput: this.handleMaxInput, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
125
+ return (h(Host, { key: '22efb08a200fb221558e31357db3ceb790b2ec62', class: { 'is-disabled': this.disabled } }, h("div", { key: '73a3d09acc2e4b05d06c1723487d7091da6979bf', class: "label-container" }, h("label", { key: '56c91ea288e74ebccf7c4969dfd1a74a56cfc99f', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), h("label", { key: 'fc374dc83e2b75648b58a3d2a444193c48db91a9', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), h("div", { key: '8ed46accf743cbef63dd0fa854b35c4f92f968ad', class: "slider-container" }, h("div", { key: 'ce33b796cad574e5094de1689aaab19ed82d6ddf', class: "slider-track" }), h("div", { key: '68495fbe0c68db2fc22884af8b62189b88270b4e', class: "slider-fill", style: this.getFillStyle() }), h("input", { key: 'c640ab76cd1b4c3a61354a813d5633e0b4234112', type: "range", min: this.min, max: this.max, step: this.step, value: this.minVal, onInput: this.handleMinInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), h("input", { key: 'd77b371d8be9fec561a5e9f447249aac4e4d252a', type: "range", min: this.min, max: this.max, step: this.step, value: this.maxVal, onInput: this.handleMaxInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
97
126
  }
98
127
  get host() { return this; }
99
128
  static get watchers() { return {
package/dist/components/jump-filter-range.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"jump-filter-range.js","mappings":"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","names":["JumpFilterRange"],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n --jump-range-track-height: 4px;\n --jump-range-thumb-color: var(--neutral-white, #ffffff);\n --jump-range-thumb-size: 18px;\n --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n display: block;\n width: 100%;\n}\n\n:host(.is-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n font-size: 0.9em;\n color: #333;\n}\n\n.slider-container {\n position: relative;\n height: var(--jump-range-thumb-size);\n display: flex;\n align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n position: absolute;\n left: 0;\n height: var(--jump-range-track-height);\n border-radius: var(--jump-range-track-height);\n width: 100%;\n}\n\n.slider-track {\n background-color: var(--jump-range-track-color);\n z-index: 1;\n}\n\n.slider-fill {\n background-color: var(--jump-range-fill-color);\n z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n width: 100%;\n height: var(--jump-range-thumb-size);\n background: transparent;\n pointer-events: none; // Permette di cliccare attraverso l'input\n margin: 0;\n z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n -moz-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n -moz-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato negli eventi */\n @Prop() name: string = 'range-filter';\n\n // --- Props delle etichette modificate ---\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n // --- Fine props modificate ---\n\n /** Il valore minimo possibile per lo slider */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max] */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n @Event({ eventName: 'jump-range-change' }) rangeChange: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter;\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n this.value = [this.minVal, this.maxVal];\n }\n\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n this.emitChangeEvents();\n };\n\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n this.emitChangeEvents();\n };\n\n private emitChangeEvents() {\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues;\n const eventDetail = { name: this.name, values: currentValues };\n this.rangeChange.emit(eventDetail);\n this.filterChange.emit(eventDetail);\n }\n\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.emitChangeEvents();\n }\n return this.getValues();\n }\n \n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n {/* Etichetta MIN aggiornata */}\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n \n {/* Etichetta MAX aggiornata */}\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"],"version":3}
1
+ {"file":"jump-filter-range.js","mappings":"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","names":["JumpFilterRange"],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n --jump-range-track-height: 4px;\n --jump-range-thumb-color: var(--neutral-white, #ffffff);\n --jump-range-thumb-size: 18px;\n --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n display: block;\n width: 100%;\n}\n\n:host(.is-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n font-size: 0.9em;\n color: #333;\n}\n\n.slider-container {\n position: relative;\n height: var(--jump-range-thumb-size);\n display: flex;\n align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n position: absolute;\n left: 0;\n height: var(--jump-range-track-height);\n border-radius: var(--jump-range-track-height);\n width: 100%;\n}\n\n.slider-track {\n background-color: var(--jump-range-track-color);\n z-index: 1;\n}\n\n.slider-fill {\n background-color: var(--jump-range-fill-color);\n z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n width: 100%;\n height: var(--jump-range-thumb-size);\n background: transparent;\n pointer-events: none; // Permette di cliccare attraverso l'input\n margin: 0;\n z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n -moz-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n -moz-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\n// La distanza minima tra i due slider, per evitare che si sovrappongano.\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato nell'evento finale. */\n @Prop() name: string = 'range-filter';\n\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n\n /** Il valore minimo possibile per lo slider. */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider. */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider. */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max]. */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n /**\n * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\n * Ideale per lanciare chiamate API o ricalcoli onerosi.\n */\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter<{ name: string; values: number[] }>;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n /**\n * Imposta i valori interni del componente partendo da un array.\n */\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n // Fallback ai valori di default se l'input non è valido\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n // Sincronizza la prop `value` con lo stato interno\n this.value = [this.minVal, this.maxVal];\n }\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n };\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n };\n\n /**\n * Eseguito quando l'utente rilascia lo slider (evento onChange).\n * Consolida il valore e emette l'evento finale.\n */\n private handleCommit = () => {\n console.log('Committing values:', this.minVal, this.maxVal);\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues; // Sincronizza la prop\n this.filterChange.emit({\n name: this.name,\n values: currentValues,\n });\n };\n\n /**\n * Calcola lo stile per la barra di riempimento tra i due slider.\n */\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n /**\n * Metodo pubblico per impostare il valore del filtro programmaticamente.\n */\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.handleCommit();\n }\n return this.getValues();\n }\n\n /**\n * Metodo pubblico per ottenere il valore corrente.\n */\n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n /**\n * Metodo pubblico per ottenere il nome del filtro.\n */\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"],"version":3}
package/dist/esm/jump-filter-range.entry.js CHANGED
@@ -3,12 +3,16 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
3
3
  const jumpFilterRangeCss = ":host{--jump-range-track-height:4px;--jump-range-thumb-color:var(--neutral-white, #ffffff);--jump-range-thumb-size:18px;--jump-range-fill-color:var(--secondary-standard, #5e79ba);--jump-range-track-color:var(--gray-ultralight, #f8f8f8);display:block;width:100%}:host(.is-disabled){opacity:0.5;cursor:not-allowed;--jump-range-fill-color:var(--gray-light, #e0e0e0)}.label-container{display:flex;justify-content:space-between;margin-bottom:0.75rem;font-size:0.9em;color:#333}.slider-container{position:relative;height:var(--jump-range-thumb-size);display:flex;align-items:center}.slider-track,.slider-fill{position:absolute;left:0;height:var(--jump-range-track-height);border-radius:var(--jump-range-track-height);width:100%}.slider-track{background-color:var(--jump-range-track-color);z-index:1}.slider-fill{background-color:var(--jump-range-fill-color);z-index:2}.range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:100%;height:var(--jump-range-thumb-size);background:transparent;pointer-events:none;margin:0;z-index:3}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto;margin-top:calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2)}input[type=range]::-moz-range-thumb{-moz-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}input[type=range]::-moz-range-track{-moz-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}";
4
4
  const JumpFilterRangeStyle0 = jumpFilterRangeCss;
5
5
 
6
+ // La distanza minima tra i due slider, per evitare che si sovrappongano.
6
7
  const MIN_GAP = 0;
7
8
  const JumpFilterRange = class {
8
9
  constructor(hostRef) {
9
10
  registerInstance(this, hostRef);
10
- this.rangeChange = createEvent(this, "jump-range-change", 7);
11
11
  this.filterChange = createEvent(this, "jump-filterchange", 7);
12
+ /**
13
+ * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.
14
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
15
+ */
12
16
  this.handleMinInput = (event) => {
13
17
  const input = event.target;
14
18
  let newMinVal = parseInt(input.value, 10);
@@ -17,8 +21,11 @@ const JumpFilterRange = class {
17
21
  input.value = newMinVal.toString();
18
22
  }
19
23
  this.minVal = newMinVal;
20
- this.emitChangeEvents();
21
24
  };
25
+ /**
26
+ * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.
27
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
28
+ */
22
29
  this.handleMaxInput = (event) => {
23
30
  const input = event.target;
24
31
  let newMaxVal = parseInt(input.value, 10);
@@ -27,7 +34,19 @@ const JumpFilterRange = class {
27
34
  input.value = newMaxVal.toString();
28
35
  }
29
36
  this.maxVal = newMaxVal;
30
- this.emitChangeEvents();
37
+ };
38
+ /**
39
+ * Eseguito quando l'utente rilascia lo slider (evento onChange).
40
+ * Consolida il valore e emette l'evento finale.
41
+ */
42
+ this.handleCommit = () => {
43
+ console.log('Committing values:', this.minVal, this.maxVal);
44
+ const currentValues = [this.minVal, this.maxVal];
45
+ this.value = currentValues; // Sincronizza la prop
46
+ this.filterChange.emit({
47
+ name: this.name,
48
+ values: currentValues,
49
+ });
31
50
  };
32
51
  this.name = 'range-filter';
33
52
  this.labelMinBefore = 'Min:';
@@ -48,24 +67,25 @@ const JumpFilterRange = class {
48
67
  componentWillLoad() {
49
68
  this.setComponentValues(this.value);
50
69
  }
70
+ /**
71
+ * Imposta i valori interni del componente partendo da un array.
72
+ */
51
73
  setComponentValues(values) {
52
74
  if (values && values.length === 2) {
53
75
  this.minVal = values[0];
54
76
  this.maxVal = values[1];
55
77
  }
56
78
  else {
79
+ // Fallback ai valori di default se l'input non è valido
57
80
  this.minVal = this.min;
58
81
  this.maxVal = this.max;
59
82
  }
83
+ // Sincronizza la prop `value` con lo stato interno
60
84
  this.value = [this.minVal, this.maxVal];
61
85
  }
62
- emitChangeEvents() {
63
- const currentValues = [this.minVal, this.maxVal];
64
- this.value = currentValues;
65
- const eventDetail = { name: this.name, values: currentValues };
66
- this.rangeChange.emit(eventDetail);
67
- this.filterChange.emit(eventDetail);
68
- }
86
+ /**
87
+ * Calcola lo stile per la barra di riempimento tra i due slider.
88
+ */
69
89
  getFillStyle() {
70
90
  const range = this.max - this.min;
71
91
  if (range === 0)
@@ -74,24 +94,33 @@ const JumpFilterRange = class {
74
94
  const rightPercent = ((this.maxVal - this.min) / range) * 100;
75
95
  return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };
76
96
  }
97
+ /**
98
+ * Metodo pubblico per impostare il valore del filtro programmaticamente.
99
+ */
77
100
  async setValue(values, emitEvent = true) {
78
101
  if (this.disabled || !values || values.length !== 2) {
79
102
  return this.getValues();
80
103
  }
81
104
  this.setComponentValues(values);
82
105
  if (emitEvent) {
83
- this.emitChangeEvents();
106
+ this.handleCommit();
84
107
  }
85
108
  return this.getValues();
86
109
  }
110
+ /**
111
+ * Metodo pubblico per ottenere il valore corrente.
112
+ */
87
113
  async getValues() {
88
114
  return [this.minVal, this.maxVal];
89
115
  }
116
+ /**
117
+ * Metodo pubblico per ottenere il nome del filtro.
118
+ */
90
119
  async getName() {
91
120
  return this.name;
92
121
  }
93
122
  render() {
94
- return (h(Host, { key: '7db1339ac56ae016c5a050a7266bbc353b33bdb0', class: { 'is-disabled': this.disabled } }, h("div", { key: '81be4dbe27ecb9a0ae7e2ec8aa83630d8caf21b0', class: "label-container" }, h("label", { key: 'fc8ad6c1e5e2cef6aca4c3abe3358d51c23a05e8', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), h("label", { key: '5c21deff42c6e9e6b6bfd560b3f5af158ccdedbb', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), h("div", { key: '799c8f97eaecfffe4940e0b36879024cba0c0610', class: "slider-container" }, h("div", { key: 'f9f344075857009d4bbb9c6ed882363099d5fba9', class: "slider-track" }), h("div", { key: '0f7a60252ca1d39a43a8c5e98b4fd93daa80a4c9', class: "slider-fill", style: this.getFillStyle() }), h("input", { key: '0318aec31145df2a4193eefcb43011ab7df3464d', type: "range", min: this.min, max: this.max, step: this.step, value: this.minVal, onInput: this.handleMinInput, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), h("input", { key: '5340fe9c8ac6658d58cafcd95182cc7562571aee', type: "range", min: this.min, max: this.max, step: this.step, value: this.maxVal, onInput: this.handleMaxInput, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
123
+ return (h(Host, { key: '22efb08a200fb221558e31357db3ceb790b2ec62', class: { 'is-disabled': this.disabled } }, h("div", { key: '73a3d09acc2e4b05d06c1723487d7091da6979bf', class: "label-container" }, h("label", { key: '56c91ea288e74ebccf7c4969dfd1a74a56cfc99f', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), h("label", { key: 'fc374dc83e2b75648b58a3d2a444193c48db91a9', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), h("div", { key: '8ed46accf743cbef63dd0fa854b35c4f92f968ad', class: "slider-container" }, h("div", { key: 'ce33b796cad574e5094de1689aaab19ed82d6ddf', class: "slider-track" }), h("div", { key: '68495fbe0c68db2fc22884af8b62189b88270b4e', class: "slider-fill", style: this.getFillStyle() }), h("input", { key: 'c640ab76cd1b4c3a61354a813d5633e0b4234112', type: "range", min: this.min, max: this.max, step: this.step, value: this.minVal, onInput: this.handleMinInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), h("input", { key: 'd77b371d8be9fec561a5e9f447249aac4e4d252a', type: "range", min: this.min, max: this.max, step: this.step, value: this.maxVal, onInput: this.handleMaxInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
95
124
  }
96
125
  get host() { return getElement(this); }
97
126
  static get watchers() { return {
package/dist/esm/jump-filter-range.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"jump-filter-range.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,k4DAAk4D,CAAC;AAC95D,8BAAe,kBAAkB;;ACCjC,MAAM,OAAO,GAAG,CAAC,CAAC;MAOL,eAAe;;;;;QAuDlB,mBAAc,GAAG,CAAC,KAAY;YACpC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC1C,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,EAAE;gBACrC,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBAClC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;aACpC;YACD,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAY;YACpC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC1C,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,EAAE;gBACrC,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBAClC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;aACpC;YACD,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,CAAC;oBAvEqB,cAAc;8BAIJ,MAAM;6BAEP,EAAE;8BAGD,MAAM;6BAEP,EAAE;mBAIZ,CAAC;mBAED,GAAG;oBAEF,CAAC;qBAEmB,EAAE;wBAEA,KAAK;;;;IAMlD,YAAY,CAAC,QAAkB;QAC7B,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;KACnC;IAKD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrC;IAEO,kBAAkB,CAAC,MAAgB;QACzC,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACjC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;SACzB;aAAM;YACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;YACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;SACxB;QACD,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACzC;IAwBO,gBAAgB;QACtB,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;QAC3B,MAAM,WAAW,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACrC;IAEO,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACpD,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,GAAG,CAAC;QAC7D,MAAM,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,GAAG,CAAC;QAC9D,OAAO,EAAE,IAAI,EAAE,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,GAAG,YAAY,GAAG,WAAW,GAAG,EAAE,CAAC;KAC7E;IAGD,MAAM,QAAQ,CAAC,MAAgB,EAAE,YAAqB,IAAI;QACxD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACnD,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;SACzB;QACD,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;QACD,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;KACzB;IAGD,MAAM,SAAS;QACb,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;IAGD,MAAM,OAAO;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC3C,4DAAK,KAAK,EAAC,iBAAiB,IAE1B,8DAAO,KAAK,EAAC,WAAW,IACrB,IAAI,CAAC,cAAc,OAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAChD,EAGR,8DAAO,KAAK,EAAC,WAAW,IACrB,IAAI,CAAC,cAAc,OAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAChD,CACJ,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,cAAc,GAAO,EAChC,4DAAK,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAQ,EAC3D,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC7C,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,aAAa,gBAEP,IAAI,CAAC,cAAc,GAC/B,EACF,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC7C,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,aAAa,gBAEP,IAAI,CAAC,cAAc,GAC/B,CACE,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n --jump-range-track-height: 4px;\n --jump-range-thumb-color: var(--neutral-white, #ffffff);\n --jump-range-thumb-size: 18px;\n --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n display: block;\n width: 100%;\n}\n\n:host(.is-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n font-size: 0.9em;\n color: #333;\n}\n\n.slider-container {\n position: relative;\n height: var(--jump-range-thumb-size);\n display: flex;\n align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n position: absolute;\n left: 0;\n height: var(--jump-range-track-height);\n border-radius: var(--jump-range-track-height);\n width: 100%;\n}\n\n.slider-track {\n background-color: var(--jump-range-track-color);\n z-index: 1;\n}\n\n.slider-fill {\n background-color: var(--jump-range-fill-color);\n z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n width: 100%;\n height: var(--jump-range-thumb-size);\n background: transparent;\n pointer-events: none; // Permette di cliccare attraverso l'input\n margin: 0;\n z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n -moz-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n -moz-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato negli eventi */\n @Prop() name: string = 'range-filter';\n\n // --- Props delle etichette modificate ---\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n // --- Fine props modificate ---\n\n /** Il valore minimo possibile per lo slider */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max] */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n @Event({ eventName: 'jump-range-change' }) rangeChange: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter;\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n this.value = [this.minVal, this.maxVal];\n }\n\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n this.emitChangeEvents();\n };\n\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n this.emitChangeEvents();\n };\n\n private emitChangeEvents() {\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues;\n const eventDetail = { name: this.name, values: currentValues };\n this.rangeChange.emit(eventDetail);\n this.filterChange.emit(eventDetail);\n }\n\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.emitChangeEvents();\n }\n return this.getValues();\n }\n \n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n {/* Etichetta MIN aggiornata */}\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n \n {/* Etichetta MAX aggiornata */}\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"],"version":3}
1
+ {"file":"jump-filter-range.entry.js","mappings":"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","names":[],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n --jump-range-track-height: 4px;\n --jump-range-thumb-color: var(--neutral-white, #ffffff);\n --jump-range-thumb-size: 18px;\n --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n display: block;\n width: 100%;\n}\n\n:host(.is-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n font-size: 0.9em;\n color: #333;\n}\n\n.slider-container {\n position: relative;\n height: var(--jump-range-thumb-size);\n display: flex;\n align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n position: absolute;\n left: 0;\n height: var(--jump-range-track-height);\n border-radius: var(--jump-range-track-height);\n width: 100%;\n}\n\n.slider-track {\n background-color: var(--jump-range-track-color);\n z-index: 1;\n}\n\n.slider-fill {\n background-color: var(--jump-range-fill-color);\n z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n width: 100%;\n height: var(--jump-range-thumb-size);\n background: transparent;\n pointer-events: none; // Permette di cliccare attraverso l'input\n margin: 0;\n z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n -moz-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n -moz-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\n// La distanza minima tra i due slider, per evitare che si sovrappongano.\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato nell'evento finale. */\n @Prop() name: string = 'range-filter';\n\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n\n /** Il valore minimo possibile per lo slider. */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider. */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider. */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max]. */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n /**\n * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\n * Ideale per lanciare chiamate API o ricalcoli onerosi.\n */\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter<{ name: string; values: number[] }>;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n /**\n * Imposta i valori interni del componente partendo da un array.\n */\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n // Fallback ai valori di default se l'input non è valido\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n // Sincronizza la prop `value` con lo stato interno\n this.value = [this.minVal, this.maxVal];\n }\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n };\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n };\n\n /**\n * Eseguito quando l'utente rilascia lo slider (evento onChange).\n * Consolida il valore e emette l'evento finale.\n */\n private handleCommit = () => {\n console.log('Committing values:', this.minVal, this.maxVal);\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues; // Sincronizza la prop\n this.filterChange.emit({\n name: this.name,\n values: currentValues,\n });\n };\n\n /**\n * Calcola lo stile per la barra di riempimento tra i due slider.\n */\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n /**\n * Metodo pubblico per impostare il valore del filtro programmaticamente.\n */\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.handleCommit();\n }\n return this.getValues();\n }\n\n /**\n * Metodo pubblico per ottenere il valore corrente.\n */\n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n /**\n * Metodo pubblico per ottenere il nome del filtro.\n */\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"],"version":3}
package/dist/jump-design-system/jump-design-system.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as t}from"./p-40ca24a6.js";export{s as setNonce}from"./p-40ca24a6.js";import{g as a}from"./p-e1255160.js";var l=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};l().then((async e=>{await a();return t([["p-8f02eb5e",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],link:[1],img:[1],imgAlt:[1,"img-alt"],hoverImg:[1,"hover-img"],hoverImgAlt:[1,"hover-img-alt"],videoSrc:[1,"video-src"],notificationUrl:[1,"notification-url"],notificationText:[1,"notification-text"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],isMini:[4,"is-mini"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],setPrice:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-83b3a560",[[1,"jump-filter",{direction:[1],filterHeading:[1,"filter-heading"],filterButtonLabel:[1,"filter-button-label"],filterButtonIcon:[1,"filter-button-icon"],mobileThreshold:[2,"mobile-threshold"],filters:[8],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-048d87ee",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-b03b8328",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-916742f5",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-5fb2a919",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],elPerPage:[2,"el-per-page"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-ae1435a6",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-800fd60b",[[1,"jump-search-bar",{placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],searchValue:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-6e497dd6",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-66c79fb9",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-cdc53aae",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-1f824808",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-0cc799f3",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-a7d5e687",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-a0237406",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1]}]]],["p-e7b3ebb1",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-c19c86c7",[[1,"jump-filter-range",{name:[1],labelMinBefore:[1,"label-min-before"],labelMinAfter:[1,"label-min-after"],labelMaxBefore:[1,"label-max-before"],labelMaxAfter:[1,"label-max-after"],min:[2],max:[2],step:[2],value:[1040],disabled:[516],minVal:[32],maxVal:[32],setValue:[64],getValues:[64],getName:[64]},null,{value:["valueWatcher"]}]]],["p-5092836a",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],hasSlottedOptions:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-48bb1cbf",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-d40c487f",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-6134b84b",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-64024e67",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-e7d1e3d8",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-9035201c",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-79e5dac6",[[1,"jump-button",{disabled:[4],variant:[1],outline:[4],size:[1],full:[4],pill:[4],text:[4],onlyIcon:[4,"only-icon"],href:[1],target:[1],type:[1],name:[1],value:[1],ariaLabel:[1,"aria-label"],class:[1],buttonId:[1,"button-id"]}],[1,"jump-icon",{class:[1],library:[1],name:[1],category:[1],size:[1],label:[1],src:[1]}]]]],e)}));
1
+ import{p as e,b as t}from"./p-40ca24a6.js";export{s as setNonce}from"./p-40ca24a6.js";import{g as a}from"./p-e1255160.js";var l=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};l().then((async e=>{await a();return t([["p-8f02eb5e",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],link:[1],img:[1],imgAlt:[1,"img-alt"],hoverImg:[1,"hover-img"],hoverImgAlt:[1,"hover-img-alt"],videoSrc:[1,"video-src"],notificationUrl:[1,"notification-url"],notificationText:[1,"notification-text"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],isMini:[4,"is-mini"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],setPrice:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-83b3a560",[[1,"jump-filter",{direction:[1],filterHeading:[1,"filter-heading"],filterButtonLabel:[1,"filter-button-label"],filterButtonIcon:[1,"filter-button-icon"],mobileThreshold:[2,"mobile-threshold"],filters:[8],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-048d87ee",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-b03b8328",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-916742f5",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-5fb2a919",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],elPerPage:[2,"el-per-page"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-ae1435a6",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-800fd60b",[[1,"jump-search-bar",{placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],searchValue:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-6e497dd6",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-66c79fb9",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-cdc53aae",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-1f824808",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-0cc799f3",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-a7d5e687",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-a0237406",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1]}]]],["p-e7b3ebb1",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-9964d664",[[1,"jump-filter-range",{name:[1],labelMinBefore:[1,"label-min-before"],labelMinAfter:[1,"label-min-after"],labelMaxBefore:[1,"label-max-before"],labelMaxAfter:[1,"label-max-after"],min:[2],max:[2],step:[2],value:[1040],disabled:[516],minVal:[32],maxVal:[32],setValue:[64],getValues:[64],getName:[64]},null,{value:["valueWatcher"]}]]],["p-5092836a",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],hasSlottedOptions:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-48bb1cbf",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-d40c487f",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-6134b84b",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-64024e67",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-e7d1e3d8",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-9035201c",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-79e5dac6",[[1,"jump-button",{disabled:[4],variant:[1],outline:[4],size:[1],full:[4],pill:[4],text:[4],onlyIcon:[4,"only-icon"],href:[1],target:[1],type:[1],name:[1],value:[1],ariaLabel:[1,"aria-label"],class:[1],buttonId:[1,"button-id"]}],[1,"jump-icon",{class:[1],library:[1],name:[1],category:[1],size:[1],label:[1],src:[1]}]]]],e)}));
2
2
  //# sourceMappingURL=jump-design-system.esm.js.map
package/dist/jump-design-system/p-9964d664.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as e,c as t,h as a,H as i,g as s}from"./p-40ca24a6.js";const r=":host{--jump-range-track-height:4px;--jump-range-thumb-color:var(--neutral-white, #ffffff);--jump-range-thumb-size:18px;--jump-range-fill-color:var(--secondary-standard, #5e79ba);--jump-range-track-color:var(--gray-ultralight, #f8f8f8);display:block;width:100%}:host(.is-disabled){opacity:0.5;cursor:not-allowed;--jump-range-fill-color:var(--gray-light, #e0e0e0)}.label-container{display:flex;justify-content:space-between;margin-bottom:0.75rem;font-size:0.9em;color:#333}.slider-container{position:relative;height:var(--jump-range-thumb-size);display:flex;align-items:center}.slider-track,.slider-fill{position:absolute;left:0;height:var(--jump-range-track-height);border-radius:var(--jump-range-track-height);width:100%}.slider-track{background-color:var(--jump-range-track-color);z-index:1}.slider-fill{background-color:var(--jump-range-fill-color);z-index:2}.range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:100%;height:var(--jump-range-thumb-size);background:transparent;pointer-events:none;margin:0;z-index:3}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto;margin-top:calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2)}input[type=range]::-moz-range-thumb{-moz-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}input[type=range]::-moz-range-track{-moz-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}";const n=r;const h=0;const c=class{constructor(a){e(this,a);this.filterChange=t(this,"jump-filterchange",7);this.handleMinInput=e=>{const t=e.target;let a=parseInt(t.value,10);if(a>this.maxVal-h){a=this.maxVal-h;t.value=a.toString()}this.minVal=a};this.handleMaxInput=e=>{const t=e.target;let a=parseInt(t.value,10);if(a<this.minVal+h){a=this.minVal+h;t.value=a.toString()}this.maxVal=a};this.handleCommit=()=>{console.log("Committing values:",this.minVal,this.maxVal);const e=[this.minVal,this.maxVal];this.value=e;this.filterChange.emit({name:this.name,values:e})};this.name="range-filter";this.labelMinBefore="Min:";this.labelMinAfter="";this.labelMaxBefore="Max:";this.labelMaxAfter="";this.min=0;this.max=100;this.step=1;this.value=[];this.disabled=false;this.minVal=undefined;this.maxVal=undefined}valueWatcher(e){this.setComponentValues(e)}componentWillLoad(){this.setComponentValues(this.value)}setComponentValues(e){if(e&&e.length===2){this.minVal=e[0];this.maxVal=e[1]}else{this.minVal=this.min;this.maxVal=this.max}this.value=[this.minVal,this.maxVal]}getFillStyle(){const e=this.max-this.min;if(e===0)return{left:"0%",width:"0%"};const t=(this.minVal-this.min)/e*100;const a=(this.maxVal-this.min)/e*100;return{left:`${t}%`,width:`${a-t}%`}}async setValue(e,t=true){if(this.disabled||!e||e.length!==2){return this.getValues()}this.setComponentValues(e);if(t){this.handleCommit()}return this.getValues()}async getValues(){return[this.minVal,this.maxVal]}async getName(){return this.name}render(){return a(i,{key:"22efb08a200fb221558e31357db3ceb790b2ec62",class:{"is-disabled":this.disabled}},a("div",{key:"73a3d09acc2e4b05d06c1723487d7091da6979bf",class:"label-container"},a("label",{key:"56c91ea288e74ebccf7c4969dfd1a74a56cfc99f",class:"label-min"},this.labelMinBefore," ",this.minVal,this.labelMinAfter),a("label",{key:"fc374dc83e2b75648b58a3d2a444193c48db91a9",class:"label-max"},this.labelMaxBefore," ",this.maxVal,this.labelMaxAfter)),a("div",{key:"8ed46accf743cbef63dd0fa854b35c4f92f968ad",class:"slider-container"},a("div",{key:"ce33b796cad574e5094de1689aaab19ed82d6ddf",class:"slider-track"}),a("div",{key:"68495fbe0c68db2fc22884af8b62189b88270b4e",class:"slider-fill",style:this.getFillStyle()}),a("input",{key:"c640ab76cd1b4c3a61354a813d5633e0b4234112",type:"range",min:this.min,max:this.max,step:this.step,value:this.minVal,onInput:this.handleMinInput,onChange:this.handleCommit,disabled:this.disabled,class:"range-input","aria-label":this.labelMinBefore}),a("input",{key:"d77b371d8be9fec561a5e9f447249aac4e4d252a",type:"range",min:this.min,max:this.max,step:this.step,value:this.maxVal,onInput:this.handleMaxInput,onChange:this.handleCommit,disabled:this.disabled,class:"range-input","aria-label":this.labelMaxBefore})))}get host(){return s(this)}static get watchers(){return{value:["valueWatcher"]}}};c.style=n;export{c as jump_filter_range};
2
+ //# sourceMappingURL=p-9964d664.entry.js.map
package/dist/jump-design-system/p-9964d664.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["jumpFilterRangeCss","JumpFilterRangeStyle0","MIN_GAP","JumpFilterRange","this","handleMinInput","event","input","target","newMinVal","parseInt","value","maxVal","toString","minVal","handleMaxInput","newMaxVal","handleCommit","console","log","currentValues","filterChange","emit","name","values","valueWatcher","newValue","setComponentValues","componentWillLoad","length","min","max","getFillStyle","range","left","width","leftPercent","rightPercent","setValue","emitEvent","disabled","getValues","getName","render","h","Host","key","class","labelMinBefore","labelMinAfter","labelMaxBefore","labelMaxAfter","style","type","step","onInput","onChange"],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n --jump-range-track-height: 4px;\n --jump-range-thumb-color: var(--neutral-white, #ffffff);\n --jump-range-thumb-size: 18px;\n --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n display: block;\n width: 100%;\n}\n\n:host(.is-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n font-size: 0.9em;\n color: #333;\n}\n\n.slider-container {\n position: relative;\n height: var(--jump-range-thumb-size);\n display: flex;\n align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n position: absolute;\n left: 0;\n height: var(--jump-range-track-height);\n border-radius: var(--jump-range-track-height);\n width: 100%;\n}\n\n.slider-track {\n background-color: var(--jump-range-track-color);\n z-index: 1;\n}\n\n.slider-fill {\n background-color: var(--jump-range-fill-color);\n z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n width: 100%;\n height: var(--jump-range-thumb-size);\n background: transparent;\n pointer-events: none; // Permette di cliccare attraverso l'input\n margin: 0;\n z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n -moz-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n -moz-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\n// La distanza minima tra i due slider, per evitare che si sovrappongano.\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato nell'evento finale. */\n @Prop() name: string = 'range-filter';\n\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n\n /** Il valore minimo possibile per lo slider. */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider. */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider. */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max]. */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n /**\n * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\n * Ideale per lanciare chiamate API o ricalcoli onerosi.\n */\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter<{ name: string; values: number[] }>;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n /**\n * Imposta i valori interni del componente partendo da un array.\n */\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n // Fallback ai valori di default se l'input non è valido\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n // Sincronizza la prop `value` con lo stato interno\n this.value = [this.minVal, this.maxVal];\n }\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n };\n\n /**\n * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.\n * Aggiorna solo lo stato interno per un feedback visivo immediato.\n */\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n };\n\n /**\n * Eseguito quando l'utente rilascia lo slider (evento onChange).\n * Consolida il valore e emette l'evento finale.\n */\n private handleCommit = () => {\n console.log('Committing values:', this.minVal, this.maxVal);\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues; // Sincronizza la prop\n this.filterChange.emit({\n name: this.name,\n values: currentValues,\n });\n };\n\n /**\n * Calcola lo stile per la barra di riempimento tra i due slider.\n */\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n /**\n * Metodo pubblico per impostare il valore del filtro programmaticamente.\n */\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.handleCommit();\n }\n return this.getValues();\n }\n\n /**\n * Metodo pubblico per ottenere il valore corrente.\n */\n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n /**\n * Metodo pubblico per ottenere il nome del filtro.\n */\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n onChange={this.handleCommit}\n disabled={this.disabled}\n class=\"range-input\"\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"],"mappings":"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"}
package/dist/jump-design-system-elements.json CHANGED
@@ -594,7 +594,7 @@
594
594
  "attributes": [
595
595
  {
596
596
  "name": "disabled",
597
- "description": "Stato disabilitato dello slider"
597
+ "description": "Stato disabilitato dello slider."
598
598
  },
599
599
  {
600
600
  "name": "label-max-after",
@@ -614,19 +614,19 @@
614
614
  },
615
615
  {
616
616
  "name": "max",
617
- "description": "Il valore massimo possibile per lo slider"
617
+ "description": "Il valore massimo possibile per lo slider."
618
618
  },
619
619
  {
620
620
  "name": "min",
621
- "description": "Il valore minimo possibile per lo slider"
621
+ "description": "Il valore minimo possibile per lo slider."
622
622
  },
623
623
  {
624
624
  "name": "name",
625
- "description": "Nome identificativo del filtro, utilizzato negli eventi"
625
+ "description": "Nome identificativo del filtro, utilizzato nell'evento finale."
626
626
  },
627
627
  {
628
628
  "name": "step",
629
- "description": "L'incremento tra i valori dello slider"
629
+ "description": "L'incremento tra i valori dello slider."
630
630
  }
631
631
  ]
632
632
  },
package/dist/types/components/jump-filter-range/jump-filter-range.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { EventEmitter } from '../../stencil-public-runtime';
2
2
  export declare class JumpFilterRange {
3
3
  host: HTMLElement;
4
- /** Nome identificativo del filtro, utilizzato negli eventi */
4
+ /** Nome identificativo del filtro, utilizzato nell'evento finale. */
5
5
  name: string;
6
6
  /** Testo da mostrare prima del valore minimo. */
7
7
  labelMinBefore: string;
@@ -11,29 +11,62 @@ export declare class JumpFilterRange {
11
11
  labelMaxBefore: string;
12
12
  /** Testo da mostrare dopo il valore massimo (es. unità di misura). */
13
13
  labelMaxAfter: string;
14
- /** Il valore minimo possibile per lo slider */
14
+ /** Il valore minimo possibile per lo slider. */
15
15
  min: number;
16
- /** Il valore massimo possibile per lo slider */
16
+ /** Il valore massimo possibile per lo slider. */
17
17
  max: number;
18
- /** L'incremento tra i valori dello slider */
18
+ /** L'incremento tra i valori dello slider. */
19
19
  step: number;
20
- /** I valori iniziali dello slider, come array [min, max] */
20
+ /** I valori iniziali dello slider, come array [min, max]. */
21
21
  value: number[];
22
- /** Stato disabilitato dello slider */
22
+ /** Stato disabilitato dello slider. */
23
23
  disabled: boolean;
24
24
  minVal: number;
25
25
  maxVal: number;
26
+ /**
27
+ * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).
28
+ * Ideale per lanciare chiamate API o ricalcoli onerosi.
29
+ */
30
+ filterChange: EventEmitter<{
31
+ name: string;
32
+ values: number[];
33
+ }>;
26
34
  valueWatcher(newValue: number[]): void;
27
- rangeChange: EventEmitter;
28
- filterChange: EventEmitter;
29
35
  componentWillLoad(): void;
36
+ /**
37
+ * Imposta i valori interni del componente partendo da un array.
38
+ */
30
39
  private setComponentValues;
40
+ /**
41
+ * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.
42
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
43
+ */
31
44
  private handleMinInput;
45
+ /**
46
+ * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.
47
+ * Aggiorna solo lo stato interno per un feedback visivo immediato.
48
+ */
32
49
  private handleMaxInput;
33
- private emitChangeEvents;
50
+ /**
51
+ * Eseguito quando l'utente rilascia lo slider (evento onChange).
52
+ * Consolida il valore e emette l'evento finale.
53
+ */
54
+ private handleCommit;
55
+ /**
56
+ * Calcola lo stile per la barra di riempimento tra i due slider.
57
+ */
34
58
  private getFillStyle;
59
+ /**
60
+ * Metodo pubblico per impostare il valore del filtro programmaticamente.
61
+ */
35
62
  setValue(values: number[], emitEvent?: boolean): Promise<number[]>;
63
+ /**
64
+ * Metodo pubblico per ottenere il valore corrente.
65
+ */
36
66
  getValues(): Promise<number[]>;
67
+ /**
68
+ * Metodo pubblico per ottenere il nome del filtro.
69
+ */
37
70
  getName(): Promise<string>;
38
71
  render(): any;
39
72
  }
package/dist/types/components.d.ts CHANGED
@@ -313,10 +313,16 @@ export namespace Components {
313
313
  }
314
314
  interface JumpFilterRange {
315
315
  /**
316
- * Stato disabilitato dello slider
316
+ * Stato disabilitato dello slider.
317
317
  */
318
318
  "disabled": boolean;
319
+ /**
320
+ * Metodo pubblico per ottenere il nome del filtro.
321
+ */
319
322
  "getName": () => Promise<string>;
323
+ /**
324
+ * Metodo pubblico per ottenere il valore corrente.
325
+ */
320
326
  "getValues": () => Promise<number[]>;
321
327
  /**
322
328
  * Testo da mostrare dopo il valore massimo (es. unità di misura).
@@ -335,24 +341,27 @@ export namespace Components {
335
341
  */
336
342
  "labelMinBefore": string;
337
343
  /**
338
- * Il valore massimo possibile per lo slider
344
+ * Il valore massimo possibile per lo slider.
339
345
  */
340
346
  "max": number;
341
347
  /**
342
- * Il valore minimo possibile per lo slider
348
+ * Il valore minimo possibile per lo slider.
343
349
  */
344
350
  "min": number;
345
351
  /**
346
- * Nome identificativo del filtro, utilizzato negli eventi
352
+ * Nome identificativo del filtro, utilizzato nell'evento finale.
347
353
  */
348
354
  "name": string;
355
+ /**
356
+ * Metodo pubblico per impostare il valore del filtro programmaticamente.
357
+ */
349
358
  "setValue": (values: number[], emitEvent?: boolean) => Promise<number[]>;
350
359
  /**
351
- * L'incremento tra i valori dello slider
360
+ * L'incremento tra i valori dello slider.
352
361
  */
353
362
  "step": number;
354
363
  /**
355
- * I valori iniziali dello slider, come array [min, max]
364
+ * I valori iniziali dello slider, come array [min, max].
356
365
  */
357
366
  "value": number[];
358
367
  }
@@ -875,8 +884,7 @@ declare global {
875
884
  new (): HTMLJumpFilterCheckboxElement;
876
885
  };
877
886
  interface HTMLJumpFilterRangeElementEventMap {
878
- "jump-range-change": any;
879
- "jump-filterchange": any;
887
+ "jump-filterchange": { name: string; values: number[] };
880
888
  }
881
889
  interface HTMLJumpFilterRangeElement extends Components.JumpFilterRange, HTMLStencilElement {
882
890
  addEventListener<K extends keyof HTMLJumpFilterRangeElementEventMap>(type: K, listener: (this: HTMLJumpFilterRangeElement, ev: JumpFilterRangeCustomEvent<HTMLJumpFilterRangeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1471,7 +1479,7 @@ declare namespace LocalJSX {
1471
1479
  }
1472
1480
  interface JumpFilterRange {
1473
1481
  /**
1474
- * Stato disabilitato dello slider
1482
+ * Stato disabilitato dello slider.
1475
1483
  */
1476
1484
  "disabled"?: boolean;
1477
1485
  /**
@@ -1491,25 +1499,27 @@ declare namespace LocalJSX {
1491
1499
  */
1492
1500
  "labelMinBefore"?: string;
1493
1501
  /**
1494
- * Il valore massimo possibile per lo slider
1502
+ * Il valore massimo possibile per lo slider.
1495
1503
  */
1496
1504
  "max"?: number;
1497
1505
  /**
1498
- * Il valore minimo possibile per lo slider
1506
+ * Il valore minimo possibile per lo slider.
1499
1507
  */
1500
1508
  "min"?: number;
1501
1509
  /**
1502
- * Nome identificativo del filtro, utilizzato negli eventi
1510
+ * Nome identificativo del filtro, utilizzato nell'evento finale.
1503
1511
  */
1504
1512
  "name"?: string;
1505
- "onJump-filterchange"?: (event: JumpFilterRangeCustomEvent<any>) => void;
1506
- "onJump-range-change"?: (event: JumpFilterRangeCustomEvent<any>) => void;
1507
1513
  /**
1508
- * L'incremento tra i valori dello slider
1514
+ * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse). Ideale per lanciare chiamate API o ricalcoli onerosi.
1515
+ */
1516
+ "onJump-filterchange"?: (event: JumpFilterRangeCustomEvent<{ name: string; values: number[] }>) => void;
1517
+ /**
1518
+ * L'incremento tra i valori dello slider.
1509
1519
  */
1510
1520
  "step"?: number;
1511
1521
  /**
1512
- * I valori iniziali dello slider, come array [min, max]
1522
+ * I valori iniziali dello slider, come array [min, max].
1513
1523
  */
1514
1524
  "value"?: number[];
1515
1525
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jumpgroup/jump-design-system",
3
- "version": "0.3.72",
3
+ "version": "0.3.73",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/dist/jump-design-system/p-c19c86c7.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,h as a,H as i,g as s}from"./p-40ca24a6.js";const r=":host{--jump-range-track-height:4px;--jump-range-thumb-color:var(--neutral-white, #ffffff);--jump-range-thumb-size:18px;--jump-range-fill-color:var(--secondary-standard, #5e79ba);--jump-range-track-color:var(--gray-ultralight, #f8f8f8);display:block;width:100%}:host(.is-disabled){opacity:0.5;cursor:not-allowed;--jump-range-fill-color:var(--gray-light, #e0e0e0)}.label-container{display:flex;justify-content:space-between;margin-bottom:0.75rem;font-size:0.9em;color:#333}.slider-container{position:relative;height:var(--jump-range-thumb-size);display:flex;align-items:center}.slider-track,.slider-fill{position:absolute;left:0;height:var(--jump-range-track-height);border-radius:var(--jump-range-track-height);width:100%}.slider-track{background-color:var(--jump-range-track-color);z-index:1}.slider-fill{background-color:var(--jump-range-fill-color);z-index:2}.range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:100%;height:var(--jump-range-thumb-size);background:transparent;pointer-events:none;margin:0;z-index:3}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto;margin-top:calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2)}input[type=range]::-moz-range-thumb{-moz-appearance:none;height:var(--jump-range-thumb-size);width:var(--jump-range-thumb-size);border-radius:50%;background:var(--jump-range-thumb-color);border:1px solid #ccc;cursor:pointer;pointer-events:auto}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}input[type=range]::-moz-range-track{-moz-appearance:none;height:var(--jump-range-track-height);background:transparent;border:none}";const n=r;const h=0;const c=class{constructor(a){e(this,a);this.rangeChange=t(this,"jump-range-change",7);this.filterChange=t(this,"jump-filterchange",7);this.handleMinInput=e=>{const t=e.target;let a=parseInt(t.value,10);if(a>this.maxVal-h){a=this.maxVal-h;t.value=a.toString()}this.minVal=a;this.emitChangeEvents()};this.handleMaxInput=e=>{const t=e.target;let a=parseInt(t.value,10);if(a<this.minVal+h){a=this.minVal+h;t.value=a.toString()}this.maxVal=a;this.emitChangeEvents()};this.name="range-filter";this.labelMinBefore="Min:";this.labelMinAfter="";this.labelMaxBefore="Max:";this.labelMaxAfter="";this.min=0;this.max=100;this.step=1;this.value=[];this.disabled=false;this.minVal=undefined;this.maxVal=undefined}valueWatcher(e){this.setComponentValues(e)}componentWillLoad(){this.setComponentValues(this.value)}setComponentValues(e){if(e&&e.length===2){this.minVal=e[0];this.maxVal=e[1]}else{this.minVal=this.min;this.maxVal=this.max}this.value=[this.minVal,this.maxVal]}emitChangeEvents(){const e=[this.minVal,this.maxVal];this.value=e;const t={name:this.name,values:e};this.rangeChange.emit(t);this.filterChange.emit(t)}getFillStyle(){const e=this.max-this.min;if(e===0)return{left:"0%",width:"0%"};const t=(this.minVal-this.min)/e*100;const a=(this.maxVal-this.min)/e*100;return{left:`${t}%`,width:`${a-t}%`}}async setValue(e,t=true){if(this.disabled||!e||e.length!==2){return this.getValues()}this.setComponentValues(e);if(t){this.emitChangeEvents()}return this.getValues()}async getValues(){return[this.minVal,this.maxVal]}async getName(){return this.name}render(){return a(i,{key:"7db1339ac56ae016c5a050a7266bbc353b33bdb0",class:{"is-disabled":this.disabled}},a("div",{key:"81be4dbe27ecb9a0ae7e2ec8aa83630d8caf21b0",class:"label-container"},a("label",{key:"fc8ad6c1e5e2cef6aca4c3abe3358d51c23a05e8",class:"label-min"},this.labelMinBefore," ",this.minVal,this.labelMinAfter),a("label",{key:"5c21deff42c6e9e6b6bfd560b3f5af158ccdedbb",class:"label-max"},this.labelMaxBefore," ",this.maxVal,this.labelMaxAfter)),a("div",{key:"799c8f97eaecfffe4940e0b36879024cba0c0610",class:"slider-container"},a("div",{key:"f9f344075857009d4bbb9c6ed882363099d5fba9",class:"slider-track"}),a("div",{key:"0f7a60252ca1d39a43a8c5e98b4fd93daa80a4c9",class:"slider-fill",style:this.getFillStyle()}),a("input",{key:"0318aec31145df2a4193eefcb43011ab7df3464d",type:"range",min:this.min,max:this.max,step:this.step,value:this.minVal,onInput:this.handleMinInput,disabled:this.disabled,class:"range-input","aria-label":this.labelMinBefore}),a("input",{key:"5340fe9c8ac6658d58cafcd95182cc7562571aee",type:"range",min:this.min,max:this.max,step:this.step,value:this.maxVal,onInput:this.handleMaxInput,disabled:this.disabled,class:"range-input","aria-label":this.labelMaxBefore})))}get host(){return s(this)}static get watchers(){return{value:["valueWatcher"]}}};c.style=n;export{c as jump_filter_range};
2
- //# sourceMappingURL=p-c19c86c7.entry.js.map
package/dist/jump-design-system/p-c19c86c7.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["jumpFilterRangeCss","JumpFilterRangeStyle0","MIN_GAP","JumpFilterRange","this","handleMinInput","event","input","target","newMinVal","parseInt","value","maxVal","toString","minVal","emitChangeEvents","handleMaxInput","newMaxVal","valueWatcher","newValue","setComponentValues","componentWillLoad","values","length","min","max","currentValues","eventDetail","name","rangeChange","emit","filterChange","getFillStyle","range","left","width","leftPercent","rightPercent","setValue","emitEvent","disabled","getValues","getName","render","h","Host","key","class","labelMinBefore","labelMinAfter","labelMaxBefore","labelMaxAfter","style","type","step","onInput"],"sources":["src/components/jump-filter-range/jump-filter-range.scss?tag=jump-filter-range&encapsulation=shadow","src/components/jump-filter-range/jump-filter-range.tsx"],"sourcesContent":[":host {\n --jump-range-track-height: 4px;\n --jump-range-thumb-color: var(--neutral-white, #ffffff);\n --jump-range-thumb-size: 18px;\n --jump-range-fill-color: var(--secondary-standard, #5e79ba);\n --jump-range-track-color: var(--gray-ultralight, #f8f8f8);\n\n display: block;\n width: 100%;\n}\n\n:host(.is-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n --jump-range-fill-color: var(--gray-light, #e0e0e0);\n}\n\n.label-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n font-size: 0.9em;\n color: #333;\n}\n\n.slider-container {\n position: relative;\n height: var(--jump-range-thumb-size);\n display: flex;\n align-items: center;\n}\n\n// Traccia visiva di background\n.slider-track,\n.slider-fill {\n position: absolute;\n left: 0;\n height: var(--jump-range-track-height);\n border-radius: var(--jump-range-track-height);\n width: 100%;\n}\n\n.slider-track {\n background-color: var(--jump-range-track-color);\n z-index: 1;\n}\n\n.slider-fill {\n background-color: var(--jump-range-fill-color);\n z-index: 2;\n}\n\n// Stili per gli input nativi\n.range-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n width: 100%;\n height: var(--jump-range-thumb-size);\n background: transparent;\n pointer-events: none; // Permette di cliccare attraverso l'input\n margin: 0;\n z-index: 3;\n}\n\n// Stili per il selettore (thumb)\n// Il pointer-events qui è fondamentale per rendere solo il thumb cliccabile\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n margin-top: calc((var(--jump-range-thumb-size) - var(--jump-range-track-height)) / -2);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n -moz-appearance: none;\n height: var(--jump-range-thumb-size);\n width: var(--jump-range-thumb-size);\n border-radius: 50%;\n background: var(--jump-range-thumb-color);\n border: 1px solid #ccc;\n cursor: pointer;\n pointer-events: auto;\n}\n\n// Rende la traccia nativa dell'input invisibile\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}\n\ninput[type=\"range\"]::-moz-range-track {\n -moz-appearance: none;\n height: var(--jump-range-track-height);\n background: transparent;\n border: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\nconst MIN_GAP = 0;\n\n@Component({\n tag: 'jump-filter-range',\n styleUrl: 'jump-filter-range.scss',\n shadow: true,\n})\nexport class JumpFilterRange {\n @Element() host: HTMLElement;\n\n /** Nome identificativo del filtro, utilizzato negli eventi */\n @Prop() name: string = 'range-filter';\n\n // --- Props delle etichette modificate ---\n /** Testo da mostrare prima del valore minimo. */\n @Prop() labelMinBefore: string = 'Min:';\n /** Testo da mostrare dopo il valore minimo (es. unità di misura). */\n @Prop() labelMinAfter: string = '';\n\n /** Testo da mostrare prima del valore massimo. */\n @Prop() labelMaxBefore: string = 'Max:';\n /** Testo da mostrare dopo il valore massimo (es. unità di misura). */\n @Prop() labelMaxAfter: string = '';\n // --- Fine props modificate ---\n\n /** Il valore minimo possibile per lo slider */\n @Prop() min: number = 0;\n /** Il valore massimo possibile per lo slider */\n @Prop() max: number = 100;\n /** L'incremento tra i valori dello slider */\n @Prop() step: number = 1;\n /** I valori iniziali dello slider, come array [min, max] */\n @Prop({ mutable: true }) value: number[] = [];\n /** Stato disabilitato dello slider */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @State() minVal: number;\n @State() maxVal: number;\n\n @Watch('value')\n valueWatcher(newValue: number[]) {\n this.setComponentValues(newValue);\n }\n\n @Event({ eventName: 'jump-range-change' }) rangeChange: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter;\n\n componentWillLoad() {\n this.setComponentValues(this.value);\n }\n\n private setComponentValues(values: number[]) {\n if (values && values.length === 2) {\n this.minVal = values[0];\n this.maxVal = values[1];\n } else {\n this.minVal = this.min;\n this.maxVal = this.max;\n }\n this.value = [this.minVal, this.maxVal];\n }\n\n private handleMinInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMinVal = parseInt(input.value, 10);\n if (newMinVal > this.maxVal - MIN_GAP) {\n newMinVal = this.maxVal - MIN_GAP;\n input.value = newMinVal.toString();\n }\n this.minVal = newMinVal;\n this.emitChangeEvents();\n };\n\n private handleMaxInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n let newMaxVal = parseInt(input.value, 10);\n if (newMaxVal < this.minVal + MIN_GAP) {\n newMaxVal = this.minVal + MIN_GAP;\n input.value = newMaxVal.toString();\n }\n this.maxVal = newMaxVal;\n this.emitChangeEvents();\n };\n\n private emitChangeEvents() {\n const currentValues = [this.minVal, this.maxVal];\n this.value = currentValues;\n const eventDetail = { name: this.name, values: currentValues };\n this.rangeChange.emit(eventDetail);\n this.filterChange.emit(eventDetail);\n }\n\n private getFillStyle() {\n const range = this.max - this.min;\n if (range === 0) return { left: '0%', width: '0%' };\n const leftPercent = ((this.minVal - this.min) / range) * 100;\n const rightPercent = ((this.maxVal - this.min) / range) * 100;\n return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n }\n\n @Method()\n async setValue(values: number[], emitEvent: boolean = true): Promise<number[]> {\n if (this.disabled || !values || values.length !== 2) {\n return this.getValues();\n }\n this.setComponentValues(values);\n if (emitEvent) {\n this.emitChangeEvents();\n }\n return this.getValues();\n }\n \n @Method()\n async getValues(): Promise<number[]> {\n return [this.minVal, this.maxVal];\n }\n\n @Method()\n async getName(): Promise<string> {\n return this.name;\n }\n\n render() {\n return (\n <Host class={{ 'is-disabled': this.disabled }}>\n <div class=\"label-container\">\n {/* Etichetta MIN aggiornata */}\n <label class=\"label-min\">\n {this.labelMinBefore} {this.minVal}{this.labelMinAfter}\n </label>\n \n {/* Etichetta MAX aggiornata */}\n <label class=\"label-max\">\n {this.labelMaxBefore} {this.maxVal}{this.labelMaxAfter}\n </label>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\"></div>\n <div class=\"slider-fill\" style={this.getFillStyle()}></div>\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.minVal}\n onInput={this.handleMinInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMinBefore}\n />\n <input\n type=\"range\"\n min={this.min} max={this.max} step={this.step}\n value={this.maxVal}\n onInput={this.handleMaxInput}\n disabled={this.disabled}\n class=\"range-input\"\n // aria-label aggiornato\n aria-label={this.labelMaxBefore}\n />\n </div>\n </Host>\n );\n }\n}"],"mappings":"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"}