@jumpgroup/jump-design-system 0.3.78 → 0.3.80

package/dist/components/jump-filter-range.js

@@ -11,43 +11,31 @@ const JumpFilterRange$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterRange
         this.__registerHost();
         this.__attachShadow();
         this.filterChange = createEvent(this, "jump-filterchange", 7);
-        /**
-         * Gestisce l'aggiornamento in tempo reale dello slider MINIMO.
-         * Aggiorna solo lo stato interno per un feedback visivo immediato.
-         */
         this.handleMinInput = (event) => {
             const input = event.target;
             let newMinVal = parseInt(input.value, 10);
-            if (newMinVal > this.maxVal - MIN_GAP) {
-                newMinVal = this.maxVal - MIN_GAP;
+            if (newMinVal > this.internalMaxVal - MIN_GAP) {
+                newMinVal = this.internalMaxVal - MIN_GAP;
                 input.value = newMinVal.toString();
             }
-            this.minVal = newMinVal;
+            this.internalMinVal = newMinVal;
         };
-        /**
-         * Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.
-         * Aggiorna solo lo stato interno per un feedback visivo immediato.
-         */
         this.handleMaxInput = (event) => {
             const input = event.target;
             let newMaxVal = parseInt(input.value, 10);
-            if (newMaxVal < this.minVal + MIN_GAP) {
-                newMaxVal = this.minVal + MIN_GAP;
+            if (newMaxVal < this.internalMinVal + MIN_GAP) {
+                newMaxVal = this.internalMinVal + MIN_GAP;
                 input.value = newMaxVal.toString();
             }
-            this.maxVal = newMaxVal;
+            this.internalMaxVal = newMaxVal;
         };
-        /**
-         * Eseguito quando l'utente rilascia lo slider (evento onChange).
-         * Consolida il valore e emette l'evento finale.
-         */
         this.handleCommit = () => {
-            console.log('Committing values:', this.minVal, this.maxVal);
-            const currentValues = [this.minVal, this.maxVal];
-            this.value = currentValues; // Sincronizza la prop
+            // Sincronizza le prop con lo stato interno prima di emettere l'evento
+            this.minVal = this.internalMinVal;
+            this.maxVal = this.internalMaxVal;
             this.filterChange.emit({
                 name: this.name,
-                values: currentValues,
+                values: [this.minVal, this.maxVal],
             });
         };
         this.name = 'range-filter';
@@ -58,78 +46,60 @@ const JumpFilterRange$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterRange
         this.min = 0;
         this.max = 100;
         this.step = 1;
-        this.value = [];
-        this.disabled = false;
         this.minVal = undefined;
         this.maxVal = undefined;
+        this.disabled = false;
+        this.internalMinVal = undefined;
+        this.internalMaxVal = undefined;
     }
-    valueWatcher(newValue) {
-        if (newValue && newValue.length === 2 && newValue[0] === this.minVal && newValue[1] === this.maxVal) {
-            return;
-        }
-        this.setComponentValues(newValue);
+    watchMinVal(newValue) {
+        this.internalMinVal = this.validateValue(newValue, 'min');
+    }
+    watchMaxVal(newValue) {
+        this.internalMaxVal = this.validateValue(newValue, 'max');
     }
     componentWillLoad() {
-        this.setComponentValues(this.value);
+        this.initializeValues();
     }
-    /**
-     * Imposta i valori interni del componente partendo da un array.
-     */
-    setComponentValues(values) {
-        if (values && values.length === 2) {
-            this.minVal = values[0];
-            this.maxVal = values[1];
-        }
-        else {
-            // Fallback ai valori di default se l'input non è valido
-            this.minVal = this.min;
-            this.maxVal = this.max;
+    initializeValues() {
+        this.internalMinVal = this.validateValue(this.minVal, 'min');
+        this.internalMaxVal = this.validateValue(this.maxVal, 'max');
+        // Assicura che il valore minimo non superi il massimo
+        if (this.internalMinVal > this.internalMaxVal) {
+            this.internalMinVal = this.internalMaxVal;
         }
-        // Sincronizza la prop `value` con lo stato interno
-        this.value = [this.minVal, this.maxVal];
+        // Sincronizza le prop se erano indefinite
+        this.minVal = this.internalMinVal;
+        this.maxVal = this.internalMaxVal;
+    }
+    validateValue(val, type) {
+        const defaultVal = type === 'min' ? this.min : this.max;
+        if (val === undefined || val === null)
+            return defaultVal;
+        if (val < this.min)
+            return this.min;
+        if (val > this.max)
+            return this.max;
+        return val;
     }
-    /**
-     * Calcola lo stile per la barra di riempimento tra i due slider.
-     */
     getFillStyle() {
         const range = this.max - this.min;
         if (range === 0)
             return { left: '0%', width: '0%' };
-        const leftPercent = ((this.minVal - this.min) / range) * 100;
-        const rightPercent = ((this.maxVal - this.min) / range) * 100;
+        const leftPercent = ((this.internalMinVal - this.min) / range) * 100;
+        const rightPercent = ((this.internalMaxVal - this.min) / range) * 100;
         return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };
     }
-    /**
-     * Metodo pubblico per impostare il valore del filtro programmaticamente.
-     */
-    async setValue(values, emitEvent = true) {
-        if (this.disabled || !values || values.length !== 2) {
-            return this.getValues();
-        }
-        this.setComponentValues(values);
-        if (emitEvent) {
-            this.handleCommit();
-        }
-        return this.getValues();
-    }
-    /**
-     * Metodo pubblico per ottenere il valore corrente.
-     */
     async getValues() {
-        return [this.minVal, this.maxVal];
-    }
-    /**
-     * Metodo pubblico per ottenere il nome del filtro.
-     */
-    async getName() {
-        return this.name;
+        return [this.internalMinVal, this.internalMaxVal];
     }
     render() {
-        return (h(Host, { key: '2d9000905208f8c66c1758050b95c8ed2bb9f0e7', class: { 'is-disabled': this.disabled } }, h("div", { key: '40d5c90036ed81f8a20c2abf3d0484f70310f614', class: "label-container" }, h("label", { key: 'befc2f02f7d708d072f530e6866a8a30dccb4bc2', class: "label-min" }, this.labelMinBefore, " ", this.minVal, this.labelMinAfter), h("label", { key: '5c18199234f89c0f278111e66655625d3873f14b', class: "label-max" }, this.labelMaxBefore, " ", this.maxVal, this.labelMaxAfter)), h("div", { key: '715136ff9ff433bf6d71b93bc15925b1534e3a0b', class: "slider-container" }, h("div", { key: '002dec100b9ca6df2ea734d567c2641dc3537652', class: "slider-track" }), h("div", { key: '915ff539d52779644e19b78e76e47f82b88f2ba3', class: "slider-fill", style: this.getFillStyle() }), h("input", { key: '764a350ec536c0e2c6fb355f366da4b12e58bac7', 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: 'b9b59b141bb97c18304d90a0df8a6a865d7904a7', 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 }))));
+        return (h(Host, { key: '86845857fd074c171e294dc033aa770700401d26', class: { 'is-disabled': this.disabled } }, h("div", { key: '113c5ed7ef5719a189811785c6e5bf35a4ff8649', class: "label-container" }, h("label", { key: 'b7415f0d21740dd5b65c1c82746a0f385b1d810f', class: "label-min" }, this.labelMinBefore, " ", this.internalMinVal, this.labelMinAfter), h("label", { key: '934a8fdff0fc69f0c2a9e6cd404c7df94d79f7ce', class: "label-max" }, this.labelMaxBefore, " ", this.internalMaxVal, this.labelMaxAfter)), h("div", { key: '71e3c78ba4433bb63d522e34842dcdc91e421100', class: "slider-container" }, h("div", { key: '6514105f0f22b475c2a7f210fed6bbb88d5f7148', class: "slider-track" }), h("div", { key: 'eb02aaa3b388a51136df71a94e9f0128e35653a1', class: "slider-fill", style: this.getFillStyle() }), h("input", { key: 'c11e5cf68251d18d15b46a9fbf2129e33a732e69', type: "range", min: this.min, max: this.max, step: this.step, value: this.internalMinVal, onInput: this.handleMinInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMinBefore }), h("input", { key: '41a5bc8333377c6028894735e60f8e7645c4abf3', type: "range", min: this.min, max: this.max, step: this.step, value: this.internalMaxVal, onInput: this.handleMaxInput, onChange: this.handleCommit, disabled: this.disabled, class: "range-input", "aria-label": this.labelMaxBefore }))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "value": ["valueWatcher"]
+        "minVal": ["watchMinVal"],
+        "maxVal": ["watchMaxVal"]
     }; }
     static get style() { return JumpFilterRangeStyle0; }
 }, [1, "jump-filter-range", {
@@ -141,15 +111,15 @@ const JumpFilterRange$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterRange
         "min": [2],
         "max": [2],
         "step": [2],
-        "value": [1040],
+        "minVal": [2, "min-val"],
+        "maxVal": [2, "max-val"],
         "disabled": [516],
-        "minVal": [32],
-        "maxVal": [32],
-        "setValue": [64],
-        "getValues": [64],
-        "getName": [64]
+        "internalMinVal": [32],
+        "internalMaxVal": [32],
+        "getValues": [64]
     }, undefined, {
-        "value": ["valueWatcher"]
+        "minVal": ["watchMinVal"],
+        "maxVal": ["watchMaxVal"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/jump-filter-range.js.map

@@ -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\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    if (newValue && newValue.length === 2 && newValue[0] === this.minVal && newValue[1] === this.maxVal) {\n      return;\n    }\n  \n    this.setComponentValues(newValue);\n  }\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}
+{"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\n  /** Il valore minimo dello slider. */\n  @Prop() minVal: number;\n  /** Il valore massimo dello slider. */\n  @Prop() maxVal: number;\n\n  /** Stato disabilitato dello slider. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @State() private internalMinVal: number;\n  @State() private internalMaxVal: number;\n\n  /**\n   * Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\n   */\n  @Event({ eventName: 'jump-filterchange' }) filterChange: EventEmitter<{ name: string; values: number[] }>;\n\n  @Watch('minVal')\n  watchMinVal(newValue: number) {\n    this.internalMinVal = this.validateValue(newValue, 'min');\n  }\n\n  @Watch('maxVal')\n  watchMaxVal(newValue: number) {\n    this.internalMaxVal = this.validateValue(newValue, 'max');\n  }\n\n  componentWillLoad() {\n    this.initializeValues();\n  }\n\n  private initializeValues() {\n    this.internalMinVal = this.validateValue(this.minVal, 'min');\n    this.internalMaxVal = this.validateValue(this.maxVal, 'max');\n\n    // Assicura che il valore minimo non superi il massimo\n    if (this.internalMinVal > this.internalMaxVal) {\n      this.internalMinVal = this.internalMaxVal;\n    }\n\n    // Sincronizza le prop se erano indefinite\n    this.minVal = this.internalMinVal;\n    this.maxVal = this.internalMaxVal;\n  }\n\n  private validateValue(val: number, type: 'min' | 'max'): number {\n    const defaultVal = type === 'min' ? this.min : this.max;\n    if (val === undefined || val === null) return defaultVal;\n    if (val < this.min) return this.min;\n    if (val > this.max) return this.max;\n    return val;\n  }\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.internalMaxVal - MIN_GAP) {\n      newMinVal = this.internalMaxVal - MIN_GAP;\n      input.value = newMinVal.toString();\n    }\n    this.internalMinVal = newMinVal;\n  };\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.internalMinVal + MIN_GAP) {\n      newMaxVal = this.internalMinVal + MIN_GAP;\n      input.value = newMaxVal.toString();\n    }\n    this.internalMaxVal = newMaxVal;\n  };\n\n  private handleCommit = () => {\n    // Sincronizza le prop con lo stato interno prima di emettere l'evento\n    this.minVal = this.internalMinVal;\n    this.maxVal = this.internalMaxVal;\n\n    this.filterChange.emit({\n      name: this.name,\n      values: [this.minVal, this.maxVal],\n    });\n  };\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.internalMinVal - this.min) / range) * 100;\n    const rightPercent = ((this.internalMaxVal - this.min) / range) * 100;\n    return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };\n  }\n\n  @Method()\n  async getValues(): Promise<number[]> {\n    return [this.internalMinVal, this.internalMaxVal];\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.internalMinVal}{this.labelMinAfter}\n          </label>\n          <label class=\"label-max\">\n            {this.labelMaxBefore} {this.internalMaxVal}{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.internalMinVal}\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.internalMaxVal}\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/components/jump-filter-select.js

@@ -4129,17 +4129,8 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
         this.required = false;
         this.loading = false;
         this.open = false;
-        this.hasSlottedOptions = false;
         this.values = [];
     }
-    /**
-     * Controlla se ci sono opzioni definite come slot
-     */
-    componentWillRender() {
-        // Verifica se ci sono elementi sl-option definiti come figli
-        const slotNodes = this.hostElement.childNodes;
-        this.hasSlottedOptions = Array.from(slotNodes).some(node => node.nodeName && node.nodeName.toLowerCase() === 'sl-option');
-    }
     /**
      * Converte le opzioni da string o array a array di oggetti
      */
@@ -4162,36 +4153,61 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
         this.values = this.value ? [this.value] : [];
     }
     componentDidLoad() {
-        this.listenSLChange();
         // Inizializza l'array dei valori
         this.updateValues();
+        // Aspetta che il render sia completato e che Shoelace abbia processato gli slot
+        setTimeout(() => {
+            this.listenSLChange();
+        }, 100); // Aumentiamo il timeout per dare più tempo a Shoelace
+    }
+    componentDidRender() {
+        // Assicuriamoci che il listener sia attivo anche dopo ogni render
+        if (this.el && !this.el._jumpListenerAttached) {
+            this.listenSLChange();
+        }
     }
     /**
      * Ascolta gli eventi di cambio selezione dal select Shoelace
      */
     listenSLChange() {
-        if (this.host) {
-            this.host.addEventListener('sl-change', (event) => {
+        if (this.el && !this.el._jumpListenerAttached) {
+            // Marchiamo l'elemento per evitare listener multipli
+            this.el._jumpListenerAttached = true;
+            this.el.addEventListener('sl-change', (event) => {
                 if (this.disabled) {
                     return;
                 }
+                console.log('sl-change event received:', event.target.value);
+                // AGGIORNA PRIMA I VALORI INTERNI
                 this.value = event.target.value;
                 this.updateValues();
                 const optionsArray = this.getOptionsArray();
-                const selectedOption = optionsArray.find(option => option.value === this.value);
+                let selectedOption = optionsArray.find(option => option.value === this.value);
+                // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option
+                if (!selectedOption && this.value) {
+                    const slotOptions = this.hostElement.querySelectorAll('sl-option');
+                    const slotOption = Array.from(slotOptions).find((opt) => opt.value === this.value);
+                    if (slotOption) {
+                        selectedOption = {
+                            value: this.value,
+                            label: slotOption.textContent || this.value
+                        };
+                    }
+                }
                 // Evento specifico per il componente select
                 const selectEventData = {
                     value: this.value,
                     selectedOption
                 };
                 this.selectionChange.emit(selectEventData);
-                // Evento standard per il sistema di filtri
+                // CORREZIONE: Evento standard per il sistema di filtri con valori aggiornati
                 const filterEventData = {
                     name: this.name,
-                    values: this.values,
-                    value: this.value,
-                    selectedOption
+                    values: this.values, // Ora questo sarà popolato correttamente
+                    value: this.value, // E anche questo
+                    selectedOption // E anche questo
                 };
+                console.log('jump-filter-select: Emitting jump-filterchange with data:', filterEventData);
                 this.selectionFilterChange.emit(filterEventData);
             });
         }
@@ -4209,7 +4225,19 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
      */
     async getSelectedOption() {
         const optionsArray = this.getOptionsArray();
-        return optionsArray.find(option => option.value === this.value);
+        let selectedOption = optionsArray.find(option => option.value === this.value);
+        // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option
+        if (!selectedOption && this.value) {
+            const slotOptions = this.hostElement.querySelectorAll('sl-option');
+            const slotOption = Array.from(slotOptions).find((opt) => opt.value === this.value);
+            if (slotOption) {
+                selectedOption = {
+                    value: this.value,
+                    label: slotOption.textContent || this.value
+                };
+            }
+        }
+        return selectedOption;
     }
     /**
      * Metodo pubblico per ottenere i valori selezionati come array
@@ -4251,7 +4279,18 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
         // Emetti l'evento di cambio se richiesto
         if (emitEvent) {
             const optionsArray = this.getOptionsArray();
-            const selectedOption = optionsArray.find(option => option.value === this.value);
+            let selectedOption = optionsArray.find(option => option.value === this.value);
+            // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option
+            if (!selectedOption && this.value) {
+                const slotOptions = this.hostElement.querySelectorAll('sl-option');
+                const slotOption = Array.from(slotOptions).find((opt) => opt.value === this.value);
+                if (slotOption) {
+                    selectedOption = {
+                        value: this.value,
+                        label: slotOption.textContent || this.value
+                    };
+                }
+            }
             // Evento specifico per il componente select
             const selectEventData = {
                 value: this.value,
@@ -4281,7 +4320,8 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
     }
     render() {
         const optionsArray = this.getOptionsArray();
-        return (h(Host, { key: 'b20f199ca8f48e9e3c068605a752a3c0d4e890f7', ref: (host) => (this.host = host) }, this.label && (h("div", { key: '040d2a5c5c97ed1a1fef948d00c260224adcf1da', class: "select-label" }, this.label)), h("sl-select", { key: '79b62f0c01b8a75a9bdd357395896db1c6ed0c1b', value: this.value, placeholder: this.placeholder, disabled: this.disabled, multiple: this.multiple, required: this.required, loading: this.loading, ref: (el) => (this.el = el) }, !this.hasSlottedOptions && optionsArray.map(option => (h("sl-option", { value: option.value }, option.label))), h("slot", { key: '7f4e8595fe45ddbd9d5957e819a06667e819f322' }))));
+        const hasOptionsFromProp = optionsArray && optionsArray.length > 0;
+        return (h(Host, { key: '97473942caed469dfb681d77e1335542d5d67808', ref: (host) => (this.host = host) }, this.label && (h("div", { key: 'eb5d0f4a428642694bb47f1bedf1da14d375e592', class: "select-label" }, this.label)), h("sl-select", { key: 'c3d4cb422603fdf837e5433dddd061c47832723a', value: this.value, placeholder: this.placeholder, disabled: this.disabled, multiple: this.multiple, required: this.required, loading: this.loading, ref: (el) => (this.el = el) }, hasOptionsFromProp ? (optionsArray.map(option => (h("sl-option", { value: option.value }, option.label)))) : (h("slot", null)))));
     }
     get hostElement() { return this; }
     static get style() { return JumpFilterSelectStyle0; }
@@ -4296,7 +4336,6 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
         "required": [4],
         "loading": [4],
         "open": [32],
-        "hasSlottedOptions": [32],
         "values": [32],
         "getSelectedValue": [64],
         "getSelectedOption": [64],