@jumpgroup/jump-design-system 0.3.1 → 0.3.4

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"],"addedToCart":[4,"added-to-cart"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addtoCartText":[1,"addto-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"changedVariation":[4,"changed-variation"]}]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[32],"getValue":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion.cjs",[[1,"jump-accordion"]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[1],"dimension":[1],"soft":[4],"outline":[4]}]]]], options);
+  return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion.cjs",[[1,"jump-accordion"]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[1],"dimension":[1],"soft":[4],"outline":[4]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "components/jump-button/jump-button.js",
     "components/jump-card/jump-card.js",
     "components/jump-card-ecommerce/jump-card-ecommerce.js",
+    "components/jump-card-ecommerce-option/jump-card-ecommerce-option.js",
     "components/jump-filter/jump-filter.js",
     "components/jump-filtergroup/jump-filtergroup.js",
     "components/jump-icon/jump-icon.js",

package/dist/collection/components/jump-button/jump-button.stories.js

@@ -60,7 +60,7 @@ export default {
             control: 'boolean'
         },
         onlyIcon: {
-            name: 'onlyIcon',
+            name: 'only-icon',
             description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',
             control: 'boolean'
         },

package/dist/collection/components/jump-button/jump-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"jump-button.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Button/Button',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      name: 'variant',\n      description: 'Imposta la variante di colore del bottone',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'white'\n      ],\n    },\n    outline : {\n      name: 'outline',\n      description: 'Imposta se il bottone deve avere il solo bordo',\n      control: 'boolean'\n    },\n    size: {\n      name: 'size',\n      description: 'Imposta la dimensione del bottone',\n      control: 'select',\n      options: [\n        'small',\n        'medium',\n        'large',\n      ],\n      labels: {\n        small: 'Piccolo',\n        medium: 'Medio',\n        large: 'Grande',\n      }\n    },\n    pill: {\n      name: 'pill',\n      description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',\n      control: 'boolean'\n    },\n    name: {\n      name: 'name',\n      description: 'Imposta il name del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    value: {\n      name: 'value',\n      description: 'Imposta il value del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    ariaLabel: {\n      name: 'ariaLabel',\n      description: 'Imposta l\\'aria label del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    text: {\n      name: 'text',\n      description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    onlyIcon: {\n      name: 'onlyIcon',\n      description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    full: {\n      name: 'full',\n      description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',\n      control: 'boolean'\n    },\n    href:{\n      name: 'href',\n      description: 'Imposta l\\'href del link, va impostato solo se non è un button ma è un link',\n      control: 'text'\n    },\n    target:{\n      name: 'target',\n      description: 'Imposta il target del link, va impostato solo se non è un button ma è un link',\n      control: 'select',\n      options: [\n        '_self',\n        '_blank',\n        '_parent',\n        '_top'\n      ],\n      labels: {\n        _self: '_self',\n        _blank: '_blank',\n        _parent: '_parent',\n        _top: '_top'\n      },\n    },\n    id: {\n      name: 'id',\n      description: 'Imposta l\\'id del bottone',\n      control: 'text'\n    },\n    disabled: {\n      name: 'disabled',\n      description: 'Imposta se il bottone deve essere disabilitato',\n      control: 'boolean'\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes}> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes}> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const ButtonWithIcon = TemplateWithIcon.bind({});\nButtonWithIcon.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const ButtonWithoutIcon = Template.bind({});\nButtonWithoutIcon.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Outline = Template.bind({});\nOutline.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: true,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Pill = Template.bind({});\nPill.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: true,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Text = Template.bind({});\nText.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  text: true,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  variant: 'primary',\n  size: 'small',\n  disabled: true,\n};\n\nexport const CustomButton = Template.bind({});\nCustomButton.args = {\n  pill: true,\n  size: 'small',\n  class: 'chat'\n};"]}
+{"version":3,"file":"jump-button.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Button/Button',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      name: 'variant',\n      description: 'Imposta la variante di colore del bottone',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'white'\n      ],\n    },\n    outline : {\n      name: 'outline',\n      description: 'Imposta se il bottone deve avere il solo bordo',\n      control: 'boolean'\n    },\n    size: {\n      name: 'size',\n      description: 'Imposta la dimensione del bottone',\n      control: 'select',\n      options: [\n        'small',\n        'medium',\n        'large',\n      ],\n      labels: {\n        small: 'Piccolo',\n        medium: 'Medio',\n        large: 'Grande',\n      }\n    },\n    pill: {\n      name: 'pill',\n      description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',\n      control: 'boolean'\n    },\n    name: {\n      name: 'name',\n      description: 'Imposta il name del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    value: {\n      name: 'value',\n      description: 'Imposta il value del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    ariaLabel: {\n      name: 'ariaLabel',\n      description: 'Imposta l\\'aria label del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    text: {\n      name: 'text',\n      description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    onlyIcon: {\n      name: 'only-icon',\n      description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    full: {\n      name: 'full',\n      description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',\n      control: 'boolean'\n    },\n    href:{\n      name: 'href',\n      description: 'Imposta l\\'href del link, va impostato solo se non è un button ma è un link',\n      control: 'text'\n    },\n    target:{\n      name: 'target',\n      description: 'Imposta il target del link, va impostato solo se non è un button ma è un link',\n      control: 'select',\n      options: [\n        '_self',\n        '_blank',\n        '_parent',\n        '_top'\n      ],\n      labels: {\n        _self: '_self',\n        _blank: '_blank',\n        _parent: '_parent',\n        _top: '_top'\n      },\n    },\n    id: {\n      name: 'id',\n      description: 'Imposta l\\'id del bottone',\n      control: 'text'\n    },\n    disabled: {\n      name: 'disabled',\n      description: 'Imposta se il bottone deve essere disabilitato',\n      control: 'boolean'\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes}> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes}> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const ButtonWithIcon = TemplateWithIcon.bind({});\nButtonWithIcon.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const ButtonWithoutIcon = Template.bind({});\nButtonWithoutIcon.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Outline = Template.bind({});\nOutline.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: true,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Pill = Template.bind({});\nPill.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: true,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Text = Template.bind({});\nText.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  text: true,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  variant: 'primary',\n  size: 'small',\n  disabled: true,\n};\n\nexport const CustomButton = Template.bind({});\nCustomButton.args = {\n  pill: true,\n  size: 'small',\n  class: 'chat'\n};"]}

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

@@ -25,7 +25,7 @@
   position: absolute;
   top: 1rem;
   left: 1rem;
-  z-index: 1;
+  z-index: 2;
 }
 :host jump-badge.hasBackground.iconOnly {
   top: calc(1rem + 8px);
@@ -35,7 +35,7 @@
   position: absolute;
   top: 1rem;
   right: 1rem;
-  z-index: 1;
+  z-index: 2;
 }
 :host .Favorite.hasBackground.iconOnly {
   top: calc(1rem + 8px);
@@ -48,10 +48,27 @@
   border-top-right-radius: 3px;
   aspect-ratio: 1/1;
 }
-:host .Media img {
+:host .Media .Images {
+  height: 100%;
+  margin: 0;
+  position: relative;
+}
+:host .Media .Images img {
   height: 100%;
   width: 100%;
   object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+:host .Media .Images__Front {
+  z-index: 1;
+  transition: opacity 0.5s linear;
+  cursor: pointer;
+}
+:host .Media .Images.has-hover-image:hover .Images__Front {
+  opacity: 0;
 }
 :host .Media.hasBackground {
   background-color: var(--neutral-white);
@@ -72,6 +89,8 @@
   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;
@@ -111,6 +130,7 @@
 :host .Subtitle {
   font-size: var(--fs-300);
   color: var(--neutral-grey-secondary);
+  line-height: 1.2;
 }
 :host .Footer {
   line-height: var(--lh-400);
@@ -140,6 +160,7 @@
   background: var(--neutral-white);
   border-top-left-radius: 20px;
   padding: 8px 8px 0px 8px;
+  z-index: 2;
 }
 :host .Price {
   position: relative;
@@ -148,6 +169,7 @@
   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);
@@ -177,7 +199,47 @@
   grid-column: 1;
   grid-row: 1;
 }
+:host .SelectVariations select {
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid var(--neutral-grey-secondary);
+  border-radius: 3px;
+  color: var(--neutral-grey-secondary);
+  font-size: var(--fs-300);
+  padding: 0.5rem 0.75rem;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+}
+
+.slide-in-bottom {
+  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+.slide-out-bottom {
+  animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
+.fade-in-out {
+  animation-name: fade-in-out;
+  animation-duration: 6s;
+  animation-timing-function: ease-in-out;
+}
 
-:host(.Pippo) {
-  background-color: red;
+@keyframes fade-in-out {
+  from {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100px);
+  }
 }

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

@@ -5,25 +5,36 @@ export class JumpCardEcommerce {
         this.hasBackground = false;
         this.badge = undefined;
         this.favorite = false;
+        this.hasFavorite = false;
         this.link = undefined;
         this.img = undefined;
         this.imgAlt = undefined;
+        this.hoverImg = undefined;
+        this.hoverImgAlt = undefined;
         this.videoSrc = undefined;
-        this.addedToCart = false;
         this.notificationUrl = undefined;
-        this.notificationText = 'Aggiunto al carrello';
+        this.notificationText = '';
         this.productName = undefined;
         this.subtitle = undefined;
         this.productId = undefined;
         this.price = undefined;
         this.salePrice = undefined;
-        this.currency = undefined;
+        this.currency = '€';
         this.outOfStock = false;
         this.outOfStockText = undefined;
-        this.addtoCartText = undefined;
+        this.addToCartText = undefined;
         this.waitingListText = undefined;
         this.addToWaitingList = false;
-        this.changedVariation = false;
+        this.addedToCart = false;
+        this.endAddedToCart = false;
+        this.variations = [];
+    }
+    addOption(e) {
+        let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}
+        this.variations = [...this.variations, Object.assign({}, props)];
+    }
+    onVariationSelected(variation) {
+        this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento
     }
     /* ---------------------- @LIFECYCLE ------------------------- */
     componentWillLoad() { }
@@ -34,7 +45,6 @@ export class JumpCardEcommerce {
             this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {
                 this.quantity = quantity;
             });
-            console.log('Quantity:', this.quantity);
         }
     }
     disconnectedCallback() {
@@ -45,7 +55,8 @@ export class JumpCardEcommerce {
     }
     /* ---------------------- @METHODS ------------------------- */
     onQuantityChange(e) {
-        this.quantity = e.detail.value;
+        var _a;
+        this.quantity = (_a = e.detail.value) !== null && _a !== void 0 ? _a : false;
     }
     onToggleFavorite() {
         this.favorite = !this.favorite;
@@ -55,15 +66,17 @@ export class JumpCardEcommerce {
         });
     }
     addProductToCart() {
+        var _a;
         this.addedToCart = true;
         const payload = {
             productId: this.productId,
             addedToCart: this.addedToCart,
-            quantity: this.quantity
-            // mancano le variazioni
+            quantity: (_a = this.quantity) !== null && _a !== void 0 ? _a : null
         };
         this.productAddToCart.emit(payload);
-        console.log("productAddToCart payload:", payload);
+        setTimeout(() => {
+            this.addedToCart = false;
+        }, 6000);
     }
     waitingList() {
         this.addToWaitingList = true;
@@ -72,33 +85,38 @@ export class JumpCardEcommerce {
             addToWaitingList: this.addToWaitingList
         });
     }
-    changeVariationBody(event) {
-        const selectElement = event.target;
-        const selectedValue = selectElement.value;
-        this.changedVariation = true;
-        const payload = {
-            productId: this.productId,
-            changedVariation: this.changedVariation,
-            variation: selectedValue // da sostituire
-        };
-        this.changeVariation.emit(payload);
-        console.log("changeVariation payload:", payload);
-    }
     render() {
         const backgroundClass = this.hasBackground ? 'hasBackground' : '';
         const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';
         const justifyClass = this.outOfStock ? 'justify-between' : '';
+        const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';
         function calculateDiscount(price, salePrice) {
             const discount = ((price - salePrice) / price) * 100;
             return discount.toFixed(0);
         }
         ;
-        return (h(Host, null, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'neutral' : 'primary', size: "small", text: true, onlyIcon: true }, h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'light' : 'solid', size: "medium" })), h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { href: this.link }, this.img && !this.videoSrc ? h("img", { src: this.img, alt: this.imgAlt }) : '', this.videoSrc && !this.img ?
-            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : ''), h("div", { class: `NotificationCart ${this.addedToCart == true ? 'is-active' : ''}` }, h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { slot: "prefix", name: "check" }), h("span", null, " ", this.notificationText, " "))), this.onlyIconButton ?
+        return (h(Host, null, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', 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" }))
+            : null, h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { href: this.link }, h("figure", { class: `Images ${hasImageOnHover} ` }, this.img && !this.videoSrc ? h("img", { class: "Images__Front", src: this.img, alt: this.imgAlt }) : '', this.hoverImg && !this.videoSrc ? h("img", { class: "Images__OnHover", src: this.hoverImg, alt: this.hoverImgAlt }) : ''), this.videoSrc && !this.img ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : ''), h("div", { class: `NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}` }, h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { slot: "prefix", name: "check" }), h("span", null, " ", this.notificationText, " "))), this.onlyIconButton ?
             h("div", { class: "OnlyIconButton" }, h("jump-button", { variant: "secondary", size: "large", pill: true, onlyIcon: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: 'cart-shopping', category: "regular" })))
-            : ''), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", null, h("div", { class: "Info" }, h("div", { class: "Product" }, this.productName), h("div", { class: "Subtitle" }, this.subtitle)), h("div", { class: "Price" }, h("div", { class: "Price__Discount" }, calculateDiscount(this.price, this.salePrice), "%"), h("div", { class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), h("div", { class: "Price__Sale" }, this.currency, this.salePrice))), h("div", null, h("slot", { name: "select" }), h("slot", { name: "quantity" }))), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
+            : ''), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", null, h("div", { class: "Info" }, h("div", { class: "Product" }, this.productName), this.subtitle ? h("div", { class: "Subtitle" }, this.subtitle) : null), this.price ?
+            h("div", { class: "Price" }, this.salePrice && this.salePrice != 0 ?
+                h("div", { class: "Price__Discount" }, " ", calculateDiscount(this.price, this.salePrice), "% ")
+                : null, h("div", { class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), this.salePrice ?
+                h("div", { class: "Price__Sale" }, this.currency, this.salePrice)
+                : null)
+            : null), h("div", { class: "SelectVariations" }, this.variations.length != 0 ?
+            h("select", { ref: (el) => (this.variationSelectEl = el), onChange: () => {
+                    let currentValue = this.variationSelectEl.value;
+                    let currentVariation = this.variations.find((variation) => variation.code == currentValue);
+                    this.onVariationSelected(currentVariation);
+                } }, this.variations
+                .filter((variation) => !variation.imgUrl)
+                .map((variation) => (h("option", { value: variation.code }, variation.label))))
+            : null), h("slot", { name: "quantity" })), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
             h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.waitingListText ? this.waitingListText : 'Notifica disponibilità') : '', !this.outOfStock && !this.onlyIconButton ?
-            h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello') : ''))));
+            h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addToCartText ? this.addToCartText : 'Aggiungi al carrello') : ''))));
     }
     static get is() { return "jump-card-ecommerce"; }
     static get encapsulation() { return "shadow"; }
@@ -185,6 +203,24 @@ export class JumpCardEcommerce {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "hasFavorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if the whislist is active in shop"
+                },
+                "attribute": "has-favorite",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "link": {
                 "type": "string",
                 "mutable": false,
@@ -236,7 +272,7 @@ export class JumpCardEcommerce {
                 "attribute": "img-alt",
                 "reflect": false
             },
-            "videoSrc": {
+            "hoverImg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -248,28 +284,44 @@ export class JumpCardEcommerce {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates the videoSrc of the card"
+                    "text": "Indicates the over image's src of the card"
                 },
-                "attribute": "video-src",
+                "attribute": "hover-img",
                 "reflect": false
             },
-            "addedToCart": {
-                "type": "boolean",
+            "hoverImgAlt": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicate if the product is added to cart"
+                    "text": "Indicates the hover img's alt of the card"
                 },
-                "attribute": "added-to-cart",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "hover-img-alt",
+                "reflect": false
+            },
+            "videoSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the videoSrc of the card"
+                },
+                "attribute": "video-src",
+                "reflect": false
             },
             "notificationUrl": {
                 "type": "string",
@@ -304,7 +356,7 @@ export class JumpCardEcommerce {
                 },
                 "attribute": "notification-text",
                 "reflect": false,
-                "defaultValue": "'Aggiunto al carrello'"
+                "defaultValue": "''"
             },
             "productName": {
                 "type": "string",
@@ -406,7 +458,8 @@ export class JumpCardEcommerce {
                     "text": "Indicates the currency of the card"
                 },
                 "attribute": "currency",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'\u20AC'"
             },
             "outOfStock": {
                 "type": "boolean",
@@ -443,7 +496,7 @@ export class JumpCardEcommerce {
                 "attribute": "out-of-stock-text",
                 "reflect": false
             },
-            "addtoCartText": {
+            "addToCartText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -457,7 +510,7 @@ export class JumpCardEcommerce {
                     "tags": [],
                     "text": "Indicates the button class of the add to cart / notification button"
                 },
-                "attribute": "addto-cart-text",
+                "attribute": "add-to-cart-text",
                 "reflect": false
             },
             "waitingListText": {
@@ -495,7 +548,25 @@ export class JumpCardEcommerce {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "changedVariation": {
+            "addedToCart": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if the product is added to cart --> non deve esserci nelle storie!"
+                },
+                "attribute": "added-to-cart",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "endAddedToCart": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -507,14 +578,19 @@ export class JumpCardEcommerce {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicate if the variation is change"
+                    "text": ""
                 },
-                "attribute": "changed-variation",
+                "attribute": "end-added-to-cart",
                 "reflect": false,
                 "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "variations": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "toggleFavorite",
@@ -562,8 +638,8 @@ export class JumpCardEcommerce {
                     "references": {}
                 }
             }, {
-                "method": "changeVariation",
-                "name": "jump-change-variation",
+                "method": "variationSelected",
+                "name": "jump-variation-selected",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -579,5 +655,14 @@ export class JumpCardEcommerce {
             }];
     }
     static get elementRef() { return "JumpCardEcommerce"; }
+    static get listeners() {
+        return [{
+                "name": "jump-card-ecommerce-option-connected",
+                "method": "addOption",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=jump-card-ecommerce.js.map