@jumpgroup/jump-design-system 0.3.71 → 0.3.73

package/dist/collection/components/jump-filter-range/jump-filter-range.css

@@ -0,0 +1,99 @@
+: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;
+}

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

@@ -0,0 +1,408 @@
+import { Host, h } from "@stencil/core";
+// La distanza minima tra i due slider, per evitare che si sovrappongano.
+const MIN_GAP = 0;
+export class JumpFilterRange {
+    constructor() {
+        /**
+         * 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;
+                input.value = newMinVal.toString();
+            }
+            this.minVal = 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;
+                input.value = newMaxVal.toString();
+            }
+            this.maxVal = 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
+            this.filterChange.emit({
+                name: this.name,
+                values: currentValues,
+            });
+        };
+        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(newValue) {
+        this.setComponentValues(newValue);
+    }
+    componentWillLoad() {
+        this.setComponentValues(this.value);
+    }
+    /**
+     * 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;
+        }
+        // Sincronizza la prop `value` con lo stato interno
+        this.value = [this.minVal, this.maxVal];
+    }
+    /**
+     * 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;
+        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;
+    }
+    render() {
+        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 }))));
+    }
+    static get is() { return "jump-filter-range"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-filter-range.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-filter-range.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome identificativo del filtro, utilizzato nell'evento finale."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'range-filter'"
+            },
+            "labelMinBefore": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Testo da mostrare prima del valore minimo."
+                },
+                "attribute": "label-min-before",
+                "reflect": false,
+                "defaultValue": "'Min:'"
+            },
+            "labelMinAfter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Testo da mostrare dopo il valore minimo (es. unit\u00E0 di misura)."
+                },
+                "attribute": "label-min-after",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "labelMaxBefore": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Testo da mostrare prima del valore massimo."
+                },
+                "attribute": "label-max-before",
+                "reflect": false,
+                "defaultValue": "'Max:'"
+            },
+            "labelMaxAfter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Testo da mostrare dopo il valore massimo (es. unit\u00E0 di misura)."
+                },
+                "attribute": "label-max-after",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Il valore minimo possibile per lo slider."
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Il valore massimo possibile per lo slider."
+                },
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "L'incremento tra i valori dello slider."
+                },
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "I valori iniziali dello slider, come array [min, max]."
+                },
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stato disabilitato dello slider."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "minVal": {},
+            "maxVal": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "filterChange",
+                "name": "jump-filterchange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse).\nIdeale per lanciare chiamate API o ricalcoli onerosi."
+                },
+                "complexType": {
+                    "original": "{ name: string; values: number[] }",
+                    "resolved": "{ name: string; values: number[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(values: number[], emitEvent?: boolean) => Promise<number[]>",
+                    "parameters": [{
+                            "name": "values",
+                            "type": "number[]",
+                            "docs": ""
+                        }, {
+                            "name": "emitEvent",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number[]>"
+                },
+                "docs": {
+                    "text": "Metodo pubblico per impostare il valore del filtro programmaticamente.",
+                    "tags": []
+                }
+            },
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<number[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number[]>"
+                },
+                "docs": {
+                    "text": "Metodo pubblico per ottenere il valore corrente.",
+                    "tags": []
+                }
+            },
+            "getName": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Metodo pubblico per ottenere il nome del filtro.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueWatcher"
+            }];
+    }
+}
+//# sourceMappingURL=jump-filter-range.js.map

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

@@ -0,0 +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/collection/components/jump-filter-range/jump-filter-range.stories.js

@@ -0,0 +1,90 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/Filters/JumpFilterRange',
+    tags: ['autodocs'],
+    argTypes: {
+        name: { control: 'text' },
+        labelMinBefore: { control: 'text', description: "Testo prima del valore minimo." },
+        labelMinAfter: { control: 'text', description: "Testo dopo il valore minimo (es. €)." },
+        labelMaxBefore: { control: 'text', description: "Testo prima del valore massimo." },
+        labelMaxAfter: { control: 'text', description: "Testo dopo il valore massimo (es. €)." },
+        min: { control: 'number' },
+        max: { control: 'number' },
+        step: { control: 'number' },
+        value: { control: 'object' },
+        disabled: { control: 'boolean' },
+    },
+};
+const Template = (args) => {
+    const { value } = args, rest = __rest(args, ["value"]);
+    const attributes = generateAttributesFromArgs(rest);
+    const valueAttribute = value ? `value='${JSON.stringify(value)}'` : '';
+    return formatHtml(`<jump-filter-range ${attributes} ${valueAttribute}></jump-filter-range>`);
+};
+export const Default = Template.bind({});
+Default.args = {
+    name: 'default-range',
+    labelMinBefore: 'Min:',
+    labelMinAfter: '',
+    labelMaxBefore: 'Max:',
+    labelMaxAfter: '',
+    min: 0,
+    max: 100,
+    step: 1,
+    value: [25, 75],
+    disabled: false,
+};
+// --- NUOVA STORIA AGGIUNTA ---
+export const PriceRange = Template.bind({});
+PriceRange.args = {
+    name: 'price-filter',
+    labelMinBefore: 'Prezzo da',
+    labelMinAfter: '€',
+    labelMaxBefore: 'a',
+    labelMaxAfter: '€',
+    min: 0,
+    max: 1500,
+    step: 10,
+    value: [250, 900],
+    disabled: false, // Come richiesto, non è disabilitato
+};
+// -----------------------------
+export const Percentage = Template.bind({});
+Percentage.args = {
+    name: 'satisfaction-range',
+    labelMinBefore: 'Soddisfazione da',
+    labelMinAfter: '%',
+    labelMaxBefore: 'a',
+    labelMaxAfter: '%',
+    min: 0,
+    max: 100,
+    step: 1,
+    value: [20, 80],
+};
+export const OnlyValues = Template.bind({});
+OnlyValues.args = {
+    name: 'satisfaction-range',
+    labelMinBefore: '',
+    labelMinAfter: '',
+    labelMaxBefore: '',
+    labelMaxAfter: '',
+    min: 0,
+    max: 100,
+    step: 1,
+    value: [20, 80],
+};
+export const Disabled = Template.bind({});
+Disabled.args = Object.assign(Object.assign({}, PriceRange.args), { name: 'disabled-price-filter', disabled: true });
+//# sourceMappingURL=jump-filter-range.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-filter-range.stories.js","sourceRoot":"","sources":["../../../src/components/jump-filter-range/jump-filter-range.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Filters/JumpFilterRange',\n  tags: ['autodocs'],\n  argTypes: {\n    name: { control: 'text' },\n    labelMinBefore: { control: 'text', description: \"Testo prima del valore minimo.\" },\n    labelMinAfter: { control: 'text', description: \"Testo dopo il valore minimo (es. €).\" },\n    labelMaxBefore: { control: 'text', description: \"Testo prima del valore massimo.\" },\n    labelMaxAfter: { control: 'text', description: \"Testo dopo il valore massimo (es. €).\" },\n    min: { control: 'number' },\n    max: { control: 'number' },\n    step: { control: 'number' },\n    value: { control: 'object' },\n    disabled: { control: 'boolean' },\n  },\n};\n\nconst Template = (args) => {\n  const { value, ...rest } = args;\n  const attributes = generateAttributesFromArgs(rest);\n  const valueAttribute = value ? `value='${JSON.stringify(value)}'` : '';\n  return formatHtml(`<jump-filter-range ${attributes} ${valueAttribute}></jump-filter-range>`);\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  name: 'default-range',\n  labelMinBefore: 'Min:',\n  labelMinAfter: '',\n  labelMaxBefore: 'Max:',\n  labelMaxAfter: '',\n  min: 0,\n  max: 100,\n  step: 1,\n  value: [25, 75],\n  disabled: false,\n};\n\n// --- NUOVA STORIA AGGIUNTA ---\nexport const PriceRange = Template.bind({});\nPriceRange.args = {\n  name: 'price-filter',\n  labelMinBefore: 'Prezzo da',\n  labelMinAfter: '€',\n  labelMaxBefore: 'a',\n  labelMaxAfter: '€',\n  min: 0,\n  max: 1500,\n  step: 10,\n  value: [250, 900],\n  disabled: false, // Come richiesto, non è disabilitato\n};\n// -----------------------------\n\nexport const Percentage = Template.bind({});\nPercentage.args = {\n  name: 'satisfaction-range',\n  labelMinBefore: 'Soddisfazione da',\n  labelMinAfter: '%',\n  labelMaxBefore: 'a',\n  labelMaxAfter: '%',\n  min: 0,\n  max: 100,\n  step: 1,\n  value: [20, 80],\n};\n\nexport const OnlyValues = Template.bind({});\nOnlyValues.args = {\n  name: 'satisfaction-range',\n  labelMinBefore: '',\n  labelMinAfter: '',\n  labelMaxBefore: '',\n  labelMaxAfter: '',\n  min: 0,\n  max: 100,\n  step: 1,\n  value: [20, 80],\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  // Usiamo i valori di PriceRange ma in stato disabilitato\n  ...PriceRange.args,\n  name: 'disabled-price-filter',\n  disabled: true,\n};"]}

package/dist/collection/components/jump-filter-select/jump-filter-select.js

@@ -169,7 +169,7 @@ export class JumpFilterSelect {
     }
     render() {
         const optionsArray = this.getOptionsArray();
-        return (h(Host, { key: '26ecef5862a3d5ef1d903ac9dad378027841d78c', ref: (host) => (this.host = host) }, this.label && (h("div", { key: '24bc20afb81ebe4b760889b3be866cc4c94b43f4', class: "select-label" }, this.label)), h("sl-select", { key: '7b578cf8ab02dd40df93848af918c51f7061bbbe', 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: 'dc85029632cf9c9f6b00b72c4f9a83a8281e25dc' }))));
+        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' }))));
     }
     static get is() { return "jump-filter-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-filter-switch/jump-filter-switch.js

@@ -138,7 +138,7 @@ export class JumpFilterSwitch {
         return this.name;
     }
     render() {
-        return (h(Host, { key: '5aaeb4633e6b9392d4adc3c461d1842ec3a90173', ref: (host) => (this.host = host) }, this.value && this.label && (h("sl-switch", { key: 'd261e71b29afd307de4941f8e81e71d47246e036', value: this.value, ref: (el) => (this.el = el), checked: this.checked, disabled: this.disabled }, this.label))));
+        return (h(Host, { key: 'f7e5939637497219f44aa6ba22acb4a68937d019', ref: (host) => (this.host = host) }, this.value && this.label && (h("sl-switch", { key: '4025228df5c5b4ef987d8ee70cb613ef9c993d9b', value: this.value, ref: (el) => (this.el = el), checked: this.checked, disabled: this.disabled }, this.label))));
     }
     static get is() { return "jump-filter-switch"; }
     static get encapsulation() { return "shadow"; }