@jumpgroup/jump-design-system 0.3.24 → 0.3.26
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 +10 -13
- 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-filtergroup.cjs.entry.js +25 -15
- package/dist/cjs/jump-filtergroup.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js +10 -13
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js +4 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js.map +1 -1
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.css +23 -11
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +28 -14
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js.map +1 -1
- package/dist/components/jump-card-ecommerce.js +10 -13
- package/dist/components/jump-card-ecommerce.js.map +1 -1
- package/dist/components/jump-filtergroup.js +28 -15
- package/dist/components/jump-filtergroup.js.map +1 -1
- package/dist/esm/jump-card-ecommerce.entry.js +10 -13
- package/dist/esm/jump-card-ecommerce.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-filtergroup.entry.js +25 -15
- package/dist/esm/jump-filtergroup.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-273ff8ec.entry.js +2 -0
- package/dist/jump-design-system/p-273ff8ec.entry.js.map +1 -0
- package/dist/jump-design-system/{p-a6cb7a7f.entry.js → p-52754e07.entry.js} +2 -2
- package/dist/jump-design-system/p-52754e07.entry.js.map +1 -0
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.d.ts +1 -4
- package/dist/types/components/jump-filtergroup/jump-filtergroup.d.ts +3 -1
- package/package.json +1 -1
- package/dist/jump-design-system/p-a6cb7a7f.entry.js.map +0 -1
- package/dist/jump-design-system/p-fa75b346.entry.js +0 -2
- package/dist/jump-design-system/p-fa75b346.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-card-ecommerce-option.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,oDAAoD;IAC3D,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,+BAA+B,UAAU,gDAAgD,CAAA;AAClG,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAC3C,OAAO
|
|
1
|
+
{"version":3,"file":"jump-card-ecommerce-option.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,oDAAoD;IAC3D,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,+BAA+B,UAAU,gDAAgD,CAAA;AAClG,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAC3C,OAAO;;;;;;;;;;;;;;;;;yBAiBgB,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,8BAA8B,GAAG,+BAA+B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/CardEcommerceOption/CardEcommerceOption',\n tags: ['autodocs'],\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-card-ecommerce-option ${attributes}>Sono una opzione</jump-card-ecommerce-option>`\n}\n\nexport const Example = Template.bind({});\n\nconst TemplateWithCardEcommerceOption = () => {\n return `\n <script>\n window.addEventListener('jump-variation-selected', (e) => {\n console.log('jump-variation-selected', e.detail);\n });\n\n window.addEventListener('jump-add-to-cart', (e) => {\n console.log('jump-add-to-cart', e.detail);\n });\n</script>\n<jump-card-ecommerce class=\"JumpCardEcommerce hydrated\" badge=\"\" link=\"https://robinsonb2b.test/prodotto/home/top-quality/prodotti-green-ecologici-biologici-per-cani-e-gatti/cibo-da-filiere-ecosostenibili-per-cani/proteine-di-insetto-per-cani/canagan-insect-protein-all-breeds-per-cani/\" img=\"https://media.robinsonpetshop.it/robinsonb2b/uploads/2023/04/25025-Canagan-Insect-Protein-All-Breeds-per-Cani.jpg\" img-alt=\"Canagan Insect Protein All Breeds per Cani\" notification-url=\"https://robinsonb2b.test/carrello/\" notification-text=\"Added to cart\" product-name=\"Canagan\" subtitle=\"Canagan Insect Protein All Breeds per Cani\" product-id=\"84122\" price=\"25.33\" sale-price=\"15.198\" currency=\"€\" out-of-stock-text=\"Expired\" addto-cart-text=\"Add to cart\" waiting-list-text=\"Notify availability\" quantity=\"\">\n\n <jump-quantity slot=\"quantity\" min=\"1\" max=\"\" step=\"1\" label=\"Quantity\" show-buttons=\"\" variant=\"horizontal\" value=\"1\" data-variant=\"horizontal\" data-hasbuttons=\"\" class=\"hydrated\"></jump-quantity>\n\n <jump-card-ecommerce-option code=\"5kg\" label=\"5 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"10kg\" label=\"10 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"15kg\" label=\"1.5 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n </jump-card-ecommerce>`\n}\n\nexport const ExampleWithCardEcommerceOption = TemplateWithCardEcommerceOption.bind({});\n"]}
|
|
@@ -1,24 +1,36 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
--hidden-display: none;
|
|
3
|
+
--font-family: var(--ff-primary, "Inter"), serif;
|
|
4
|
+
--font-size: var(--fs-400, 16px);
|
|
5
|
+
--line-height: var(--lh-300, 1.2);
|
|
6
|
+
--font-weight: var(--fw-900, 700);
|
|
7
|
+
--color: var(--neutral-grey-primary, #282828);
|
|
8
|
+
--distance-items: .25rem;
|
|
3
9
|
display: block;
|
|
4
10
|
}
|
|
5
11
|
:host h5 {
|
|
6
|
-
font-family: var(--
|
|
7
|
-
font-size: var(--
|
|
8
|
-
line-height: var(--
|
|
9
|
-
font-weight: var(--
|
|
12
|
+
font-family: var(--font-family);
|
|
13
|
+
font-size: var(--font-size);
|
|
14
|
+
line-height: var(--line-height);
|
|
15
|
+
font-weight: var(--font-weight);
|
|
16
|
+
color: var(--color);
|
|
17
|
+
margin: 0 0 var(--distance-items, 0.25rem);
|
|
10
18
|
}
|
|
11
19
|
:host slot {
|
|
12
20
|
display: flex;
|
|
13
21
|
flex-direction: column;
|
|
14
|
-
gap: 0.25rem;
|
|
15
22
|
margin-bottom: 1rem;
|
|
16
23
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
:host ::slotted(.item) {
|
|
25
|
+
max-height: 500px;
|
|
26
|
+
transition: all 0.3s ease-in-out;
|
|
27
|
+
margin-top: var(--distance-items, 0.25rem);
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: flex-start;
|
|
31
|
+
gap: 0.25rem;
|
|
20
32
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
33
|
+
:host ::slotted(.hidden) {
|
|
34
|
+
max-height: 0;
|
|
35
|
+
overflow: hidden;
|
|
24
36
|
}
|
|
@@ -7,11 +7,15 @@ export class JumpFiltergroup {
|
|
|
7
7
|
this.lessLabel = 'Mostra meno';
|
|
8
8
|
this.maxElements = 8;
|
|
9
9
|
this.variant = 'default';
|
|
10
|
+
this.label = this.otherLabel;
|
|
10
11
|
this.values = [];
|
|
11
12
|
this.value = '';
|
|
12
13
|
this.slotItems = undefined;
|
|
13
14
|
this.inputs = [];
|
|
14
|
-
this.showMore =
|
|
15
|
+
this.showMore = false;
|
|
16
|
+
}
|
|
17
|
+
watchShowMore(newValue) {
|
|
18
|
+
this.label = newValue ? this.lessLabel : this.otherLabel;
|
|
15
19
|
}
|
|
16
20
|
async getValues() {
|
|
17
21
|
return this.values;
|
|
@@ -25,19 +29,21 @@ export class JumpFiltergroup {
|
|
|
25
29
|
async getName() {
|
|
26
30
|
return this.name;
|
|
27
31
|
}
|
|
28
|
-
toggleHiddenItems(
|
|
32
|
+
toggleHiddenItems() {
|
|
29
33
|
this.slotItemsWrapper.assignedElements().forEach((item, index) => {
|
|
30
|
-
if (index > this.maxElements
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
if (index > this.maxElements) {
|
|
35
|
+
if (this.showMore) {
|
|
36
|
+
item.classList.remove('hidden');
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
item.classList.add('hidden');
|
|
40
|
+
}
|
|
35
41
|
}
|
|
36
42
|
});
|
|
37
43
|
}
|
|
38
44
|
handleShowMore() {
|
|
39
45
|
this.showMore = !this.showMore;
|
|
40
|
-
this.toggleHiddenItems(
|
|
46
|
+
this.toggleHiddenItems();
|
|
41
47
|
}
|
|
42
48
|
handleChange(event) {
|
|
43
49
|
const target = event.target;
|
|
@@ -93,11 +99,12 @@ export class JumpFiltergroup {
|
|
|
93
99
|
this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));
|
|
94
100
|
let index = 0;
|
|
95
101
|
this.slotItems.forEach((item) => {
|
|
102
|
+
item.classList.add('item');
|
|
96
103
|
if (index > this.maxElements) {
|
|
97
|
-
|
|
98
|
-
item.style.display = 'none';
|
|
104
|
+
item.classList.add('hidden');
|
|
99
105
|
}
|
|
100
|
-
if (item.tagName
|
|
106
|
+
//if (item.tagName start with jump-
|
|
107
|
+
if (item.tagName === 'INPUT' || item.tagName === 'SELECT' || item.tagName.startsWith('JUMP-') || item.tagName === 'LABEL') {
|
|
101
108
|
this.inputs.push(item);
|
|
102
109
|
if (item.tagName === 'INPUT' && item.type === 'radio') {
|
|
103
110
|
item.name = this.name;
|
|
@@ -119,10 +126,10 @@ export class JumpFiltergroup {
|
|
|
119
126
|
//this.toggleHiddenItems();
|
|
120
127
|
}
|
|
121
128
|
render() {
|
|
122
|
-
return (h(Host, { key: '
|
|
123
|
-
h("jump-button", { key: '
|
|
129
|
+
return (h(Host, { key: '7d3b79b574cb9b46501ea0482c6d3cc1fbb98e1f' }, this.heading && h("h5", { key: '68f2dd39f94fb905d9ea151cfbf946080abf1883' }, this.heading), h("div", { key: '3975c6ca04b3bd077eef48dd93311299c4cb2308', class: "filterGroup" }, h("slot", { key: 'c45798ed4fa32dc7baa18aa183740b5ad589b87b', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
|
|
130
|
+
h("jump-button", { key: '068c3456f098fd7d58f943964338ff0416507797', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
|
|
124
131
|
this.showMoreBtn = showMoreBtn;
|
|
125
|
-
}, onClick: () => this.handleShowMore() }, this.
|
|
132
|
+
}, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: '7e0b01f499ff2af6948120711d09f84dd70e4039', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
|
|
126
133
|
}
|
|
127
134
|
static get is() { return "jump-filtergroup"; }
|
|
128
135
|
static get encapsulation() { return "shadow"; }
|
|
@@ -250,6 +257,7 @@ export class JumpFiltergroup {
|
|
|
250
257
|
}
|
|
251
258
|
static get states() {
|
|
252
259
|
return {
|
|
260
|
+
"label": {},
|
|
253
261
|
"values": {},
|
|
254
262
|
"value": {},
|
|
255
263
|
"slotItems": {},
|
|
@@ -347,5 +355,11 @@ export class JumpFiltergroup {
|
|
|
347
355
|
}
|
|
348
356
|
};
|
|
349
357
|
}
|
|
358
|
+
static get watchers() {
|
|
359
|
+
return [{
|
|
360
|
+
"propName": "showMore",
|
|
361
|
+
"methodName": "watchShowMore"
|
|
362
|
+
}];
|
|
363
|
+
}
|
|
350
364
|
}
|
|
351
365
|
//# sourceMappingURL=jump-filtergroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-filtergroup.js","sourceRoot":"","sources":["../../../src/components/jump-filtergroup/jump-filtergroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-filtergroup',\n styleUrl: 'jump-filtergroup.scss',\n shadow: true,\n})\nexport class JumpFiltergroup {\n @Prop() name: string = 'tax-name';\n @Prop() heading: string = 'Titolo del filtro';\n @Prop() otherLabel: string = 'Mostra altro';\n @Prop() lessLabel: string = 'Mostra meno';\n @Prop() maxElements: number = 8;\n //TODO: Add Accordion variant within jump-acccordion component\n @Prop() variant: 'accordion' | 'default' = 'default';\n\n @State() values: string[] = [];\n @State() value: string = '';\n @State() slotItems: any;\n @State() inputs: any = [];\n @State() showMore: boolean = true;\n\n @Event({ eventName: 'jump-filterchange' }) change;\n\n slotItemsWrapper: HTMLSlotElement;\n showMoreBtn: HTMLElement;\n\n @Method('getValues')\n async getValues() {\n return this.values;\n }\n\n @Method('getActiveAmount')\n async getActiveAmount() {\n return this.values.length;\n }\n\n @Method('getInputs')\n async getInputs() {\n return this.inputs;\n }\n\n @Method('getName')\n async getName() {\n return this.name;\n }\n\n toggleHiddenItems(showAll = true) {\n this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n if (index > this.maxElements && !showAll) {\n item.setAttribute('style', 'display: none');\n } else {\n item.setAttribute('style', 'display: initial');\n }\n });\n }\n\n handleShowMore() {\n this.showMore = !this.showMore;\n this.toggleHiddenItems(this.showMore);\n }\n\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement | HTMLSelectElement;\n const newValue = target.value;\n\n if (target.tagName === 'INPUT') {\n if (target.type === 'checkbox') {\n // @ts-ignore\n if (target.checked) {\n this.values.push(newValue);\n } else {\n const index = this.values.indexOf(newValue);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n } else if (target.type === 'radio') {\n // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n this.value = newValue;\n this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n }\n } else if (target.tagName === 'SELECT') {\n // Se è un select, aggiorna semplicemente il valore\n this.value = newValue;\n this.values = [newValue];\n }\n\n // Emit event con i valori aggiornati\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n handleCheckboxChange(event: CustomEvent) {\n if (event.detail.checked && !this.values.includes(event.detail.value)) {\n this.values.push(event.detail.value);\n } else if (!event.detail.checked && this.values.includes(event.detail.value)) {\n const index = this.values.indexOf(event.detail.value);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n componentDidLoad() {\n this.slotItems = this.slotItemsWrapper.assignedElements();\n this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));\n\n let index = 0;\n this.slotItems.forEach((item) => {\n if (index > this.maxElements) {\n //item.setAttribute('data-hide', 'true');\n item.style.display = 'none';\n }\n if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {\n this.inputs.push(item);\n if (item.tagName === 'INPUT' && item.type === 'radio') {\n item.name = this.name;\n }\n } else {\n const inputs = item.querySelectorAll('input, select');\n if (inputs.length > 0) {\n inputs.forEach((input) => {\n this.inputs.push(input);\n\n if (input.tagName === 'INPUT' && input.type === 'radio') {\n input.name = this.name;\n }\n });\n }\n }\n index++;\n });\n\n //this.toggleHiddenItems();\n }\n\n render() {\n return (\n <Host>\n {this.heading && <h5>{this.heading}</h5>}\n <div class=\"filterGroup\">\n <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n </div>\n {this.inputs.length > this.maxElements &&\n <jump-button variant=\"primary\" size=\"small\" text name={this.showMore ? this.otherLabel : this.lessLabel}\n aria-label={this.showMore ? this.otherLabel : this.lessLabel}\n ref={(showMoreBtn) => {\n this.showMoreBtn = showMoreBtn;\n }}\n onClick={() => this.handleShowMore()}>\n {this.showMore ? this.otherLabel : this.lessLabel}\n <jump-icon slot=\"suffix\" name={this.showMore ? 'chevron-down' : 'chevron-up'}></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"jump-filtergroup.js","sourceRoot":"","sources":["../../../src/components/jump-filtergroup/jump-filtergroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filtergroup',\n styleUrl: 'jump-filtergroup.scss',\n shadow: true,\n})\nexport class JumpFiltergroup {\n @Prop() name: string = 'tax-name';\n @Prop() heading: string = 'Titolo del filtro';\n @Prop() otherLabel: string = 'Mostra altro';\n @Prop() lessLabel: string = 'Mostra meno';\n @Prop() maxElements: number = 8;\n //TODO: Add Accordion variant within jump-acccordion component\n @Prop() variant: 'accordion' | 'default' = 'default';\n\n @State() label: string = this.otherLabel;\n @State() values: string[] = [];\n @State() value: string = '';\n @State() slotItems: any;\n @State() inputs: any = [];\n @State() showMore: boolean = false;\n\n @Event({ eventName: 'jump-filterchange' }) change;\n\n slotItemsWrapper: HTMLSlotElement;\n showMoreBtn: HTMLElement;\n\n @Watch('showMore')\n watchShowMore(newValue: boolean) {\n this.label = newValue ? this.lessLabel : this.otherLabel;\n }\n\n @Method('getValues')\n async getValues() {\n return this.values;\n }\n\n @Method('getActiveAmount')\n async getActiveAmount() {\n return this.values.length;\n }\n\n @Method('getInputs')\n async getInputs() {\n return this.inputs;\n }\n\n @Method('getName')\n async getName() {\n return this.name;\n }\n\n toggleHiddenItems() {\n this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n if (index > this.maxElements) {\n if (this.showMore) {\n item.classList.remove('hidden');\n } else {\n item.classList.add('hidden');\n }\n }\n });\n }\n\n handleShowMore() {\n this.showMore = !this.showMore;\n this.toggleHiddenItems();\n }\n\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement | HTMLSelectElement;\n const newValue = target.value;\n\n if (target.tagName === 'INPUT') {\n if (target.type === 'checkbox') {\n // @ts-ignore\n if (target.checked) {\n this.values.push(newValue);\n } else {\n const index = this.values.indexOf(newValue);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n } else if (target.type === 'radio') {\n // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n this.value = newValue;\n this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n }\n } else if (target.tagName === 'SELECT') {\n // Se è un select, aggiorna semplicemente il valore\n this.value = newValue;\n this.values = [newValue];\n }\n\n // Emit event con i valori aggiornati\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n handleCheckboxChange(event: CustomEvent) {\n if (event.detail.checked && !this.values.includes(event.detail.value)) {\n this.values.push(event.detail.value);\n } else if (!event.detail.checked && this.values.includes(event.detail.value)) {\n const index = this.values.indexOf(event.detail.value);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n componentDidLoad() {\n this.slotItems = this.slotItemsWrapper.assignedElements();\n this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));\n\n let index = 0;\n this.slotItems.forEach((item) => {\n item.classList.add('item');\n if (index > this.maxElements) {\n item.classList.add('hidden');\n }\n //if (item.tagName start with jump-\n if (item.tagName === 'INPUT' || item.tagName === 'SELECT' || item.tagName.startsWith('JUMP-') || item.tagName === 'LABEL') {\n this.inputs.push(item);\n if (item.tagName === 'INPUT' && item.type === 'radio') {\n item.name = this.name;\n }\n } else {\n const inputs = item.querySelectorAll('input, select');\n if (inputs.length > 0) {\n inputs.forEach((input) => {\n this.inputs.push(input);\n\n if (input.tagName === 'INPUT' && input.type === 'radio') {\n input.name = this.name;\n }\n });\n }\n }\n index++;\n });\n\n //this.toggleHiddenItems();\n }\n\n render() {\n return (\n <Host>\n {this.heading && <h5>{this.heading}</h5>}\n <div class=\"filterGroup\">\n <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n </div>\n {this.inputs.length > this.maxElements &&\n <jump-button variant=\"primary\" size=\"small\" text name={this.label}\n aria-label={this.label}\n ref={(showMoreBtn) => {\n this.showMoreBtn = showMoreBtn;\n }}\n onClick={() => this.handleShowMore()}>\n {this.label}\n <jump-icon slot=\"suffix\" name={!this.showMore ? 'chevron-down' : 'chevron-up'}></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n}\n"]}
|
|
@@ -71,19 +71,6 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
71
71
|
}
|
|
72
72
|
this.formatPrices();
|
|
73
73
|
}
|
|
74
|
-
/**
|
|
75
|
-
* Format prices in locale currency
|
|
76
|
-
*/
|
|
77
|
-
formatPrices() {
|
|
78
|
-
var _a;
|
|
79
|
-
let locale = (_a = document.documentElement.lang) !== null && _a !== void 0 ? _a : 'it-IT';
|
|
80
|
-
if (locale.length == 2) {
|
|
81
|
-
locale = `${locale}-${locale.toUpperCase()}`;
|
|
82
|
-
}
|
|
83
|
-
// Format price with 2 decimal digits and in locale
|
|
84
|
-
this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
85
|
-
this.salePriceFormatted = this.salePrice.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
86
|
-
}
|
|
87
74
|
disconnectedCallback() {
|
|
88
75
|
this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');
|
|
89
76
|
if (this.jumpQuantityEl) {
|
|
@@ -127,6 +114,16 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
|
|
|
127
114
|
addToWaitingList: this.addToWaitingList
|
|
128
115
|
});
|
|
129
116
|
}
|
|
117
|
+
formatPrices() {
|
|
118
|
+
var _a;
|
|
119
|
+
let locale = (_a = document.documentElement.lang) !== null && _a !== void 0 ? _a : 'it-IT';
|
|
120
|
+
if (locale.length == 2) {
|
|
121
|
+
locale = `${locale}-${locale.toUpperCase()}`;
|
|
122
|
+
}
|
|
123
|
+
// Format price with 2 decimal digits and in locale
|
|
124
|
+
this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
125
|
+
this.salePriceFormatted = this.salePrice.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
126
|
+
}
|
|
130
127
|
render() {
|
|
131
128
|
const backgroundClass = this.hasBackground && !this.isMini ? 'hasBackground' : '';
|
|
132
129
|
const iconOnlyClass = this.onlyIconButton && !this.isMini ? 'iconOnly' : '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-card-ecommerce.js","mappings":"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","names":["JumpCardEcommerce"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\n }\n\n .Favorite {\n position: absolute;\n top: 1rem;\n right: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n right: calc(1rem + 8px);\n }\n }\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n\n .Images {\n height: 100%;\n margin: 0;\n position: relative;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\n\n &.has-hover-image {\n &:hover .Images__Front {\n opacity: 0;\n }\n }\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n\n &.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .NotificationCart {\n display: none;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2rem 1rem;\n background-color: hsl(0 0% 0% / 35%);\n box-sizing: border-box;\n z-index: 2;\n transform: translate3d(0, 0, 0);\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-padding) 0;\n\n & > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n & > * {\n flex: 0 1 auto;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Footer {\n line-height: var(--lh-400);\n justify-content: end;\n padding: var(--jump-card-padding) 0;\n align-items: flex-end;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n &.hasBackground {\n padding-bottom: 0;\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n z-index: 2;\n }\n\n .Price {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n grid-template-rows: 1.5rem 1.5rem auto;\n justify-items: end;\n align-items: end;\n column-gap: 0.5rem;\n\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n\n .SelectVariations {\n select {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--neutral-grey-secondary);\n border-radius: 3px;\n color: var(--neutral-grey-secondary);\n font-size: var(--fs-300);\n padding: 0.5rem 0.75rem;\n max-width: 100%;\n 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\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n -webkit-print-color-adjust: exact;\n }\n }\n}\n\n.slide-in-bottom {\n animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.slide-out-bottom {\n animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;\n}\n\n.fade-in-out {\n animation-name: fade-in-out;\n animation-duration: 6s;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes fade-in-out {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n\n 50% {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen} from '@stencil/core';\n\ninterface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n // Add more keys as needed\n}\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicate if card has only icon button*/\n @Prop() onlyIconButton: boolean = false;\n\n /** Indicate if card has background*/\n @Prop() hasBackground: boolean = false;\n\n /** Indicates the badge of the card*/\n @Prop() badge: string;\n\n /** Indicates if the product is favorite */\n\n @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n /** Indicate if the whislist is active in shop*/\n @Prop() hasFavorite: boolean = false;\n\n /** Indicate if the whislist will be slotted*/\n @Prop() hasSlotForFavorite: boolean = false;\n\n /** Indicates if the favorite button is render as an anchor, and define the url*/\n @Prop() favoriteHref: string;\n\n /** Indicates the link of the card*/\n @Prop() link: string;\n\n /** Indicates the image's src of the card*/\n @Prop() img: string ;\n\n /** Indicates the img's alt of the card*/\n @Prop() imgAlt: string;\n\n /** Indicates the over image's src of the card*/\n @Prop() hoverImg: string ;\n\n /** Indicates the hover img's alt of the card*/\n @Prop() hoverImgAlt: string;\n\n /** Indicates the videoSrc of the card*/\n @Prop() videoSrc: string;\n\n /** Indicates the notificationUrl of the card*/\n @Prop() notificationUrl: string;\n\n /** Indicates the notificationText of the card*/\n @Prop() notificationText: string = '';\n\n /** Indicates the title of the card*/\n @Prop() productName: string ;\n\n /** Indicates the subtitle of the card*/\n @Prop() subtitle: string;\n\n /** Indicates the ID of the product, can be also a SKU*/\n @Prop() productId: string ;\n\n /** Indicates the price of the card */\n @Prop() price: number;\n\n /** Indicates the sale price of the card */\n @Prop() salePrice: number;\n\n /** Indicates the currency of the card */\n @Prop() currency: string = '€';\n\n /** Indicates if the product is outOfStock */\n @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n\n /** Indicates the outOfStockText of the product*/\n @Prop() outOfStockText: string;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() addToCartText: string ;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() waitingListText: string ;\n\n /** Indicate if the user request to be notified when te product is avaible*/\n @Prop() addToWaitingList: boolean = false;\n\n /** Indicate if the card is Mini Card*/\n @Prop() isMini: boolean = false;\n\n /* ---------------------- @STATE ------------------------- */\n\n /** Indicate if the product is added to cart --> non deve esserci nelle storie! */\n @Prop() addedToCart: boolean = false;\n\n @Prop() endAddedToCart: boolean = false;\n\n @State() variations: Variation[] = [];\n\n @State() selectedVariation: Variation;\n\n @State() priceFormatted: string;\n @State() salePriceFormatted: string;\n\n // è una proprietà che viene cambiata solo da dentro\n quantity: number;\n\n variationSelectEl: HTMLSelectElement;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n @Listen(\"jump-card-ecommerce-option-connected\")\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n this.variations = [...this.variations, { ...props }];\n }\n\n onVariationSelected() {\n let currentValue = this.variationSelectEl.value;\n let variation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\n this.selectedVariation = variation;\n this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n }\n\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentWillLoad() {}\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n }\n this.formatPrices();\n }\n\n /**\n * Format prices in locale currency\n */\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if(locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, {minimumFractionDigits: 2, maximumFractionDigits: 2});\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {minimumFractionDigits: 2, maximumFractionDigits: 2});\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.removeEventListener('jump-change',this.onQuantityChange);\n }\n }\n\n /* ---------------------- @METHODS ------------------------- */\n onQuantityChange(e) {\n this.quantity = e.detail.value ?? false;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite\n }\n );\n }\n\n addProductToCart() {\n this.addedToCart = true;\n let variations = this.selectedVariation;\n if(!variations && this.variations.length > 0) {\n variations = this.variations[0];\n }\n\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: variations ?? null\n };\n this.productAddToCart.emit(payload);\n\n setTimeout(() => {\n this.addedToCart = false;\n }, 6000);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList\n }\n )\n }\n\n render() {\n const backgroundClass = this.hasBackground && !this.isMini ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton && !this.isMini ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\n const miniCard = this.isMini ? 'is-mini' : '';\n\n function calculateDiscount(price: number, salePrice: number): string {\n const discount = ((price - salePrice) / price) * 100;\n return discount.toFixed(0);\n };\n\n return (\n <Host>\n { !this.isMini && this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" label={this.badge}></jump-badge> : ''}\n\n { !this.isMini && this.hasFavorite ?\n this.favoriteHref != '' ?\n <jump-button href={this.favoriteHref} onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n :\n <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n :\n this.hasSlotForFavorite ? <div class=\"Favorite\"><slot name=\"favorite\"></slot> </div> : null\n }\n\n <div class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}>\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} `}>\n {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n {this.hoverImg && !this.videoSrc ? <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n </figure>\n {this.videoSrc && !this.img ?\n <video autoplay>\n <source src={this.videoSrc} type=\"video/mp4\"/>\n <source src={this.videoSrc} type=\"video/mov\"/>\n <source src={this.videoSrc} type=\"video/webm\"/>\n </video> : ''}\n </a>\n { !this.isMini ?\n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text>\n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon>\n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n : null}\n { !this.isMini && this.onlyIconButton ?\n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon>\n </jump-button>\n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div>\n <div class=\"Info\">\n <div class=\"Product\">{this.productName}</div>\n { !this.isMini && this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n : null}\n\n {!this.isMini ?\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n :\n <div class={`Price__Regular`}>\n {this.currency}{ this.salePrice && this.salePrice < this.price ? this.salePriceFormatted : this.priceFormatted}\n </div>\n }\n\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n </div>\n\n {!this.isMini ?\n <div class=\"SelectVariations\">\n {this.variations.length != 0 ?\n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n this.onVariationSelected();\n }}\n >\n {this.variations\n .filter((variation) => !variation.imgUrl)\n .map((variation) => (\n <option value={variation.code}>{variation.label}</option>\n ))}\n </select>\n : null }\n </div>\n : null}\n\n {!this.isMini ? <slot name=\"quantity\"></slot> : null}\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n { this.outOfStock ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'}\n </jump-button> : ''\n }\n\n { !this.outOfStock && !this.onlyIconButton ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.addToCartText ? this.addToCartText : 'Aggiungi al carrello'}\n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
1
|
+
{"file":"jump-card-ecommerce.js","mappings":"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","names":["JumpCardEcommerce"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\n }\n\n .Favorite {\n position: absolute;\n top: 1rem;\n right: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n right: calc(1rem + 8px);\n }\n }\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n\n .Images {\n height: 100%;\n margin: 0;\n position: relative;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\n\n &.has-hover-image {\n &:hover .Images__Front {\n opacity: 0;\n }\n }\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n\n &.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .NotificationCart {\n display: none;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2rem 1rem;\n background-color: hsl(0 0% 0% / 35%);\n box-sizing: border-box;\n z-index: 2;\n transform: translate3d(0, 0, 0);\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-padding) 0;\n\n & > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n & > * {\n flex: 0 1 auto;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Footer {\n line-height: var(--lh-400);\n justify-content: end;\n padding: var(--jump-card-padding) 0;\n align-items: flex-end;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n &.hasBackground {\n padding-bottom: 0;\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n z-index: 2;\n }\n\n .Price {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n grid-template-rows: 1.5rem 1.5rem auto;\n justify-items: end;\n align-items: end;\n column-gap: 0.5rem;\n\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n\n .SelectVariations {\n select {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--neutral-grey-secondary);\n border-radius: 3px;\n color: var(--neutral-grey-secondary);\n font-size: var(--fs-300);\n padding: 0.5rem 0.75rem;\n max-width: 100%;\n 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\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n -webkit-print-color-adjust: exact;\n }\n }\n}\n\n.slide-in-bottom {\n animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.slide-out-bottom {\n animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;\n}\n\n.fade-in-out {\n animation-name: fade-in-out;\n animation-duration: 6s;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes fade-in-out {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n\n 50% {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen} from '@stencil/core';\n\ninterface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n // Add more keys as needed\n}\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicate if card has only icon button*/\n @Prop() onlyIconButton: boolean = false;\n\n /** Indicate if card has background*/\n @Prop() hasBackground: boolean = false;\n\n /** Indicates the badge of the card*/\n @Prop() badge: string;\n\n /** Indicates if the product is favorite */\n\n @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n /** Indicate if the whislist is active in shop*/\n @Prop() hasFavorite: boolean = false;\n\n /** Indicate if the whislist will be slotted*/\n @Prop() hasSlotForFavorite: boolean = false;\n\n /** Indicates if the favorite button is render as an anchor, and define the url*/\n @Prop() favoriteHref: string;\n\n /** Indicates the link of the card*/\n @Prop() link: string;\n\n /** Indicates the image's src of the card*/\n @Prop() img: string ;\n\n /** Indicates the img's alt of the card*/\n @Prop() imgAlt: string;\n\n /** Indicates the over image's src of the card*/\n @Prop() hoverImg: string ;\n\n /** Indicates the hover img's alt of the card*/\n @Prop() hoverImgAlt: string;\n\n /** Indicates the videoSrc of the card*/\n @Prop() videoSrc: string;\n\n /** Indicates the notificationUrl of the card*/\n @Prop() notificationUrl: string;\n\n /** Indicates the notificationText of the card*/\n @Prop() notificationText: string = '';\n\n /** Indicates the title of the card*/\n @Prop() productName: string ;\n\n /** Indicates the subtitle of the card*/\n @Prop() subtitle: string;\n\n /** Indicates the ID of the product, can be also a SKU*/\n @Prop() productId: string ;\n\n /** Indicates the price of the card */\n @Prop() price: number;\n\n /** Indicates the sale price of the card */\n @Prop() salePrice: number;\n\n /** Indicates the currency of the card */\n @Prop() currency: string = '€';\n\n /** Indicates if the product is outOfStock */\n @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n\n /** Indicates the outOfStockText of the product*/\n @Prop() outOfStockText: string;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() addToCartText: string ;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() waitingListText: string ;\n\n /** Indicate if the user request to be notified when te product is avaible*/\n @Prop() addToWaitingList: boolean = false;\n\n /** Indicate if the card is Mini Card*/\n @Prop() isMini: boolean = false;\n\n /* ---------------------- @STATE ------------------------- */\n\n /** Indicate if the product is added to cart --> non deve esserci nelle storie! */\n @Prop() addedToCart: boolean = false;\n\n @Prop() endAddedToCart: boolean = false;\n\n @State() variations: Variation[] = [];\n\n @State() selectedVariation: Variation;\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n // è una proprietà che viene cambiata solo da dentro\n quantity: number;\n\n variationSelectEl: HTMLSelectElement;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n @Listen(\"jump-card-ecommerce-option-connected\")\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n this.variations = [...this.variations, { ...props }];\n }\n\n onVariationSelected() {\n let currentValue = this.variationSelectEl.value;\n let variation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\n this.selectedVariation = variation;\n this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n }\n\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentWillLoad() {}\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n }\n\n this.formatPrices();\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.removeEventListener('jump-change',this.onQuantityChange);\n }\n }\n\n /* ---------------------- @METHODS ------------------------- */\n onQuantityChange(e) {\n this.quantity = e.detail.value ?? false;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite\n }\n );\n }\n\n addProductToCart() {\n this.addedToCart = true;\n let variations = this.selectedVariation;\n if(!variations && this.variations.length > 0) {\n variations = this.variations[0];\n }\n\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: variations ?? null\n };\n this.productAddToCart.emit(payload);\n\n setTimeout(() => {\n this.addedToCart = false;\n }, 6000);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList\n }\n )\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if(locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, {minimumFractionDigits: 2, maximumFractionDigits: 2});\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {minimumFractionDigits: 2, maximumFractionDigits: 2});\n }\n\n render() {\n const backgroundClass = this.hasBackground && !this.isMini ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton && !this.isMini ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\n const miniCard = this.isMini ? 'is-mini' : '';\n\n function calculateDiscount(price: number, salePrice: number): string {\n const discount = ((price - salePrice) / price) * 100;\n return discount.toFixed(0);\n };\n\n return (\n <Host>\n { !this.isMini && this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" label={this.badge}></jump-badge> : ''}\n\n { !this.isMini && this.hasFavorite ?\n this.favoriteHref != '' ?\n <jump-button href={this.favoriteHref} onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n :\n <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n :\n this.hasSlotForFavorite ? <div class=\"Favorite\"><slot name=\"favorite\"></slot> </div> : null\n }\n\n <div class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}>\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} `}>\n {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n {this.hoverImg && !this.videoSrc ? <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n </figure>\n {this.videoSrc && !this.img ?\n <video autoplay>\n <source src={this.videoSrc} type=\"video/mp4\"/>\n <source src={this.videoSrc} type=\"video/mov\"/>\n <source src={this.videoSrc} type=\"video/webm\"/>\n </video> : ''}\n </a>\n { !this.isMini ?\n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text>\n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon>\n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n : null}\n { !this.isMini && this.onlyIconButton ?\n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon>\n </jump-button>\n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div>\n <div class=\"Info\">\n <div class=\"Product\">{this.productName}</div>\n { !this.isMini && this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n : null}\n\n {!this.isMini ?\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n :\n <div class={`Price__Regular`}>\n {this.currency}{ this.salePrice && this.salePrice < this.price ? this.salePriceFormatted : this.priceFormatted}\n </div>\n }\n\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n </div>\n\n {!this.isMini ?\n <div class=\"SelectVariations\">\n {this.variations.length != 0 ?\n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n this.onVariationSelected();\n }}\n >\n {this.variations\n .filter((variation) => !variation.imgUrl)\n .map((variation) => (\n <option value={variation.code}>{variation.label}</option>\n ))}\n </select>\n : null }\n </div>\n : null}\n\n {!this.isMini ? <slot name=\"quantity\"></slot> : null}\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n { this.outOfStock ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'}\n </jump-button> : ''\n }\n\n { !this.outOfStock && !this.onlyIconButton ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.addToCartText ? this.addToCartText : 'Aggiungi al carrello'}\n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
|
|
|
2
2
|
import { d as defineCustomElement$3 } from './jump-button2.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './jump-icon2.js';
|
|
4
4
|
|
|
5
|
-
const jumpFiltergroupCss = ":host{--hidden-display:none;display:block}:host h5{font-family:var(--
|
|
5
|
+
const jumpFiltergroupCss = ":host{--hidden-display:none;--font-family:var(--ff-primary, \"Inter\"), serif;--font-size:var(--fs-400, 16px);--line-height:var(--lh-300, 1.2);--font-weight:var(--fw-900, 700);--color:var(--neutral-grey-primary, #282828);--distance-items:.25rem;display:block}:host h5{font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);color:var(--color);margin:0 0 var(--distance-items, 0.25rem)}:host slot{display:flex;flex-direction:column;margin-bottom:1rem}:host ::slotted(.item){max-height:500px;transition:all 0.3s ease-in-out;margin-top:var(--distance-items, 0.25rem);display:flex;align-items:center;justify-content:flex-start;gap:0.25rem}:host ::slotted(.hidden){max-height:0;overflow:hidden}";
|
|
6
6
|
const JumpFiltergroupStyle0 = jumpFiltergroupCss;
|
|
7
7
|
|
|
8
8
|
const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup extends HTMLElement {
|
|
@@ -17,11 +17,15 @@ const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup
|
|
|
17
17
|
this.lessLabel = 'Mostra meno';
|
|
18
18
|
this.maxElements = 8;
|
|
19
19
|
this.variant = 'default';
|
|
20
|
+
this.label = this.otherLabel;
|
|
20
21
|
this.values = [];
|
|
21
22
|
this.value = '';
|
|
22
23
|
this.slotItems = undefined;
|
|
23
24
|
this.inputs = [];
|
|
24
|
-
this.showMore =
|
|
25
|
+
this.showMore = false;
|
|
26
|
+
}
|
|
27
|
+
watchShowMore(newValue) {
|
|
28
|
+
this.label = newValue ? this.lessLabel : this.otherLabel;
|
|
25
29
|
}
|
|
26
30
|
async getValues() {
|
|
27
31
|
return this.values;
|
|
@@ -35,19 +39,21 @@ const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup
|
|
|
35
39
|
async getName() {
|
|
36
40
|
return this.name;
|
|
37
41
|
}
|
|
38
|
-
toggleHiddenItems(
|
|
42
|
+
toggleHiddenItems() {
|
|
39
43
|
this.slotItemsWrapper.assignedElements().forEach((item, index) => {
|
|
40
|
-
if (index > this.maxElements
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
if (index > this.maxElements) {
|
|
45
|
+
if (this.showMore) {
|
|
46
|
+
item.classList.remove('hidden');
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
item.classList.add('hidden');
|
|
50
|
+
}
|
|
45
51
|
}
|
|
46
52
|
});
|
|
47
53
|
}
|
|
48
54
|
handleShowMore() {
|
|
49
55
|
this.showMore = !this.showMore;
|
|
50
|
-
this.toggleHiddenItems(
|
|
56
|
+
this.toggleHiddenItems();
|
|
51
57
|
}
|
|
52
58
|
handleChange(event) {
|
|
53
59
|
const target = event.target;
|
|
@@ -103,11 +109,12 @@ const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup
|
|
|
103
109
|
this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));
|
|
104
110
|
let index = 0;
|
|
105
111
|
this.slotItems.forEach((item) => {
|
|
112
|
+
item.classList.add('item');
|
|
106
113
|
if (index > this.maxElements) {
|
|
107
|
-
|
|
108
|
-
item.style.display = 'none';
|
|
114
|
+
item.classList.add('hidden');
|
|
109
115
|
}
|
|
110
|
-
if (item.tagName
|
|
116
|
+
//if (item.tagName start with jump-
|
|
117
|
+
if (item.tagName === 'INPUT' || item.tagName === 'SELECT' || item.tagName.startsWith('JUMP-') || item.tagName === 'LABEL') {
|
|
111
118
|
this.inputs.push(item);
|
|
112
119
|
if (item.tagName === 'INPUT' && item.type === 'radio') {
|
|
113
120
|
item.name = this.name;
|
|
@@ -129,11 +136,14 @@ const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup
|
|
|
129
136
|
//this.toggleHiddenItems();
|
|
130
137
|
}
|
|
131
138
|
render() {
|
|
132
|
-
return (h(Host, { key: '
|
|
133
|
-
h("jump-button", { key: '
|
|
139
|
+
return (h(Host, { key: '7d3b79b574cb9b46501ea0482c6d3cc1fbb98e1f' }, this.heading && h("h5", { key: '68f2dd39f94fb905d9ea151cfbf946080abf1883' }, this.heading), h("div", { key: '3975c6ca04b3bd077eef48dd93311299c4cb2308', class: "filterGroup" }, h("slot", { key: 'c45798ed4fa32dc7baa18aa183740b5ad589b87b', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
|
|
140
|
+
h("jump-button", { key: '068c3456f098fd7d58f943964338ff0416507797', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
|
|
134
141
|
this.showMoreBtn = showMoreBtn;
|
|
135
|
-
}, onClick: () => this.handleShowMore() }, this.
|
|
142
|
+
}, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: '7e0b01f499ff2af6948120711d09f84dd70e4039', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
|
|
136
143
|
}
|
|
144
|
+
static get watchers() { return {
|
|
145
|
+
"showMore": ["watchShowMore"]
|
|
146
|
+
}; }
|
|
137
147
|
static get style() { return JumpFiltergroupStyle0; }
|
|
138
148
|
}, [1, "jump-filtergroup", {
|
|
139
149
|
"name": [1],
|
|
@@ -142,6 +152,7 @@ const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup
|
|
|
142
152
|
"lessLabel": [1, "less-label"],
|
|
143
153
|
"maxElements": [2, "max-elements"],
|
|
144
154
|
"variant": [1],
|
|
155
|
+
"label": [32],
|
|
145
156
|
"values": [32],
|
|
146
157
|
"value": [32],
|
|
147
158
|
"slotItems": [32],
|
|
@@ -151,6 +162,8 @@ const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup
|
|
|
151
162
|
"getActiveAmount": [64],
|
|
152
163
|
"getInputs": [64],
|
|
153
164
|
"getName": [64]
|
|
165
|
+
}, undefined, {
|
|
166
|
+
"showMore": ["watchShowMore"]
|
|
154
167
|
}]);
|
|
155
168
|
function defineCustomElement$1() {
|
|
156
169
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-filtergroup.js","mappings":"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","names":["JumpFiltergroup"],"sources":["src/components/jump-filtergroup/jump-filtergroup.scss?tag=jump-filtergroup&encapsulation=shadow","src/components/jump-filtergroup/jump-filtergroup.tsx"],"sourcesContent":[":host {\n --hidden-display: none;\n\n display: block;\n\n h5{\n font-family: var(--ff-primary), serif;\n font-size: var(--fs-400);\n line-height: var(--lh-300);\n font-weight: var(--fw-900);\n }\n\n slot {\n display: flex;\n flex-direction: column;\n gap: .25rem;\n margin-bottom: 1rem;\n }\n\n}\n\n*[data-hide=\"true\"] {\n display: var(--hidden-display);\n}\n\nh5 {\n margin: 0 0 .25rem;\n}\n\n//TODO: capire perché non prende questo stile\n\n\n","import { Component, Host, h, Prop, State, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-filtergroup',\n styleUrl: 'jump-filtergroup.scss',\n shadow: true,\n})\nexport class JumpFiltergroup {\n @Prop() name: string = 'tax-name';\n @Prop() heading: string = 'Titolo del filtro';\n @Prop() otherLabel: string = 'Mostra altro';\n @Prop() lessLabel: string = 'Mostra meno';\n @Prop() maxElements: number = 8;\n //TODO: Add Accordion variant within jump-acccordion component\n @Prop() variant: 'accordion' | 'default' = 'default';\n\n @State() values: string[] = [];\n @State() value: string = '';\n @State() slotItems: any;\n @State() inputs: any = [];\n @State() showMore: boolean = true;\n\n @Event({ eventName: 'jump-filterchange' }) change;\n\n slotItemsWrapper: HTMLSlotElement;\n showMoreBtn: HTMLElement;\n\n @Method('getValues')\n async getValues() {\n return this.values;\n }\n\n @Method('getActiveAmount')\n async getActiveAmount() {\n return this.values.length;\n }\n\n @Method('getInputs')\n async getInputs() {\n return this.inputs;\n }\n\n @Method('getName')\n async getName() {\n return this.name;\n }\n\n toggleHiddenItems(showAll = true) {\n this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n if (index > this.maxElements && !showAll) {\n item.setAttribute('style', 'display: none');\n } else {\n item.setAttribute('style', 'display: initial');\n }\n });\n }\n\n handleShowMore() {\n this.showMore = !this.showMore;\n this.toggleHiddenItems(this.showMore);\n }\n\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement | HTMLSelectElement;\n const newValue = target.value;\n\n if (target.tagName === 'INPUT') {\n if (target.type === 'checkbox') {\n // @ts-ignore\n if (target.checked) {\n this.values.push(newValue);\n } else {\n const index = this.values.indexOf(newValue);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n } else if (target.type === 'radio') {\n // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n this.value = newValue;\n this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n }\n } else if (target.tagName === 'SELECT') {\n // Se è un select, aggiorna semplicemente il valore\n this.value = newValue;\n this.values = [newValue];\n }\n\n // Emit event con i valori aggiornati\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n handleCheckboxChange(event: CustomEvent) {\n if (event.detail.checked && !this.values.includes(event.detail.value)) {\n this.values.push(event.detail.value);\n } else if (!event.detail.checked && this.values.includes(event.detail.value)) {\n const index = this.values.indexOf(event.detail.value);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n componentDidLoad() {\n this.slotItems = this.slotItemsWrapper.assignedElements();\n this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));\n\n let index = 0;\n this.slotItems.forEach((item) => {\n if (index > this.maxElements) {\n //item.setAttribute('data-hide', 'true');\n item.style.display = 'none';\n }\n if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {\n this.inputs.push(item);\n if (item.tagName === 'INPUT' && item.type === 'radio') {\n item.name = this.name;\n }\n } else {\n const inputs = item.querySelectorAll('input, select');\n if (inputs.length > 0) {\n inputs.forEach((input) => {\n this.inputs.push(input);\n\n if (input.tagName === 'INPUT' && input.type === 'radio') {\n input.name = this.name;\n }\n });\n }\n }\n index++;\n });\n\n //this.toggleHiddenItems();\n }\n\n render() {\n return (\n <Host>\n {this.heading && <h5>{this.heading}</h5>}\n <div class=\"filterGroup\">\n <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n </div>\n {this.inputs.length > this.maxElements &&\n <jump-button variant=\"primary\" size=\"small\" text name={this.showMore ? this.otherLabel : this.lessLabel}\n aria-label={this.showMore ? this.otherLabel : this.lessLabel}\n ref={(showMoreBtn) => {\n this.showMoreBtn = showMoreBtn;\n }}\n onClick={() => this.handleShowMore()}>\n {this.showMore ? this.otherLabel : this.lessLabel}\n <jump-icon slot=\"suffix\" name={this.showMore ? 'chevron-down' : 'chevron-up'}></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"jump-filtergroup.js","mappings":"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","names":["JumpFiltergroup"],"sources":["src/components/jump-filtergroup/jump-filtergroup.scss?tag=jump-filtergroup&encapsulation=shadow","src/components/jump-filtergroup/jump-filtergroup.tsx"],"sourcesContent":[":host {\n --hidden-display: none;\n --font-family: var(--ff-primary, 'Inter'), serif;\n --font-size: var(--fs-400, 16px);\n --line-height: var(--lh-300, 1.2);\n --font-weight: var(--fw-900, 700);\n --color: var(--neutral-grey-primary, #282828);\n --distance-items: .25rem;\n\n display: block;\n\n h5 {\n font-family: var(--font-family);\n font-size: var(--font-size);\n line-height: var(--line-height);\n font-weight: var(--font-weight);\n color: var(--color);\n margin: 0 0 var(--distance-items, .25rem);\n }\n\n slot {\n display: flex;\n flex-direction: column;\n margin-bottom: 1rem;\n }\n\n ::slotted(.item) {\n max-height: 500px;\n transition: all 0.3s ease-in-out;\n margin-top: var(--distance-items, .25rem);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: .25rem;\n }\n\n ::slotted(.hidden) {\n max-height: 0;\n overflow: hidden;\n }\n}\n\n\n","import { Component, Host, h, Prop, State, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filtergroup',\n styleUrl: 'jump-filtergroup.scss',\n shadow: true,\n})\nexport class JumpFiltergroup {\n @Prop() name: string = 'tax-name';\n @Prop() heading: string = 'Titolo del filtro';\n @Prop() otherLabel: string = 'Mostra altro';\n @Prop() lessLabel: string = 'Mostra meno';\n @Prop() maxElements: number = 8;\n //TODO: Add Accordion variant within jump-acccordion component\n @Prop() variant: 'accordion' | 'default' = 'default';\n\n @State() label: string = this.otherLabel;\n @State() values: string[] = [];\n @State() value: string = '';\n @State() slotItems: any;\n @State() inputs: any = [];\n @State() showMore: boolean = false;\n\n @Event({ eventName: 'jump-filterchange' }) change;\n\n slotItemsWrapper: HTMLSlotElement;\n showMoreBtn: HTMLElement;\n\n @Watch('showMore')\n watchShowMore(newValue: boolean) {\n this.label = newValue ? this.lessLabel : this.otherLabel;\n }\n\n @Method('getValues')\n async getValues() {\n return this.values;\n }\n\n @Method('getActiveAmount')\n async getActiveAmount() {\n return this.values.length;\n }\n\n @Method('getInputs')\n async getInputs() {\n return this.inputs;\n }\n\n @Method('getName')\n async getName() {\n return this.name;\n }\n\n toggleHiddenItems() {\n this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n if (index > this.maxElements) {\n if (this.showMore) {\n item.classList.remove('hidden');\n } else {\n item.classList.add('hidden');\n }\n }\n });\n }\n\n handleShowMore() {\n this.showMore = !this.showMore;\n this.toggleHiddenItems();\n }\n\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement | HTMLSelectElement;\n const newValue = target.value;\n\n if (target.tagName === 'INPUT') {\n if (target.type === 'checkbox') {\n // @ts-ignore\n if (target.checked) {\n this.values.push(newValue);\n } else {\n const index = this.values.indexOf(newValue);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n } else if (target.type === 'radio') {\n // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n this.value = newValue;\n this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n }\n } else if (target.tagName === 'SELECT') {\n // Se è un select, aggiorna semplicemente il valore\n this.value = newValue;\n this.values = [newValue];\n }\n\n // Emit event con i valori aggiornati\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n handleCheckboxChange(event: CustomEvent) {\n if (event.detail.checked && !this.values.includes(event.detail.value)) {\n this.values.push(event.detail.value);\n } else if (!event.detail.checked && this.values.includes(event.detail.value)) {\n const index = this.values.indexOf(event.detail.value);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n componentDidLoad() {\n this.slotItems = this.slotItemsWrapper.assignedElements();\n this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));\n\n let index = 0;\n this.slotItems.forEach((item) => {\n item.classList.add('item');\n if (index > this.maxElements) {\n item.classList.add('hidden');\n }\n //if (item.tagName start with jump-\n if (item.tagName === 'INPUT' || item.tagName === 'SELECT' || item.tagName.startsWith('JUMP-') || item.tagName === 'LABEL') {\n this.inputs.push(item);\n if (item.tagName === 'INPUT' && item.type === 'radio') {\n item.name = this.name;\n }\n } else {\n const inputs = item.querySelectorAll('input, select');\n if (inputs.length > 0) {\n inputs.forEach((input) => {\n this.inputs.push(input);\n\n if (input.tagName === 'INPUT' && input.type === 'radio') {\n input.name = this.name;\n }\n });\n }\n }\n index++;\n });\n\n //this.toggleHiddenItems();\n }\n\n render() {\n return (\n <Host>\n {this.heading && <h5>{this.heading}</h5>}\n <div class=\"filterGroup\">\n <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n </div>\n {this.inputs.length > this.maxElements &&\n <jump-button variant=\"primary\" size=\"small\" text name={this.label}\n aria-label={this.label}\n ref={(showMoreBtn) => {\n this.showMoreBtn = showMoreBtn;\n }}\n onClick={() => this.handleShowMore()}>\n {this.label}\n <jump-icon slot=\"suffix\" name={!this.showMore ? 'chevron-down' : 'chevron-up'}></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -66,19 +66,6 @@ const JumpCardEcommerce = class {
|
|
|
66
66
|
}
|
|
67
67
|
this.formatPrices();
|
|
68
68
|
}
|
|
69
|
-
/**
|
|
70
|
-
* Format prices in locale currency
|
|
71
|
-
*/
|
|
72
|
-
formatPrices() {
|
|
73
|
-
var _a;
|
|
74
|
-
let locale = (_a = document.documentElement.lang) !== null && _a !== void 0 ? _a : 'it-IT';
|
|
75
|
-
if (locale.length == 2) {
|
|
76
|
-
locale = `${locale}-${locale.toUpperCase()}`;
|
|
77
|
-
}
|
|
78
|
-
// Format price with 2 decimal digits and in locale
|
|
79
|
-
this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
80
|
-
this.salePriceFormatted = this.salePrice.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
81
|
-
}
|
|
82
69
|
disconnectedCallback() {
|
|
83
70
|
this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');
|
|
84
71
|
if (this.jumpQuantityEl) {
|
|
@@ -122,6 +109,16 @@ const JumpCardEcommerce = class {
|
|
|
122
109
|
addToWaitingList: this.addToWaitingList
|
|
123
110
|
});
|
|
124
111
|
}
|
|
112
|
+
formatPrices() {
|
|
113
|
+
var _a;
|
|
114
|
+
let locale = (_a = document.documentElement.lang) !== null && _a !== void 0 ? _a : 'it-IT';
|
|
115
|
+
if (locale.length == 2) {
|
|
116
|
+
locale = `${locale}-${locale.toUpperCase()}`;
|
|
117
|
+
}
|
|
118
|
+
// Format price with 2 decimal digits and in locale
|
|
119
|
+
this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
120
|
+
this.salePriceFormatted = this.salePrice.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
121
|
+
}
|
|
125
122
|
render() {
|
|
126
123
|
const backgroundClass = this.hasBackground && !this.isMini ? 'hasBackground' : '';
|
|
127
124
|
const iconOnlyClass = this.onlyIconButton && !this.isMini ? 'iconOnly' : '';
|