npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.79 → 0.3.80 - Mend

@jumpgroup/jump-design-system 0.3.79 → 0.3.80

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 (25) hide show

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

@@ -3,43 +3,31 @@ import { Host, h } from "@stencil/core";
 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;
+            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';
@@ -50,74 +38,55 @@ export 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];
+    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;
         }
-        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];
+        // 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 }))));
     }
     static get is() { return "jump-filter-range"; }
     static get encapsulation() { return "shadow"; }
@@ -277,21 +246,39 @@ export class JumpFilterRange {
                 "reflect": false,
                 "defaultValue": "1"
             },
-            "value": {
-                "type": "unknown",
-                "mutable": true,
+            "minVal": {
+                "type": "number",
+                "mutable": false,
                 "complexType": {
-                    "original": "number[]",
-                    "resolved": "number[]",
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Il valore minimo dello slider."
+                },
+                "attribute": "min-val",
+                "reflect": false
+            },
+            "maxVal": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "I valori iniziali dello slider, come array [min, max]."
+                    "text": "Il valore massimo dello slider."
                 },
-                "defaultValue": "[]"
+                "attribute": "max-val",
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -315,8 +302,8 @@ export class JumpFilterRange {
     }
     static get states() {
         return {
-            "minVal": {},
-            "maxVal": {}
+            "internalMinVal": {},
+            "internalMaxVal": {}
         };
     }
     static get events() {
@@ -328,7 +315,7 @@ export class JumpFilterRange {
                 "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."
+                    "text": "Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse)."
                 },
                 "complexType": {
                     "original": "{ name: string; values: number[] }",
@@ -339,31 +326,6 @@ export class JumpFilterRange {
     }
     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[]>",
@@ -377,24 +339,7 @@ export class JumpFilterRange {
                     "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.",
+                    "text": "",
                     "tags": []
                 }
             }
@@ -403,8 +348,11 @@ export class JumpFilterRange {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "value",
-                "methodName": "valueWatcher"
+                "propName": "minVal",
+                "methodName": "watchMinVal"
+            }, {
+                "propName": "maxVal",
+                "methodName": "watchMaxVal"
             }];
     }
 }

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

	@@ -1 +1 @@
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 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}"]}
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\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}"]}

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

@@ -43,7 +43,6 @@ Default.args = {
     min: 0,
     max: 100,
     step: 1,
-    value: [25, 75],
     disabled: false,
 };
 // --- NUOVA STORIA AGGIUNTA ---
@@ -57,7 +56,6 @@ PriceRange.args = {
     min: 0,
     max: 1500,
     step: 10,
-    value: [250, 900],
     disabled: false, // Come richiesto, non è disabilitato
 };
 // -----------------------------
@@ -71,7 +69,6 @@ Percentage.args = {
     min: 0,
     max: 100,
     step: 1,
-    value: [20, 80],
 };
 export const OnlyValues = Template.bind({});
 OnlyValues.args = {
@@ -83,8 +80,20 @@ OnlyValues.args = {
     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 });
+export const WithValues = Template.bind({});
+WithValues.args = {
+    name: 'satisfaction-range',
+    labelMinBefore: '',
+    labelMinAfter: '',
+    labelMaxBefore: '',
+    labelMaxAfter: '',
+    min: 0,
+    max: 100,
+    step: 1,
+    minVal: 50,
+    maxVal: 75,
+};
 //# sourceMappingURL=jump-filter-range.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-filter-range.stories.js","sourceRoot":"","sources":["../../../src/components/jump-filter-range/jump-filter-range.stories.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE3E,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,gCAAgC,EAAE;QAClF,aAAa,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,sCAAsC,EAAE;QACvF,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,iCAAiC,EAAE;QACnF,aAAa,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,uCAAuC,EAAE;QACxF,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,EAAE,KAAK,KAAc,IAAI,EAAb,IAAI,UAAK,IAAI,EAAzB,SAAkB,CAAO,CAAC;IAChC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,OAAO,UAAU,CAAC,sBAAsB,UAAU,IAAI,cAAc,uBAAuB,CAAC,CAAC;AAC/F,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,eAAe;IACrB,cAAc,EAAE,MAAM;IACtB,aAAa,EAAE,EAAE;IACjB,cAAc,EAAE,MAAM;IACtB,aAAa,EAAE,EAAE;IACjB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,CAAC;IACP,~~KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;IACf,~~QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,gCAAgC;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,cAAc;IACpB,cAAc,EAAE,WAAW;IAC3B,aAAa,EAAE,GAAG;IAClB,cAAc,EAAE,GAAG;IACnB,aAAa,EAAE,GAAG;IAClB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,EAAE;IACR,~~KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;IACjB,~~QAAQ,EAAE,KAAK,EAAE,qCAAqC;CACvD,CAAC;AACF,gCAAgC;AAEhC,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,oBAAoB;IAC1B,cAAc,EAAE,kBAAkB;IAClC,aAAa,EAAE,GAAG;IAClB,cAAc,EAAE,GAAG;IACnB,aAAa,EAAE,GAAG;IAClB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,CAAC;~~IACP~~,~~KAAK,EAAE,~~CAAC~~,EAAE,EAAE,EAAE,CAAC~~;~~CAChB,CAAC;~~AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,oBAAoB;IAC1B,cAAc,EAAE,EAAE;IAClB,aAAa,EAAE,EAAE;IACjB,cAAc,EAAE,EAAE;IAClB,aAAa,EAAE,EAAE;IACjB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,CAAC;~~IACP~~,~~KAAK,EAAE,~~CAAC~~,EAAE,EAAE,EAAE,CAAC~~;~~CAChB,CAAC;~~AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,mCAER,UAAU,CAAC,IAAI,KAClB,IAAI,EAAE,uBAAuB,EAC7B,QAAQ,EAAE,IAAI,GACf,CAAC","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};"]}
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 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 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};\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};\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};\n\nexport const WithValues = Template.bind({});\nWithValues.args = {\n name: 'satisfaction-range',\n labelMinBefore: '',\n labelMinAfter: '',\n labelMaxBefore: '',\n labelMaxAfter: '',\n min: 0,\n max: 100,\n step: 1,\n minVal: 50,\n maxVal: 75,\n};"]}

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

@@ -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") {