@jumpgroup/jump-design-system 0.3.79 → 0.3.81
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.
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js +32 -5
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-design-system.cjs.js +1 -1
- package/dist/cjs/jump-filter-range.cjs.entry.js +44 -74
- package/dist/cjs/jump-filter-range.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css +10 -0
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js +99 -4
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js +47 -0
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map +1 -1
- package/dist/collection/components/jump-filter-range/jump-filter-range.js +76 -128
- package/dist/collection/components/jump-filter-range/jump-filter-range.js.map +1 -1
- package/dist/collection/components/jump-filter-range/jump-filter-range.stories.js +13 -4
- package/dist/collection/components/jump-filter-range/jump-filter-range.stories.js.map +1 -1
- package/dist/components/jump-card-ecommerce.js +35 -5
- package/dist/components/jump-card-ecommerce.js.map +1 -1
- package/dist/components/jump-filter-range.js +51 -81
- package/dist/components/jump-filter-range.js.map +1 -1
- package/dist/esm/jump-card-ecommerce.entry.js +32 -5
- package/dist/esm/jump-card-ecommerce.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-filter-range.entry.js +44 -74
- package/dist/esm/jump-filter-range.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-7f7935f0.entry.js +2 -0
- package/dist/jump-design-system/p-7f7935f0.entry.js.map +1 -0
- package/dist/jump-design-system/p-e30da431.entry.js +2 -0
- package/dist/jump-design-system/p-e30da431.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +20 -0
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.d.ts +11 -0
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.stories.d.ts +8 -0
- package/dist/types/components/jump-filter-range/jump-filter-range.d.ts +10 -36
- package/dist/types/components/jump-filter-range/jump-filter-range.stories.d.ts +1 -0
- package/dist/types/components.d.ts +43 -20
- package/package.json +1 -1
- package/dist/jump-design-system/p-7ac9382b.entry.js +0 -2
- package/dist/jump-design-system/p-7ac9382b.entry.js.map +0 -1
- package/dist/jump-design-system/p-d70793e3.entry.js +0 -2
- package/dist/jump-design-system/p-d70793e3.entry.js.map +0 -1
|
@@ -3,43 +3,31 @@ import { Host, h } from "@stencil/core";
|
|
|
3
3
|
const MIN_GAP = 0;
|
|
4
4
|
export class JumpFilterRange {
|
|
5
5
|
constructor() {
|
|
6
|
-
/**
|
|
7
|
-
* Gestisce l'aggiornamento in tempo reale dello slider MINIMO.
|
|
8
|
-
* Aggiorna solo lo stato interno per un feedback visivo immediato.
|
|
9
|
-
*/
|
|
10
6
|
this.handleMinInput = (event) => {
|
|
11
7
|
const input = event.target;
|
|
12
8
|
let newMinVal = parseInt(input.value, 10);
|
|
13
|
-
if (newMinVal > this.
|
|
14
|
-
newMinVal = this.
|
|
9
|
+
if (newMinVal > this.internalMaxVal - MIN_GAP) {
|
|
10
|
+
newMinVal = this.internalMaxVal - MIN_GAP;
|
|
15
11
|
input.value = newMinVal.toString();
|
|
16
12
|
}
|
|
17
|
-
this.
|
|
13
|
+
this.internalMinVal = newMinVal;
|
|
18
14
|
};
|
|
19
|
-
/**
|
|
20
|
-
* Gestisce l'aggiornamento in tempo reale dello slider MASSIMO.
|
|
21
|
-
* Aggiorna solo lo stato interno per un feedback visivo immediato.
|
|
22
|
-
*/
|
|
23
15
|
this.handleMaxInput = (event) => {
|
|
24
16
|
const input = event.target;
|
|
25
17
|
let newMaxVal = parseInt(input.value, 10);
|
|
26
|
-
if (newMaxVal < this.
|
|
27
|
-
newMaxVal = this.
|
|
18
|
+
if (newMaxVal < this.internalMinVal + MIN_GAP) {
|
|
19
|
+
newMaxVal = this.internalMinVal + MIN_GAP;
|
|
28
20
|
input.value = newMaxVal.toString();
|
|
29
21
|
}
|
|
30
|
-
this.
|
|
22
|
+
this.internalMaxVal = newMaxVal;
|
|
31
23
|
};
|
|
32
|
-
/**
|
|
33
|
-
* Eseguito quando l'utente rilascia lo slider (evento onChange).
|
|
34
|
-
* Consolida il valore e emette l'evento finale.
|
|
35
|
-
*/
|
|
36
24
|
this.handleCommit = () => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
this.
|
|
25
|
+
// Sincronizza le prop con lo stato interno prima di emettere l'evento
|
|
26
|
+
this.minVal = this.internalMinVal;
|
|
27
|
+
this.maxVal = this.internalMaxVal;
|
|
40
28
|
this.filterChange.emit({
|
|
41
29
|
name: this.name,
|
|
42
|
-
values:
|
|
30
|
+
values: [this.minVal, this.maxVal],
|
|
43
31
|
});
|
|
44
32
|
};
|
|
45
33
|
this.name = 'range-filter';
|
|
@@ -50,74 +38,55 @@ export class JumpFilterRange {
|
|
|
50
38
|
this.min = 0;
|
|
51
39
|
this.max = 100;
|
|
52
40
|
this.step = 1;
|
|
53
|
-
this.value = [];
|
|
54
|
-
this.disabled = false;
|
|
55
41
|
this.minVal = undefined;
|
|
56
42
|
this.maxVal = undefined;
|
|
43
|
+
this.disabled = false;
|
|
44
|
+
this.internalMinVal = undefined;
|
|
45
|
+
this.internalMaxVal = undefined;
|
|
57
46
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
this.
|
|
47
|
+
watchMinVal(newValue) {
|
|
48
|
+
this.internalMinVal = this.validateValue(newValue, 'min');
|
|
49
|
+
}
|
|
50
|
+
watchMaxVal(newValue) {
|
|
51
|
+
this.internalMaxVal = this.validateValue(newValue, 'max');
|
|
63
52
|
}
|
|
64
53
|
componentWillLoad() {
|
|
65
|
-
this.
|
|
54
|
+
this.initializeValues();
|
|
66
55
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
if (
|
|
72
|
-
this.
|
|
73
|
-
this.maxVal = values[1];
|
|
56
|
+
initializeValues() {
|
|
57
|
+
this.internalMinVal = this.validateValue(this.minVal, 'min');
|
|
58
|
+
this.internalMaxVal = this.validateValue(this.maxVal, 'max');
|
|
59
|
+
// Assicura che il valore minimo non superi il massimo
|
|
60
|
+
if (this.internalMinVal > this.internalMaxVal) {
|
|
61
|
+
this.internalMinVal = this.internalMaxVal;
|
|
74
62
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
63
|
+
// Sincronizza le prop se erano indefinite
|
|
64
|
+
this.minVal = this.internalMinVal;
|
|
65
|
+
this.maxVal = this.internalMaxVal;
|
|
66
|
+
}
|
|
67
|
+
validateValue(val, type) {
|
|
68
|
+
const defaultVal = type === 'min' ? this.min : this.max;
|
|
69
|
+
if (val === undefined || val === null)
|
|
70
|
+
return defaultVal;
|
|
71
|
+
if (val < this.min)
|
|
72
|
+
return this.min;
|
|
73
|
+
if (val > this.max)
|
|
74
|
+
return this.max;
|
|
75
|
+
return val;
|
|
82
76
|
}
|
|
83
|
-
/**
|
|
84
|
-
* Calcola lo stile per la barra di riempimento tra i due slider.
|
|
85
|
-
*/
|
|
86
77
|
getFillStyle() {
|
|
87
78
|
const range = this.max - this.min;
|
|
88
79
|
if (range === 0)
|
|
89
80
|
return { left: '0%', width: '0%' };
|
|
90
|
-
const leftPercent = ((this.
|
|
91
|
-
const rightPercent = ((this.
|
|
81
|
+
const leftPercent = ((this.internalMinVal - this.min) / range) * 100;
|
|
82
|
+
const rightPercent = ((this.internalMaxVal - this.min) / range) * 100;
|
|
92
83
|
return { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` };
|
|
93
84
|
}
|
|
94
|
-
/**
|
|
95
|
-
* Metodo pubblico per impostare il valore del filtro programmaticamente.
|
|
96
|
-
*/
|
|
97
|
-
async setValue(values, emitEvent = true) {
|
|
98
|
-
if (this.disabled || !values || values.length !== 2) {
|
|
99
|
-
return this.getValues();
|
|
100
|
-
}
|
|
101
|
-
this.setComponentValues(values);
|
|
102
|
-
if (emitEvent) {
|
|
103
|
-
this.handleCommit();
|
|
104
|
-
}
|
|
105
|
-
return this.getValues();
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* Metodo pubblico per ottenere il valore corrente.
|
|
109
|
-
*/
|
|
110
85
|
async getValues() {
|
|
111
|
-
return [this.
|
|
112
|
-
}
|
|
113
|
-
/**
|
|
114
|
-
* Metodo pubblico per ottenere il nome del filtro.
|
|
115
|
-
*/
|
|
116
|
-
async getName() {
|
|
117
|
-
return this.name;
|
|
86
|
+
return [this.internalMinVal, this.internalMaxVal];
|
|
118
87
|
}
|
|
119
88
|
render() {
|
|
120
|
-
return (h(Host, { key: '
|
|
89
|
+
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 }))));
|
|
121
90
|
}
|
|
122
91
|
static get is() { return "jump-filter-range"; }
|
|
123
92
|
static get encapsulation() { return "shadow"; }
|
|
@@ -277,21 +246,39 @@ export class JumpFilterRange {
|
|
|
277
246
|
"reflect": false,
|
|
278
247
|
"defaultValue": "1"
|
|
279
248
|
},
|
|
280
|
-
"
|
|
281
|
-
"type": "
|
|
282
|
-
"mutable":
|
|
249
|
+
"minVal": {
|
|
250
|
+
"type": "number",
|
|
251
|
+
"mutable": false,
|
|
283
252
|
"complexType": {
|
|
284
|
-
"original": "number
|
|
285
|
-
"resolved": "number
|
|
253
|
+
"original": "number",
|
|
254
|
+
"resolved": "number",
|
|
255
|
+
"references": {}
|
|
256
|
+
},
|
|
257
|
+
"required": false,
|
|
258
|
+
"optional": false,
|
|
259
|
+
"docs": {
|
|
260
|
+
"tags": [],
|
|
261
|
+
"text": "Il valore minimo dello slider."
|
|
262
|
+
},
|
|
263
|
+
"attribute": "min-val",
|
|
264
|
+
"reflect": false
|
|
265
|
+
},
|
|
266
|
+
"maxVal": {
|
|
267
|
+
"type": "number",
|
|
268
|
+
"mutable": false,
|
|
269
|
+
"complexType": {
|
|
270
|
+
"original": "number",
|
|
271
|
+
"resolved": "number",
|
|
286
272
|
"references": {}
|
|
287
273
|
},
|
|
288
274
|
"required": false,
|
|
289
275
|
"optional": false,
|
|
290
276
|
"docs": {
|
|
291
277
|
"tags": [],
|
|
292
|
-
"text": "
|
|
278
|
+
"text": "Il valore massimo dello slider."
|
|
293
279
|
},
|
|
294
|
-
"
|
|
280
|
+
"attribute": "max-val",
|
|
281
|
+
"reflect": false
|
|
295
282
|
},
|
|
296
283
|
"disabled": {
|
|
297
284
|
"type": "boolean",
|
|
@@ -315,8 +302,8 @@ export class JumpFilterRange {
|
|
|
315
302
|
}
|
|
316
303
|
static get states() {
|
|
317
304
|
return {
|
|
318
|
-
"
|
|
319
|
-
"
|
|
305
|
+
"internalMinVal": {},
|
|
306
|
+
"internalMaxVal": {}
|
|
320
307
|
};
|
|
321
308
|
}
|
|
322
309
|
static get events() {
|
|
@@ -328,7 +315,7 @@ export class JumpFilterRange {
|
|
|
328
315
|
"composed": true,
|
|
329
316
|
"docs": {
|
|
330
317
|
"tags": [],
|
|
331
|
-
"text": "Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse)
|
|
318
|
+
"text": "Evento emesso SOLO quando l'utente ha terminato la selezione (al rilascio del mouse)."
|
|
332
319
|
},
|
|
333
320
|
"complexType": {
|
|
334
321
|
"original": "{ name: string; values: number[] }",
|
|
@@ -339,31 +326,6 @@ export class JumpFilterRange {
|
|
|
339
326
|
}
|
|
340
327
|
static get methods() {
|
|
341
328
|
return {
|
|
342
|
-
"setValue": {
|
|
343
|
-
"complexType": {
|
|
344
|
-
"signature": "(values: number[], emitEvent?: boolean) => Promise<number[]>",
|
|
345
|
-
"parameters": [{
|
|
346
|
-
"name": "values",
|
|
347
|
-
"type": "number[]",
|
|
348
|
-
"docs": ""
|
|
349
|
-
}, {
|
|
350
|
-
"name": "emitEvent",
|
|
351
|
-
"type": "boolean",
|
|
352
|
-
"docs": ""
|
|
353
|
-
}],
|
|
354
|
-
"references": {
|
|
355
|
-
"Promise": {
|
|
356
|
-
"location": "global",
|
|
357
|
-
"id": "global::Promise"
|
|
358
|
-
}
|
|
359
|
-
},
|
|
360
|
-
"return": "Promise<number[]>"
|
|
361
|
-
},
|
|
362
|
-
"docs": {
|
|
363
|
-
"text": "Metodo pubblico per impostare il valore del filtro programmaticamente.",
|
|
364
|
-
"tags": []
|
|
365
|
-
}
|
|
366
|
-
},
|
|
367
329
|
"getValues": {
|
|
368
330
|
"complexType": {
|
|
369
331
|
"signature": "() => Promise<number[]>",
|
|
@@ -377,24 +339,7 @@ export class JumpFilterRange {
|
|
|
377
339
|
"return": "Promise<number[]>"
|
|
378
340
|
},
|
|
379
341
|
"docs": {
|
|
380
|
-
"text": "
|
|
381
|
-
"tags": []
|
|
382
|
-
}
|
|
383
|
-
},
|
|
384
|
-
"getName": {
|
|
385
|
-
"complexType": {
|
|
386
|
-
"signature": "() => Promise<string>",
|
|
387
|
-
"parameters": [],
|
|
388
|
-
"references": {
|
|
389
|
-
"Promise": {
|
|
390
|
-
"location": "global",
|
|
391
|
-
"id": "global::Promise"
|
|
392
|
-
}
|
|
393
|
-
},
|
|
394
|
-
"return": "Promise<string>"
|
|
395
|
-
},
|
|
396
|
-
"docs": {
|
|
397
|
-
"text": "Metodo pubblico per ottenere il nome del filtro.",
|
|
342
|
+
"text": "",
|
|
398
343
|
"tags": []
|
|
399
344
|
}
|
|
400
345
|
}
|
|
@@ -403,8 +348,11 @@ export class JumpFilterRange {
|
|
|
403
348
|
static get elementRef() { return "host"; }
|
|
404
349
|
static get watchers() {
|
|
405
350
|
return [{
|
|
406
|
-
"propName": "
|
|
407
|
-
"methodName": "
|
|
351
|
+
"propName": "minVal",
|
|
352
|
+
"methodName": "watchMinVal"
|
|
353
|
+
}, {
|
|
354
|
+
"propName": "maxVal",
|
|
355
|
+
"methodName": "watchMaxVal"
|
|
408
356
|
}];
|
|
409
357
|
}
|
|
410
358
|
}
|
|
@@ -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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7G,yEAAyE;AACzE,MAAM,OAAO,GAAG,CAAC,CAAC;AAOlB,MAAM,OAAO,eAAe;;QA2ElB,mBAAc,GAAG,CAAC,KAAY,EAAE,EAAE;YACxC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAE1C,IAAI,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,OAAO,EAAE,CAAC;gBAC9C,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;gBAC1C,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrC,CAAC;YACD,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAClC,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAY,EAAE,EAAE;YACxC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAE1C,IAAI,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,OAAO,EAAE,CAAC;gBAC9C,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;gBAC1C,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrC,CAAC;YACD,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAClC,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,sEAAsE;YACtE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;YAElC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC;aACnC,CAAC,CAAC;QACL,CAAC,CAAC;oBAtGqB,cAAc;8BAGJ,MAAM;6BAEP,EAAE;8BAGD,MAAM;6BAEP,EAAE;mBAGZ,CAAC;mBAED,GAAG;oBAEF,CAAC;;;wBAQqB,KAAK;;;;IAWlD,WAAW,CAAC,QAAgB;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC;IAGD,WAAW,CAAC,QAAgB;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAC7D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAE7D,sDAAsD;QACtD,IAAI,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAC9C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC5C,CAAC;QAED,0CAA0C;QAC1C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;QAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;IACpC,CAAC;IAEO,aAAa,CAAC,GAAW,EAAE,IAAmB;QACpD,MAAM,UAAU,GAAG,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACxD,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,IAAI;YAAE,OAAO,UAAU,CAAC;QACzD,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QACpC,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QACpC,OAAO,GAAG,CAAC;IACb,CAAC;IAmCO,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAEpD,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;QACrE,MAAM,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;QACtE,OAAO,EAAE,IAAI,EAAE,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,GAAG,YAAY,GAAG,WAAW,GAAG,EAAE,CAAC;IAC9E,CAAC;IAGD,KAAK,CAAC,SAAS;QACb,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC3C,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,8DAAO,KAAK,EAAC,WAAW;oBACrB,IAAI,CAAC,cAAc;;oBAAG,IAAI,CAAC,cAAc;oBAAE,IAAI,CAAC,aAAa,CACxD;gBACR,8DAAO,KAAK,EAAC,WAAW;oBACrB,IAAI,CAAC,cAAc;;oBAAG,IAAI,CAAC,cAAc;oBAAE,IAAI,CAAC,aAAa,CACxD,CACJ;YACN,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,cAAc,GAAO;gBAChC,4DAAK,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAQ;gBAC3D,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,aAAa,gBACP,IAAI,CAAC,cAAc,GAC/B;gBACF,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,aAAa,gBACP,IAAI,CAAC,cAAc,GAC/B,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\n\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}"]}
|
|
@@ -43,7 +43,6 @@ Default.args = {
|
|
|
43
43
|
min: 0,
|
|
44
44
|
max: 100,
|
|
45
45
|
step: 1,
|
|
46
|
-
value: [25, 75],
|
|
47
46
|
disabled: false,
|
|
48
47
|
};
|
|
49
48
|
// --- NUOVA STORIA AGGIUNTA ---
|
|
@@ -57,7 +56,6 @@ PriceRange.args = {
|
|
|
57
56
|
min: 0,
|
|
58
57
|
max: 1500,
|
|
59
58
|
step: 10,
|
|
60
|
-
value: [250, 900],
|
|
61
59
|
disabled: false, // Come richiesto, non è disabilitato
|
|
62
60
|
};
|
|
63
61
|
// -----------------------------
|
|
@@ -71,7 +69,6 @@ Percentage.args = {
|
|
|
71
69
|
min: 0,
|
|
72
70
|
max: 100,
|
|
73
71
|
step: 1,
|
|
74
|
-
value: [20, 80],
|
|
75
72
|
};
|
|
76
73
|
export const OnlyValues = Template.bind({});
|
|
77
74
|
OnlyValues.args = {
|
|
@@ -83,8 +80,20 @@ OnlyValues.args = {
|
|
|
83
80
|
min: 0,
|
|
84
81
|
max: 100,
|
|
85
82
|
step: 1,
|
|
86
|
-
value: [20, 80],
|
|
87
83
|
};
|
|
88
84
|
export const Disabled = Template.bind({});
|
|
89
85
|
Disabled.args = Object.assign(Object.assign({}, PriceRange.args), { name: 'disabled-price-filter', disabled: true });
|
|
86
|
+
export const WithValues = Template.bind({});
|
|
87
|
+
WithValues.args = {
|
|
88
|
+
name: 'satisfaction-range',
|
|
89
|
+
labelMinBefore: '',
|
|
90
|
+
labelMinAfter: '',
|
|
91
|
+
labelMaxBefore: '',
|
|
92
|
+
labelMaxAfter: '',
|
|
93
|
+
min: 0,
|
|
94
|
+
max: 100,
|
|
95
|
+
step: 1,
|
|
96
|
+
minVal: 50,
|
|
97
|
+
maxVal: 75,
|
|
98
|
+
};
|
|
90
99
|
//# sourceMappingURL=jump-filter-range.stories.js.map
|
|
@@ -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,
|
|
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};"]}
|
|
@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './jump-badge2.js';
|
|
|
3
3
|
import { d as defineCustomElement$3 } from './jump-button2.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './jump-icon2.js';
|
|
5
5
|
|
|
6
|
-
const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .Media.iconOnly{border-bottom-right-radius:0}:host .Media.is-mini{max-width:180px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Content.is-mini{max-width:180px}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Body.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Body.is-mini>*{flex-direction:column}:host .Product{font-size:var(--fs-400);color:var(--neutral-grey-primary);text-decoration:none}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .Footer.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Footer__AddToCart{--jump-button-color:var(--jump-card-ecommerce-add-to-cart-color);--jump-button-background:var(--jump-card-ecommerce-add-to-cart-background);--jump-button-color-hover:var(--jump-card-ecommerce-add-to-cart-color-hover);--jump-button-background-hover:var(--jump-card-ecommerce-add-to-cart-background-hover)}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .Price.is-mini{display:flex;font-size:var(--fs-400)}:host .SelectVariations{display:flex;align-items:flex-end;max-width:calc(50% - 1rem)}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
|
|
6
|
+
const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media .Images.enable-zoom{overflow:hidden}:host .Media .Images.enable-zoom .Images__Front{transition:transform 0s ease-out;cursor:zoom-in}:host .Media .Images.enable-zoom:hover .Images__Front{transform:scale(1.5)}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .Media.iconOnly{border-bottom-right-radius:0}:host .Media.is-mini{max-width:180px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Content.is-mini{max-width:180px}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Body.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Body.is-mini>*{flex-direction:column}:host .Product{font-size:var(--fs-400);color:var(--neutral-grey-primary);text-decoration:none}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .Footer.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Footer__AddToCart{--jump-button-color:var(--jump-card-ecommerce-add-to-cart-color);--jump-button-background:var(--jump-card-ecommerce-add-to-cart-background);--jump-button-color-hover:var(--jump-card-ecommerce-add-to-cart-color-hover);--jump-button-background-hover:var(--jump-card-ecommerce-add-to-cart-background-hover)}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .Price.is-mini{display:flex;font-size:var(--fs-400)}:host .SelectVariations{display:flex;align-items:flex-end;max-width:calc(50% - 1rem)}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
|
|
7
7
|
const JumpCardEcommerceStyle0 = jumpCardEcommerceCss;
|
|
8
8
|
|
|
9
9
|
const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcommerce extends HTMLElement {
|
|
@@ -15,6 +15,23 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
15
15
|
this.productAddToCart = createEvent(this, "jump-add-to-cart", 7);
|
|
16
16
|
this.productWaitingList = createEvent(this, "jump-add-to-waiting-list", 7);
|
|
17
17
|
this.variationSelected = createEvent(this, "jump-variation-selected", 7);
|
|
18
|
+
this.goToProductPage = createEvent(this, "jump-card-go-to-product-page", 7);
|
|
19
|
+
/* ---------------------- @METHODS ------------------------- */
|
|
20
|
+
this.handleMouseMove = (e) => {
|
|
21
|
+
if (!this.enableZoom || !this.imageEl)
|
|
22
|
+
return;
|
|
23
|
+
const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
|
|
24
|
+
const x = e.clientX - left;
|
|
25
|
+
const y = e.clientY - top;
|
|
26
|
+
const moveX = (x / width - 0.5) * -80; // Controlla l'ampiezza del movimento
|
|
27
|
+
const moveY = (y / height - 0.5) * -80; // Controlla l'ampiezza del movimento
|
|
28
|
+
this.imageEl.style.transform = `scale(1.5) translate(${moveX}px, ${moveY}px)`;
|
|
29
|
+
};
|
|
30
|
+
this.handleMouseLeave = () => {
|
|
31
|
+
if (!this.enableZoom || !this.imageEl)
|
|
32
|
+
return;
|
|
33
|
+
this.imageEl.style.transform = 'scale(1) translate(0, 0)';
|
|
34
|
+
};
|
|
18
35
|
this.onlyIconButton = false;
|
|
19
36
|
this.hasBackground = false;
|
|
20
37
|
this.badge = undefined;
|
|
@@ -44,6 +61,9 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
44
61
|
this.waitingListText = 'Notifica disponibilità';
|
|
45
62
|
this.addToWaitingList = false;
|
|
46
63
|
this.isMini = false;
|
|
64
|
+
this.disallowAddToCart = false;
|
|
65
|
+
this.disallowAddToCartLabel = 'Scopri';
|
|
66
|
+
this.enableZoom = false;
|
|
47
67
|
this.addedToCart = false;
|
|
48
68
|
this.endAddedToCart = false;
|
|
49
69
|
this.variations = [];
|
|
@@ -98,7 +118,6 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
98
118
|
this.jumpQuantityEl.removeEventListener('jump-change', this.onQuantityChange);
|
|
99
119
|
}
|
|
100
120
|
}
|
|
101
|
-
/* ---------------------- @METHODS ------------------------- */
|
|
102
121
|
onQuantityChange(e) {
|
|
103
122
|
var _a;
|
|
104
123
|
this.quantity = (_a = e.detail.value) !== null && _a !== void 0 ? _a : false;
|
|
@@ -110,6 +129,12 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
110
129
|
favorite: this.favorite,
|
|
111
130
|
});
|
|
112
131
|
}
|
|
132
|
+
goToProduct() {
|
|
133
|
+
this.goToProductPage.emit({
|
|
134
|
+
productId: this.productId,
|
|
135
|
+
link: this.link,
|
|
136
|
+
});
|
|
137
|
+
}
|
|
113
138
|
addProductToCart() {
|
|
114
139
|
var _a;
|
|
115
140
|
this.addedToCart = true;
|
|
@@ -154,6 +179,7 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
154
179
|
const justifyClass = this.outOfStock ? 'justify-between' : '';
|
|
155
180
|
const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';
|
|
156
181
|
const miniCard = this.isMini ? 'is-mini' : '';
|
|
182
|
+
const enableZoomClass = this.enableZoom ? 'enable-zoom' : '';
|
|
157
183
|
function calculateDiscount(price, salePrice) {
|
|
158
184
|
const discount = ((price - salePrice) / price) * 100;
|
|
159
185
|
return discount.toFixed(0);
|
|
@@ -162,7 +188,7 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
162
188
|
h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: this.badgeColor, dimension: "small", label: this.badge }) : '', !this.isMini && this.hasFavorite ?
|
|
163
189
|
h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'primary' : 'neutral', size: "small", text: true, onlyIcon: true }, h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'solid' : 'light', size: "medium" }))
|
|
164
190
|
:
|
|
165
|
-
this.hasSlotForFavorite ? h("div", { class: "Favorite" }, h("slot", { name: "favorite" })) : null, h("div", { class: `Media ${iconOnlyClass} ${backgroundClass} ${miniCard}
|
|
191
|
+
this.hasSlotForFavorite ? h("div", { class: "Favorite" }, h("slot", { name: "favorite" })) : null, h("div", { class: `Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`, onMouseMove: this.handleMouseMove, onMouseLeave: this.handleMouseLeave }, h("a", { href: this.link }, h("figure", { class: `Images ${hasImageOnHover} ${enableZoomClass}` }, this.img && !this.videoSrc ? h("img", { class: "Images__Front", src: this.img, alt: this.imgAlt, ref: el => this.imageEl = el }) : '', this.hoverImg && !this.videoSrc ?
|
|
166
192
|
h("img", { class: "Images__OnHover", src: this.hoverImg, alt: this.hoverImgAlt }) : ''), this.videoSrc && !this.img ?
|
|
167
193
|
h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : ''), !this.isMini ?
|
|
168
194
|
h("div", { class: `NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}` }, h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { slot: "prefix", name: "check" }), h("span", null, " ", this.notificationText, " ")))
|
|
@@ -189,10 +215,11 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
189
215
|
: null, h("slot", { name: "quantity" }))
|
|
190
216
|
: null), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, this.outOfStock && !this.isMini ?
|
|
191
217
|
h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
|
|
192
|
-
h("jump-button", { class: "Footer__AddToCart", variant: this.addToCartColor, size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: "bell", category: "regular", size: "small" }), this.waitingListText) : '', !this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart ?
|
|
218
|
+
h("jump-button", { class: "Footer__AddToCart", variant: this.addToCartColor, size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: "bell", category: "regular", size: "small" }), this.waitingListText) : '', !this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart && !this.disallowAddToCart ?
|
|
193
219
|
h("jump-button", { class: "Footer__AddToCart", variant: this.addToCartColor, size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: "cart-shopping", category: "regular", size: "small" }), this.addToCartText) : '', !this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?
|
|
194
220
|
h("slot", { name: "add-to-cart" })
|
|
195
|
-
: null
|
|
221
|
+
: null, !this.outOfStock && this.disallowAddToCart ?
|
|
222
|
+
h("jump-button", { class: "Footer__AddToCart", variant: this.addToCartColor, size: "small", text: true, onClick: () => this.goToProduct() }, h("jump-icon", { slot: "suffix", name: "arrow-right" }), " ", this.disallowAddToCartLabel) : ''))));
|
|
196
223
|
}
|
|
197
224
|
get JumpCardEcommerce() { return this; }
|
|
198
225
|
static get style() { return JumpCardEcommerceStyle0; }
|
|
@@ -226,6 +253,9 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
226
253
|
"waitingListText": [1, "waiting-list-text"],
|
|
227
254
|
"addToWaitingList": [4, "add-to-waiting-list"],
|
|
228
255
|
"isMini": [4, "is-mini"],
|
|
256
|
+
"disallowAddToCart": [4, "disallow-add-to-cart"],
|
|
257
|
+
"disallowAddToCartLabel": [1, "disallow-add-to-cart-label"],
|
|
258
|
+
"enableZoom": [4, "enable-zoom"],
|
|
229
259
|
"addedToCart": [4, "added-to-cart"],
|
|
230
260
|
"endAddedToCart": [4, "end-added-to-cart"],
|
|
231
261
|
"variations": [32],
|