@jumpgroup/jump-design-system 0.2.7 → 0.3.1

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

@@ -0,0 +1,583 @@
+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.changedVariation = false;
+    }
+    /* ---------------------- @LIFECYCLE ------------------------- */
+    componentWillLoad() { }
+    componentDidLoad() {
+        this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');
+        if (this.jumpQuantityEl) {
+            this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));
+            this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {
+                this.quantity = quantity;
+            });
+            console.log('Quantity:', this.quantity);
+        }
+    }
+    disconnectedCallback() {
+        this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');
+        if (this.jumpQuantityEl) {
+            this.jumpQuantityEl.removeEventListener('jump-change', this.onQuantityChange);
+        }
+    }
+    /* ---------------------- @METHODS ------------------------- */
+    onQuantityChange(e) {
+        this.quantity = e.detail.value;
+    }
+    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: this.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
+        });
+    }
+    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' : '';
+        function calculateDiscount(price, salePrice) {
+            const discount = ((price - salePrice) / price) * 100;
+            return discount.toFixed(0);
+        }
+        ;
+        return (h(Host, null, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'neutral' : 'primary', size: "small", text: true, onlyIcon: true }, h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'light' : 'solid', size: "medium" })), h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { 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", { class: `NotificationCart ${this.addedToCart == true ? 'is-active' : ''}` }, h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { slot: "prefix", name: "check" }), h("span", null, " ", 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", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", null, h("div", { class: "Info" }, h("div", { class: "Product" }, this.productName), h("div", { class: "Subtitle" }, this.subtitle)), h("div", { class: "Price" }, h("div", { class: "Price__Discount" }, calculateDiscount(this.price, this.salePrice), "%"), h("div", { class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), h("div", { class: "Price__Sale" }, this.currency, this.salePrice))), h("div", null, h("slot", { name: "select" }), h("slot", { name: "quantity" }))), h("div", { 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"
+            },
+            "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": "changeVariation",
+                "name": "jump-change-variation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "JumpCardEcommerce"; }
+}
+//# 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, Element} 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  @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  @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  /** Indicate if the variation is change*/\n  @Prop() changedVariation: boolean = false;\n\n  /* ---------------------- @STATE ------------------------- */ \n\n  // è una proprietà che viene cambiata solo da dentro\n\n  quantity: number;\n\n  // @Watch('quantity') \n  // funziona solo dalla seconda volta in poi \n  // watchQuantity(newValue, oldValue) {\n  //   console.log('quantity changed:', newValue, oldValue);\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-variation'}) changeVariation: EventEmitter;\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      console.log('Quantity:', this.quantity)\n    }\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;\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: this.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  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  \n  render() {\n    const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n    const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n    const justifyClass = this.outOfStock ? 'justify-between' : '';\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.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" 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\">\n                  {calculateDiscount(this.price, this.salePrice)}%\n                </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            \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}"]}