@jumpgroup/jump-design-system 0.3.81 → 0.3.83

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

@@ -184,6 +184,13 @@ export default {
             control: 'boolean',
             defaultValue: false
         },
+        imageObjectFit: {
+            name: 'image-object-fit',
+            description: 'Controlla il comportamento dell\'object-fit delle immagini',
+            control: 'select',
+            options: ['cover', 'scale-down', 'contain', 'fill', 'none'],
+            defaultValue: 'cover'
+        },
     }
 };
 const Template = (args) => {
@@ -223,6 +230,7 @@ Card.args = {
     waitingListText: 'Notifica disponibilità',
     isMini: false,
     enableZoom: false,
+    imageObjectFit: 'cover',
 };
 const TemplateWithEvent = (args, data) => {
     let id = data.id;
@@ -338,4 +346,7 @@ CardDisallow.args = {
     isMini: false,
     disallowAddToCart: true,
 };
+// Storia per mostrare l'utilizzo della proprietà imageObjectFit
+export const CardWithScaleDown = Template.bind({});
+CardWithScaleDown.args = Object.assign(Object.assign({}, Card.args), { imageObjectFit: 'scale-down', img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', productName: 'Card con scale-down', subtitle: 'L\'immagine usa object-fit: scale-down' });
 //# sourceMappingURL=jump-card-ecommerce.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"jump-card-ecommerce.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/CardEcommerce/Card',\n  tags: ['autodocs'],\n  argTypes: {\n    hasBackground: {\n      name: 'has-background',\n      description: 'Aggiungi o meno il background alla card',\n      control: 'boolean',\n    },\n    onlyIconButton: {\n      name: 'only-icon-button',\n      description: 'Cambia lo stile della card mostrando solo il bottone icona',\n      control: 'boolean',\n    },\n    badge: {\n      name: 'badge',\n      description: 'Badge della card',\n      control: 'text',\n    },\n    favorite: {\n      name: 'favorite',\n      description: 'Aggiunge il prodotto ai preferiti',\n      control: 'boolean',\n    },\n    hasFavorite: {\n      name: 'has-favorite',\n      description: 'Aggiunge il prodotto ai preferiti',\n      control: 'boolean',\n    },\n    hasSlotForFavorite: {\n      name: 'has-slot-for-favorite',\n      description: 'Di default la card ecommerce ha un bottone icona per il favorite che emette un evento; Se hasSlotForFavorite è true il bottone viene sostituito da uno slot',\n      control: 'boolean',\n      defaultValue: true,\n    },\n    link: {\n      name: 'link',\n      description: 'Link della card',\n      control: 'text',\n    },\n    img: {\n      name: 'img',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente video-src',\n      control: 'text',\n      defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'img-alt',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: true\n      }\n    },\n    hoverImg: {\n      name: 'hover-img',\n      description: 'Url dell\\'immagine in hover da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      defaultValue: 'https://ch.benetton.com/dw/image/v2/BBSF_PRD/on/demandware.static/-/Sites-ucb-master/default/dwf2799586/images/Full_Card_v/UCB-Bambino_24P_3096C10JA_0Z3_FS_Full_Card_v.jpg?sw=600&sh=800',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    hoverImgAlt: {\n      name: 'hover-img-alt',\n      description: 'Alt dell\\'immagine in hover da visualizzare, si attiva solo se è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'video-src',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: false\n      }\n    },\n    notificationUrl: {\n      name: 'notification-url',\n      description: 'Url della notifica da visualizzare',\n      control: 'text',\n    },\n    notificationText: {\n      name: 'notification-text',\n      description: 'Testo della notifica da visualizzare',\n      control: 'text',\n    },\n    productName: {\n      name: 'product-name',\n      description: 'Nome del prodotto',\n      control: 'text',\n    },\n    subtitle: {\n      name: 'subtitle',\n      description: 'Sottotitolo della card',\n      control: 'text',\n    },\n    productId: {\n      name: 'product-id',\n      description: 'ID del prodotto',\n      control: 'text',\n    },\n    price: {\n      name: 'price',\n      description: 'Prezzo del prodotto; Se la card è in versione Mini gli va passato il prezzo scontato',\n      control: 'number',\n    },\n    salePrice: {\n      name: 'sale-price',\n      description: 'Prezzo scontato del prodotto',\n      control: 'number',\n    },\n    addToCartText: {\n      name: 'add-to-cart-text',\n      description: 'Testo bottone aggiungi al carrello',\n      control: 'text',\n    },\n    addToCartColor: {\n      name: 'add-to-cart-color',\n      description: 'Colore del bottone aggiungi al carrello',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'white'\n      ],\n    },\n    hasSlotAddToCart: {\n      name: 'has-slot-add-to-cart',\n      description: 'Di default la card ecommerce ha un bottone per l\\'aggiunta al carrello; Se has-slot-add-to-cart è true il bottone viene sostituito da uno slot',\n      control: 'boolean',\n      defaultValue: false,\n    },\n    badgeColor: {\n      name: 'badge-color',\n      description: 'Colore del badge',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'warning',\n        'success',\n        'danger',\n      ],\n    },\n    outOfStock: {\n      name: 'out-of-stock',\n      description: 'Indica se il prodotto è esaurito',\n      control: 'boolean',\n      defaultValue: false\n    },\n    outOfStockText: {\n      name: 'out-of-stock-text',\n      description: 'Testo da visualizzare se il prodotto è esaurito',\n      control: 'text',\n    },\n    waitingListText: {\n      name: 'waiting-list-text',\n      description: 'cta per richiedere l\\'avviso se il prodotto torna disponibile',\n      control: 'text',\n    },\n    isMini: {\n      name: 'is-mini',\n      description: 'Indica se la card è di dimensioni ridotte',\n      control: 'boolean',\n      defaultValue: false\n    },\n    enableZoom: {\n      name: 'enable-zoom',\n      description: 'Indica se è attivo lo zoom all\\'hover',\n      control: 'boolean',\n      defaultValue: false\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n  <jump-card-ecommerce ${attributes}>\n  </jump-card-ecommerce>\n  `);\n}\n\nexport const Card = Template.bind({});\nCard.args = {\n  hasBackground: true,\n  onlyIconButton: false,\n  badge: 'In offerta',\n  favorite: false,\n  hasFavorite: true,\n  hasSlotForFavorite: false,\n  link: '/prodotto',\n  img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  imgAlt: 'Immagine',\n  hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  hoverImgAlt: 'immagine in hover',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  addToCartText: 'Aggiungi al carrello',\n  addToCartColor: 'secondary',\n  hasSlotAddToCart: false,\n  badgeColor: 'secondary',\n  currency: '€',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  waitingListText: 'Notifica disponibilità',\n  isMini: false,\n  enableZoom: false,\n};\n\nconst TemplateWithEvent = (args, data) => {\n  let id = data.id;\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n    <jump-card-ecommerce ${attributes}>\n\n      <jump-card-ecommerce-option code=\"size1\" label=\"sono una select un pò lunga\"></jump-card-ecommerce-option>\n      <jump-card-ecommerce-option code=\"size2\" label=\"L\" sku=\"cod123\"></jump-card-ecommerce-option>\n\n      <div slot=\"addtocart\"><a href=\"\">Sono un bottone dentro lo slot addotocart</a></div>\n    </jump-card-ecommerce>\n    <script>\n\n    (function() {\n      let container;\n      container = document.querySelector('#story--${id}');\n\n      container.querySelector('jump-card-ecommerce').addEventListener( 'jump-toggle-favorite',  ev => {\n        let productId = ev.detail.productId;\n        let favorite = ev.detail.favorite;\n        if(favorite){\n          console.log( 'Prodotto ' + productId + ' aggiunto ai preferiti');\n        } else {\n          console.log( 'Prodotto ' + productId + ' rimosso dai preferiti');\n        }\n      })\n\n      container.querySelector('jump-card-ecommerce').addEventListener( 'jump-add-to-cart',  ev => {\n        let productId = ev.detail.productId;\n        let addedToCart = ev.detail.addedToCart;\n        if(addedToCart){\n          console.log( 'Prodotto ' + productId + ' aggiunto al carrello');\n        }\n      })\n\n      container.querySelector('jump-card-ecommerce').addEventListener('jump-variation-selected', ev => {\n        let variation = ev.detail;\n        console.log('Variation selected', variation);\n      });\n\n    })();\n\n    </script>\n  ` );\n}\n\nexport const CardEvent = TemplateWithEvent.bind({});\nCardEvent.args = {\n  hasBackground: true,\n  onlyIconButton: false,\n  badge: 'In offerta',\n  hasFavorite: false,\n  hasSlotForFavorite: false,\n  link: '/prodotto',\n  img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  imgAlt: 'Immagine',\n  hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  hoverImgAlt: 'immagine in hover',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  currency: '€',\n  addToCartText: 'Aggiungi al carrello',\n  addToCartColor: 'primary',\n  hasSlotAddToCart: false,\n  badgeColor: 'primary',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  waitingListText: 'Notifica disponibilità',\n  isMini: true,\n};\n\nconst TemplateDisallowAllowCart = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n  <jump-card-ecommerce ${attributes}>\n  </jump-card-ecommerce>\n  `);\n}\n\nexport const CardWithZoom = Template.bind({});\nCardWithZoom.args = {\n  ...Card.args,\n  enableZoom: true,\n  hoverImg: '',\n  hoverImgAlt: '',\n};\n\nexport const CardDisallow = TemplateDisallowAllowCart.bind({});\nCardDisallow.args = {\n  hasBackground: true,\n  onlyIconButton: false,\n  badge: 'In offerta',\n  favorite: false,\n  hasFavorite: true,\n  hasSlotForFavorite: false,\n  link: '/prodotto',\n  img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  imgAlt: 'Immagine',\n  hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  hoverImgAlt: 'immagine in hover',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  addToCartText: 'Aggiungi al carrello',\n  addToCartColor: 'secondary',\n  hasSlotAddToCart: false,\n  badgeColor: 'secondary',\n  currency: '€',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  waitingListText: 'Notifica disponibilità',\n  isMini: false,\n  disallowAddToCart: true,\n};"]}
+{"version":3,"file":"jump-card-ecommerce.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/CardEcommerce/Card',\n  tags: ['autodocs'],\n  argTypes: {\n    hasBackground: {\n      name: 'has-background',\n      description: 'Aggiungi o meno il background alla card',\n      control: 'boolean',\n    },\n    onlyIconButton: {\n      name: 'only-icon-button',\n      description: 'Cambia lo stile della card mostrando solo il bottone icona',\n      control: 'boolean',\n    },\n    badge: {\n      name: 'badge',\n      description: 'Badge della card',\n      control: 'text',\n    },\n    favorite: {\n      name: 'favorite',\n      description: 'Aggiunge il prodotto ai preferiti',\n      control: 'boolean',\n    },\n    hasFavorite: {\n      name: 'has-favorite',\n      description: 'Aggiunge il prodotto ai preferiti',\n      control: 'boolean',\n    },\n    hasSlotForFavorite: {\n      name: 'has-slot-for-favorite',\n      description: 'Di default la card ecommerce ha un bottone icona per il favorite che emette un evento; Se hasSlotForFavorite è true il bottone viene sostituito da uno slot',\n      control: 'boolean',\n      defaultValue: true,\n    },\n    link: {\n      name: 'link',\n      description: 'Link della card',\n      control: 'text',\n    },\n    img: {\n      name: 'img',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente video-src',\n      control: 'text',\n      defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'img-alt',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: true\n      }\n    },\n    hoverImg: {\n      name: 'hover-img',\n      description: 'Url dell\\'immagine in hover da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      defaultValue: 'https://ch.benetton.com/dw/image/v2/BBSF_PRD/on/demandware.static/-/Sites-ucb-master/default/dwf2799586/images/Full_Card_v/UCB-Bambino_24P_3096C10JA_0Z3_FS_Full_Card_v.jpg?sw=600&sh=800',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    hoverImgAlt: {\n      name: 'hover-img-alt',\n      description: 'Alt dell\\'immagine in hover da visualizzare, si attiva solo se è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'video-src',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: false\n      }\n    },\n    notificationUrl: {\n      name: 'notification-url',\n      description: 'Url della notifica da visualizzare',\n      control: 'text',\n    },\n    notificationText: {\n      name: 'notification-text',\n      description: 'Testo della notifica da visualizzare',\n      control: 'text',\n    },\n    productName: {\n      name: 'product-name',\n      description: 'Nome del prodotto',\n      control: 'text',\n    },\n    subtitle: {\n      name: 'subtitle',\n      description: 'Sottotitolo della card',\n      control: 'text',\n    },\n    productId: {\n      name: 'product-id',\n      description: 'ID del prodotto',\n      control: 'text',\n    },\n    price: {\n      name: 'price',\n      description: 'Prezzo del prodotto; Se la card è in versione Mini gli va passato il prezzo scontato',\n      control: 'number',\n    },\n    salePrice: {\n      name: 'sale-price',\n      description: 'Prezzo scontato del prodotto',\n      control: 'number',\n    },\n    addToCartText: {\n      name: 'add-to-cart-text',\n      description: 'Testo bottone aggiungi al carrello',\n      control: 'text',\n    },\n    addToCartColor: {\n      name: 'add-to-cart-color',\n      description: 'Colore del bottone aggiungi al carrello',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'white'\n      ],\n    },\n    hasSlotAddToCart: {\n      name: 'has-slot-add-to-cart',\n      description: 'Di default la card ecommerce ha un bottone per l\\'aggiunta al carrello; Se has-slot-add-to-cart è true il bottone viene sostituito da uno slot',\n      control: 'boolean',\n      defaultValue: false,\n    },\n    badgeColor: {\n      name: 'badge-color',\n      description: 'Colore del badge',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'warning',\n        'success',\n        'danger',\n      ],\n    },\n    outOfStock: {\n      name: 'out-of-stock',\n      description: 'Indica se il prodotto è esaurito',\n      control: 'boolean',\n      defaultValue: false\n    },\n    outOfStockText: {\n      name: 'out-of-stock-text',\n      description: 'Testo da visualizzare se il prodotto è esaurito',\n      control: 'text',\n    },\n    waitingListText: {\n      name: 'waiting-list-text',\n      description: 'cta per richiedere l\\'avviso se il prodotto torna disponibile',\n      control: 'text',\n    },\n    isMini: {\n      name: 'is-mini',\n      description: 'Indica se la card è di dimensioni ridotte',\n      control: 'boolean',\n      defaultValue: false\n    },\n    enableZoom: {\n      name: 'enable-zoom',\n      description: 'Indica se è attivo lo zoom all\\'hover',\n      control: 'boolean',\n      defaultValue: false\n    },\n    imageObjectFit: {\n      name: 'image-object-fit',\n      description: 'Controlla il comportamento dell\\'object-fit delle immagini',\n      control: 'select',\n      options: ['cover', 'scale-down', 'contain', 'fill', 'none'],\n      defaultValue: 'cover'\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n  <jump-card-ecommerce ${attributes}>\n  </jump-card-ecommerce>\n  `);\n}\n\nexport const Card = Template.bind({});\nCard.args = {\n  hasBackground: true,\n  onlyIconButton: false,\n  badge: 'In offerta',\n  favorite: false,\n  hasFavorite: true,\n  hasSlotForFavorite: false,\n  link: '/prodotto',\n  img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  imgAlt: 'Immagine',\n  hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  hoverImgAlt: 'immagine in hover',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  addToCartText: 'Aggiungi al carrello',\n  addToCartColor: 'secondary',\n  hasSlotAddToCart: false,\n  badgeColor: 'secondary',\n  currency: '€',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  waitingListText: 'Notifica disponibilità',\n  isMini: false,\n  enableZoom: false,\n  imageObjectFit: 'cover',\n};\n\nconst TemplateWithEvent = (args, data) => {\n  let id = data.id;\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n    <jump-card-ecommerce ${attributes}>\n\n      <jump-card-ecommerce-option code=\"size1\" label=\"sono una select un pò lunga\"></jump-card-ecommerce-option>\n      <jump-card-ecommerce-option code=\"size2\" label=\"L\" sku=\"cod123\"></jump-card-ecommerce-option>\n\n      <div slot=\"addtocart\"><a href=\"\">Sono un bottone dentro lo slot addotocart</a></div>\n    </jump-card-ecommerce>\n    <script>\n\n    (function() {\n      let container;\n      container = document.querySelector('#story--${id}');\n\n      container.querySelector('jump-card-ecommerce').addEventListener( 'jump-toggle-favorite',  ev => {\n        let productId = ev.detail.productId;\n        let favorite = ev.detail.favorite;\n        if(favorite){\n          console.log( 'Prodotto ' + productId + ' aggiunto ai preferiti');\n        } else {\n          console.log( 'Prodotto ' + productId + ' rimosso dai preferiti');\n        }\n      })\n\n      container.querySelector('jump-card-ecommerce').addEventListener( 'jump-add-to-cart',  ev => {\n        let productId = ev.detail.productId;\n        let addedToCart = ev.detail.addedToCart;\n        if(addedToCart){\n          console.log( 'Prodotto ' + productId + ' aggiunto al carrello');\n        }\n      })\n\n      container.querySelector('jump-card-ecommerce').addEventListener('jump-variation-selected', ev => {\n        let variation = ev.detail;\n        console.log('Variation selected', variation);\n      });\n\n    })();\n\n    </script>\n  ` );\n}\n\nexport const CardEvent = TemplateWithEvent.bind({});\nCardEvent.args = {\n  hasBackground: true,\n  onlyIconButton: false,\n  badge: 'In offerta',\n  hasFavorite: false,\n  hasSlotForFavorite: false,\n  link: '/prodotto',\n  img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  imgAlt: 'Immagine',\n  hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  hoverImgAlt: 'immagine in hover',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  currency: '€',\n  addToCartText: 'Aggiungi al carrello',\n  addToCartColor: 'primary',\n  hasSlotAddToCart: false,\n  badgeColor: 'primary',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  waitingListText: 'Notifica disponibilità',\n  isMini: true,\n};\n\nconst TemplateDisallowAllowCart = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n  <jump-card-ecommerce ${attributes}>\n  </jump-card-ecommerce>\n  `);\n}\n\nexport const CardWithZoom = Template.bind({});\nCardWithZoom.args = {\n  ...Card.args,\n  enableZoom: true,\n  hoverImg: '',\n  hoverImgAlt: '',\n};\n\nexport const CardDisallow = TemplateDisallowAllowCart.bind({});\nCardDisallow.args = {\n  hasBackground: true,\n  onlyIconButton: false,\n  badge: 'In offerta',\n  favorite: false,\n  hasFavorite: true,\n  hasSlotForFavorite: false,\n  link: '/prodotto',\n  img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  imgAlt: 'Immagine',\n  hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  hoverImgAlt: 'immagine in hover',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  addToCartText: 'Aggiungi al carrello',\n  addToCartColor: 'secondary',\n  hasSlotAddToCart: false,\n  badgeColor: 'secondary',\n  currency: '€',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  waitingListText: 'Notifica disponibilità',\n  isMini: false,\n  disallowAddToCart: true,\n};\n\n// Storia per mostrare l'utilizzo della proprietà imageObjectFit\nexport const CardWithScaleDown = Template.bind({});\nCardWithScaleDown.args = {\n  ...Card.args,\n  imageObjectFit: 'scale-down',\n  img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n  productName: 'Card con scale-down',\n  subtitle: 'L\\'immagine usa object-fit: scale-down'\n};"]}

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

@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './jump-badge2.js';
 import { d as defineCustomElement$3 } from './jump-button2.js';
 import { d as defineCustomElement$2 } from './jump-icon2.js';
 
-const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media .Images.enable-zoom{overflow:hidden}:host .Media .Images.enable-zoom .Images__Front{transition:transform 0s ease-out;cursor:zoom-in}:host .Media .Images.enable-zoom:hover .Images__Front{transform:scale(1.5)}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .Media.iconOnly{border-bottom-right-radius:0}:host .Media.is-mini{max-width:180px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Content.is-mini{max-width:180px}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Body.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Body.is-mini>*{flex-direction:column}:host .Product{font-size:var(--fs-400);color:var(--neutral-grey-primary);text-decoration:none}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .Footer.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Footer__AddToCart{--jump-button-color:var(--jump-card-ecommerce-add-to-cart-color);--jump-button-background:var(--jump-card-ecommerce-add-to-cart-background);--jump-button-color-hover:var(--jump-card-ecommerce-add-to-cart-color-hover);--jump-button-background-hover:var(--jump-card-ecommerce-add-to-cart-background-hover)}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .Price.is-mini{display:flex;font-size:var(--fs-400)}:host .SelectVariations{display:flex;align-items:flex-end;max-width:calc(50% - 1rem)}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
+const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;--jump-card-commerce-out-of-stock-color:var(--status-danger-standard);--jump-card-ecommerce-discount-color:var(--status-danger-standard);--image-object-fit:cover;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden;object-fit:var(--image-object-fit, cover)}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media .Images.enable-zoom{overflow:hidden}:host .Media .Images.enable-zoom .Images__Front{transition:transform 0s ease-out;cursor:zoom-in}:host .Media .Images.enable-zoom:hover .Images__Front{transform:scale(1.5)}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .Media.iconOnly{border-bottom-right-radius:0}:host .Media.is-mini{max-width:180px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Content.is-mini{max-width:180px}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Body.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Body.is-mini>*{flex-direction:column}:host .Product{font-size:var(--fs-400);color:var(--neutral-grey-primary);text-decoration:none}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .Footer.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Footer__AddToCart{--jump-button-color:var(--jump-card-ecommerce-add-to-cart-color);--jump-button-background:var(--jump-card-ecommerce-add-to-cart-background);--jump-button-color-hover:var(--jump-card-ecommerce-add-to-cart-color-hover);--jump-button-background-hover:var(--jump-card-ecommerce-add-to-cart-background-hover)}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--jump-card-commerce-out-of-stock-color)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--jump-card-ecommerce-discount-color);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .Price.is-mini{display:flex;font-size:var(--fs-400)}:host .SelectVariations{display:flex;align-items:flex-end;max-width:calc(50% - 1rem)}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
 const JumpCardEcommerceStyle0 = jumpCardEcommerceCss;
 
 const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcommerce extends HTMLElement {
@@ -64,6 +64,7 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
         this.disallowAddToCart = false;
         this.disallowAddToCartLabel = 'Scopri';
         this.enableZoom = false;
+        this.imageObjectFit = 'cover';
         this.addedToCart = false;
         this.endAddedToCart = false;
         this.variations = [];
@@ -184,7 +185,7 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
             const discount = ((price - salePrice) / price) * 100;
             return discount.toFixed(0);
         }
-        return (h(Host, null, !this.isMini && this.badge ?
+        return (h(Host, { style: { '--image-object-fit': this.imageObjectFit } }, !this.isMini && this.badge ?
             h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: this.badgeColor, dimension: "small", label: this.badge }) : '', !this.isMini && this.hasFavorite ?
             h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'primary' : 'neutral', size: "small", text: true, onlyIcon: true }, h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'solid' : 'light', size: "medium" }))
             :
@@ -256,6 +257,7 @@ const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcomm
         "disallowAddToCart": [4, "disallow-add-to-cart"],
         "disallowAddToCartLabel": [1, "disallow-add-to-cart-label"],
         "enableZoom": [4, "enable-zoom"],
+        "imageObjectFit": [1, "image-object-fit"],
         "addedToCart": [4, "added-to-cart"],
         "endAddedToCart": [4, "end-added-to-cart"],
         "variations": [32],

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

@@ -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      &.enable-zoom {\n        overflow: hidden;\n\n        .Images__Front {\n          transition: transform 0s ease-out;\n          cursor: zoom-in;\n        }\n\n        &:hover {\n          .Images__Front {\n            transform: scale(1.5);\n          }\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    color: var(--neutral-grey-primary);\n    text-decoration: none;\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    &__AddToCart {\n      --jump-button-color: var(--jump-card-ecommerce-add-to-cart-color);\n      --jump-button-background: var(--jump-card-ecommerce-add-to-cart-background);\n      --jump-button-color-hover: var(--jump-card-ecommerce-add-to-cart-color-hover);\n      --jump-button-background-hover: var(--jump-card-ecommerce-add-to-cart-background-hover);\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    display: flex;\n    align-items: flex-end;\n    max-width: calc(50% - 1rem);\n\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, Method } 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  private imageEl: HTMLImageElement;\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  /** 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  /** Indicate if the add to cart btn will be slotted*/\n  @Prop() hasSlotAddToCart: 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 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 = '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 the variant of the button */\n  @Prop() addToCartColor: 'primary' | 'secondary'|'white'|'neutral' = 'secondary';\n\n  /** Indicates the variant of the button */\n  @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 = 'Aggiungi al carrello';\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() waitingListText: string = 'Notifica disponibilità';\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  /** Indica se si tratta di un prodotto che può essere aggiunto al carrello solo dalla pagina prodotto */\n  @Prop() disallowAddToCart: boolean = false;\n\n  /** Label del pulsante che appare quando il prodotto non può essere aggiunto al carrello */\n  @Prop() disallowAddToCartLabel: string = 'Scopri';\n\n  /** Indica se è attivo lo zoom all'hover */\n  @Prop() enableZoom: 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  @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n  /**\n   * Set the price of the product\n   * @param price\n   * @param salePrice\n   */\n  @Method()\n  async setPrice(price: number, salePrice: number) {\n    let shouldFormat = false;\n    if (price && price > 0) {\n      shouldFormat = true;\n      this.price = price;\n    }\n\n    if (salePrice && salePrice > 0) {\n      this.salePrice = salePrice;\n    }\n\n    if (shouldFormat) {\n      this.formatPrices();\n    }\n  }\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  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  componentWillLoad() {\n  }\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\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.enableZoom || !this.imageEl) return;\n\n    const { left, top, width, height } = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = e.clientX - left;\n    const y = e.clientY - top;\n\n    const moveX = (x / width - 0.5) * -80; // Controlla l'ampiezza del movimento\n    const moveY = (y / height - 0.5) * -80; // Controlla l'ampiezza del movimento\n\n    this.imageEl.style.transform = `scale(1.5) translate(${moveX}px, ${moveY}px)`;\n  };\n\n  private handleMouseLeave = () => {\n    if (!this.enableZoom || !this.imageEl) return;\n    this.imageEl.style.transform = 'scale(1) translate(0, 0)';\n  };\n\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  goToProduct(){\n    this.goToProductPage.emit({\n      productId: this.productId,\n      link: this.link,\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, {\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\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    const enableZoomClass = this.enableZoom ? 'enable-zoom' : '';\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 ?\n          <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n                      label={this.badge}></jump-badge> : ''}\n\n        {!this.isMini && this.hasFavorite ?\n          <jump-button onClick={() => this.onToggleFavorite()} class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n                    variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n          <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n                    size=\"medium\"></jump-icon>\n          </jump-button>\n          :\n          this.hasSlotForFavorite ? <div class=\"Favorite\">\n            <slot name=\"favorite\"></slot>\n          </div> : null\n        }\n\n        <div\n          class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n          onMouseMove={this.handleMouseMove}\n          onMouseLeave={this.handleMouseLeave}\n        >\n          <a href={this.link}>\n            <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n              {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt} ref={el => this.imageEl = el as HTMLImageElement}></img> : ''}\n              {this.hoverImg && !this.videoSrc ?\n                <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          }\n\n          {!this.isMini && this.onlyIconButton && !this.hasSlotAddToCart ?\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\n          {!this.isMini && this.onlyIconButton && this.hasSlotAddToCart ?\n            <div class=\"OnlyIconButton\">\n                <slot name=\"add-to-cart\"></slot>\n            </div>\n            : ''\n          }\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                <a href={this.link} class=\"Product\">{this.productName}</a>\n                {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 || this.variations.length != 0 ?\n              <div>\n                {this.variations.length != 0 ?\n                  <div class=\"SelectVariations\">\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                  </div>\n                : null}\n                <slot name=\"quantity\"></slot>\n              </div>\n            : null}\n          </div>\n\n          <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n            {this.outOfStock && !this.isMini?\n              <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n            {this.outOfStock ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.waitingList()}>\n                <jump-icon slot=\"prefix\" name=\"bell\" category=\"regular\" size=\"small\"></jump-icon>\n                {this.waitingListText}\n              </jump-button> : ''\n            }\n\n            {!this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart && !this.disallowAddToCart ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.addProductToCart()}>\n                <jump-icon slot=\"prefix\" name=\"cart-shopping\" category=\"regular\" size=\"small\"></jump-icon>\n                {this.addToCartText}\n              </jump-button> : ''\n            }\n\n            {!this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?\n                <slot name=\"add-to-cart\"></slot>\n              : null\n            }\n\n            {!this.outOfStock && this.disallowAddToCart ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.goToProduct()}>\n                 <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> {this.disallowAddToCartLabel}\n              </jump-button> : ''\n            }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"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  --jump-card-commerce-out-of-stock-color: var(--status-danger-standard);\n  --jump-card-ecommerce-discount-color: var(--status-danger-standard);\n  --image-object-fit: cover;\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        position: absolute;\n        top: 0;\n        left: 0;\n        overflow: hidden;\n        object-fit: var(--image-object-fit, cover);\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      &.enable-zoom {\n        overflow: hidden;\n\n        .Images__Front {\n          transition: transform 0s ease-out;\n          cursor: zoom-in;\n        }\n\n        &:hover {\n          .Images__Front {\n            transform: scale(1.5);\n          }\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    color: var(--neutral-grey-primary);\n    text-decoration: none;\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    &__AddToCart {\n      --jump-button-color: var(--jump-card-ecommerce-add-to-cart-color);\n      --jump-button-background: var(--jump-card-ecommerce-add-to-cart-background);\n      --jump-button-color-hover: var(--jump-card-ecommerce-add-to-cart-color-hover);\n      --jump-button-background-hover: var(--jump-card-ecommerce-add-to-cart-background-hover);\n    }\n  }\n\n  .OutOfStock {\n    justify-items: start;\n    font-size: var(--fs-300);\n    font-weight: var(--fw-900);\n    color: var(--jump-card-commerce-out-of-stock-color);\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(--jump-card-ecommerce-discount-color);\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    display: flex;\n    align-items: flex-end;\n    max-width: calc(50% - 1rem);\n\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, Method } 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  private imageEl: HTMLImageElement;\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  /** 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  /** Indicate if the add to cart btn will be slotted*/\n  @Prop() hasSlotAddToCart: 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 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 = '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 the variant of the button */\n  @Prop() addToCartColor: 'primary' | 'secondary'|'white'|'neutral' = 'secondary';\n\n  /** Indicates the variant of the button */\n  @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 = 'Aggiungi al carrello';\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() waitingListText: string = 'Notifica disponibilità';\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  /** Indica se si tratta di un prodotto che può essere aggiunto al carrello solo dalla pagina prodotto */\n  @Prop() disallowAddToCart: boolean = false;\n\n  /** Label del pulsante che appare quando il prodotto non può essere aggiunto al carrello */\n  @Prop() disallowAddToCartLabel: string = 'Scopri';\n\n  /** Indica se è attivo lo zoom all'hover */\n  @Prop() enableZoom: boolean = false;\n\n  /** Controlla il comportamento dell'object-fit delle immagini */\n  @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\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  @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n  /**\n   * Set the price of the product\n   * @param price\n   * @param salePrice\n   */\n  @Method()\n  async setPrice(price: number, salePrice: number) {\n    let shouldFormat = false;\n    if (price && price > 0) {\n      shouldFormat = true;\n      this.price = price;\n    }\n\n    if (salePrice && salePrice > 0) {\n      this.salePrice = salePrice;\n    }\n\n    if (shouldFormat) {\n      this.formatPrices();\n    }\n  }\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  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  componentWillLoad() {\n  }\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\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.enableZoom || !this.imageEl) return;\n\n    const { left, top, width, height } = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = e.clientX - left;\n    const y = e.clientY - top;\n\n    const moveX = (x / width - 0.5) * -80; // Controlla l'ampiezza del movimento\n    const moveY = (y / height - 0.5) * -80; // Controlla l'ampiezza del movimento\n\n    this.imageEl.style.transform = `scale(1.5) translate(${moveX}px, ${moveY}px)`;\n  };\n\n  private handleMouseLeave = () => {\n    if (!this.enableZoom || !this.imageEl) return;\n    this.imageEl.style.transform = 'scale(1) translate(0, 0)';\n  };\n\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  goToProduct(){\n    this.goToProductPage.emit({\n      productId: this.productId,\n      link: this.link,\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, {\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\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    const enableZoomClass = this.enableZoom ? 'enable-zoom' : '';\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 style={{'--image-object-fit': this.imageObjectFit}}>\n        {!this.isMini && this.badge ?\n          <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n                      label={this.badge}></jump-badge> : ''}\n\n        {!this.isMini && this.hasFavorite ?\n          <jump-button onClick={() => this.onToggleFavorite()} class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n                    variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n          <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n                    size=\"medium\"></jump-icon>\n          </jump-button>\n          :\n          this.hasSlotForFavorite ? <div class=\"Favorite\">\n            <slot name=\"favorite\"></slot>\n          </div> : null\n        }\n\n        <div\n          class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n          onMouseMove={this.handleMouseMove}\n          onMouseLeave={this.handleMouseLeave}\n        >\n          <a href={this.link}>\n            <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n              {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt} ref={el => this.imageEl = el as HTMLImageElement}></img> : ''}\n              {this.hoverImg && !this.videoSrc ?\n                <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          }\n\n          {!this.isMini && this.onlyIconButton && !this.hasSlotAddToCart ?\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\n          {!this.isMini && this.onlyIconButton && this.hasSlotAddToCart ?\n            <div class=\"OnlyIconButton\">\n                <slot name=\"add-to-cart\"></slot>\n            </div>\n            : ''\n          }\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                <a href={this.link} class=\"Product\">{this.productName}</a>\n                {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 || this.variations.length != 0 ?\n              <div>\n                {this.variations.length != 0 ?\n                  <div class=\"SelectVariations\">\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                  </div>\n                : null}\n                <slot name=\"quantity\"></slot>\n              </div>\n            : null}\n          </div>\n\n          <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n            {this.outOfStock && !this.isMini?\n              <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n            {this.outOfStock ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.waitingList()}>\n                <jump-icon slot=\"prefix\" name=\"bell\" category=\"regular\" size=\"small\"></jump-icon>\n                {this.waitingListText}\n              </jump-button> : ''\n            }\n\n            {!this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart && !this.disallowAddToCart ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.addProductToCart()}>\n                <jump-icon slot=\"prefix\" name=\"cart-shopping\" category=\"regular\" size=\"small\"></jump-icon>\n                {this.addToCartText}\n              </jump-button> : ''\n            }\n\n            {!this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?\n                <slot name=\"add-to-cart\"></slot>\n              : null\n            }\n\n            {!this.outOfStock && this.disallowAddToCart ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.goToProduct()}>\n                 <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> {this.disallowAddToCartLabel}\n              </jump-button> : ''\n            }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/jump-card-ecommerce.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a94b3471.js';
 
-const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media .Images.enable-zoom{overflow:hidden}:host .Media .Images.enable-zoom .Images__Front{transition:transform 0s ease-out;cursor:zoom-in}:host .Media .Images.enable-zoom:hover .Images__Front{transform:scale(1.5)}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .Media.iconOnly{border-bottom-right-radius:0}:host .Media.is-mini{max-width:180px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Content.is-mini{max-width:180px}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Body.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Body.is-mini>*{flex-direction:column}:host .Product{font-size:var(--fs-400);color:var(--neutral-grey-primary);text-decoration:none}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .Footer.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Footer__AddToCart{--jump-button-color:var(--jump-card-ecommerce-add-to-cart-color);--jump-button-background:var(--jump-card-ecommerce-add-to-cart-background);--jump-button-color-hover:var(--jump-card-ecommerce-add-to-cart-color-hover);--jump-button-background-hover:var(--jump-card-ecommerce-add-to-cart-background-hover)}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .Price.is-mini{display:flex;font-size:var(--fs-400)}:host .SelectVariations{display:flex;align-items:flex-end;max-width:calc(50% - 1rem)}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
+const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;--jump-card-commerce-out-of-stock-color:var(--status-danger-standard);--jump-card-ecommerce-discount-color:var(--status-danger-standard);--image-object-fit:cover;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden;object-fit:var(--image-object-fit, cover)}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media .Images.enable-zoom{overflow:hidden}:host .Media .Images.enable-zoom .Images__Front{transition:transform 0s ease-out;cursor:zoom-in}:host .Media .Images.enable-zoom:hover .Images__Front{transform:scale(1.5)}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .Media.iconOnly{border-bottom-right-radius:0}:host .Media.is-mini{max-width:180px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Content.is-mini{max-width:180px}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Body.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Body.is-mini>*{flex-direction:column}:host .Product{font-size:var(--fs-400);color:var(--neutral-grey-primary);text-decoration:none}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .Footer.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Footer__AddToCart{--jump-button-color:var(--jump-card-ecommerce-add-to-cart-color);--jump-button-background:var(--jump-card-ecommerce-add-to-cart-background);--jump-button-color-hover:var(--jump-card-ecommerce-add-to-cart-color-hover);--jump-button-background-hover:var(--jump-card-ecommerce-add-to-cart-background-hover)}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--jump-card-commerce-out-of-stock-color)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--jump-card-ecommerce-discount-color);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .Price.is-mini{display:flex;font-size:var(--fs-400)}:host .SelectVariations{display:flex;align-items:flex-end;max-width:calc(50% - 1rem)}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
 const JumpCardEcommerceStyle0 = jumpCardEcommerceCss;
 
 const JumpCardEcommerce = class {
@@ -59,6 +59,7 @@ const JumpCardEcommerce = class {
         this.disallowAddToCart = false;
         this.disallowAddToCartLabel = 'Scopri';
         this.enableZoom = false;
+        this.imageObjectFit = 'cover';
         this.addedToCart = false;
         this.endAddedToCart = false;
         this.variations = [];
@@ -179,7 +180,7 @@ const JumpCardEcommerce = class {
             const discount = ((price - salePrice) / price) * 100;
             return discount.toFixed(0);
         }
-        return (h(Host, null, !this.isMini && this.badge ?
+        return (h(Host, { style: { '--image-object-fit': this.imageObjectFit } }, !this.isMini && this.badge ?
             h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: this.badgeColor, dimension: "small", label: this.badge }) : '', !this.isMini && this.hasFavorite ?
             h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'primary' : 'neutral', size: "small", text: true, onlyIcon: true }, h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'solid' : 'light', size: "medium" }))
             :

package/dist/esm/jump-card-ecommerce.entry.js.map

@@ -1 +1 @@
-{"file":"jump-card-ecommerce.entry.js","mappings":"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","names":[],"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      &.enable-zoom {\n        overflow: hidden;\n\n        .Images__Front {\n          transition: transform 0s ease-out;\n          cursor: zoom-in;\n        }\n\n        &:hover {\n          .Images__Front {\n            transform: scale(1.5);\n          }\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    color: var(--neutral-grey-primary);\n    text-decoration: none;\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    &__AddToCart {\n      --jump-button-color: var(--jump-card-ecommerce-add-to-cart-color);\n      --jump-button-background: var(--jump-card-ecommerce-add-to-cart-background);\n      --jump-button-color-hover: var(--jump-card-ecommerce-add-to-cart-color-hover);\n      --jump-button-background-hover: var(--jump-card-ecommerce-add-to-cart-background-hover);\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    display: flex;\n    align-items: flex-end;\n    max-width: calc(50% - 1rem);\n\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, Method } 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  private imageEl: HTMLImageElement;\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  /** 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  /** Indicate if the add to cart btn will be slotted*/\n  @Prop() hasSlotAddToCart: 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 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 = '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 the variant of the button */\n  @Prop() addToCartColor: 'primary' | 'secondary'|'white'|'neutral' = 'secondary';\n\n  /** Indicates the variant of the button */\n  @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 = 'Aggiungi al carrello';\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() waitingListText: string = 'Notifica disponibilità';\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  /** Indica se si tratta di un prodotto che può essere aggiunto al carrello solo dalla pagina prodotto */\n  @Prop() disallowAddToCart: boolean = false;\n\n  /** Label del pulsante che appare quando il prodotto non può essere aggiunto al carrello */\n  @Prop() disallowAddToCartLabel: string = 'Scopri';\n\n  /** Indica se è attivo lo zoom all'hover */\n  @Prop() enableZoom: 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  @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n  /**\n   * Set the price of the product\n   * @param price\n   * @param salePrice\n   */\n  @Method()\n  async setPrice(price: number, salePrice: number) {\n    let shouldFormat = false;\n    if (price && price > 0) {\n      shouldFormat = true;\n      this.price = price;\n    }\n\n    if (salePrice && salePrice > 0) {\n      this.salePrice = salePrice;\n    }\n\n    if (shouldFormat) {\n      this.formatPrices();\n    }\n  }\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  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  componentWillLoad() {\n  }\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\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.enableZoom || !this.imageEl) return;\n\n    const { left, top, width, height } = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = e.clientX - left;\n    const y = e.clientY - top;\n\n    const moveX = (x / width - 0.5) * -80; // Controlla l'ampiezza del movimento\n    const moveY = (y / height - 0.5) * -80; // Controlla l'ampiezza del movimento\n\n    this.imageEl.style.transform = `scale(1.5) translate(${moveX}px, ${moveY}px)`;\n  };\n\n  private handleMouseLeave = () => {\n    if (!this.enableZoom || !this.imageEl) return;\n    this.imageEl.style.transform = 'scale(1) translate(0, 0)';\n  };\n\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  goToProduct(){\n    this.goToProductPage.emit({\n      productId: this.productId,\n      link: this.link,\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, {\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\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    const enableZoomClass = this.enableZoom ? 'enable-zoom' : '';\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 ?\n          <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n                      label={this.badge}></jump-badge> : ''}\n\n        {!this.isMini && this.hasFavorite ?\n          <jump-button onClick={() => this.onToggleFavorite()} class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n                    variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n          <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n                    size=\"medium\"></jump-icon>\n          </jump-button>\n          :\n          this.hasSlotForFavorite ? <div class=\"Favorite\">\n            <slot name=\"favorite\"></slot>\n          </div> : null\n        }\n\n        <div\n          class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n          onMouseMove={this.handleMouseMove}\n          onMouseLeave={this.handleMouseLeave}\n        >\n          <a href={this.link}>\n            <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n              {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt} ref={el => this.imageEl = el as HTMLImageElement}></img> : ''}\n              {this.hoverImg && !this.videoSrc ?\n                <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          }\n\n          {!this.isMini && this.onlyIconButton && !this.hasSlotAddToCart ?\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\n          {!this.isMini && this.onlyIconButton && this.hasSlotAddToCart ?\n            <div class=\"OnlyIconButton\">\n                <slot name=\"add-to-cart\"></slot>\n            </div>\n            : ''\n          }\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                <a href={this.link} class=\"Product\">{this.productName}</a>\n                {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 || this.variations.length != 0 ?\n              <div>\n                {this.variations.length != 0 ?\n                  <div class=\"SelectVariations\">\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                  </div>\n                : null}\n                <slot name=\"quantity\"></slot>\n              </div>\n            : null}\n          </div>\n\n          <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n            {this.outOfStock && !this.isMini?\n              <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n            {this.outOfStock ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.waitingList()}>\n                <jump-icon slot=\"prefix\" name=\"bell\" category=\"regular\" size=\"small\"></jump-icon>\n                {this.waitingListText}\n              </jump-button> : ''\n            }\n\n            {!this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart && !this.disallowAddToCart ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.addProductToCart()}>\n                <jump-icon slot=\"prefix\" name=\"cart-shopping\" category=\"regular\" size=\"small\"></jump-icon>\n                {this.addToCartText}\n              </jump-button> : ''\n            }\n\n            {!this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?\n                <slot name=\"add-to-cart\"></slot>\n              : null\n            }\n\n            {!this.outOfStock && this.disallowAddToCart ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.goToProduct()}>\n                 <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> {this.disallowAddToCartLabel}\n              </jump-button> : ''\n            }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"jump-card-ecommerce.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,m1LAAm1L,CAAC;AACj3L,gCAAe,oBAAoB;;MCctB,iBAAiB;;;;;;;;;QA2MpB,oBAAe,GAAG,CAAC,CAAa;YACtC,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO;YAE9C,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,CAAC,CAAC,aAA6B,CAAC,qBAAqB,EAAE,CAAC;YAC9F,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC;YAE1B,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;YACtC,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;YAEvC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,wBAAwB,KAAK,OAAO,KAAK,KAAK,CAAC;SAC/E,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO;YAC9C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,0BAA0B,CAAC;SAC3D,CAAC;8BAlNgC,KAAK;6BAGN,KAAK;;wBAMsB,KAAK;2BAGlC,KAAK;kCAGE,KAAK;gCAGP,KAAK;;;;;;;;gCAwBN,sBAAsB;;;;;;wBAkB9B,GAAG;8BAGsC,WAAW;0BAGc,WAAW;0BAG1C,KAAK;;6BAMnC,sBAAsB;+BAGpB,wBAAwB;gCAGtB,KAAK;sBAGf,KAAK;iCAGM,KAAK;sCAGD,QAAQ;0BAGnB,KAAK;8BAG4C,OAAO;2BAKvD,KAAK;8BAEF,KAAK;0BAEJ,EAAE;;;;;;;;;;IA+BrC,MAAM,QAAQ,CAAC,KAAa,EAAE,SAAiB;QAC7C,IAAI,YAAY,GAAG,KAAK,CAAC;QACzB,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE;YACtB,YAAY,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB;QAED,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;SAC5B;QAED,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAGD,SAAS,CAAC,CAAC;QACT,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,oBAAO,KAAK,EAAG,CAAC;KACtD;IAED,mBAAmB;QACjB,IAAI,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;QAChD,IAAI,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAClC,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,IAAI,YAAY,CAC9C,CAAC;QACF,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACxC;;IAID,iBAAiB;KAChB;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE5E,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACtF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,QAAQ;gBAC3D,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;aAC1B,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAC5E,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC/E;KACF;IAsBD,gBAAgB,CAAC,CAAC;;QAChB,IAAI,CAAC,QAAQ,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,mCAAI,KAAK,CAAC;KACzC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CACtB;YACE,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CACF,CAAC;KACH;IAED,WAAW;QACT,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAED,gBAAgB;;QACd,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACxC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7C,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;SACjC;QAED,MAAM,OAAO,GAAG;YACd,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,QAAQ,EAAE,MAAA,IAAI,CAAC,QAAQ,mCAAI,IAAI;YAC/B,SAAS,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,IAAI;SAC9B,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpC,UAAU,CAAC;YACT,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B,EAAE,IAAI,CAAC,CAAC;KACV;IAED,WAAW;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAC1B;YACE,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;SACxC,CACF,CAAC;KACH;IAED,YAAY;;QACV,IAAI,MAAM,GAAG,MAAA,QAAQ,CAAC,eAAe,CAAC,IAAI,mCAAI,OAAO,CAAC;QACtD,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE;YACtB,MAAM,GAAG,GAAG,MAAM,IAAI,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC;SAC9C;;QAGD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,CAAC;QAChH,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,EAAE;YAC9D,qBAAqB,EAAE,CAAC;YACxB,qBAAqB,EAAE,CAAC;SACzB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,EAAE,CAAC;QAClF,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,UAAU,GAAG,EAAE,CAAC;QAC5E,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,GAAG,iBAAiB,GAAG,EAAE,CAAC;QAC9D,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,iBAAiB,GAAG,EAAE,CAAC;QAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,CAAC;QAC9C,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,aAAa,GAAG,EAAE,CAAC;QAE7D,SAAS,iBAAiB,CAAC,KAAa,EAAE,SAAiB;YACzD,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,SAAS,IAAI,KAAK,IAAI,GAAG,CAAC;YACrD,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SAC5B;QAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,oBAAoB,EAAE,IAAI,CAAC,cAAc,EAAC,IACrD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK;YACzB,kBAAY,KAAK,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,EAAC,OAAO,EACzF,KAAK,EAAE,IAAI,CAAC,KAAK,GAAe,GAAG,EAAE,EAElD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW;YAC/B,mBAAa,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,EAChG,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,QAAQ,UACpF,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,OAAO,EACvE,IAAI,EAAC,QAAQ,GAAa,CACtB;;gBAEd,IAAI,CAAC,kBAAkB,GAAG,WAAK,KAAK,EAAC,UAAU,IAC7C,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,GAAG,IAAI,EAGf,WACE,KAAK,EAAE,SAAS,aAAa,IAAI,eAAe,IAAI,QAAQ,EAAE,EAC9D,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,IAAI,CAAC,gBAAgB,IAEnC,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAChB,cAAQ,KAAK,EAAE,UAAU,eAAe,IAAI,eAAe,EAAE,IAC1D,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,OAAO,GAAG,EAAsB,GAAQ,GAAG,EAAE,EACtJ,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC9B,WAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAQ,GAAG,EAAE,CAC9E,EACR,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG;YACzB,aAAO,QAAQ,UACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAG,EAC/C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAG,EAC/C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAG,CAC1C,GAAG,EAAE,CACb,EACH,CAAC,IAAI,CAAC,MAAM;YACX,WAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,uBAAuB,GAAG,EAAE,EAAE,IACvF,mBAAa,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,EAAC,OAAO,EAAC,IAAI,UAC3D,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAa,EAClD,qBAAQ,IAAI,CAAC,gBAAgB,MAAS,CAC1B,CACV;cACJ,IAAI,EAGP,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAC5D,WAAK,KAAK,EAAC,gBAAgB,IACzB,mBAAa,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,QAAQ,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAChG,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,GAAa,CACjE,CACV;cACJ,EAAE,EAGL,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,gBAAgB;YAC3D,WAAK,KAAK,EAAC,gBAAgB,IACvB,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC9B;cACJ,EAAE,CAIF,EAEN,WAAK,KAAK,EAAE,WAAW,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE,IACnE,WAAK,KAAK,EAAE,QAAQ,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE,IAChE,eACE,WAAK,KAAK,EAAC,MAAM,IACf,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,WAAW,CAAK,EACzD,IAAI,CAAC,QAAQ,GAAG,WAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAO,GAAG,IAAI,CAC/D,EAEL,IAAI,CAAC,KAAK;YACT,WAAK,KAAK,EAAE,SAAS,QAAQ,EAAE,IAC5B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;gBAC5D,WAAK,KAAK,EAAC,iBAAiB,SAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,OAAS;kBACnF,IAAI,EAEP,CAAC,IAAI,CAAC,MAAM;gBACX,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,EAAE,EAAE,IACxF,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAC/B;;oBAEN,WAAK,KAAK,EAAE,gBAAgB,IACzB,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,cAAc,CACzG,EAGP,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;gBAC5D,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAO;kBACrE,IAAI,CACJ;cACJ,IAAI,CACJ,EAEL,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC;YAC1C,eACG,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC;gBAC1B,WAAK,KAAK,EAAC,kBAAkB,IACzB,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAC1C,QAAQ,EAAE;wBACR,IAAI,CAAC,mBAAmB,EAAE,CAAC;qBAC5B,IAEA,IAAI,CAAC,UAAU;qBACb,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;qBACxC,GAAG,CAAC,CAAC,SAAS,MACb,cAAQ,KAAK,EAAE,SAAS,CAAC,IAAI,IAAG,SAAS,CAAC,KAAK,CAAU,CAC1D,CAAC,CACG,CACP;kBACN,IAAI,EACN,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;cACN,IAAI,CACF,EAEN,WAAK,KAAK,EAAE,UAAU,YAAY,IAAI,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE,IAEjF,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM;YAC9B,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,GAAG,UAAU,CAAO,GAAG,EAAE,EAE5F,IAAI,CAAC,UAAU;YACd,mBAAa,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACtH,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAa,EAChF,IAAI,CAAC,eAAe,CACT,GAAG,EAAE,EAGpB,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,iBAAiB;YAC5F,mBAAa,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAC3H,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAa,EACzF,IAAI,CAAC,aAAa,CACP,GAAG,EAAE,EAGpB,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,gBAAgB;YAC9D,YAAM,IAAI,EAAC,aAAa,GAAQ;cAChC,IAAI,EAGP,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,iBAAiB;YACzC,mBAAa,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACrH,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,aAAa,GAAa,OAAE,IAAI,CAAC,sBAAsB,CAC1E,GAAG,EAAE,CAEjB,CACF,CACD,EACP;KACH;;;;;;;","names":[],"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  --jump-card-commerce-out-of-stock-color: var(--status-danger-standard);\n  --jump-card-ecommerce-discount-color: var(--status-danger-standard);\n  --image-object-fit: cover;\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        position: absolute;\n        top: 0;\n        left: 0;\n        overflow: hidden;\n        object-fit: var(--image-object-fit, cover);\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      &.enable-zoom {\n        overflow: hidden;\n\n        .Images__Front {\n          transition: transform 0s ease-out;\n          cursor: zoom-in;\n        }\n\n        &:hover {\n          .Images__Front {\n            transform: scale(1.5);\n          }\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    color: var(--neutral-grey-primary);\n    text-decoration: none;\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    &__AddToCart {\n      --jump-button-color: var(--jump-card-ecommerce-add-to-cart-color);\n      --jump-button-background: var(--jump-card-ecommerce-add-to-cart-background);\n      --jump-button-color-hover: var(--jump-card-ecommerce-add-to-cart-color-hover);\n      --jump-button-background-hover: var(--jump-card-ecommerce-add-to-cart-background-hover);\n    }\n  }\n\n  .OutOfStock {\n    justify-items: start;\n    font-size: var(--fs-300);\n    font-weight: var(--fw-900);\n    color: var(--jump-card-commerce-out-of-stock-color);\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(--jump-card-ecommerce-discount-color);\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    display: flex;\n    align-items: flex-end;\n    max-width: calc(50% - 1rem);\n\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, Method } 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  private imageEl: HTMLImageElement;\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  /** 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  /** Indicate if the add to cart btn will be slotted*/\n  @Prop() hasSlotAddToCart: 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 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 = '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 the variant of the button */\n  @Prop() addToCartColor: 'primary' | 'secondary'|'white'|'neutral' = 'secondary';\n\n  /** Indicates the variant of the button */\n  @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 = 'Aggiungi al carrello';\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() waitingListText: string = 'Notifica disponibilità';\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  /** Indica se si tratta di un prodotto che può essere aggiunto al carrello solo dalla pagina prodotto */\n  @Prop() disallowAddToCart: boolean = false;\n\n  /** Label del pulsante che appare quando il prodotto non può essere aggiunto al carrello */\n  @Prop() disallowAddToCartLabel: string = 'Scopri';\n\n  /** Indica se è attivo lo zoom all'hover */\n  @Prop() enableZoom: boolean = false;\n\n  /** Controlla il comportamento dell'object-fit delle immagini */\n  @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\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  @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n  /**\n   * Set the price of the product\n   * @param price\n   * @param salePrice\n   */\n  @Method()\n  async setPrice(price: number, salePrice: number) {\n    let shouldFormat = false;\n    if (price && price > 0) {\n      shouldFormat = true;\n      this.price = price;\n    }\n\n    if (salePrice && salePrice > 0) {\n      this.salePrice = salePrice;\n    }\n\n    if (shouldFormat) {\n      this.formatPrices();\n    }\n  }\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  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  componentWillLoad() {\n  }\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\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.enableZoom || !this.imageEl) return;\n\n    const { left, top, width, height } = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = e.clientX - left;\n    const y = e.clientY - top;\n\n    const moveX = (x / width - 0.5) * -80; // Controlla l'ampiezza del movimento\n    const moveY = (y / height - 0.5) * -80; // Controlla l'ampiezza del movimento\n\n    this.imageEl.style.transform = `scale(1.5) translate(${moveX}px, ${moveY}px)`;\n  };\n\n  private handleMouseLeave = () => {\n    if (!this.enableZoom || !this.imageEl) return;\n    this.imageEl.style.transform = 'scale(1) translate(0, 0)';\n  };\n\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  goToProduct(){\n    this.goToProductPage.emit({\n      productId: this.productId,\n      link: this.link,\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, {\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\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    const enableZoomClass = this.enableZoom ? 'enable-zoom' : '';\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 style={{'--image-object-fit': this.imageObjectFit}}>\n        {!this.isMini && this.badge ?\n          <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n                      label={this.badge}></jump-badge> : ''}\n\n        {!this.isMini && this.hasFavorite ?\n          <jump-button onClick={() => this.onToggleFavorite()} class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n                    variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n          <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n                    size=\"medium\"></jump-icon>\n          </jump-button>\n          :\n          this.hasSlotForFavorite ? <div class=\"Favorite\">\n            <slot name=\"favorite\"></slot>\n          </div> : null\n        }\n\n        <div\n          class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n          onMouseMove={this.handleMouseMove}\n          onMouseLeave={this.handleMouseLeave}\n        >\n          <a href={this.link}>\n            <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n              {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt} ref={el => this.imageEl = el as HTMLImageElement}></img> : ''}\n              {this.hoverImg && !this.videoSrc ?\n                <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          }\n\n          {!this.isMini && this.onlyIconButton && !this.hasSlotAddToCart ?\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\n          {!this.isMini && this.onlyIconButton && this.hasSlotAddToCart ?\n            <div class=\"OnlyIconButton\">\n                <slot name=\"add-to-cart\"></slot>\n            </div>\n            : ''\n          }\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                <a href={this.link} class=\"Product\">{this.productName}</a>\n                {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 || this.variations.length != 0 ?\n              <div>\n                {this.variations.length != 0 ?\n                  <div class=\"SelectVariations\">\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                  </div>\n                : null}\n                <slot name=\"quantity\"></slot>\n              </div>\n            : null}\n          </div>\n\n          <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n            {this.outOfStock && !this.isMini?\n              <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n            {this.outOfStock ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.waitingList()}>\n                <jump-icon slot=\"prefix\" name=\"bell\" category=\"regular\" size=\"small\"></jump-icon>\n                {this.waitingListText}\n              </jump-button> : ''\n            }\n\n            {!this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart && !this.disallowAddToCart ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.addProductToCart()}>\n                <jump-icon slot=\"prefix\" name=\"cart-shopping\" category=\"regular\" size=\"small\"></jump-icon>\n                {this.addToCartText}\n              </jump-button> : ''\n            }\n\n            {!this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?\n                <slot name=\"add-to-cart\"></slot>\n              : null\n            }\n\n            {!this.outOfStock && this.disallowAddToCart ?\n              <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.goToProduct()}>\n                 <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> {this.disallowAddToCartLabel}\n              </jump-button> : ''\n            }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}