npm - @jumpgroup/jump-design-system - Versions diffs - 1.0.17 → 1.0.19 - Mend

@jumpgroup/jump-design-system 1.0.17 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/jump-design-system/p-ef4cf4ec.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as n,c as e,h as o,H as i,g as t}from"./p-98d5dd1f.js";const s=':host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images 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:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.2rem;\n }\n}\n:host .Body.is-vertical .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n@container (max-width: 239px) {\n :host .Body .Body__Top {\n flex-direction: column;\n }\n :host .Body .Body__Bottom {\n flex-direction: column;\n }\n :host .Body .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n }\n :host .Body .SelectVariations select {\n width: 100%;\n }\n :host .Body .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n}\n:host .Body.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n}\n:host .Body.iconOnly {\n padding: 0;\n}\n:host .Body.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n}\n:host .Body.is-mini > * {\n flex-direction: column;\n}\n:host .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n}\n:host .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n}\n:host .Subtitle:hover {\n cursor: pointer;\n}\n:host .OutOfStock, :host .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n}\n:host .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n}\n:host .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\n}\n:host .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 margin-top: 0;\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n}\n:host .Price > * {\n display: inline-flex;\n}\n:host .Price__Regular {\n text-align: right;\n}\n:host .Price__Regular.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:host .Price__Sale {\n grid-column: 2;\n grid-row: 2;\n}\n:host .Price__Discount {\n color: var(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n}\n:host .Price.is-mini {\n display: flex;\n font-size: var(--fs-400);\n}';const r=s;const a=class{constructor(o){n(this,o);this.goToProductPage=e(this,"jump-card-go-to-product-page",7);this.hideDiscountIfLessThreshold=undefined;this.badge=undefined;this.link=undefined;this.img=undefined;this.imgAlt=undefined;this.productName=undefined;this.subtitle=undefined;this.productId=undefined;this.price=undefined;this.salePrice=undefined;this.currency="€";this.badgeColor="secondary";this.outOfStock=false;this.outOfStockText=undefined;this.availableText=undefined;this.imageObjectFit="cover";this.priceFormatted=undefined;this.salePriceFormatted=undefined}async setPrice(n,e){let o=false;if(n&&n>0){o=true;this.price=n}if(e&&e>0){this.salePrice=e}if(o){this.formatPrices()}}componentDidLoad(){this.formatPrices()}goToProduct(){this.goToProductPage.emit({productId:this.productId,link:this.link})}formatPrices(){var n;let e=(n=document.documentElement.lang)!==null&&n!==void 0?n:"it-IT";if(e.length==2){e=`${e}-${e.toUpperCase()}`}this.priceFormatted=this.price.toLocaleString(e,{minimumFractionDigits:2,maximumFractionDigits:2});this.salePriceFormatted=this.salePrice.toLocaleString(e,{minimumFractionDigits:2,maximumFractionDigits:2})}render(){const n="hasBackground";const e="";const t="";const s="";const r="is-vertical";const a="";function c(n,e){const o=(n-e)/n*100;return o.toFixed(0)}return o(i,{style:{"--image-object-fit":this.imageObjectFit}},o("div",{class:`Media ${e} ${n} ${s}`},this.badge?o("jump-badge",{class:`${n} ${e}`,variant:this.badgeColor,dimension:"small",label:this.badge}):"",this.salePrice&&this.salePrice<this.price&&(this.hideDiscountIfLessThreshold===undefined\|\|parseFloat(c(this.price,this.salePrice))>this.hideDiscountIfLessThreshold)?o("div",{class:"DiscountBadge"},"-",c(this.price,this.salePrice),"%"):null,o("a",{href:this.link},o("figure",{class:`Images ${t} ${a}`},this.img&&o("img",{class:"Images__Front",src:this.img,alt:this.imgAlt})))),o("div",{class:`Content ${n} ${e} ${s} ${r}`},o("div",{class:`Body ${n} ${e} ${s} ${r}`},o("div",{class:"Body__Top"},o("div",{class:"Info"},o("a",{href:this.link,class:"Product"},this.productName),this.subtitle?o("div",{class:"Subtitle",onClick:()=>this.goToProduct()},this.subtitle):null),this.price?o("div",{class:`Price ${s}`},o("div",{class:`Price__Regular ${this.salePrice&&this.salePrice<this.price?"sale":""}`},this.currency,this.priceFormatted),this.salePrice&&this.salePrice<this.price?o("div",{class:"Price__Sale"},this.currency,this.salePriceFormatted):null):null,this.outOfStock?o("div",{class:"OutOfStock"},this.outOfStockText?this.outOfStockText:"Esaurito"):o("div",{class:"AvailableStock"},this.availableText?this.availableText:"Disponibile")))))}get JumpCardEcommerceShowcase(){return t(this)}};a.style=r;export{a as jump_card_ecommerce_showcase};
2	+ //# sourceMappingURL=p-ef4cf4ec.entry.js.map

package/dist/jump-design-system/p-ef4cf4ec.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["jumpCardEcommerceShowcaseCss","JumpCardEcommerceShowcaseStyle0","JumpCardEcommerceShowcase","undefined","setPrice","price","salePrice","shouldFormat","this","formatPrices","componentDidLoad","goToProduct","goToProductPage","emit","productId","link","locale","_a","document","documentElement","lang","length","toUpperCase","priceFormatted","toLocaleString","minimumFractionDigits","maximumFractionDigits","salePriceFormatted","render","backgroundClass","iconOnlyClass","hasImageOnHover","miniCard","verticalCardClass","enableZoomClass","calculateDiscount","discount","toFixed","h","Host","style","imageObjectFit","class","badge","variant","badgeColor","dimension","label","hideDiscountIfLessThreshold","parseFloat","href","img","src","alt","imgAlt","productName","subtitle","onClick","currency","outOfStock","outOfStockText","availableText"],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\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 \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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-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 .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-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-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 3.2rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\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 .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock, .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n }\n\n .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n }\n\n .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\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 margin-top: 0;\n \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-showcase-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}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: string;\n\n /** Indicates the link of the card*/\n @Prop() link: string;\n\n /** Indicates the image's src of the card*/\n @Prop() img: string;\n\n /** Indicates the img's alt of the card*/\n @Prop() imgAlt: string;\n\n /** Indicates the 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() 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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\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 /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\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 = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\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\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"AvailableStock\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"mappings":"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"}

package/dist/jump-design-system-elements.json CHANGED Viewed

@@ -568,6 +568,116 @@
         }
       ]
     },
+    {
+      "name": "jump-card-ecommerce-showcase",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "available-text",
+          "description": ""
+        },
+        {
+          "name": "badge",
+          "description": "Indicates the badge of the card"
+        },
+        {
+          "name": "badge-color",
+          "description": "Indicates the variant of the button",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "currency",
+          "description": "Indicates the currency of the card"
+        },
+        {
+          "name": "hide-discount-if-less-threshold",
+          "description": "Indicates the threshold below which the discount will be hidden"
+        },
+        {
+          "name": "image-object-fit",
+          "description": "Controlla il comportamento dell'object-fit delle immagini",
+          "values": [
+            {
+              "name": "contain"
+            },
+            {
+              "name": "cover"
+            },
+            {
+              "name": "fill"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "scale-down"
+            }
+          ]
+        },
+        {
+          "name": "img",
+          "description": "Indicates the image's src of the card"
+        },
+        {
+          "name": "img-alt",
+          "description": "Indicates the img's alt of the card"
+        },
+        {
+          "name": "link",
+          "description": "Indicates the link of the card"
+        },
+        {
+          "name": "out-of-stock",
+          "description": "Indicates if the product is outOfStock"
+        },
+        {
+          "name": "out-of-stock-text",
+          "description": "Indicates the outOfStockText of the product"
+        },
+        {
+          "name": "price",
+          "description": "Indicates the price of the card"
+        },
+        {
+          "name": "product-id",
+          "description": "Indicates the ID of the product, can be also a SKU"
+        },
+        {
+          "name": "product-name",
+          "description": "Indicates the title of the card"
+        },
+        {
+          "name": "sale-price",
+          "description": "Indicates the sale price of the card"
+        },
+        {
+          "name": "subtitle",
+          "description": "Indicates the subtitle of the card"
+        }
+      ]
+    },
     {
       "name": "jump-filter",
       "description": {

package/dist/types/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class JumpCardEcommerceShowcase {
+    JumpCardEcommerceShowcase: HTMLElement;
+    jumpQuantityEl: any;
+    /** Indicates the threshold below which the discount will be hidden */
+    hideDiscountIfLessThreshold: number;
+    /** Indicates the badge of the card*/
+    badge: string;
+    /** Indicates the link of the card*/
+    link: string;
+    /** Indicates the image's src of the card*/
+    img: string;
+    /** Indicates the img's alt of the card*/
+    imgAlt: string;
+    /** Indicates the title of the card*/
+    productName: string;
+    /** Indicates the subtitle of the card*/
+    subtitle: string;
+    /** Indicates the ID of the product, can be also a SKU*/
+    productId: string;
+    /** Indicates the price of the card */
+    price: number;
+    /** Indicates the sale price of the card */
+    salePrice: number;
+    /** Indicates the currency of the card */
+    currency: string;
+    /** Indicates the variant of the button */
+    badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger';
+    /** Indicates if the product is outOfStock */
+    outOfStock: boolean;
+    /** Indicates the outOfStockText of the product*/
+    outOfStockText: string;
+    availableText: string;
+    /** Controlla il comportamento dell'object-fit delle immagini */
+    imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none';
+    priceFormatted: string;
+    salePriceFormatted: string;
+    goToProductPage: EventEmitter;
+    /**
+     * Set the price of the product
+     * @param price
+     * @param salePrice
+     */
+    setPrice(price: number, salePrice: number): Promise<void>;
+    componentDidLoad(): void;
+    goToProduct(): void;
+    formatPrices(): void;
+    render(): any;
+}

package/dist/types/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.d.ts ADDED Viewed

@@ -0,0 +1,112 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        verticalCard: {
+            name: string;
+            description: string;
+            control: string;
+            defaultValue: boolean;
+        };
+        badge: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        link: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        img: {
+            name: string;
+            description: string;
+            control: string;
+            defaultValue: string;
+            if: {
+                arg: string;
+                exists: boolean;
+            };
+        };
+        imgAlt: {
+            name: string;
+            description: string;
+            control: string;
+            if: {
+                arg: string;
+                exists: boolean;
+            };
+        };
+        hoverImg: {
+            name: string;
+            description: string;
+            control: string;
+            defaultValue: string;
+            if: {
+                arg: string;
+                exists: boolean;
+            };
+        };
+        productName: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        subtitle: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        productId: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        price: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        salePrice: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        hideDiscountIfLessThreshold: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        badgeColor: {
+            name: string;
+            description: string;
+            control: string;
+            options: string[];
+        };
+        outOfStock: {
+            name: string;
+            description: string;
+            control: string;
+            defaultValue: boolean;
+        };
+        outOfStockText: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        availableText: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        imageObjectFit: {
+            name: string;
+            description: string;
+            control: string;
+            options: string[];
+            defaultValue: string;
+        };
+    };
+};
+export default _default;
+export declare const Card: any;

package/dist/types/components.d.ts CHANGED Viewed

@@ -342,6 +342,75 @@ export namespace Components {
         "sku": string;
         "taxonomy": string;
     }
+    interface JumpCardEcommerceShowcase {
+        "availableText": string;
+        /**
+          * Indicates the badge of the card
+         */
+        "badge": string;
+        /**
+          * Indicates the variant of the button
+         */
+        "badgeColor": 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger';
+        /**
+          * Indicates the currency of the card
+         */
+        "currency": string;
+        /**
+          * Indicates the threshold below which the discount will be hidden
+         */
+        "hideDiscountIfLessThreshold": number;
+        /**
+          * Controlla il comportamento dell'object-fit delle immagini
+         */
+        "imageObjectFit": 'cover' | 'scale-down' | 'contain' | 'fill' | 'none';
+        /**
+          * Indicates the image's src of the card
+         */
+        "img": string;
+        /**
+          * Indicates the img's alt of the card
+         */
+        "imgAlt": string;
+        /**
+          * Indicates the link of the card
+         */
+        "link": string;
+        /**
+          * Indicates if the product is outOfStock
+         */
+        "outOfStock": boolean;
+        /**
+          * Indicates the outOfStockText of the product
+         */
+        "outOfStockText": string;
+        /**
+          * Indicates the price of the card
+         */
+        "price": number;
+        /**
+          * Indicates the ID of the product, can be also a SKU
+         */
+        "productId": string;
+        /**
+          * Indicates the title of the card
+         */
+        "productName": string;
+        /**
+          * Indicates the sale price of the card
+         */
+        "salePrice": number;
+        /**
+          * Set the price of the product
+          * @param price
+          * @param salePrice
+         */
+        "setPrice": (price: number, salePrice: number) => Promise<void>;
+        /**
+          * Indicates the subtitle of the card
+         */
+        "subtitle": string;
+    }
     interface JumpFilter {
         "direction": 'horizontal' | 'vertical';
         "filterButtonIcon": string;
@@ -784,6 +853,10 @@ export interface JumpCardEcommerceOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLJumpCardEcommerceOptionElement;
 }
+export interface JumpCardEcommerceShowcaseCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLJumpCardEcommerceShowcaseElement;
+}
 export interface JumpFilterCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLJumpFilterCheckboxElement;
@@ -924,6 +997,23 @@ declare global {
         prototype: HTMLJumpCardEcommerceOptionElement;
         new (): HTMLJumpCardEcommerceOptionElement;
     };
+    interface HTMLJumpCardEcommerceShowcaseElementEventMap {
+        "jump-card-go-to-product-page": any;
+    }
+    interface HTMLJumpCardEcommerceShowcaseElement extends Components.JumpCardEcommerceShowcase, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLJumpCardEcommerceShowcaseElementEventMap>(type: K, listener: (this: HTMLJumpCardEcommerceShowcaseElement, ev: JumpCardEcommerceShowcaseCustomEvent<HTMLJumpCardEcommerceShowcaseElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLJumpCardEcommerceShowcaseElementEventMap>(type: K, listener: (this: HTMLJumpCardEcommerceShowcaseElement, ev: JumpCardEcommerceShowcaseCustomEvent<HTMLJumpCardEcommerceShowcaseElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLJumpCardEcommerceShowcaseElement: {
+        prototype: HTMLJumpCardEcommerceShowcaseElement;
+        new (): HTMLJumpCardEcommerceShowcaseElement;
+    };
     interface HTMLJumpFilterElement extends Components.JumpFilter, HTMLStencilElement {
     }
     var HTMLJumpFilterElement: {
@@ -1238,6 +1328,7 @@ declare global {
         "jump-card": HTMLJumpCardElement;
         "jump-card-ecommerce": HTMLJumpCardEcommerceElement;
         "jump-card-ecommerce-option": HTMLJumpCardEcommerceOptionElement;
+        "jump-card-ecommerce-showcase": HTMLJumpCardEcommerceShowcaseElement;
         "jump-filter": HTMLJumpFilterElement;
         "jump-filter-checkbox": HTMLJumpFilterCheckboxElement;
         "jump-filter-range": HTMLJumpFilterRangeElement;
@@ -1578,6 +1669,70 @@ declare namespace LocalJSX {
         "sku"?: string;
         "taxonomy"?: string;
     }
+    interface JumpCardEcommerceShowcase {
+        "availableText"?: string;
+        /**
+          * Indicates the badge of the card
+         */
+        "badge"?: string;
+        /**
+          * Indicates the variant of the button
+         */
+        "badgeColor"?: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger';
+        /**
+          * Indicates the currency of the card
+         */
+        "currency"?: string;
+        /**
+          * Indicates the threshold below which the discount will be hidden
+         */
+        "hideDiscountIfLessThreshold"?: number;
+        /**
+          * Controlla il comportamento dell'object-fit delle immagini
+         */
+        "imageObjectFit"?: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none';
+        /**
+          * Indicates the image's src of the card
+         */
+        "img"?: string;
+        /**
+          * Indicates the img's alt of the card
+         */
+        "imgAlt"?: string;
+        /**
+          * Indicates the link of the card
+         */
+        "link"?: string;
+        "onJump-card-go-to-product-page"?: (event: JumpCardEcommerceShowcaseCustomEvent<any>) => void;
+        /**
+          * Indicates if the product is outOfStock
+         */
+        "outOfStock"?: boolean;
+        /**
+          * Indicates the outOfStockText of the product
+         */
+        "outOfStockText"?: string;
+        /**
+          * Indicates the price of the card
+         */
+        "price"?: number;
+        /**
+          * Indicates the ID of the product, can be also a SKU
+         */
+        "productId"?: string;
+        /**
+          * Indicates the title of the card
+         */
+        "productName"?: string;
+        /**
+          * Indicates the sale price of the card
+         */
+        "salePrice"?: number;
+        /**
+          * Indicates the subtitle of the card
+         */
+        "subtitle"?: string;
+    }
     interface JumpFilter {
         "direction"?: 'horizontal' | 'vertical';
         "filterButtonIcon"?: string;
@@ -1999,6 +2154,7 @@ declare namespace LocalJSX {
         "jump-card": JumpCard;
         "jump-card-ecommerce": JumpCardEcommerce;
         "jump-card-ecommerce-option": JumpCardEcommerceOption;
+        "jump-card-ecommerce-showcase": JumpCardEcommerceShowcase;
         "jump-filter": JumpFilter;
         "jump-filter-checkbox": JumpFilterCheckbox;
         "jump-filter-range": JumpFilterRange;
@@ -2032,6 +2188,7 @@ declare module "@stencil/core" {
             "jump-card": LocalJSX.JumpCard & JSXBase.HTMLAttributes<HTMLJumpCardElement>;
             "jump-card-ecommerce": LocalJSX.JumpCardEcommerce & JSXBase.HTMLAttributes<HTMLJumpCardEcommerceElement>;
             "jump-card-ecommerce-option": LocalJSX.JumpCardEcommerceOption & JSXBase.HTMLAttributes<HTMLJumpCardEcommerceOptionElement>;
+            "jump-card-ecommerce-showcase": LocalJSX.JumpCardEcommerceShowcase & JSXBase.HTMLAttributes<HTMLJumpCardEcommerceShowcaseElement>;
             "jump-filter": LocalJSX.JumpFilter & JSXBase.HTMLAttributes<HTMLJumpFilterElement>;
             "jump-filter-checkbox": LocalJSX.JumpFilterCheckbox & JSXBase.HTMLAttributes<HTMLJumpFilterCheckboxElement>;
             "jump-filter-range": LocalJSX.JumpFilterRange & JSXBase.HTMLAttributes<HTMLJumpFilterRangeElement>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jumpgroup/jump-design-system",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",