npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.91 → 0.3.93 - Mend

@jumpgroup/jump-design-system 0.3.91 → 0.3.93

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 (29) hide show

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

	@@ -1 +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 --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 .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 &.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 container-type: inline-size;\n\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 }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-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 @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 }\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 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-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 margin-bottom: 0;\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\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\nexport interface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n order?: number; // Aggiunta proprietà order\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 /* Indica se selezionare automaticamente la prima variazione /\n @Prop() autoSelectFirstVariation: boolean = true;\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 /* Flag per tracciare se le opzioni sono state ordinate /\n @State() optionsOrdered: boolean = false;\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 /\n Forza l'ordinamento delle variazioni (utile per debugging o situazioni edge-case)\n /\n @Method()\n async forceVariationsOrder() {\n this.optionsOrdered = false;\n setTimeout(() => {\n this.optionsOrdered = true;\n }, 1);\n }\n\n /\n Seleziona automaticamente la prima variazione se abilitato e se nessuna è già selezionata\n /\n private selectFirstVariationIfEnabled() {\n if (this.autoSelectFirstVariation && !this.selectedVariation && this.variations.length > 0) {\n // Ordiniamo le variazioni per ottenere la prima\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order \|\| 999;\n const orderB = b.order \|\| 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n // Selezioniamo la prima variazione\n const firstVariation = sortedVariations[0];\n this.selectedVariation = firstVariation;\n \n // Aggiorniamo anche la select se esiste\n setTimeout(() => {\n if (this.variationSelectEl) {\n this.variationSelectEl.value = firstVariation.code;\n }\n }, 50);\n \n // Emettiamo l'evento di selezione\n this.variationSelected.emit(firstVariation);\n }\n }\n\n /\n Seleziona una variazione specifica tramite code\n /\n @Method()\n async selectVariation(variationCode: string) {\n const variation = this.variations.find(v => v.code === variationCode);\n if (variation) {\n this.selectedVariation = variation;\n \n if (this.variationSelectEl) {\n this.variationSelectEl.value = variationCode;\n }\n \n this.variationSelected.emit(variation);\n return true;\n }\n return false;\n }\n\n /\n Seleziona la prima variazione disponibile\n /\n @Method()\n async selectFirstVariation() {\n if (this.variations.length > 0) {\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order \|\| 999;\n const orderB = b.order \|\| 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n return await this.selectVariation(sortedVariations[0].code);\n }\n return false;\n }\n\n /\n Ottiene la variazione attualmente selezionata\n /\n @Method()\n async getSelectedVariation(): Promise<Variation \| null> {\n return this.selectedVariation \|\| null;\n }\n\n @Listen('jump-card-ecommerce-option-connected')\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/', order: 1}\n \n // Aggiungiamo la nuova variazione solo se non esiste già\n const existingIndex = this.variations.findIndex(v => v.code === props.code);\n if (existingIndex === -1) {\n this.variations = [...this.variations, { ...props }];\n } else {\n // Se esiste già, la aggiorniamo\n this.variations = this.variations.map((v, i) => i === existingIndex ? { ...props } : v);\n }\n \n // Resettiamo il flag di ordinamento\n this.optionsOrdered = false;\n \n // Forziamo il re-render per applicare l'ordinamento dopo un brevissimo delay\n setTimeout(() => {\n this.optionsOrdered = true;\n // Selezioniamo automaticamente la prima variazione se abilitato\n this.selectFirstVariationIfEnabled();\n }, 10);\n }\n\n onVariationSelected() {\n let currentValue = this.variationSelectEl.value;\n \n // Ordiniamo sempre le variazioni prima di cercare quella selezionata\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order \|\| 999;\n const orderB = b.order \|\| 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n let variation = sortedVariations.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 // Ordiniamo sempre le variazioni al momento del render per garantire consistenza\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order \|\| 999;\n const orderB = b.order \|\| 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n // Se order è uguale, ordina per codice alfanumericamente\n return a.code.localeCompare(b.code);\n });\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 class=\"Body__Top\">\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 \|\| sortedVariations.length != 0 ?\n <div class=\"Body__Bottom\">\n {sortedVariations.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 {sortedVariations\n .filter((variation) => !variation.imgUrl)\n .map((variation, index) => (\n <option \n key={`${variation.code}-${variation.order \|\| 999}-${index}`} \n value={variation.code}\n selected={this.selectedVariation?.code === variation.code}\n >\n {variation.label}\n </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}
1	+ {"file":"jump-card-ecommerce.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,grQAAgrQ,CAAC;AAC9sQ,gCAAe,oBAAoB;;MCetB,iBAAiB;;;;;;;;;QA6UpB,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;8BApVgC,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;wCAG1C,IAAI;2BAKjB,KAAK;8BAEF,KAAK;0BAEJ,EAAE;;;;8BASF,KAAK;;;;;;;IAyBxC,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;;;;IAMD,MAAM,oBAAoB;QACxB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,UAAU,CAAC;YACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC;KACP;;;;IAKO,6BAA6B;QACnC,IAAI,IAAI,CAAC,wBAAwB,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;;YAE1F,MAAM,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;gBACtD,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC;gBAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC;gBAE9B,IAAI,MAAM,KAAK,MAAM,EAAE;oBACrB,OAAO,MAAM,GAAG,MAAM,CAAC;iBACxB;gBAED,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aACrC,CAAC,CAAC;;YAGH,MAAM,cAAc,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;YAC3C,IAAI,CAAC,iBAAiB,GAAG,cAAc,CAAC;;YAGxC,UAAU,CAAC;gBACT,IAAI,IAAI,CAAC,iBAAiB,EAAE;oBAC1B,IAAI,CAAC,iBAAiB,CAAC,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC;iBACpD;aACF,EAAE,EAAE,CAAC,CAAC;;YAGP,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC7C;KACF;;;;IAMD,MAAM,eAAe,CAAC,aAAqB;QACzC,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC;QACtE,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YAEnC,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAC1B,IAAI,CAAC,iBAAiB,CAAC,KAAK,GAAG,aAAa,CAAC;aAC9C;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACvC,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;KACd;;;;IAMD,MAAM,oBAAoB;QACxB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9B,MAAM,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;gBACtD,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC;gBAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC;gBAE9B,IAAI,MAAM,KAAK,MAAM,EAAE;oBACrB,OAAO,MAAM,GAAG,MAAM,CAAC;iBACxB;gBAED,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aACrC,CAAC,CAAC;YAEH,OAAO,MAAM,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;SAC7D;QACD,OAAO,KAAK,CAAC;KACd;;;;IAMD,MAAM,oBAAoB;QACxB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC;KACvC;IAGD,SAAS,CAAC,CAAC;QACT,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;;QAGrB,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC;QAC5E,IAAI,aAAa,KAAK,CAAC,CAAC,EAAE;YACxB,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,oBAAO,KAAK,EAAG,CAAC;SACtD;aAAM;;YAEL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,aAAa,qBAAQ,KAAK,IAAK,CAAC,CAAC,CAAC;SACzF;;QAGD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;;QAG5B,UAAU,CAAC;YACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;;YAE3B,IAAI,CAAC,6BAA6B,EAAE,CAAC;SACtC,EAAE,EAAE,CAAC,CAAC;KACR;IAED,mBAAmB;QACjB,IAAI,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;;QAGhD,MAAM,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACtD,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC;YAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC;YAE9B,IAAI,MAAM,KAAK,MAAM,EAAE;gBACrB,OAAO,MAAM,GAAG,MAAM,CAAC;aACxB;YAED,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;SACrC,CAAC,CAAC;QAEH,IAAI,SAAS,GAAG,gBAAgB,CAAC,IAAI,CACnC,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;;QAG7D,MAAM,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACtD,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC;YAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC;YAE9B,IAAI,MAAM,KAAK,MAAM,EAAE;gBACrB,OAAO,MAAM,GAAG,MAAM,CAAC;aACxB;;YAGD,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;SACrC,CAAC,CAAC;QAEH,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,IAErD,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,IAElC,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,EACnD,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,CAEF,EAEN,WAAK,KAAK,EAAE,WAAW,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE,IACnE,WAAK,KAAK,EAAE,QAAQ,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE,IAChE,WAAK,KAAK,EAAC,WAAW,IACpB,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,gBAAgB,CAAC,MAAM,IAAI,CAAC;YAC3C,WAAK,KAAK,EAAC,cAAc,IACtB,gBAAgB,CAAC,MAAM,IAAI,CAAC;gBAC3B,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,gBAAgB;qBACd,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;qBACxC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK;;oBAAK,QACzB,cACE,GAAG,EAAE,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE,EAC3D,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,QAAQ,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,IAAI,MAAK,SAAS,CAAC,IAAI,IAExD,SAAS,CAAC,KAAK,CACT,EACV;iBAAA,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 .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 &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\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: 1rem;\n right: auto;\n }\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 container-type: inline-size;\n\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 }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-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 @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 }\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 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-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 margin-bottom: 0;\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\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\nexport interface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n order?: number; // Aggiunta proprietà order\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 /* Indica se selezionare automaticamente la prima variazione /\n @Prop() autoSelectFirstVariation: boolean = true;\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 /* Flag per tracciare se le opzioni sono state ordinate /\n @State() optionsOrdered: boolean = false;\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 /\n Forza l'ordinamento delle variazioni (utile per debugging o situazioni edge-case)\n /\n @Method()\n async forceVariationsOrder() {\n this.optionsOrdered = false;\n setTimeout(() => {\n this.optionsOrdered = true;\n }, 1);\n }\n\n /\n Seleziona automaticamente la prima variazione se abilitato e se nessuna è già selezionata\n /\n private selectFirstVariationIfEnabled() {\n if (this.autoSelectFirstVariation && !this.selectedVariation && this.variations.length > 0) {\n // Ordiniamo le variazioni per ottenere la prima\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order \|\| 999;\n const orderB = b.order \|\| 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n // Selezioniamo la prima variazione\n const firstVariation = sortedVariations[0];\n this.selectedVariation = firstVariation;\n \n // Aggiorniamo anche la select se esiste\n setTimeout(() => {\n if (this.variationSelectEl) {\n this.variationSelectEl.value = firstVariation.code;\n }\n }, 50);\n \n // Emettiamo l'evento di selezione\n this.variationSelected.emit(firstVariation);\n }\n }\n\n /\n Seleziona una variazione specifica tramite code\n /\n @Method()\n async selectVariation(variationCode: string) {\n const variation = this.variations.find(v => v.code === variationCode);\n if (variation) {\n this.selectedVariation = variation;\n \n if (this.variationSelectEl) {\n this.variationSelectEl.value = variationCode;\n }\n \n this.variationSelected.emit(variation);\n return true;\n }\n return false;\n }\n\n /\n Seleziona la prima variazione disponibile\n /\n @Method()\n async selectFirstVariation() {\n if (this.variations.length > 0) {\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order \|\| 999;\n const orderB = b.order \|\| 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n return await this.selectVariation(sortedVariations[0].code);\n }\n return false;\n }\n\n /\n Ottiene la variazione attualmente selezionata\n /\n @Method()\n async getSelectedVariation(): Promise<Variation \| null> {\n return this.selectedVariation \|\| null;\n }\n\n @Listen('jump-card-ecommerce-option-connected')\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/', order: 1}\n \n // Aggiungiamo la nuova variazione solo se non esiste già\n const existingIndex = this.variations.findIndex(v => v.code === props.code);\n if (existingIndex === -1) {\n this.variations = [...this.variations, { ...props }];\n } else {\n // Se esiste già, la aggiorniamo\n this.variations = this.variations.map((v, i) => i === existingIndex ? { ...props } : v);\n }\n \n // Resettiamo il flag di ordinamento\n this.optionsOrdered = false;\n \n // Forziamo il re-render per applicare l'ordinamento dopo un brevissimo delay\n setTimeout(() => {\n this.optionsOrdered = true;\n // Selezioniamo automaticamente la prima variazione se abilitato\n this.selectFirstVariationIfEnabled();\n }, 10);\n }\n\n onVariationSelected() {\n let currentValue = this.variationSelectEl.value;\n \n // Ordiniamo sempre le variazioni prima di cercare quella selezionata\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order \|\| 999;\n const orderB = b.order \|\| 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n let variation = sortedVariations.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 // Ordiniamo sempre le variazioni al momento del render per garantire consistenza\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order \|\| 999;\n const orderB = b.order \|\| 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n // Se order è uguale, ordina per codice alfanumericamente\n return a.code.localeCompare(b.code);\n });\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 {!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 {!this.isMini && this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\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 </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\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\">{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 \|\| sortedVariations.length != 0 ?\n <div class=\"Body__Bottom\">\n {sortedVariations.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 {sortedVariations\n .filter((variation) => !variation.imgUrl)\n .map((variation, index) => (\n <option \n key={`${variation.code}-${variation.order \|\| 999}-${index}`} \n value={variation.code}\n selected={this.selectedVariation?.code === variation.code}\n >\n {variation.label}\n </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-filter.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-a94b3471.js';
-const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;height:-webkit-fill-available;max-height:calc(100vh - var(--header-height));transition:0.3s all ease-in-out;background-color:var(--bg-drawer, #fff);padding:1rem;width:100%;max-width:var(--drawer-width);box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078);z-index:2;overflow:auto}.filtersDrawer[aria-hidden=false]{left:0;right:0;width:auto;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 1rem);left:calc(var(--drawer-width) - 2rem)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
+const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;height:-webkit-fill-available;max-height:calc(100vh - var(--header-height));transition:0.3s all ease-in-out;background-color:var(--bg-drawer, #fff);padding:1rem;width:100%;max-width:var(--drawer-width);box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078);z-index:2;overflow:auto}.filtersDrawer[aria-hidden=false]{left:0;right:0;width:auto;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 1rem);left:calc(var(--drawer-width) - 2rem);background-color:var(--jump-filter-close-btn-bg, white);padding:1rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
 const JumpFilterStyle0 = jumpFilterCss;
 const JumpFilter = class {

package/dist/esm/jump-filter.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-filter.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,~~ujDAAujD~~,CAAC;~~AAC9kD~~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","names":[],"sources":["src/components/jump-filter/jump-filter.scss?tag=jump-filter&encapsulation=shadow","src/components/jump-filter/jump-filter.tsx"],"sourcesContent":[":host {\n --primary-standard: var(--secondary-hard, #435171);\n //--jump-button-background-hover: var(--secondary-hard, #435171);\n --jump-button-background-hover: red;\n --bg-drawer: var(--bg-drawer, #fff);\n --header-height: var(--header-height, 80px);\n --drawer-width: var(--drawer-width, 240px);\n --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n h3 {\n margin: 0;\n }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n opacity: 0;\n transition: opacity $duration $ease;\n\n &.filtersDrawer__overlay--active {\n opacity: 1;\n }\n}\n\n.filtersDrawer__overlay {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n z-index: 1;\n width: 100vw;\n height: 100vh;\n display: none;\n\n &.filtersDrawer__overlay--active {\n display: block;\n }\n\n @include fade-in-out();\n}\n\n.filtersDrawer {\n position: fixed;\n display: flex;\n flex-direction: column;\n gap: 2.5rem;\n left: -100vw;\n top: 0;\n height: -webkit-fill-available;\n max-height: calc(100vh - var(--header-height));\n transition: 0.3s all ease-in-out;\n background-color: var(--bg-drawer, #fff);\n padding: 1rem;\n width: 100%;\n max-width: var(--drawer-width);\n box-shadow: 8px 0 15px 0 #00000026;\n z-index: 2;\n overflow: auto;\n\n &[aria-hidden=\"false\"] {\n left: 0;\n right: 0;\n width: auto;\n transition: 0.3s all ease-in-out;\n\n .filtersDrawer__close {\n position: fixed;\n top: calc(var(--header-height) + 1rem);\n left: calc(var(--drawer-width) - 2rem);\n }\n }\n\n @media (min-width: 768px) { //md breakpoint tailwind\n position: relative;\n left: 0;\n height: auto;\n max-width: initial;\n max-height: initial;\n box-shadow: none;\n }\n\n @media (max-width: 767px) {\n top: var(--header-height);\n }\n\n .filtersDrawer__header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5rem;\n }\n}\n","import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n @Prop() showCount: boolean = false;\n @Prop() offCanvasOverlay: boolean = false;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n mobileToggle: HTMLElement \| null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n this.offCanvasClasses = 'filtersDrawer__overlay';\n }\n }\n }\n\n /*\n Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad() {\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {\n this.mobileToggle = el;\n }}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 &&\n <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n </slot>\n </jump-button>}\n\n {this.offCanvasOverlay &&\n <div class={this.offCanvasClasses}\n onClick={() => this.showMobileFilters = false}></div>}\n\n {<div\n ref={(el) => {\n this.filtersDrawer = el;\n }}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"small\" label=\"\" class={'filtersDrawer__close'}\n onClick={() => this.showMobileFilters = false}></jump-icon>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"jump-filter.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,itDAAitD,CAAC;AACxuD,yBAAe,aAAa;;MCMf,UAAU;;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;yBAER,KAAK;gCACE,KAAK;6BAER,CAAC;iCACI,KAAK;wBACd,KAAK;gCACE,wBAAwB;;IAM5D,mBAAmB,CAAC,KAAkB;;QAEpC,IAAI,CAAC,OAAO,mCAAQ,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAE,CAAC;QAC7E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;;KAIvE;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;KAC1D;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;gBACzD,IAAI,CAAC,gBAAgB,GAAG,uDAAuD,CAAC;aACjF;iBAAM;gBACL,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;gBACxD,IAAI,CAAC,gBAAgB,GAAG,wBAAwB,CAAC;aAClD;SACF;KACF;;;;IAMD,MAAM,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,IACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE;gBACN,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;aACxB,EACD,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,IAC/D,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,gBAAgB;YACpB,kEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAC,OAAO,GAAa,EAClG,IAAI,CAAC,iBAAiB,CAClB,EACP,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC;YACrB,mEAAY,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,SAAS,EAAC,KAAK,QAAe,CACpG,CACK,EAEb,IAAI,CAAC,gBAAgB;YACpB,4DAAK,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,KAAK,GAAQ,EAE3D,4DACC,GAAG,EAAE,CAAC,EAAE;gBACN,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;aACzB,EACD,KAAK,EAAC,eAAe,kBAAe,IAAI,CAAC,SAAS,IACjD,CAAC,IAAI,CAAC,QAAQ;YACb,4DAAK,KAAK,EAAE,uBAAuB,IACjC,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc,EAClE,6DAAK,IAAI,CAAC,aAAa,CAAM,CACzB,EACP,IAAI,CAAC,QAAQ,IAAI,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAE,sBAAsB,EAC7E,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,KAAK,GAAc,EACxF,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/jump-filter/jump-filter.scss?tag=jump-filter&encapsulation=shadow","src/components/jump-filter/jump-filter.tsx"],"sourcesContent":[":host {\n --primary-standard: var(--secondary-hard, #435171);\n //--jump-button-background-hover: var(--secondary-hard, #435171);\n --jump-button-background-hover: red;\n --jump-filter-close-btn-bg: white;\n --bg-drawer: var(--bg-drawer, #fff);\n --header-height: var(--header-height, 80px);\n --drawer-width: var(--drawer-width, 240px);\n --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n h3 {\n margin: 0;\n }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n opacity: 0;\n transition: opacity $duration $ease;\n\n &.filtersDrawer__overlay--active {\n opacity: 1;\n }\n}\n\n.filtersDrawer__overlay {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n z-index: 1;\n width: 100vw;\n height: 100vh;\n display: none;\n\n &.filtersDrawer__overlay--active {\n display: block;\n }\n\n @include fade-in-out();\n}\n\n.filtersDrawer {\n position: fixed;\n display: flex;\n flex-direction: column;\n gap: 2.5rem;\n left: -100vw;\n top: 0;\n height: -webkit-fill-available;\n max-height: calc(100vh - var(--header-height));\n transition: 0.3s all ease-in-out;\n background-color: var(--bg-drawer, #fff);\n padding: 1rem;\n width: 100%;\n max-width: var(--drawer-width);\n box-shadow: 8px 0 15px 0 #00000026;\n z-index: 2;\n overflow: auto;\n\n &[aria-hidden=\"false\"] {\n left: 0;\n right: 0;\n width: auto;\n transition: 0.3s all ease-in-out;\n\n .filtersDrawer__close {\n position: fixed;\n top: calc(var(--header-height) + 1rem);\n left: calc(var(--drawer-width) - 2rem);\n background-color: var(--jump-filter-close-btn-bg, white);\n padding: 1rem;\n box-shadow: 8px 0 15px 0 #00000026;\n }\n }\n\n @media (min-width: 768px) { //md breakpoint tailwind\n position: relative;\n left: 0;\n height: auto;\n max-width: initial;\n max-height: initial;\n box-shadow: none;\n }\n\n @media (max-width: 767px) {\n top: var(--header-height);\n }\n\n .filtersDrawer__header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5rem;\n }\n}\n","import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n @Prop() showCount: boolean = false;\n @Prop() offCanvasOverlay: boolean = false;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n mobileToggle: HTMLElement \| null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n this.offCanvasClasses = 'filtersDrawer__overlay';\n }\n }\n }\n\n /*\n Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad() {\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {\n this.mobileToggle = el;\n }}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 &&\n <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n </slot>\n </jump-button>}\n\n {this.offCanvasOverlay &&\n <div class={this.offCanvasClasses}\n onClick={() => this.showMobileFilters = false}></div>}\n\n {<div\n ref={(el) => {\n this.filtersDrawer = el;\n }}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"small\" label=\"\" class={'filtersDrawer__close'}\n onClick={() => this.showMobileFilters = false}></jump-icon>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/jump-design-system/jump-design-system.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-98d5dd1f.js";export{s as setNonce}from"./p-98d5dd1f.js";import{g as t}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};l().then((async e=>{await t();return a([["p-34bfbe0b",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],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],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],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"],isMini:[4,"is-mini"],disallowAddToCart:[4,"disallow-add-to-cart"],disallowAddToCartLabel:[1,"disallow-add-to-cart-label"],enableZoom:[4,"enable-zoom"],imageObjectFit:[1,"image-object-fit"],autoSelectFirstVariation:[4,"auto-select-first-variation"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],optionsOrdered:[32],setPrice:[64],forceVariationsOrder:[64],selectVariation:[64],selectFirstVariation:[64],getSelectedVariation:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-cdc5daf7",[[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],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-0140b32c",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-bb18f919",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-f36de1a8",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-629835ac",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],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"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-b6c7ffcd",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-038a2a14",[[1,"jump-search-bar",{searchValue:[1025,"search-value"],placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-6b8fccdb",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-b3765945",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-ff62e250",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-264fa972",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-bd692b1f",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-6905cee4",[[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"]}]]],["p-f7310fd5",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1],order:[2]}]]],["p-0d86819c",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-e30da431",[[1,"jump-filter-range",{name:[1],labelMinBefore:[1,"label-min-before"],labelMinAfter:[1,"label-min-after"],labelMaxBefore:[1,"label-max-before"],labelMaxAfter:[1,"label-max-after"],min:[2],max:[2],step:[2],minVal:[2,"min-val"],maxVal:[2,"max-val"],disabled:[516],internalMinVal:[32],internalMaxVal:[32],getValues:[64]},null,{minVal:["watchMinVal"],maxVal:["watchMaxVal"]}]]],["p-55fcebb1",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-7e35d9f1",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-02ab8fb7",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-d1fc1ddf",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-d0ea0f54",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-421ebb5a",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-6d82feb3",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-18c359e3",[[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]}]]]],e)}));
+import{p as e,b as a}from"./p-98d5dd1f.js";export{s as setNonce}from"./p-98d5dd1f.js";import{g as t}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};l().then((async e=>{await t();return a([["p-04194e1a",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],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],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],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"],isMini:[4,"is-mini"],disallowAddToCart:[4,"disallow-add-to-cart"],disallowAddToCartLabel:[1,"disallow-add-to-cart-label"],enableZoom:[4,"enable-zoom"],imageObjectFit:[1,"image-object-fit"],autoSelectFirstVariation:[4,"auto-select-first-variation"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],optionsOrdered:[32],setPrice:[64],forceVariationsOrder:[64],selectVariation:[64],selectFirstVariation:[64],getSelectedVariation:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-a5c6ed23",[[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],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-0140b32c",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-bb18f919",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-f36de1a8",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-629835ac",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],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"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-b6c7ffcd",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-038a2a14",[[1,"jump-search-bar",{searchValue:[1025,"search-value"],placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-6b8fccdb",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-b3765945",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-ff62e250",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-264fa972",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-bd692b1f",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-6905cee4",[[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"]}]]],["p-f7310fd5",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1],order:[2]}]]],["p-0d86819c",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-e30da431",[[1,"jump-filter-range",{name:[1],labelMinBefore:[1,"label-min-before"],labelMinAfter:[1,"label-min-after"],labelMaxBefore:[1,"label-max-before"],labelMaxAfter:[1,"label-max-after"],min:[2],max:[2],step:[2],minVal:[2,"min-val"],maxVal:[2,"max-val"],disabled:[516],internalMinVal:[32],internalMaxVal:[32],getValues:[64]},null,{minVal:["watchMinVal"],maxVal:["watchMaxVal"]}]]],["p-55fcebb1",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-7e35d9f1",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-02ab8fb7",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-d1fc1ddf",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-d0ea0f54",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-421ebb5a",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-6d82feb3",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-18c359e3",[[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]}]]]],e)}));
 //# sourceMappingURL=jump-design-system.esm.js.map

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

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as n,h as i,H as s,g as o}from"./p-98d5dd1f.js";const e=":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 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: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 jump-badge.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\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: 1rem;\n right: auto;\n }\n}\n:host .Favorite {\n position: absolute;\n top: 1rem;\n right: 1rem;\n z-index: 2;\n}\n:host .Favorite.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n right: calc(1rem + 8px);\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 .Images.has-hover-image:hover .Images__Front {\n opacity: 0;\n}\n:host .Media .Images.enable-zoom {\n overflow: hidden;\n}\n:host .Media .Images.enable-zoom .Images__Front {\n transition: transform 0s ease-out;\n cursor: zoom-in;\n}\n:host .Media .Images.enable-zoom:hover .Images__Front {\n transform: scale(1.5);\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-padding) var(--jump-card-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 .NotificationCart {\n display: none;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2rem 1rem;\n background-color: hsla(0, 0%, 0%, 0.35);\n box-sizing: border-box;\n z-index: 2;\n transform: translate3d(0, 0, 0);\n}\n:host .NotificationCart.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n:host .Content {\n container-type: inline-size;\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-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-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@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 .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:host .Footer.justify-between {\n justify-content: space-between;\n}\n:host .Footer.hasBackground {\n padding-bottom: 0;\n}\n:host .Footer.iconOnly {\n padding: 0;\n}\n:host .Footer.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n}\n:host .Footer__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:host .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:host .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: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-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}\n:host .SelectVariations {\n display: flex;\n align-items: flex-end;\n max-width: calc(50% - 1rem);\n margin-bottom: 0;\n}\n:host .SelectVariations 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.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 50% {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n}";const a=e;const r=class{constructor(i){t(this,i);this.toggleFavorite=n(this,"jump-toggle-favorite",7);this.productAddToCart=n(this,"jump-add-to-cart",7);this.productWaitingList=n(this,"jump-add-to-waiting-list",7);this.variationSelected=n(this,"jump-variation-selected",7);this.goToProductPage=n(this,"jump-card-go-to-product-page",7);this.handleMouseMove=t=>{if(!this.enableZoom\|\|!this.imageEl)return;const{left:n,top:i,width:s,height:o}=t.currentTarget.getBoundingClientRect();const e=t.clientX-n;const a=t.clientY-i;const r=(e/s-.5)-80;const h=(a/o-.5)-80;this.imageEl.style.transform=`scale(1.5) translate(${r}px, ${h}px)`};this.handleMouseLeave=()=>{if(!this.enableZoom\|\|!this.imageEl)return;this.imageEl.style.transform="scale(1) translate(0, 0)"};this.onlyIconButton=false;this.hasBackground=false;this.badge=undefined;this.favorite=false;this.hasFavorite=false;this.hasSlotForFavorite=false;this.hasSlotAddToCart=false;this.link=undefined;this.img=undefined;this.imgAlt=undefined;this.hoverImg=undefined;this.hoverImgAlt=undefined;this.videoSrc=undefined;this.notificationUrl=undefined;this.notificationText="Aggiunto al carrello";this.productName=undefined;this.subtitle=undefined;this.productId=undefined;this.price=undefined;this.salePrice=undefined;this.currency="€";this.addToCartColor="secondary";this.badgeColor="secondary";this.outOfStock=false;this.outOfStockText=undefined;this.addToCartText="Aggiungi al carrello";this.waitingListText="Notifica disponibilità";this.addToWaitingList=false;this.isMini=false;this.disallowAddToCart=false;this.disallowAddToCartLabel="Scopri";this.enableZoom=false;this.imageObjectFit="cover";this.autoSelectFirstVariation=true;this.addedToCart=false;this.endAddedToCart=false;this.variations=[];this.selectedVariation=undefined;this.priceFormatted=undefined;this.salePriceFormatted=undefined;this.optionsOrdered=false}async setPrice(t,n){let i=false;if(t&&t>0){i=true;this.price=t}if(n&&n>0){this.salePrice=n}if(i){this.formatPrices()}}async forceVariationsOrder(){this.optionsOrdered=false;setTimeout((()=>{this.optionsOrdered=true}),1)}selectFirstVariationIfEnabled(){if(this.autoSelectFirstVariation&&!this.selectedVariation&&this.variations.length>0){const t=[...this.variations].sort(((t,n)=>{const i=t.order\|\|999;const s=n.order\|\|999;if(i!==s){return i-s}return t.code.localeCompare(n.code)}));const n=t[0];this.selectedVariation=n;setTimeout((()=>{if(this.variationSelectEl){this.variationSelectEl.value=n.code}}),50);this.variationSelected.emit(n)}}async selectVariation(t){const n=this.variations.find((n=>n.code===t));if(n){this.selectedVariation=n;if(this.variationSelectEl){this.variationSelectEl.value=t}this.variationSelected.emit(n);return true}return false}async selectFirstVariation(){if(this.variations.length>0){const t=[...this.variations].sort(((t,n)=>{const i=t.order\|\|999;const s=n.order\|\|999;if(i!==s){return i-s}return t.code.localeCompare(n.code)}));return await this.selectVariation(t[0].code)}return false}async getSelectedVariation(){return this.selectedVariation\|\|null}addOption(t){let n=t.detail;const i=this.variations.findIndex((t=>t.code===n.code));if(i===-1){this.variations=[...this.variations,Object.assign({},n)]}else{this.variations=this.variations.map(((t,s)=>s===i?Object.assign({},n):t))}this.optionsOrdered=false;setTimeout((()=>{this.optionsOrdered=true;this.selectFirstVariationIfEnabled()}),10)}onVariationSelected(){let t=this.variationSelectEl.value;const n=[...this.variations].sort(((t,n)=>{const i=t.order\|\|999;const s=n.order\|\|999;if(i!==s){return i-s}return t.code.localeCompare(n.code)}));let i=n.find((n=>n.code==t));this.selectedVariation=i;this.variationSelected.emit(i)}componentWillLoad(){}componentDidLoad(){this.jumpQuantityEl=this.JumpCardEcommerce.querySelector("jump-quantity");if(this.jumpQuantityEl){this.jumpQuantityEl.addEventListener("jump-change",this.onQuantityChange.bind(this));this.quantity=this.jumpQuantityEl.getValue().then((t=>{this.quantity=t}))}this.formatPrices()}disconnectedCallback(){this.jumpQuantityEl=this.JumpCardEcommerce.querySelector("jump-quantity");if(this.jumpQuantityEl){this.jumpQuantityEl.removeEventListener("jump-change",this.onQuantityChange)}}onQuantityChange(t){var n;this.quantity=(n=t.detail.value)!==null&&n!==void 0?n:false}onToggleFavorite(){this.favorite=!this.favorite;this.toggleFavorite.emit({productId:this.productId,favorite:this.favorite})}goToProduct(){this.goToProductPage.emit({productId:this.productId,link:this.link})}addProductToCart(){var t;this.addedToCart=true;let n=this.selectedVariation;if(!n&&this.variations.length>0){n=this.variations[0]}const i={productId:this.productId,addedToCart:this.addedToCart,quantity:(t=this.quantity)!==null&&t!==void 0?t:null,variation:n!==null&&n!==void 0?n:null};this.productAddToCart.emit(i);setTimeout((()=>{this.addedToCart=false}),6e3)}waitingList(){this.addToWaitingList=true;this.productWaitingList.emit({productId:this.productId,addToWaitingList:this.addToWaitingList})}formatPrices(){var t;let n=(t=document.documentElement.lang)!==null&&t!==void 0?t:"it-IT";if(n.length==2){n=`${n}-${n.toUpperCase()}`}this.priceFormatted=this.price.toLocaleString(n,{minimumFractionDigits:2,maximumFractionDigits:2});this.salePriceFormatted=this.salePrice.toLocaleString(n,{minimumFractionDigits:2,maximumFractionDigits:2})}render(){const t=this.hasBackground&&!this.isMini?"hasBackground":"";const n=this.onlyIconButton&&!this.isMini?"iconOnly":"";const o=this.outOfStock?"justify-between":"";const e=this.hoverImg?"has-hover-image":"";const a=this.isMini?"is-mini":"";const r=this.enableZoom?"enable-zoom":"";const h=[...this.variations].sort(((t,n)=>{const i=t.order\|\|999;const s=n.order\|\|999;if(i!==s){return i-s}return t.code.localeCompare(n.code)}));function d(t,n){const i=(t-n)/t*100;return i.toFixed(0)}return i(s,{style:{"--image-object-fit":this.imageObjectFit}},!this.isMini&&this.hasFavorite?i("jump-button",{onClick:()=>this.onToggleFavorite(),class:`Favorite ${t} ${n}`,variant:this.favorite?"primary":"neutral",size:"small",text:true,onlyIcon:true},i("jump-icon",{slot:"prefix",name:"heart",category:this.favorite?"solid":"light",size:"medium"})):this.hasSlotForFavorite?i("div",{class:"Favorite"},i("slot",{name:"favorite"})):null,i("div",{class:`Media ${n} ${t} ${a}`,onMouseMove:this.handleMouseMove,onMouseLeave:this.handleMouseLeave},!this.isMini&&this.badge?i("jump-badge",{class:`${t} ${n}`,variant:this.badgeColor,dimension:"small",label:this.badge}):"",i("a",{href:this.link},i("figure",{class:`Images ${e} ${r}`},this.img&&!this.videoSrc?i("img",{class:"Images__Front",src:this.img,alt:this.imgAlt,ref:t=>this.imageEl=t}):"",this.hoverImg&&!this.videoSrc?i("img",{class:"Images__OnHover",src:this.hoverImg,alt:this.hoverImgAlt}):""),this.videoSrc&&!this.img?i("video",{autoplay:true},i("source",{src:this.videoSrc,type:"video/mp4"}),i("source",{src:this.videoSrc,type:"video/mov"}),i("source",{src:this.videoSrc,type:"video/webm"})):""),!this.isMini?i("div",{class:`NotificationCart ${this.addedToCart==true?"is-active fade-in-out":""}`},i("jump-button",{href:this.notificationUrl,variant:"white",text:true},i("jump-icon",{slot:"prefix",name:"check"}),i("span",null," ",this.notificationText," "))):null,!this.isMini&&this.onlyIconButton&&!this.hasSlotAddToCart?i("div",{class:"OnlyIconButton"},i("jump-button",{variant:"secondary",size:"large",pill:true,onlyIcon:true,onClick:()=>this.addProductToCart()},i("jump-icon",{slot:"prefix",name:"cart-shopping",category:"regular"}))):"",!this.isMini&&this.onlyIconButton&&this.hasSlotAddToCart?i("div",{class:"OnlyIconButton"},i("slot",{name:"add-to-cart"})):""),i("div",{class:`Content ${t} ${n} ${a}`},i("div",{class:`Body ${t} ${n} ${a}`},i("div",{class:"Body__Top"},i("div",{class:"Info"},i("a",{href:this.link,class:"Product"},this.productName),this.subtitle?i("div",{class:"Subtitle"},this.subtitle):null),this.price?i("div",{class:`Price ${a}`},!this.isMini&&this.salePrice&&this.salePrice<this.price?i("div",{class:"Price__Discount"}," ",d(this.price,this.salePrice),"% "):null,!this.isMini?i("div",{class:`Price__Regular ${this.salePrice&&this.salePrice<this.price?"sale":""}`},this.currency,this.priceFormatted):i("div",{class:`Price__Regular`},this.currency,this.salePrice&&this.salePrice<this.price?this.salePriceFormatted:this.priceFormatted),!this.isMini&&this.salePrice&&this.salePrice<this.price?i("div",{class:"Price__Sale"},this.currency,this.salePriceFormatted):null):null),!this.isMini\|\|h.length!=0?i("div",{class:"Body__Bottom"},h.length!=0?i("div",{class:"SelectVariations"},i("select",{ref:t=>this.variationSelectEl=t,onChange:()=>{this.onVariationSelected()}},h.filter((t=>!t.imgUrl)).map(((t,n)=>{var s;return i("option",{key:`${t.code}-${t.order\|\|999}-${n}`,value:t.code,selected:((s=this.selectedVariation)===null\|\|s===void 0?void 0:s.code)===t.code},t.label)})))):null,i("slot",{name:"quantity"})):null),i("div",{class:`Footer ${o} ${t} ${n} ${a}`},this.outOfStock&&!this.isMini?i("div",{class:"OutOfStock"},this.outOfStockText?this.outOfStockText:"Esaurito"):"",this.outOfStock?i("jump-button",{class:"Footer__AddToCart",variant:this.addToCartColor,size:"small",text:true,onClick:()=>this.waitingList()},i("jump-icon",{slot:"prefix",name:"bell",category:"regular",size:"small"}),this.waitingListText):"",!this.outOfStock&&!this.onlyIconButton&&!this.hasSlotAddToCart&&!this.disallowAddToCart?i("jump-button",{class:"Footer__AddToCart",variant:this.addToCartColor,size:"small",text:true,onClick:()=>this.addProductToCart()},i("jump-icon",{slot:"prefix",name:"cart-shopping",category:"regular",size:"small"}),this.addToCartText):"",!this.outOfStock&&!this.onlyIconButton&&this.hasSlotAddToCart?i("slot",{name:"add-to-cart"}):null,!this.outOfStock&&this.disallowAddToCart?i("jump-button",{class:"Footer__AddToCart",variant:this.addToCartColor,size:"small",text:true,onClick:()=>this.goToProduct()},i("jump-icon",{slot:"suffix",name:"arrow-right"})," ",this.disallowAddToCartLabel):"")))}get JumpCardEcommerce(){return o(this)}};r.style=a;export{r as jump_card_ecommerce};
2	+ //# sourceMappingURL=p-04194e1a.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["jumpCardEcommerceCss","JumpCardEcommerceStyle0","JumpCardEcommerce","this","handleMouseMove","e","enableZoom","imageEl","left","top","width","height","currentTarget","getBoundingClientRect","x","clientX","y","clientY","moveX","moveY","style","transform","handleMouseLeave","setPrice","price","salePrice","shouldFormat","formatPrices","forceVariationsOrder","optionsOrdered","setTimeout","selectFirstVariationIfEnabled","autoSelectFirstVariation","selectedVariation","variations","length","sortedVariations","sort","a","b","orderA","order","orderB","code","localeCompare","firstVariation","variationSelectEl","value","variationSelected","emit","selectVariation","variationCode","variation","find","v","selectFirstVariation","getSelectedVariation","addOption","props","detail","existingIndex","findIndex","Object","assign","map","i","onVariationSelected","currentValue","componentWillLoad","componentDidLoad","jumpQuantityEl","querySelector","addEventListener","onQuantityChange","bind","quantity","getValue","then","disconnectedCallback","removeEventListener","_a","onToggleFavorite","favorite","toggleFavorite","productId","goToProduct","goToProductPage","link","addProductToCart","addedToCart","payload","productAddToCart","waitingList","addToWaitingList","productWaitingList","locale","document","documentElement","lang","toUpperCase","priceFormatted","toLocaleString","minimumFractionDigits","maximumFractionDigits","salePriceFormatted","render","backgroundClass","hasBackground","isMini","iconOnlyClass","onlyIconButton","justifyClass","outOfStock","hasImageOnHover","hoverImg","miniCard","enableZoomClass","calculateDiscount","discount","toFixed","h","Host","imageObjectFit","hasFavorite","onClick","class","variant","size","text","onlyIcon","slot","name","category","hasSlotForFavorite","onMouseMove","onMouseLeave","badge","badgeColor","dimension","label","href","img","videoSrc","src","alt","imgAlt","ref","el","hoverImgAlt","autoplay","type","notificationUrl","notificationText","hasSlotAddToCart","pill","productName","subtitle","currency","onChange","filter","imgUrl","index","key","selected","outOfStockText","addToCartColor","waitingListText","disallowAddToCart","addToCartText","disallowAddToCartLabel"],"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 .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 &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\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: 1rem;\n right: auto;\n }\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 container-type: inline-size;\n\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 }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-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 @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 }\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 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-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 margin-bottom: 0;\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\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\nexport interface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n order?: number; // Aggiunta proprietà order\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 /** Indica se selezionare automaticamente la prima variazione */\n @Prop() autoSelectFirstVariation: boolean = true;\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 /** Flag per tracciare se le opzioni sono state ordinate */\n @State() optionsOrdered: boolean = false;\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 /**\n * Forza l'ordinamento delle variazioni (utile per debugging o situazioni edge-case)\n */\n @Method()\n async forceVariationsOrder() {\n this.optionsOrdered = false;\n setTimeout(() => {\n this.optionsOrdered = true;\n }, 1);\n }\n\n /**\n * Seleziona automaticamente la prima variazione se abilitato e se nessuna è già selezionata\n */\n private selectFirstVariationIfEnabled() {\n if (this.autoSelectFirstVariation && !this.selectedVariation && this.variations.length > 0) {\n // Ordiniamo le variazioni per ottenere la prima\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order || 999;\n const orderB = b.order || 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n // Selezioniamo la prima variazione\n const firstVariation = sortedVariations[0];\n this.selectedVariation = firstVariation;\n \n // Aggiorniamo anche la select se esiste\n setTimeout(() => {\n if (this.variationSelectEl) {\n this.variationSelectEl.value = firstVariation.code;\n }\n }, 50);\n \n // Emettiamo l'evento di selezione\n this.variationSelected.emit(firstVariation);\n }\n }\n\n /**\n * Seleziona una variazione specifica tramite code\n */\n @Method()\n async selectVariation(variationCode: string) {\n const variation = this.variations.find(v => v.code === variationCode);\n if (variation) {\n this.selectedVariation = variation;\n \n if (this.variationSelectEl) {\n this.variationSelectEl.value = variationCode;\n }\n \n this.variationSelected.emit(variation);\n return true;\n }\n return false;\n }\n\n /**\n * Seleziona la prima variazione disponibile\n */\n @Method()\n async selectFirstVariation() {\n if (this.variations.length > 0) {\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order || 999;\n const orderB = b.order || 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n return await this.selectVariation(sortedVariations[0].code);\n }\n return false;\n }\n\n /**\n * Ottiene la variazione attualmente selezionata\n */\n @Method()\n async getSelectedVariation(): Promise<Variation | null> {\n return this.selectedVariation || null;\n }\n\n @Listen('jump-card-ecommerce-option-connected')\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/', order: 1}\n \n // Aggiungiamo la nuova variazione solo se non esiste già\n const existingIndex = this.variations.findIndex(v => v.code === props.code);\n if (existingIndex === -1) {\n this.variations = [...this.variations, { ...props }];\n } else {\n // Se esiste già, la aggiorniamo\n this.variations = this.variations.map((v, i) => i === existingIndex ? { ...props } : v);\n }\n \n // Resettiamo il flag di ordinamento\n this.optionsOrdered = false;\n \n // Forziamo il re-render per applicare l'ordinamento dopo un brevissimo delay\n setTimeout(() => {\n this.optionsOrdered = true;\n // Selezioniamo automaticamente la prima variazione se abilitato\n this.selectFirstVariationIfEnabled();\n }, 10);\n }\n\n onVariationSelected() {\n let currentValue = this.variationSelectEl.value;\n \n // Ordiniamo sempre le variazioni prima di cercare quella selezionata\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order || 999;\n const orderB = b.order || 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n return a.code.localeCompare(b.code);\n });\n \n let variation = sortedVariations.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 // Ordiniamo sempre le variazioni al momento del render per garantire consistenza\n const sortedVariations = [...this.variations].sort((a, b) => {\n const orderA = a.order || 999;\n const orderB = b.order || 999;\n \n if (orderA !== orderB) {\n return orderA - orderB;\n }\n \n // Se order è uguale, ordina per codice alfanumericamente\n return a.code.localeCompare(b.code);\n });\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 {!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 {!this.isMini && this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\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 </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\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\">{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 || sortedVariations.length != 0 ?\n <div class=\"Body__Bottom\">\n {sortedVariations.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 {sortedVariations\n .filter((variation) => !variation.imgUrl)\n .map((variation, index) => (\n <option \n key={`${variation.code}-${variation.order || 999}-${index}`} \n value={variation.code}\n selected={this.selectedVariation?.code === variation.code}\n >\n {variation.label}\n </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"],"mappings":"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"}

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

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as a,H as i}from"./p-98d5dd1f.js";const r=":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;height:-webkit-fill-available;max-height:calc(100vh - var(--header-height));transition:0.3s all ease-in-out;background-color:var(--bg-drawer, #fff);padding:1rem;width:100%;max-width:var(--drawer-width);box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078);z-index:2;overflow:auto}.filtersDrawer[aria-hidden=false]{left:0;right:0;width:auto;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 1rem);left:calc(var(--drawer-width) - 2rem);background-color:var(--jump-filter-close-btn-bg, white);padding:1rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";const t=r;const s=class{constructor(a){e(this,a);this.direction="vertical";this.filterHeading="Filtra per";this.filterButtonLabel="Filtri";this.filterButtonIcon="sliders";this.mobileThreshold=768;this.filters=undefined;this.showCount=false;this.offCanvasOverlay=false;this.activeFilters=0;this.showMobileFilters=false;this.isMobile=false;this.offCanvasClasses="filtersDrawer__overlay"}filterChangeHandler(e){this.filters=Object.assign(Object.assign({},this.filters),{[e.detail.name]:e.detail.values});console.log("Received the custom filterChange event: ",this.filters)}handleResize(){this.isMobile=window.innerWidth<this.mobileThreshold}watchHandler(e,a){var i,r,t,s;if(e!==a){if(e){(i=this.mobileToggle)===null\|\|i===void 0?void 0:i.setAttribute("aria-expanded","true");(r=this.filtersDrawer)===null\|\|r===void 0?void 0:r.setAttribute("aria-hidden","false");this.offCanvasClasses="filtersDrawer__overlay filtersDrawer__overlay--active"}else{(t=this.mobileToggle)===null\|\|t===void 0?void 0:t.setAttribute("aria-expanded","false");(s=this.filtersDrawer)===null\|\|s===void 0?void 0:s.setAttribute("aria-hidden","true");this.offCanvasClasses="filtersDrawer__overlay"}}}async getFilters(){return this.filters}componentDidLoad(){this.handleResize()}render(){return a(i,{key:"a6887d6f754cdba0e3ec854c0e553d4805c62c63",mobileFilters:this.showMobileFilters},this.isMobile&&a("jump-button",{key:"0194221f6ba4be2f547d8b6495f94c9d716e8be1",ref:e=>{this.mobileToggle=e},buttonId:this.filterButtonIcon,variant:"primary",outline:true,onClick:()=>this.showMobileFilters=!this.showMobileFilters},a("slot",{key:"5b60281b75d958d605c97b69be6576f177538740",name:"prefix"},this.filterButtonIcon&&a("jump-icon",{key:"c85beb03fd5132192bfa5f2d83c1e5cec64c4f4e",library:"fa",category:"regular",name:this.filterButtonIcon,size:"small"}),this.filterButtonLabel),a("slot",{key:"9bf612b73c9c0d69172ed6caff94e1f34541c539",name:"suffix"},this.activeFilters>0&&a("jump-badge",{key:"8c01c39288672210dc546ecb72fa7ef4d9c60bef",label:this.activeFilters.toString(),variant:"success",soft:true,dimension:"dot"},"1"))),this.offCanvasOverlay&&a("div",{key:"b588e7ab489541c92a04df32ad40a5c31238451a",class:this.offCanvasClasses,onClick:()=>this.showMobileFilters=false}),a("div",{key:"af8c4b52c7a87461e98a63d2040999b179c6c372",ref:e=>{this.filtersDrawer=e},class:"filtersDrawer","data-variant":this.direction},!this.isMobile&&a("div",{key:"fde6a476ff39c470b91030a2ea00c73392a7644d",class:"filtersDrawer__header"},a("jump-icon",{key:"4173961bcb0943d9de12c853968e503917bf6063",class:"small",name:this.filterButtonIcon}),a("h3",{key:"c7e1982a2805e714acab2d9ca5ba3a3c8b925e6e"},this.filterHeading)),this.isMobile&&a("jump-icon",{key:"95e0e48852c12f9474482410e0a4aec7dd348d1f",library:"lucide",name:"x",size:"small",label:"",class:"filtersDrawer__close",onClick:()=>this.showMobileFilters=false}),a("slot",{key:"0185bb00a4bd55193ff3cf9594f45a3d2da9f8d9"})))}static get watchers(){return{showMobileFilters:["watchHandler"]}}};s.style=t;export{s as jump_filter};
2	+ //# sourceMappingURL=p-a5c6ed23.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["jumpFilterCss","JumpFilterStyle0","JumpFilter","filterChangeHandler","event","this","filters","Object","assign","detail","name","values","console","log","handleResize","isMobile","window","innerWidth","mobileThreshold","watchHandler","newValue","oldValue","_a","mobileToggle","setAttribute","_b","filtersDrawer","offCanvasClasses","_c","_d","getFilters","componentDidLoad","render","h","Host","key","mobileFilters","showMobileFilters","ref","el","buttonId","filterButtonIcon","variant","outline","onClick","library","category","size","filterButtonLabel","activeFilters","label","toString","soft","dimension","offCanvasOverlay","class","direction","filterHeading"],"sources":["src/components/jump-filter/jump-filter.scss?tag=jump-filter&encapsulation=shadow","src/components/jump-filter/jump-filter.tsx"],"sourcesContent":[":host {\n --primary-standard: var(--secondary-hard, #435171);\n //--jump-button-background-hover: var(--secondary-hard, #435171);\n --jump-button-background-hover: red;\n --jump-filter-close-btn-bg: white;\n --bg-drawer: var(--bg-drawer, #fff);\n --header-height: var(--header-height, 80px);\n --drawer-width: var(--drawer-width, 240px);\n --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n h3 {\n margin: 0;\n }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n opacity: 0;\n transition: opacity $duration $ease;\n\n &.filtersDrawer__overlay--active {\n opacity: 1;\n }\n}\n\n.filtersDrawer__overlay {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n z-index: 1;\n width: 100vw;\n height: 100vh;\n display: none;\n\n &.filtersDrawer__overlay--active {\n display: block;\n }\n\n @include fade-in-out();\n}\n\n.filtersDrawer {\n position: fixed;\n display: flex;\n flex-direction: column;\n gap: 2.5rem;\n left: -100vw;\n top: 0;\n height: -webkit-fill-available;\n max-height: calc(100vh - var(--header-height));\n transition: 0.3s all ease-in-out;\n background-color: var(--bg-drawer, #fff);\n padding: 1rem;\n width: 100%;\n max-width: var(--drawer-width);\n box-shadow: 8px 0 15px 0 #00000026;\n z-index: 2;\n overflow: auto;\n\n &[aria-hidden=\"false\"] {\n left: 0;\n right: 0;\n width: auto;\n transition: 0.3s all ease-in-out;\n\n .filtersDrawer__close {\n position: fixed;\n top: calc(var(--header-height) + 1rem);\n left: calc(var(--drawer-width) - 2rem);\n background-color: var(--jump-filter-close-btn-bg, white);\n padding: 1rem;\n box-shadow: 8px 0 15px 0 #00000026;\n }\n }\n\n @media (min-width: 768px) { //md breakpoint tailwind\n position: relative;\n left: 0;\n height: auto;\n max-width: initial;\n max-height: initial;\n box-shadow: none;\n }\n\n @media (max-width: 767px) {\n top: var(--header-height);\n }\n\n .filtersDrawer__header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5rem;\n }\n}\n","import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n @Prop() showCount: boolean = false;\n @Prop() offCanvasOverlay: boolean = false;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n this.offCanvasClasses = 'filtersDrawer__overlay';\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad() {\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {\n this.mobileToggle = el;\n }}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 &&\n <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n </slot>\n </jump-button>}\n\n {this.offCanvasOverlay &&\n <div class={this.offCanvasClasses}\n onClick={() => this.showMobileFilters = false}></div>}\n\n {<div\n ref={(el) => {\n this.filtersDrawer = el;\n }}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"small\" label=\"\" class={'filtersDrawer__close'}\n onClick={() => this.showMobileFilters = false}></jump-icon>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,ktDACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,wCAE0B,W,mBACf,a,uBACI,S,sBACD,U,qBACD,I,sCAEL,M,sBACO,M,mBAEH,E,uBACK,M,cACT,M,sBACO,wB,CAMpC,mBAAAC,CAAoBC,GAElBC,KAAKC,QAAOC,OAAAC,OAAAD,OAAAC,OAAA,GAAQH,KAAKC,SAAO,CAAE,CAACF,EAAMK,OAAOC,MAAON,EAAMK,OAAOE,SACpEC,QAAQC,IAAI,2CAA4CR,KAAKC,Q,CAO/D,YAAAQ,GACET,KAAKU,SAAWC,OAAOC,WAAaZ,KAAKa,e,CAI3C,YAAAC,CAAaC,EAAmBC,G,YAC9B,GAAID,IAAaC,EAAU,CACzB,GAAID,EAAU,EACZE,EAAAjB,KAAKkB,gBAAY,MAAAD,SAAA,SAAAA,EAAEE,aAAa,gBAAiB,SACjDC,EAAApB,KAAKqB,iBAAa,MAAAD,SAAA,SAAAA,EAAED,aAAa,cAAe,SAChDnB,KAAKsB,iBAAmB,uD,KACnB,EACLC,EAAAvB,KAAKkB,gBAAY,MAAAK,SAAA,SAAAA,EAAEJ,aAAa,gBAAiB,UACjDK,EAAAxB,KAAKqB,iBAAa,MAAAG,SAAA,SAAAA,EAAEL,aAAa,cAAe,QAChDnB,KAAKsB,iBAAmB,wB,GAS9B,gBAAMG,GACJ,OAAOzB,KAAKC,O,CAGd,gBAAAyB,GACE1B,KAAKS,c,CAGP,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,cAAe/B,KAAKgC,mBACvBhC,KAAKU,UAAYkB,EAAA,eAAAE,IAAA,2CAChBG,IAAMC,IACJlC,KAAKkB,aAAegB,CAAE,EAExBC,SAAUnC,KAAKoC,iBAAkBC,QAAS,UAAWC,QAAO,KAC5DC,QAAS,IAAMvC,KAAKgC,mBAAqBhC,KAAKgC,mBAC9CJ,EAAA,QAAAE,IAAA,2CAAMzB,KAAK,UACRL,KAAKoC,kBACJR,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,KAAKC,SAAS,UAAUpC,KAAML,KAAKoC,iBAAkBM,KAAK,UAC9E1C,KAAK2C,mBAERf,EAAA,QAAAE,IAAA,2CAAMzB,KAAK,UACRL,KAAK4C,cAAgB,GACpBhB,EAAA,cAAAE,IAAA,2CAAYe,MAAO7C,KAAK4C,cAAcE,WAAYT,QAAQ,UAAUU,KAAI,KAACC,UAAU,OAAK,OAI7FhD,KAAKiD,kBACJrB,EAAA,OAAAE,IAAA,2CAAKoB,MAAOlD,KAAKsB,iBACZiB,QAAS,IAAMvC,KAAKgC,kBAAoB,QAE9CJ,EAAA,OAAAE,IAAA,2CACCG,IAAMC,IACJlC,KAAKqB,cAAgBa,CAAE,EAEzBgB,MAAM,gBAAe,eAAelD,KAAKmD,YACvCnD,KAAKU,UACLkB,EAAA,OAAAE,IAAA,2CAAKoB,MAAO,yBACVtB,EAAA,aAAAE,IAAA,2CAAWoB,MAAM,QAAQ7C,KAAML,KAAKoC,mBACpCR,EAAA,MAAAE,IAAA,4CAAK9B,KAAKoD,gBAEbpD,KAAKU,UAAYkB,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,SAASnC,KAAK,IAAIqC,KAAK,QAAQG,MAAM,GAAGK,MAAO,uBACvDX,QAAS,IAAMvC,KAAKgC,kBAAoB,QACrEJ,EAAA,QAAAE,IAAA,8C"}

package/dist/types/components/jump-filter/jump-filter.stories.d.ts CHANGED Viewed

@@ -38,3 +38,4 @@ export declare const WithSelectFilter: any;
 export declare const WithCheckboxFilter: any;
 export declare const WithMixedFilters: any;
 export declare const WithMoreFilters: any;
+export declare const MobileDrawer: any;

package/package.json CHANGED Viewed

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