@jumpgroup/jump-design-system 0.2.6 → 0.3.0

package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js

@@ -0,0 +1,627 @@
+import { Host, h } from "@stencil/core";
+export class JumpCardEcommerce {
+    constructor() {
+        this.onlyIconButton = false;
+        this.hasBackground = false;
+        this.badge = undefined;
+        this.favorite = false;
+        this.link = undefined;
+        this.img = undefined;
+        this.imgAlt = undefined;
+        this.videoSrc = undefined;
+        this.addedToCart = false;
+        this.notificationUrl = undefined;
+        this.notificationText = 'Aggiunto al carrello';
+        this.productName = undefined;
+        this.subtitle = undefined;
+        this.productId = undefined;
+        this.price = undefined;
+        this.salePrice = undefined;
+        this.currency = undefined;
+        this.outOfStock = false;
+        this.outOfStockText = undefined;
+        this.addtoCartText = undefined;
+        this.waitingListText = undefined;
+        this.addToWaitingList = false;
+        this.quantity = false;
+        this.changedQuantity = false;
+        this.changedVariation = false;
+    }
+    /* ---------------------- @LIFECYCLE ------------------------- */
+    componentWillLoad() {
+        // this._selectVariations = this.selectVariations?.split(',');
+    }
+    onToggleFavorite() {
+        this.favorite = !this.favorite;
+        this.toggleFavorite.emit({
+            productId: this.productId,
+            favorite: this.favorite
+        });
+    }
+    addProductToCart() {
+        this.addedToCart = true;
+        const payload = {
+            productId: this.productId,
+            addedToCart: this.addedToCart,
+            quantity: 2 // da prendere dal quantity
+            // mancano le variazioni
+        };
+        this.productAddToCart.emit(payload);
+        console.log("productAddToCart payload:", payload);
+    }
+    waitingList() {
+        this.addToWaitingList = true;
+        this.productWaitingList.emit({
+            productId: this.productId,
+            addToWaitingList: this.addToWaitingList
+        });
+    }
+    changeQuantityProduct(event) {
+        // const quantityInput = this.JumpCardEcommerce.querySelector('jump-quantity');
+        // const quantityValue = quantityInput.value; // Access the `value` property
+        const quantityElement = event.target;
+        console.log('Valore selezionato:', quantityElement);
+        // const quantityValue = quantityElement.value;
+        this.changedQuantity = true;
+        const payload = {
+            productId: this.productId,
+            changedQuantity: this.changedQuantity,
+            quantity: 2 // da sostituire con quaintity value
+        };
+        this.changeQuantity.emit(payload);
+        console.log("changeQuantity payload:", payload);
+    }
+    changeVariationBody(event) {
+        const selectElement = event.target;
+        const selectedValue = selectElement.value;
+        this.changedVariation = true;
+        const payload = {
+            productId: this.productId,
+            changedVariation: this.changedVariation,
+            variation: selectedValue // da sostituire
+        };
+        this.changeVariation.emit(payload);
+        console.log("changeVariation payload:", payload);
+    }
+    render() {
+        const backgroundClass = this.hasBackground ? 'hasBackground' : '';
+        const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';
+        const justifyClass = this.outOfStock ? 'justify-between' : '';
+        return (h(Host, { key: 'cf789b80987e6382306da2ad5ace446580a61990', ref: (el) => { this.JumpCardEcommerce = el; } }, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", label: this.badge }) : '', h("jump-button", { key: 'd8a4cf5efe00c8524760cc72cbf442746e6c2597', onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'neutral' : 'primary', size: "small", text: true, onlyIcon: true }, h("jump-icon", { key: '16b89f2a5626b9e7fb4691a0de7d629c5ce8dc1c', slot: "prefix", name: "heart", category: this.favorite ? 'light' : 'solid', size: "medium" })), h("div", { key: 'dc3147d29ade372ee937f9cf2a65bd68069d7e30', class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { key: '92d62f4458c29704bda0170e15f00b72c0a79bd0', href: this.link }, this.img && !this.videoSrc ? h("img", { src: this.img, alt: this.imgAlt }) : '', this.videoSrc && !this.img ?
+            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", { key: '0d9ac0e6d99a33313602eafeeba8f2bde64e02d0', class: `NotificationCart ${this.addedToCart == true ? 'is-active' : ''}` }, h("jump-button", { key: '4117a6d5811a18cab91efc6205a4b1674c417bd9', href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { key: '871ca055dbae216cac54bc269360b16836903cc1', slot: "prefix", name: "check" }), h("span", { key: '039ffeced52e62d4ffb381dfe18d349eed42973a' }, " ", this.notificationText, " "))), this.onlyIconButton ?
+            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" })))
+            : ''), h("div", { key: 'ec82214460c67faba8af6098369d4235bec773e5', class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { key: '953cf7cfd621a0209c2fd10af584cc3cac98760e', class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", { key: '09701cab14c47d008f9fd381679c75fff137e3fa' }, h("div", { key: 'fd0bbbff94d79d1a6e0c6ba396da2e74cd4c080c', class: "Info" }, h("div", { key: '9c16dc172061744b418e263b8f2d361ec1761836', class: "Product" }, this.productName), h("div", { key: '5e2c9a1441a2f0dea4e7b6983204ec7a7071f52c', class: "Subtitle" }, this.subtitle)), h("div", { key: '4c0e6462f9600552c6bf2f958c0ece70804f3ab3', class: "Price" }, h("div", { key: 'f02d651ed87dda490d9dd5d45ba3f587b9ebe4e5', class: "Price__Discount" }, "-5%"), h("div", { key: 'cae9ab50ca4739f7e91a759e4d175c2341a98872', class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), h("div", { key: 'e628599318e8d4a8c249476712f95e8e19951d83', class: "Price__Sale" }, this.currency, this.salePrice))), h("div", { key: 'c324067e3c63718e56a3315cc7e14b1255b97103' }, h("select", { key: '43b91f6b4c88c865a3df41abd583b5aa1f538c84', name: "select", id: "selectID", onChange: (event) => this.changeVariationBody(event) }, h("option", { key: 'a9ae9bec327dc262608cd2dfd7efb5d877dc8a5c', value: 'm' }, "medium"), h("option", { key: '88c68917a0c97b8a208d7906b4603e1ccefec1a4', value: 'l' }, "large"), h("option", { key: '9d84d95a72aa2f7ab5299ea8a478c5c9cff85402', value: 'xl' }, "extra large")), this.quantity ? h("jump-quantity", { onClick: (event) => this.changeQuantityProduct(event) }) : '')), h("div", { key: 'a647b17041f2bc51d91f758e858ae7302930159e', class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
+            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 ?
+            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') : ''))));
+    }
+    static get is() { return "jump-card-ecommerce"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-card-ecommerce.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-card-ecommerce.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "onlyIconButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if card has only icon button"
+                },
+                "attribute": "only-icon-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hasBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if card has background"
+                },
+                "attribute": "has-background",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the badge of the card"
+                },
+                "attribute": "badge",
+                "reflect": false
+            },
+            "favorite": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the product is favorite"
+                },
+                "attribute": "favorite",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "link": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the link of the card"
+                },
+                "attribute": "link",
+                "reflect": false
+            },
+            "img": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the image's src of the card"
+                },
+                "attribute": "img",
+                "reflect": false
+            },
+            "imgAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the img's alt of the card"
+                },
+                "attribute": "img-alt",
+                "reflect": false
+            },
+            "videoSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the videoSrc of the card"
+                },
+                "attribute": "video-src",
+                "reflect": false
+            },
+            "addedToCart": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if the product is added to cart"
+                },
+                "attribute": "added-to-cart",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "notificationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the notificationUrl of the card"
+                },
+                "attribute": "notification-url",
+                "reflect": false
+            },
+            "notificationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the notificationText of the card"
+                },
+                "attribute": "notification-text",
+                "reflect": false,
+                "defaultValue": "'Aggiunto al carrello'"
+            },
+            "productName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the title of the card"
+                },
+                "attribute": "product-name",
+                "reflect": false
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the subtitle of the card"
+                },
+                "attribute": "subtitle",
+                "reflect": false
+            },
+            "productId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the ID of the product, can be also a SKU"
+                },
+                "attribute": "product-id",
+                "reflect": false
+            },
+            "price": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the price of the card"
+                },
+                "attribute": "price",
+                "reflect": false
+            },
+            "salePrice": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the sale price of the card"
+                },
+                "attribute": "sale-price",
+                "reflect": false
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the currency of the card"
+                },
+                "attribute": "currency",
+                "reflect": false
+            },
+            "outOfStock": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the product is outOfStock"
+                },
+                "attribute": "out-of-stock",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "outOfStockText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the outOfStockText of the product"
+                },
+                "attribute": "out-of-stock-text",
+                "reflect": false
+            },
+            "addtoCartText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the button class of the add to cart / notification button"
+                },
+                "attribute": "addto-cart-text",
+                "reflect": false
+            },
+            "waitingListText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the button class of the add to cart / notification button"
+                },
+                "attribute": "waiting-list-text",
+                "reflect": false
+            },
+            "addToWaitingList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if the user request to be notified when te product is avaible"
+                },
+                "attribute": "add-to-waiting-list",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "quantity": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the user can choose how much quantity of the product add to cart"
+                },
+                "attribute": "quantity",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "changedQuantity": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if the quantity is change"
+                },
+                "attribute": "changed-quantity",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "changedVariation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if the variation is change"
+                },
+                "attribute": "changed-variation",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleFavorite",
+                "name": "jump-toggle-favorite",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "productAddToCart",
+                "name": "jump-add-to-cart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "productWaitingList",
+                "name": "jump-add-to-waiting-list",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "changeQuantity",
+                "name": "jump-change-quantity",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "changeVariation",
+                "name": "jump-change-variation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=jump-card-ecommerce.js.map

package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-card-ecommerce.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'jump-card-ecommerce',\n  styleUrl: 'jump-card-ecommerce.scss',\n  shadow: true,\n})\nexport class JumpCardEcommerce {\n\n  JumpCardEcommerce: HTMLElement;\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  @Prop({mutable:true, reflect: true}) favorite: boolean = false;\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 videoSrc of the card*/\n  @Prop() videoSrc: string; \n\n  /** Indicate if the product is added to cart*/\n  @Prop() addedToCart: boolean = false;\n\n  /** Indicates the notificationUrl of the card*/\n  @Prop() notificationUrl: string;\n\n  /** Indicates the notificationText of the card*/\n  @Prop() notificationText: string = 'Aggiunto al carrello';\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  /** Indicates if the user can choose how much quantity of the product add to cart */\n  @Prop({mutable:true, reflect: true}) quantity: boolean = false;\n\n  /** Indicate if the quantity is change*/\n  @Prop() changedQuantity: boolean = false;\n\n  /** Indicate if the variation is change*/\n  @Prop() changedVariation: boolean = false;\n\n  // /** Indicates the inizial value of input quantity*/\n  // @Prop() quantity: number ;\n\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-change-quantity'}) changeQuantity: EventEmitter;\n\n  @Event({eventName: 'jump-change-variation'}) changeVariation: EventEmitter;\n\n  \n  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  componentWillLoad() {\n    // this._selectVariations = this.selectVariations?.split(',');\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    const payload = {\n      productId: this.productId,\n      addedToCart: this.addedToCart,\n      quantity: 2 // da prendere dal quantity\n      // mancano le variazioni\n    };\n    this.productAddToCart.emit(payload);\n    console.log(\"productAddToCart payload:\", payload);\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  changeQuantityProduct(event: Event) {\n    // const quantityInput = this.JumpCardEcommerce.querySelector('jump-quantity');\n    // const quantityValue = quantityInput.value; // Access the `value` property\n    const quantityElement = event.target as HTMLInputElement;\n    console.log('Valore selezionato:', quantityElement);\n    // const quantityValue = quantityElement.value;\n\n    this.changedQuantity = true;\n    const payload = {\n      productId: this.productId,\n      changedQuantity: this.changedQuantity,\n      quantity: 2 // da sostituire con quaintity value\n    };\n    this.changeQuantity.emit(payload);\n    console.log(\"changeQuantity payload:\", payload)\n  }\n\n  changeVariationBody(event: Event) {\n    const selectElement = event.target as HTMLSelectElement;\n    const selectedValue = selectElement.value;\n\n    this.changedVariation = true;\n    const payload = {\n      productId: this.productId,\n      changedVariation: this.changedVariation,\n      variation: selectedValue // da sostituire\n    };\n    this.changeVariation.emit(payload);\n    console.log(\"changeVariation payload:\", payload)\n  }\n\n  render() {\n    const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n    const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n    const justifyClass = this.outOfStock ? 'justify-between' : '';\n\n    return (\n\n      <Host ref={(el) => {this.JumpCardEcommerce = el;}} >\n        {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" label={this.badge}></jump-badge> : ''}\n  \n        <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'neutral' : 'primary'} size=\"small\" text onlyIcon>\n            <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'light' : 'solid'} size=\"medium\"></jump-icon>\n        </jump-button> \n\n        <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n          <a href={this.link}>\n            {this.img && !this.videoSrc ? <img src={this.img} alt={this.imgAlt}></img> : ''}\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          <div class={`NotificationCart ${this.addedToCart == true ? 'is-active' : ''}`}>\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            {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}`}>\n          <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n            <div>\n              <div class=\"Info\">\n                <div class=\"Product\">{this.productName}</div>\n                <div class=\"Subtitle\">{this.subtitle}</div>\n              </div>\n\n              <div class=\"Price\">\n                <div class=\"Price__Discount\">-5%</div>\n                <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n                  {this.currency}{this.price}\n                </div>\n                <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n              </div>\n            </div>\n            <div>\n              {/* manca la proprietà se ci sono variazioni o no */}\n              <select name=\"select\" id=\"selectID\" onChange={(event) => this.changeVariationBody(event)}>\n                <option value='m'>medium</option>\n                <option value='l'>large</option>\n                <option value='xl'>extra large</option>\n              </select>\n\n              {this.quantity ? <jump-quantity onClick={(event) => this.changeQuantityProduct(event)}></jump-quantity> : ''}\n            \n              {/* <slot name=\"select\"></slot>\n              <slot name=\"quantity\"></slot> */}\n            </div>\n            \n          </div>\n\n          <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\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}"]}