@jumpgroup/jump-design-system 0.3.1 → 0.3.4
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-option.cjs.entry.js +34 -0
- package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js.map +1 -0
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js +46 -28
- 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.cjs.entry.js +2 -2
- package/dist/cjs/jump-filtergroup.cjs.entry.js +2 -2
- package/dist/cjs/jump-pagination-table.cjs.entry.js +3 -3
- package/dist/cjs/jump-pagination.cjs.entry.js +3 -3
- package/dist/cjs/jump-quantity.cjs.entry.js +7 -4
- package/dist/cjs/jump-quantity.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab-item.cjs.entry.js +2 -2
- package/dist/cjs/jump-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/jump-tab.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/jump-button/jump-button.stories.js +1 -1
- package/dist/collection/components/jump-button/jump-button.stories.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css +67 -5
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js +131 -46
- 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 +119 -75
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.css +3 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js +122 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js.map +1 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js +11 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js.map +1 -0
- package/dist/collection/components/jump-filter/jump-filter.js +2 -2
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +2 -2
- package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +3 -3
- package/dist/collection/components/jump-quantity/jump-quantity.js +43 -11
- package/dist/collection/components/jump-quantity/jump-quantity.js.map +1 -1
- package/dist/collection/components/jump-tab/jump-tab.js +1 -1
- package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -2
- package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
- package/dist/components/jump-card-ecommerce-option.d.ts +11 -0
- package/dist/components/jump-card-ecommerce-option.js +53 -0
- package/dist/components/jump-card-ecommerce-option.js.map +1 -0
- package/dist/components/jump-card-ecommerce.js +54 -32
- package/dist/components/jump-card-ecommerce.js.map +1 -1
- package/dist/components/jump-filter.js +2 -2
- package/dist/components/jump-filtergroup.js +2 -2
- package/dist/components/jump-pagination-table.js +3 -3
- package/dist/components/jump-pagination.js +3 -3
- package/dist/components/jump-quantity.js +10 -6
- package/dist/components/jump-quantity.js.map +1 -1
- package/dist/components/jump-tab-item.js +2 -2
- package/dist/components/jump-tab-panel.js +1 -1
- package/dist/components/jump-tab.js +1 -1
- package/dist/esm/jump-card-ecommerce-option.entry.js +30 -0
- package/dist/esm/jump-card-ecommerce-option.entry.js.map +1 -0
- package/dist/esm/jump-card-ecommerce.entry.js +46 -28
- 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.entry.js +2 -2
- package/dist/esm/jump-filtergroup.entry.js +2 -2
- package/dist/esm/jump-pagination-table.entry.js +3 -3
- package/dist/esm/jump-pagination.entry.js +3 -3
- package/dist/esm/jump-quantity.entry.js +7 -4
- package/dist/esm/jump-quantity.entry.js.map +1 -1
- package/dist/esm/jump-tab-item.entry.js +2 -2
- package/dist/esm/jump-tab-panel.entry.js +1 -1
- package/dist/esm/jump-tab.entry.js +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-4e4cbdaf.entry.js +2 -0
- package/dist/jump-design-system/p-4e4cbdaf.entry.js.map +1 -0
- package/dist/jump-design-system/{p-5d713084.entry.js → p-529a09f6.entry.js} +2 -2
- package/dist/jump-design-system/{p-377a769b.entry.js → p-594b15ee.entry.js} +2 -2
- package/dist/jump-design-system/p-5da7839d.entry.js +2 -0
- package/dist/jump-design-system/{p-a6fc23f7.entry.js → p-65ac4e72.entry.js} +2 -2
- package/dist/jump-design-system/{p-493c7f4a.entry.js → p-8efeaa79.entry.js} +2 -2
- package/dist/jump-design-system/{p-2cb7d817.entry.js → p-95460fa4.entry.js} +2 -2
- package/dist/jump-design-system/p-b92e6459.entry.js +2 -0
- package/dist/jump-design-system/p-b92e6459.entry.js.map +1 -0
- package/dist/jump-design-system/p-bc64407a.entry.js +2 -0
- package/dist/jump-design-system/p-bc64407a.entry.js.map +1 -0
- package/dist/jump-design-system/{p-34a46a10.entry.js → p-d2ee7b9b.entry.js} +2 -2
- package/dist/jump-design-system-elements.json +50 -9
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.d.ts +21 -7
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.stories.d.ts +26 -1
- package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.d.ts +9 -0
- package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.d.ts +6 -0
- package/dist/types/components/jump-quantity/jump-quantity.d.ts +3 -2
- package/dist/types/components.d.ts +79 -21
- package/package.json +1 -1
- package/dist/jump-design-system/p-5a6fbc53.entry.js +0 -2
- package/dist/jump-design-system/p-7696c03d.entry.js +0 -2
- package/dist/jump-design-system/p-7696c03d.entry.js.map +0 -1
- package/dist/jump-design-system/p-fafe6478.entry.js +0 -2
- package/dist/jump-design-system/p-fafe6478.entry.js.map +0 -1
- /package/dist/jump-design-system/{p-5d713084.entry.js.map → p-529a09f6.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-377a769b.entry.js.map → p-594b15ee.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-5a6fbc53.entry.js.map → p-5da7839d.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-a6fc23f7.entry.js.map → p-65ac4e72.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-493c7f4a.entry.js.map → p-8efeaa79.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-2cb7d817.entry.js.map → p-95460fa4.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-34a46a10.entry.js.map → p-d2ee7b9b.entry.js.map} +0 -0
|
@@ -22,7 +22,7 @@ export class JumpPagination {
|
|
|
22
22
|
}
|
|
23
23
|
/* --------------------- RENDER ------------------------------- */
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '18d410dc3a9511ace652112d4109918293df9906', class: "JumpPagination" }, h("div", { key: '9a7106cc8fad86b9d88df5bae5256c65dec638d2', class: "JumpPagination__Wrapper" }, h("div", { key: '408904b95e5ccbc5c8dec7992cf86bc6afa6d668', class: "indicators" }, h("div", { key: '89ac5f884a14e1bf4b9d7e191239b66a01f15dfc', class: "elements" }, h("span", { key: 'daebe2f9181ba0ca7d04534776433b278dd7f45d' }, h("span", { key: '1c340139fec9bb56b4419503e96da5db100389ad' }, this.current), " ", this.pagLabel, " ", h("span", { key: '1c8005a1a84d928bd03a019f55f8ce10bec6ef63' }, this.last))), h("div", { key: '22c30cb2b8e201ad83b861bafae9456af3651601', class: "arrow" }, this.showFirstAndLast &&
|
|
26
26
|
// <button
|
|
27
27
|
// onClick={() => {this.current = 1} }
|
|
28
28
|
// disabled={(this.current === 1) ? true : false}>
|
|
@@ -30,14 +30,14 @@ export class JumpPagination {
|
|
|
30
30
|
// disabled={(this.current === 1) ? true : false}
|
|
31
31
|
// ></jump-icon>
|
|
32
32
|
// </button>
|
|
33
|
-
h("jump-button", { key: '
|
|
33
|
+
h("jump-button", { key: 'd33a4ab68bc65b7f3904339d2af6560d5087cc4f', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '96d22863c7fc2cbaae7b72ab96a1ba8217e595a9', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'db02538122d3d8086efdbf49145c17e0e9af8788', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'ffceb9d84a86c2cf2a8f21e0f9f5defea43c5f09', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '855a75372082a8c9f749477ef28c47345f8a14fe', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '433de11f11450ecee65e4e0a9e4ff579589df7bc', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
34
34
|
// <button
|
|
35
35
|
// onClick={() => {this.current = this.last}}
|
|
36
36
|
// disabled={(this.current === this.last) ? true : false}
|
|
37
37
|
// >
|
|
38
38
|
// <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
|
|
39
39
|
// </button>
|
|
40
|
-
h("jump-button", { key: '
|
|
40
|
+
h("jump-button", { key: '80ccd477f717ce04e9c1411f2a8a808247f568ac', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '93bbfd2eeb6158397e93808f330babb27338a983', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "jump-pagination"; }
|
|
43
43
|
static get encapsulation() { return "shadow"; }
|
|
@@ -60,21 +60,21 @@ export class JumpPaginationTable {
|
|
|
60
60
|
/* --------------------- RENDER ------------------------------- */
|
|
61
61
|
render() {
|
|
62
62
|
var _a;
|
|
63
|
-
return (h(Host, { key: '
|
|
63
|
+
return (h(Host, { key: '35e491be212d92ad5236fa808401b00519805464', class: "JumpPaginationTable" }, h("div", { key: '3d983450f3128aa27d7aaf71d88059c2286b78de', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '18012e3b71c78c1f4b5fae8f8a3f0e62be9ce605', class: "elementsPerPage" }, h("label", { key: 'e5af13dfc62132a04bbf83968a17a32e25ed2db7', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '813734540e10b51a533511f11e3c3c7b280dd323', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '260bf5e7c2775970b04d382ccb4fd14080588b94', class: "indicators" }, h("div", { key: '44da392904dea45319a1179c418cb690ccbe5c49', class: "elements" }, h("span", { key: '785cb75ecd13082ca489f5ee74397c1eb41ebfbf' }, h("span", { key: 'a5914c44df81c108034edf298860ced791c1c600' }, this.first), " - ", h("span", { key: 'c2e32a38e9bf3843a0881acd4792746a559718d3' }, this.last), " ", this.pagLabel, " ", h("span", { key: 'd30a564a486c4d06b2996b326b86ef85765064c8' }, this.total))), h("div", { key: '8193f04ee380f418b5b477ef7ca40e4de18e6b46', class: "arrow" }, this.showFirstAndLast &&
|
|
64
64
|
// <button
|
|
65
65
|
// onClick={() => this.doChangePage('first')}
|
|
66
66
|
// disabled={this.first === 1}
|
|
67
67
|
// >
|
|
68
68
|
// <jump-icon slot="prefix" name="chevrons-left"></jump-icon>
|
|
69
69
|
// </button>
|
|
70
|
-
h("jump-button", { key: '
|
|
70
|
+
h("jump-button", { key: 'c7a833acee791a25257e237d88aef4e5bf5b5cc8', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: 'ffb50e27e476c8ca8d58ff18ce30c96ff6330872', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '46bf715a0803deef866d90a1523675ab24c1793f', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '223bf0f161ffce6ee0e17fbae7b8467cae790be3', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '97696457a54e5808a0c252eeda2c8d915bcfe2e8', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '9e01f45cc02450c41bf3ffc2f14cfd6606ab5a96', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
71
71
|
// <button
|
|
72
72
|
// onClick={() => this.doChangePage('last')}
|
|
73
73
|
// disabled={this.last === this.total}
|
|
74
74
|
// >
|
|
75
75
|
// <jump-icon slot="prefix" name="chevrons-right"></jump-icon>
|
|
76
76
|
// </button>
|
|
77
|
-
h("jump-button", { key: '
|
|
77
|
+
h("jump-button", { key: '05a745e26f5f14383e745a744c0c23e5598b0623', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '0ba46ee7053a3aed0091c05a20444c767738dc2f', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
78
78
|
}
|
|
79
79
|
static get is() { return "jump-pagination-table"; }
|
|
80
80
|
static get originalStyleUrls() {
|
|
@@ -23,9 +23,12 @@ export class JumpQuantity {
|
|
|
23
23
|
async getValue() {
|
|
24
24
|
return this.value;
|
|
25
25
|
}
|
|
26
|
+
async reset() {
|
|
27
|
+
this.value = this.min;
|
|
28
|
+
}
|
|
26
29
|
componentWillLoad() {
|
|
27
30
|
this.value = this.min;
|
|
28
|
-
this.internals.setFormValue(this.value);
|
|
31
|
+
this.internals.setFormValue(this.value.toString());
|
|
29
32
|
}
|
|
30
33
|
formResetCallback() {
|
|
31
34
|
this.internals.setValidity({});
|
|
@@ -41,11 +44,11 @@ export class JumpQuantity {
|
|
|
41
44
|
}
|
|
42
45
|
}
|
|
43
46
|
render() {
|
|
44
|
-
return (h(Host, { key: '
|
|
45
|
-
h("jump-button", { key: '
|
|
47
|
+
return (h(Host, { key: '8dfa03a154994f2875c8e807ee718802ec7c456c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '7419fc79da61afc0122305fbb62e36dc822a71a4' }, this.label), h("div", { key: '3cf6c104a074519f1c96698bd359176c86d0ee84', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
48
|
+
h("jump-button", { key: '10ededb763feb5d0b15b12bdd1974a286d45e8fe', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small', "only-icon": true }, h("jump-icon", { key: '9c49f6f13bd2b119670273da89707651d5d2314e', library: "lucide", name: "minus", size: "small" })), h("input", { key: '4d97685a0216966a9ff43a5ea684f249ce8e590c', ref: (el) => {
|
|
46
49
|
this.inputEl = el;
|
|
47
50
|
}, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
48
|
-
h("jump-button", { key: '
|
|
51
|
+
h("jump-button", { key: '58695769e8c593f0341d70daf85f7bd52f432f8d', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small', "only-icon": true }, h("jump-icon", { key: 'ce9cae43a1a56fb6fdd1b5035624ebba1798fa72', library: "lucide", name: "plus", size: "small" })))));
|
|
49
52
|
}
|
|
50
53
|
static get is() { return "jump-quantity"; }
|
|
51
54
|
static get encapsulation() { return "shadow"; }
|
|
@@ -186,14 +189,26 @@ export class JumpQuantity {
|
|
|
186
189
|
"attribute": "show-buttons",
|
|
187
190
|
"reflect": false,
|
|
188
191
|
"defaultValue": "true"
|
|
192
|
+
},
|
|
193
|
+
"value": {
|
|
194
|
+
"type": "number",
|
|
195
|
+
"mutable": false,
|
|
196
|
+
"complexType": {
|
|
197
|
+
"original": "number",
|
|
198
|
+
"resolved": "number",
|
|
199
|
+
"references": {}
|
|
200
|
+
},
|
|
201
|
+
"required": false,
|
|
202
|
+
"optional": false,
|
|
203
|
+
"docs": {
|
|
204
|
+
"tags": [],
|
|
205
|
+
"text": ""
|
|
206
|
+
},
|
|
207
|
+
"attribute": "value",
|
|
208
|
+
"reflect": false
|
|
189
209
|
}
|
|
190
210
|
};
|
|
191
211
|
}
|
|
192
|
-
static get states() {
|
|
193
|
-
return {
|
|
194
|
-
"value": {}
|
|
195
|
-
};
|
|
196
|
-
}
|
|
197
212
|
static get events() {
|
|
198
213
|
return [{
|
|
199
214
|
"method": "change",
|
|
@@ -216,7 +231,7 @@ export class JumpQuantity {
|
|
|
216
231
|
return {
|
|
217
232
|
"getValue": {
|
|
218
233
|
"complexType": {
|
|
219
|
-
"signature": "() => Promise<
|
|
234
|
+
"signature": "() => Promise<number>",
|
|
220
235
|
"parameters": [],
|
|
221
236
|
"references": {
|
|
222
237
|
"Promise": {
|
|
@@ -224,12 +239,29 @@ export class JumpQuantity {
|
|
|
224
239
|
"id": "global::Promise"
|
|
225
240
|
}
|
|
226
241
|
},
|
|
227
|
-
"return": "Promise<
|
|
242
|
+
"return": "Promise<number>"
|
|
228
243
|
},
|
|
229
244
|
"docs": {
|
|
230
245
|
"text": "Get the current value",
|
|
231
246
|
"tags": []
|
|
232
247
|
}
|
|
248
|
+
},
|
|
249
|
+
"reset": {
|
|
250
|
+
"complexType": {
|
|
251
|
+
"signature": "() => Promise<void>",
|
|
252
|
+
"parameters": [],
|
|
253
|
+
"references": {
|
|
254
|
+
"Promise": {
|
|
255
|
+
"location": "global",
|
|
256
|
+
"id": "global::Promise"
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
"return": "Promise<void>"
|
|
260
|
+
},
|
|
261
|
+
"docs": {
|
|
262
|
+
"text": "",
|
|
263
|
+
"tags": []
|
|
264
|
+
}
|
|
233
265
|
}
|
|
234
266
|
};
|
|
235
267
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small' only-icon>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small' only-icon>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -72,7 +72,7 @@ export class JumpTab {
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
render() {
|
|
75
|
-
return (h(Host, { key: '
|
|
75
|
+
return (h(Host, { key: '141d0932c588a4644d67abf4378858eb8a3771f7', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: '2b84773fbb263e8a593793da0db59c0110566ad7', class: "Wrapper " + this.variant }, h("slot", { key: '559a5801972af5c746cfca3d0a387855316d10ee', name: "tab-item" })), h("div", { key: '5d2c365e4e6d9694faa073025560e1984135af47' }, h("slot", { key: 'ebf5b38c8a196ed002c88c24360942d05eb04ef7', name: "tab-content" }))));
|
|
76
76
|
}
|
|
77
77
|
static get is() { return "jump-tab"; }
|
|
78
78
|
static get encapsulation() { return "shadow"; }
|
|
@@ -19,8 +19,8 @@ export class JumpTabItem {
|
|
|
19
19
|
this.variant = parentVariant;
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (h(Host, { key: '
|
|
23
|
-
h("jump-icon", { key: '
|
|
22
|
+
return (h(Host, { key: 'abb94cf6de77cb1e4b4364d3b391c2174949f60f', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: '240bb79a1e9159b2568b6d98c502841bb3445bf5', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
|
|
23
|
+
h("jump-icon", { key: '2aa6dd7c0028f31f2a90a41e08517d1e2d475ab3', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '7104baeadfefd66bfa057e66955067de8988a89e', class: "label" }, this.label))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "jump-tab-item"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,7 +5,7 @@ export class JumpTabPanel {
|
|
|
5
5
|
this.active = false;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: 'fc2eef0c94e117a26077c230693995b20acc7f3c', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '9b924fa9506c131757cad87fbc1f5bed6a9c93f4', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '01d32accd80af80358dbf2c247d5ce2c94b6c86e' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "jump-tab-panel"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface JumpCardEcommerceOption extends Components.JumpCardEcommerceOption, HTMLElement {}
|
|
4
|
+
export const JumpCardEcommerceOption: {
|
|
5
|
+
prototype: JumpCardEcommerceOption;
|
|
6
|
+
new (): JumpCardEcommerceOption;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
const jumpCardEcommerceOptionCss = ":host{display:none}";
|
|
4
|
+
const JumpCardEcommerceOptionStyle0 = jumpCardEcommerceOptionCss;
|
|
5
|
+
|
|
6
|
+
const CardEcommerceOption = /*@__PURE__*/ proxyCustomElement(class CardEcommerceOption extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
this.__attachShadow();
|
|
11
|
+
this.connectedEvent = createEvent(this, "jump-card-ecommerce-option-connected", 7);
|
|
12
|
+
this.code = undefined;
|
|
13
|
+
this.imgUrl = undefined;
|
|
14
|
+
this.label = undefined;
|
|
15
|
+
this.sku = undefined;
|
|
16
|
+
}
|
|
17
|
+
componentWillLoad() {
|
|
18
|
+
this.connectedEvent.emit({
|
|
19
|
+
code: this.code,
|
|
20
|
+
label: this.label,
|
|
21
|
+
imgUrl: this.imgUrl,
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
render() {
|
|
25
|
+
return h(Host, { key: '21e35180b98eeeaee34582aab33e4cff620c8c29' });
|
|
26
|
+
}
|
|
27
|
+
static get style() { return JumpCardEcommerceOptionStyle0; }
|
|
28
|
+
}, [1, "jump-card-ecommerce-option", {
|
|
29
|
+
"code": [1],
|
|
30
|
+
"imgUrl": [1, "img-url"],
|
|
31
|
+
"label": [1],
|
|
32
|
+
"sku": [1]
|
|
33
|
+
}]);
|
|
34
|
+
function defineCustomElement$1() {
|
|
35
|
+
if (typeof customElements === "undefined") {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
const components = ["jump-card-ecommerce-option"];
|
|
39
|
+
components.forEach(tagName => { switch (tagName) {
|
|
40
|
+
case "jump-card-ecommerce-option":
|
|
41
|
+
if (!customElements.get(tagName)) {
|
|
42
|
+
customElements.define(tagName, CardEcommerceOption);
|
|
43
|
+
}
|
|
44
|
+
break;
|
|
45
|
+
} });
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
const JumpCardEcommerceOption = CardEcommerceOption;
|
|
49
|
+
const defineCustomElement = defineCustomElement$1;
|
|
50
|
+
|
|
51
|
+
export { JumpCardEcommerceOption, defineCustomElement };
|
|
52
|
+
|
|
53
|
+
//# sourceMappingURL=jump-card-ecommerce-option.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"jump-card-ecommerce-option.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,qBAAqB,CAAC;AACzD,sCAAe,0BAA0B;;MCM5B,mBAAmB;;;;;;;;;;;IAQ9B,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAQ,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.scss?tag=jump-card-ecommerce-option&encapsulation=shadow","src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.tsx"],"sourcesContent":[":host {\n display: none;\n}\n","import { Component, Host, Event, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: \"jump-card-ecommerce-option\",\n styleUrl: \"jump-card-ecommerce-option.scss\",\n shadow: true,\n})\nexport class CardEcommerceOption {\n @Prop() code: string;\n @Prop() imgUrl: string;\n @Prop() label: string;\n @Prop() sku: string;\n\n @Event({ eventName: \"jump-card-ecommerce-option-connected\" }) connectedEvent;\n\n componentWillLoad() {\n this.connectedEvent.emit({\n code: this.code,\n label: this.label,\n imgUrl: this.imgUrl,\n });\n }\n\n render() {\n return <Host></Host>;\n }\n}"],"version":3}
|
|
@@ -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:
|
|
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-top-left-radius:3px;border-top-right-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 .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 .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 .Product{font-size:var(--fs-400)}: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 .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 .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;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 {
|
|
@@ -14,30 +14,41 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
14
14
|
this.toggleFavorite = createEvent(this, "jump-toggle-favorite", 7);
|
|
15
15
|
this.productAddToCart = createEvent(this, "jump-add-to-cart", 7);
|
|
16
16
|
this.productWaitingList = createEvent(this, "jump-add-to-waiting-list", 7);
|
|
17
|
-
this.
|
|
17
|
+
this.variationSelected = createEvent(this, "jump-variation-selected", 7);
|
|
18
18
|
this.onlyIconButton = false;
|
|
19
19
|
this.hasBackground = false;
|
|
20
20
|
this.badge = undefined;
|
|
21
21
|
this.favorite = false;
|
|
22
|
+
this.hasFavorite = false;
|
|
22
23
|
this.link = undefined;
|
|
23
24
|
this.img = undefined;
|
|
24
25
|
this.imgAlt = undefined;
|
|
26
|
+
this.hoverImg = undefined;
|
|
27
|
+
this.hoverImgAlt = undefined;
|
|
25
28
|
this.videoSrc = undefined;
|
|
26
|
-
this.addedToCart = false;
|
|
27
29
|
this.notificationUrl = undefined;
|
|
28
|
-
this.notificationText = '
|
|
30
|
+
this.notificationText = '';
|
|
29
31
|
this.productName = undefined;
|
|
30
32
|
this.subtitle = undefined;
|
|
31
33
|
this.productId = undefined;
|
|
32
34
|
this.price = undefined;
|
|
33
35
|
this.salePrice = undefined;
|
|
34
|
-
this.currency =
|
|
36
|
+
this.currency = '€';
|
|
35
37
|
this.outOfStock = false;
|
|
36
38
|
this.outOfStockText = undefined;
|
|
37
|
-
this.
|
|
39
|
+
this.addToCartText = undefined;
|
|
38
40
|
this.waitingListText = undefined;
|
|
39
41
|
this.addToWaitingList = false;
|
|
40
|
-
this.
|
|
42
|
+
this.addedToCart = false;
|
|
43
|
+
this.endAddedToCart = false;
|
|
44
|
+
this.variations = [];
|
|
45
|
+
}
|
|
46
|
+
addOption(e) {
|
|
47
|
+
let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}
|
|
48
|
+
this.variations = [...this.variations, Object.assign({}, props)];
|
|
49
|
+
}
|
|
50
|
+
onVariationSelected(variation) {
|
|
51
|
+
this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento
|
|
41
52
|
}
|
|
42
53
|
/* ---------------------- @LIFECYCLE ------------------------- */
|
|
43
54
|
componentWillLoad() { }
|
|
@@ -48,7 +59,6 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
48
59
|
this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {
|
|
49
60
|
this.quantity = quantity;
|
|
50
61
|
});
|
|
51
|
-
console.log('Quantity:', this.quantity);
|
|
52
62
|
}
|
|
53
63
|
}
|
|
54
64
|
disconnectedCallback() {
|
|
@@ -59,7 +69,8 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
59
69
|
}
|
|
60
70
|
/* ---------------------- @METHODS ------------------------- */
|
|
61
71
|
onQuantityChange(e) {
|
|
62
|
-
|
|
72
|
+
var _a;
|
|
73
|
+
this.quantity = (_a = e.detail.value) !== null && _a !== void 0 ? _a : false;
|
|
63
74
|
}
|
|
64
75
|
onToggleFavorite() {
|
|
65
76
|
this.favorite = !this.favorite;
|
|
@@ -69,15 +80,17 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
69
80
|
});
|
|
70
81
|
}
|
|
71
82
|
addProductToCart() {
|
|
83
|
+
var _a;
|
|
72
84
|
this.addedToCart = true;
|
|
73
85
|
const payload = {
|
|
74
86
|
productId: this.productId,
|
|
75
87
|
addedToCart: this.addedToCart,
|
|
76
|
-
quantity: this.quantity
|
|
77
|
-
// mancano le variazioni
|
|
88
|
+
quantity: (_a = this.quantity) !== null && _a !== void 0 ? _a : null
|
|
78
89
|
};
|
|
79
90
|
this.productAddToCart.emit(payload);
|
|
80
|
-
|
|
91
|
+
setTimeout(() => {
|
|
92
|
+
this.addedToCart = false;
|
|
93
|
+
}, 6000);
|
|
81
94
|
}
|
|
82
95
|
waitingList() {
|
|
83
96
|
this.addToWaitingList = true;
|
|
@@ -86,32 +99,37 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
86
99
|
addToWaitingList: this.addToWaitingList
|
|
87
100
|
});
|
|
88
101
|
}
|
|
89
|
-
changeVariationBody(event) {
|
|
90
|
-
const selectElement = event.target;
|
|
91
|
-
const selectedValue = selectElement.value;
|
|
92
|
-
this.changedVariation = true;
|
|
93
|
-
const payload = {
|
|
94
|
-
productId: this.productId,
|
|
95
|
-
changedVariation: this.changedVariation,
|
|
96
|
-
variation: selectedValue // da sostituire
|
|
97
|
-
};
|
|
98
|
-
this.changeVariation.emit(payload);
|
|
99
|
-
console.log("changeVariation payload:", payload);
|
|
100
|
-
}
|
|
101
102
|
render() {
|
|
102
103
|
const backgroundClass = this.hasBackground ? 'hasBackground' : '';
|
|
103
104
|
const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';
|
|
104
105
|
const justifyClass = this.outOfStock ? 'justify-between' : '';
|
|
106
|
+
const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';
|
|
105
107
|
function calculateDiscount(price, salePrice) {
|
|
106
108
|
const discount = ((price - salePrice) / price) * 100;
|
|
107
109
|
return discount.toFixed(0);
|
|
108
110
|
}
|
|
109
|
-
return (h(Host, null, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '',
|
|
110
|
-
h("
|
|
111
|
+
return (h(Host, null, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', this.hasFavorite ?
|
|
112
|
+
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" }))
|
|
113
|
+
: null, h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { href: this.link }, h("figure", { class: `Images ${hasImageOnHover} ` }, this.img && !this.videoSrc ? h("img", { class: "Images__Front", src: this.img, alt: this.imgAlt }) : '', this.hoverImg && !this.videoSrc ? h("img", { class: "Images__OnHover", src: this.hoverImg, alt: this.hoverImgAlt }) : ''), this.videoSrc && !this.img ?
|
|
114
|
+
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" })) : ''), 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, " "))), this.onlyIconButton ?
|
|
111
115
|
h("div", { class: "OnlyIconButton" }, h("jump-button", { variant: "secondary", size: "large", pill: true, onlyIcon: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: 'cart-shopping', category: "regular" })))
|
|
112
|
-
: ''), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", null, h("div", { class: "Info" }, h("div", { class: "Product" }, this.productName),
|
|
116
|
+
: ''), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", null, h("div", { class: "Info" }, h("div", { class: "Product" }, this.productName), this.subtitle ? h("div", { class: "Subtitle" }, this.subtitle) : null), this.price ?
|
|
117
|
+
h("div", { class: "Price" }, this.salePrice && this.salePrice != 0 ?
|
|
118
|
+
h("div", { class: "Price__Discount" }, " ", calculateDiscount(this.price, this.salePrice), "% ")
|
|
119
|
+
: null, h("div", { class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), this.salePrice ?
|
|
120
|
+
h("div", { class: "Price__Sale" }, this.currency, this.salePrice)
|
|
121
|
+
: null)
|
|
122
|
+
: null), h("div", { class: "SelectVariations" }, this.variations.length != 0 ?
|
|
123
|
+
h("select", { ref: (el) => (this.variationSelectEl = el), onChange: () => {
|
|
124
|
+
let currentValue = this.variationSelectEl.value;
|
|
125
|
+
let currentVariation = this.variations.find((variation) => variation.code == currentValue);
|
|
126
|
+
this.onVariationSelected(currentVariation);
|
|
127
|
+
} }, this.variations
|
|
128
|
+
.filter((variation) => !variation.imgUrl)
|
|
129
|
+
.map((variation) => (h("option", { value: variation.code }, variation.label))))
|
|
130
|
+
: null), h("slot", { name: "quantity" })), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
|
|
113
131
|
h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.waitingListText ? this.waitingListText : 'Notifica disponibilità') : '', !this.outOfStock && !this.onlyIconButton ?
|
|
114
|
-
h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.
|
|
132
|
+
h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addToCartText ? this.addToCartText : 'Aggiungi al carrello') : ''))));
|
|
115
133
|
}
|
|
116
134
|
get JumpCardEcommerce() { return this; }
|
|
117
135
|
static get style() { return JumpCardEcommerceStyle0; }
|
|
@@ -120,11 +138,13 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
120
138
|
"hasBackground": [4, "has-background"],
|
|
121
139
|
"badge": [1],
|
|
122
140
|
"favorite": [1540],
|
|
141
|
+
"hasFavorite": [4, "has-favorite"],
|
|
123
142
|
"link": [1],
|
|
124
143
|
"img": [1],
|
|
125
144
|
"imgAlt": [1, "img-alt"],
|
|
145
|
+
"hoverImg": [1, "hover-img"],
|
|
146
|
+
"hoverImgAlt": [1, "hover-img-alt"],
|
|
126
147
|
"videoSrc": [1, "video-src"],
|
|
127
|
-
"addedToCart": [4, "added-to-cart"],
|
|
128
148
|
"notificationUrl": [1, "notification-url"],
|
|
129
149
|
"notificationText": [1, "notification-text"],
|
|
130
150
|
"productName": [1, "product-name"],
|
|
@@ -135,11 +155,13 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
135
155
|
"currency": [1],
|
|
136
156
|
"outOfStock": [1540, "out-of-stock"],
|
|
137
157
|
"outOfStockText": [1, "out-of-stock-text"],
|
|
138
|
-
"
|
|
158
|
+
"addToCartText": [1, "add-to-cart-text"],
|
|
139
159
|
"waitingListText": [1, "waiting-list-text"],
|
|
140
160
|
"addToWaitingList": [4, "add-to-waiting-list"],
|
|
141
|
-
"
|
|
142
|
-
|
|
161
|
+
"addedToCart": [4, "added-to-cart"],
|
|
162
|
+
"endAddedToCart": [4, "end-added-to-cart"],
|
|
163
|
+
"variations": [32]
|
|
164
|
+
}, [[0, "jump-card-ecommerce-option-connected", "addOption"]]]);
|
|
143
165
|
function defineCustomElement$1() {
|
|
144
166
|
if (typeof customElements === "undefined") {
|
|
145
167
|
return;
|