npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.0 → 0.3.2 - Mend

@jumpgroup/jump-design-system 0.3.0 → 0.3.2

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

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

	@@ -1 +1 @@
1	- {"file":"jump-card-ecommerce.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 1;\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: 1;\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-top-left-radius: 3px;\n border-top-right-radius: 3px;\n aspect-ratio: 1/1;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\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\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\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-padding) 0;\n\n & > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n & > * {\n flex: 0 1 auto;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\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\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n }\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\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n JumpCardEcommerce: HTMLElement;\n\n /* ---------------------- @PROPERTIES ------------------------- /\n\n /* Indicate if card has only icon button/\n @Prop() onlyIconButton: boolean = false;\n\n /* Indicate if card has background/\n @Prop() hasBackground: boolean = false;\n\n /* Indicates the badge of the card/\n @Prop() badge: string;\n\n /* Indicates if the product is favorite /\n @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n /* Indicates the link of the card/\n @Prop() link: string;\n\n /* Indicates the image's src of the card/\n @Prop() img: string ;\n\n /* Indicates the img's alt of the card/\n @Prop() imgAlt: string;\n\n /* Indicates the videoSrc of the card/\n @Prop() videoSrc: string; \n\n /* Indicate if the product is added to cart/\n @Prop() addedToCart: boolean = false;\n\n /* Indicates the notificationUrl of the card/\n @Prop() notificationUrl: string;\n\n /* Indicates the notificationText of the card/\n @Prop() notificationText: string = 'Aggiunto al carrello';\n\n /* Indicates the title of the card/\n @Prop() productName: string ;\n\n /* Indicates the subtitle of the card/\n @Prop() subtitle: string;\n\n /* Indicates the ID of the product, can be also a SKU/\n @Prop() productId: string ;\n\n /* Indicates the price of the card /\n @Prop() price: number;\n\n /* Indicates the sale price of the card /\n @Prop() salePrice: number;\n\n /* Indicates the currency of the card /\n @Prop() currency: string;\n\n /* Indicates if the product is outOfStock /\n @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n \n /* Indicates the outOfStockText of the product/\n @Prop() outOfStockText: string;\n\n /* Indicates the button class of the add to cart / notification button /\n @Prop() addtoCartText: string ;\n\n /* Indicates the button class of the add to cart / notification button /\n @Prop() waitingListText: string ;\n\n /* Indicate if the user request to be notified when te product is avaible/\n @Prop() addToWaitingList: boolean = false;\n\n /* Indicates if the user can choose how much quantity of the product add to cart /\n @Prop({mutable:true, reflect: true}) quantity: boolean = false;\n\n /* Indicate if the quantity is change/\n @Prop() changedQuantity: boolean = false;\n\n /* Indicate if the variation is change/\n @Prop() changedVariation: boolean = false;\n\n // /* Indicates the inizial value of input quantity/\n // @Prop() quantity: number ;\n\n\n / ---------------------- @EVENTS ------------------------- /\n \n @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n @Event({eventName: 'jump-change-quantity'}) changeQuantity: EventEmitter;\n\n @Event({eventName: 'jump-change-variation'}) changeVariation: EventEmitter;\n\n \n / ---------------------- @LIFECYCLE ------------------------- /\n\n componentWillLoad() {\n // this._selectVariations = this.selectVariations?.split(',');\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite\n }\n ); \n }\n\n addProductToCart() {\n this.addedToCart = true;\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: 2 // da prendere dal quantity\n // mancano le variazioni\n };\n this.productAddToCart.emit(payload);\n console.log(\"productAddToCart payload:\", payload);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList\n }\n )\n }\n\n changeQuantityProduct(event: Event) {\n // const quantityInput = this.JumpCardEcommerce.querySelector('jump-quantity');\n // const quantityValue = quantityInput.value; // Access the `value` property\n const quantityElement = event.target as HTMLInputElement;\n console.log('Valore selezionato:', quantityElement);\n // const quantityValue = quantityElement.value;\n\n this.changedQuantity = true;\n const payload = {\n productId: this.productId,\n changedQuantity: this.changedQuantity,\n quantity: 2 // da sostituire con quaintity value\n };\n this.changeQuantity.emit(payload);\n console.log(\"changeQuantity payload:\", payload)\n }\n\n changeVariationBody(event: Event) {\n const selectElement = event.target as HTMLSelectElement;\n const selectedValue = selectElement.value;\n\n this.changedVariation = true;\n const payload = {\n productId: this.productId,\n changedVariation: this.changedVariation,\n variation: selectedValue // da sostituire\n };\n this.changeVariation.emit(payload);\n console.log(\"changeVariation payload:\", payload)\n }\n\n render() {\n const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n\n return (\n\n <Host ref={(el) => {this.JumpCardEcommerce = el;}} >\n {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" label={this.badge}></jump-badge> : ''}\n \n <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'neutral' : 'primary'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'light' : 'solid'} size=\"medium\"></jump-icon>\n </jump-button> \n\n <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n <a href={this.link}>\n {this.img && !this.videoSrc ? <img src={this.img} alt={this.imgAlt}></img> : ''}\n {this.videoSrc && !this.img ? \n <video autoplay> \n <source src={this.videoSrc} type=\"video/mp4\"/> \n <source src={this.videoSrc} type=\"video/mov\"/> \n <source src={this.videoSrc} type=\"video/webm\"/> \n </video> : ''}\n </a> \n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text> \n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon> \n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n {this.onlyIconButton ? \n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}> \n <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon> \n </jump-button> \n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n <div>\n <div class=\"Info\">\n <div class=\"Product\">{this.productName}</div>\n <div class=\"Subtitle\">{this.subtitle}</div>\n </div>\n\n <div class=\"Price\">\n <div class=\"Price__Discount\">-5%</div>\n <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n {this.currency}{this.price}\n </div>\n <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n </div>\n </div>\n <div>\n {/ manca la proprietà se ci sono variazioni o no /}\n <select name=\"select\" id=\"selectID\" onChange={(event) => this.changeVariationBody(event)}>\n <option value='m'>medium</option>\n <option value='l'>large</option>\n <option value='xl'>extra large</option>\n </select>\n\n {this.quantity ? <jump-quantity onClick={(event) => this.changeQuantityProduct(event)}></jump-quantity> : ''}\n \n {/ <slot name=\"select\"></slot>\n <slot name=\"quantity\"></slot> */}\n </div>\n \n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\n \n {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n \n { this.outOfStock ? \n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}> \n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'} \n </jump-button> : ''\n }\n\n { !this.outOfStock && !this.onlyIconButton ? \n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}> \n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n {this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello'} \n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}"],"version":3}
1	+ {"file":"jump-card-ecommerce.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 1;\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: 1;\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-top-left-radius: 3px;\n border-top-right-radius: 3px;\n aspect-ratio: 1/1;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\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\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\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-padding) 0;\n\n & > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n & > * {\n flex: 0 1 auto;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\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\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n }\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\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n }\n}\n\n:host(.Pippo) {\n background-color: red;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element} from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- /\n\n /* Indicate if card has only icon button/\n @Prop() onlyIconButton: boolean = false;\n\n /* Indicate if card has background/\n @Prop() hasBackground: boolean = false;\n\n /* Indicates the badge of the card/\n @Prop() badge: string;\n\n /* Indicates if the product is favorite /\n @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n /* Indicates the link of the card/\n @Prop() link: string;\n\n /* Indicates the image's src of the card/\n @Prop() img: string ;\n\n /* Indicates the img's alt of the card/\n @Prop() imgAlt: string;\n\n /* Indicates the videoSrc of the card/\n @Prop() videoSrc: string; \n\n /* Indicate if the product is added to cart/\n @Prop() addedToCart: boolean = false;\n\n /* Indicates the notificationUrl of the card/\n @Prop() notificationUrl: string;\n\n /* Indicates the notificationText of the card/\n @Prop() notificationText: string = 'Aggiunto al carrello';\n\n /* Indicates the title of the card/\n @Prop() productName: string ;\n\n /* Indicates the subtitle of the card/\n @Prop() subtitle: string;\n\n /* Indicates the ID of the product, can be also a SKU/\n @Prop() productId: string ;\n\n /* Indicates the price of the card /\n @Prop() price: number;\n\n /* Indicates the sale price of the card /\n @Prop() salePrice: number;\n\n /* Indicates the currency of the card /\n @Prop() currency: string;\n\n /* Indicates if the product is outOfStock /\n @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n \n /* Indicates the outOfStockText of the product/\n @Prop() outOfStockText: string;\n\n /* Indicates the button class of the add to cart / notification button /\n @Prop() addtoCartText: string ;\n\n /* Indicates the button class of the add to cart / notification button /\n @Prop() waitingListText: string ;\n\n /* Indicate if the user request to be notified when te product is avaible/\n @Prop() addToWaitingList: boolean = false;\n\n /* Indicate if the variation is change/\n @Prop() changedVariation: boolean = false;\n\n / ---------------------- @STATE ------------------------- / \n\n // è una proprietà che viene cambiata solo da dentro\n\n quantity: number;\n\n // @Watch('quantity') \n // funziona solo dalla seconda volta in poi \n // watchQuantity(newValue, oldValue) {\n // console.log('quantity changed:', newValue, oldValue);\n // }\n\n / ---------------------- @EVENTS ------------------------- /\n \n @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n @Event({eventName: 'jump-change-variation'}) changeVariation: EventEmitter;\n \n / ---------------------- @LIFECYCLE ------------------------- /\n\n componentWillLoad() {}\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n \n if(this.jumpQuantityEl){\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n\n console.log('Quantity:', this.quantity)\n }\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.removeEventListener('jump-change',this.onQuantityChange);\n }\n }\n\n / ---------------------- @METHODS ------------------------- /\n onQuantityChange(e) {\n this.quantity = e.detail.value;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite\n }\n ); \n }\n\n addProductToCart() {\n this.addedToCart = true;\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity\n // mancano le variazioni\n };\n this.productAddToCart.emit(payload);\n console.log(\"productAddToCart payload:\", payload);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList\n }\n )\n }\n\n changeVariationBody(event: Event) {\n const selectElement = event.target as HTMLSelectElement;\n const selectedValue = selectElement.value;\n\n this.changedVariation = true;\n const payload = {\n productId: this.productId,\n changedVariation: this.changedVariation,\n variation: selectedValue // da sostituire\n };\n this.changeVariation.emit(payload);\n console.log(\"changeVariation payload:\", payload)\n }\n\n \n render() {\n const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n function calculateDiscount(price: number, salePrice: number): string {\n const discount = ((price - salePrice) / price) 100;\n return discount.toFixed(0);\n };\n\n return (\n <Host>\n {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" label={this.badge}></jump-badge> : ''}\n \n <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'neutral' : 'primary'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'light' : 'solid'} size=\"medium\"></jump-icon>\n </jump-button> \n\n <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n <a href={this.link}>\n {this.img && !this.videoSrc ? <img src={this.img} alt={this.imgAlt}></img> : ''}\n {this.videoSrc && !this.img ? \n <video autoplay> \n <source src={this.videoSrc} type=\"video/mp4\"/> \n <source src={this.videoSrc} type=\"video/mov\"/> \n <source src={this.videoSrc} type=\"video/webm\"/> \n </video> : ''}\n </a> \n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text> \n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon> \n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n {this.onlyIconButton ? \n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}> \n <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon> \n </jump-button> \n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n <div>\n <div class=\"Info\">\n <div class=\"Product\">{this.productName}</div>\n <div class=\"Subtitle\">{this.subtitle}</div>\n </div>\n\n <div class=\"Price\">\n <div class=\"Price__Discount\">\n {calculateDiscount(this.price, this.salePrice)}%\n </div>\n <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n {this.currency}{this.price}\n </div>\n <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n </div>\n </div>\n <div>\n \n <slot name=\"select\"></slot>\n <slot name=\"quantity\"></slot>\n </div>\n \n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\n \n {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n \n { this.outOfStock ? \n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}> \n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'} \n </jump-button> : ''\n }\n\n { !this.outOfStock && !this.onlyIconButton ? \n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}> \n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n {this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello'} \n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}"],"version":3}

package/dist/cjs/jump-card.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-418c607f.js');
+const index = require('./index-674508e2.js');
 const jumpCardCss = "jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:var(--neutral-white);--jump-card-color-dark:var(--neutral-white);--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative;object-fit:cover}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
 const JumpCardStyle0 = jumpCardCss;
@@ -23,8 +23,8 @@ const AppCard = class {
         this.videoSrc = '';
     }
     render() {
-        return (index.h(index.Host, { key: 'a6d672e0dc05d8d596bf3eb4472339f2b6ad0e33', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? index.h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
-            index.h("video", { autoplay: true }, index.h("source", { src: this.videoSrc, type: "video/mp4" }), index.h("source", { src: this.videoSrc, type: "video/mov" }), index.h("source", { src: this.videoSrc, type: "video/webm" })) : '', index.h("div", { key: 'cffc3af0b3c23d9738427113f03eb7f17eec99da', class: "Content" }, index.h("slot", { key: '69b0806f909ecea66e1b83d51ddd6d02003401ea', name: "body" }), index.h("slot", { key: '9830621fc1314e5f99f3e3f4b1626cb7feb29cb2', name: "footer" }))));
+        return (index.h(index.Host, { key: '7cb28f9f3ef1a64c859b7b4de719ca9dc58eea8d', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? index.h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
+            index.h("video", { autoplay: true }, index.h("source", { src: this.videoSrc, type: "video/mp4" }), index.h("source", { src: this.videoSrc, type: "video/mov" }), index.h("source", { src: this.videoSrc, type: "video/webm" })) : '', index.h("div", { key: 'dabe68c686a49f1af7386182ad4b14181d7c7bcc', class: "Content" }, index.h("slot", { key: '18be998730900c91de0e93e410ae34abccff4bfc', name: "body" }), index.h("slot", { key: 'd9dfbf2a4cf014ceb761432cd435179689d5baa6', name: "footer" }))));
     }
 };
 AppCard.style = JumpCardStyle0;

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

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

package/dist/cjs/jump-filter.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-418c607f.js');
+const index = require('./index-674508e2.js');
 const jumpFilterCss = ":host h3{margin:0}:host .filtersDrawer{display:flex;flex-direction:column;gap:1rem}";
 const JumpFilterStyle0 = jumpFilterCss;
@@ -48,8 +48,8 @@ const JumpFilter = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a25627f52d4e4eabd9714bca4605f7d506e8302a', mobileFilters: this.showMobileFilters }, this.isMobile && index.h("jump-button", { key: 'e58ab446793fd152b0e724ea8067f1030d6ecaaa', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, index.h("slot", { key: '1ffb7d8f787733c037da73c4643d016a5d314c85', name: "prefix" }, this.filterButtonIcon && index.h("jump-icon", { key: 'ce09716fa23121cd5b4921eab94260d6a931a36a', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), index.h("slot", { key: 'fd339c7580f3e142fd80b4c4eb8503391b7ebfa2', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), index.h("div", { key: '078c8038b81200c09f7ddf8d6d054449e896554b', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
-            index.h("div", { key: '5476fe397f3599a50548b0ea4f47b4c66bbbd6cd', class: 'filtersDrawer__header' }, index.h("jump-icon", { key: '1e16b65feb8f923c2b9d1f421d939f6eeee136f7', class: "small", name: this.filterButtonIcon }), index.h("h3", { key: '02f99e915aa045d62d7afedaf0d216adbf8db7d0' }, this.filterHeading)), index.h("slot", { key: 'aa697d79b5ca21bdcf75e020780019effd19898c' }))));
+        return (index.h(index.Host, { key: '66c02e0b1d1e1b57c12a7124874b4d41f0281579', mobileFilters: this.showMobileFilters }, this.isMobile && index.h("jump-button", { key: 'c6533178a0f3a4b389f289ca919925c160a24df8', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, index.h("slot", { key: 'd95b2240c4a7cfec153213ba73c5679b9e72d227', name: "prefix" }, this.filterButtonIcon && index.h("jump-icon", { key: '9b964e09eb0942e796b4bee737a97326e0363c4e', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), index.h("slot", { key: '39cc668bd11bcbff18521fed0216024676827487', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), index.h("div", { key: 'f864e224be6ef13cd2530cca0e4e61366253ccf0', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
+            index.h("div", { key: 'e56713bbe8701eb7c5cabf9a768206c688bebfac', class: 'filtersDrawer__header' }, index.h("jump-icon", { key: 'eb27d23ae68ed0e245d6ef2d9feb600a6e47ebd2', class: "small", name: this.filterButtonIcon }), index.h("h3", { key: '4396ffb6e8a10397fe12c322192ab085e06ffa32' }, this.filterHeading)), index.h("slot", { key: '54b6684aad46df572655a8f29e4c865182c0f1a3' }))));
     }
 };
 JumpFilter.style = JumpFilterStyle0;

package/dist/cjs/jump-filtergroup.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-418c607f.js');
+const index = require('./index-674508e2.js');
 const jumpFiltergroupCss = ":host{display:block}:host slot{display:flex;flex-direction:column;gap:0.25rem;margin-bottom:1rem}h5{margin:0 0 0.25rem}[data-hide=true]{display:none}";
 const JumpFiltergroupStyle0 = jumpFiltergroupCss;
@@ -108,8 +108,8 @@ const JumpFiltergroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '839a19d9b3c6e54a9852942d5ed2742f0c3bb148' }, this.heading && index.h("h5", { key: 'e6ee76715547568a0a523238bccf1270bbf5e51d' }, this.heading), index.h("div", { key: 'bf592042f4ac6d24f1fc781a1bfa243096e6533b', class: "filterGroup" }, index.h("slot", { key: '017cdc449f638dfbd280053c7883ae2cdaf460c7', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
-            index.h("jump-button", { key: '4ab0117c15d7de1b4a026444f0492810bffe13bc', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, index.h("jump-icon", { key: '720871af9f4c520b8e11a72615300243b8d14dcb', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
+        return (index.h(index.Host, { key: '6ea498729a7279ad7b686ef158e6d912c7ec86ce' }, this.heading && index.h("h5", { key: 'a4d4a1b71dec49d90bd92a30c2335c8a69034906' }, this.heading), index.h("div", { key: '215a8386f89ba7026b2e1b05aad67157e7f512d6', class: "filterGroup" }, index.h("slot", { key: '6e96d228078df165e364adccae8d6dceac8626f4', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
+            index.h("jump-button", { key: '6f1a595c19d8d7528b8f99d3665607e56b4c1d27', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, index.h("jump-icon", { key: '79e9c1540e53fee842bc5ba0658b0437eddbf47d', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
     }
 };
 JumpFiltergroup.style = JumpFiltergroupStyle0;

package/dist/cjs/jump-pagination-table.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-418c607f.js');
+const index = require('./index-674508e2.js');
 const jumpPaginationTableCss = ":host{display:block}.JumpPaginationTable{--jump-pagination-table-label:var(--neutral-grey-secondary);--jump-pagination-table-arrows:var(--neutral-grey-secondary);--jump-pagination-table-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPaginationTable__Wrapper{display:flex;justify-content:space-between}.JumpPaginationTable__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPaginationTable__Wrapper .elementsPerPage label{color:var(--jump-pagination-table-label);font-size:var(--fs-300);font-weight:normal}.JumpPaginationTable__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-table-label)}.JumpPaginationTable__Wrapper .indicators .arrow{color:var(--jump-pagination-table-arrows);display:flex;align-items:center;gap:10px}.JumpPaginationTable__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPaginationTable__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-table-arrows-disabled)}.JumpPaginationTable__Wrapper .indicators .elements{color:var(--jump-pagination-table-label);display:flex;align-items:center;gap:5px}";
 const JumpPaginationTableStyle0 = jumpPaginationTableCss;
@@ -71,9 +71,21 @@ const JumpPaginationTable = class {
     /* --------------------- RENDER ------------------------------- */
     render() {
         var _a;
-        return (index.h(index.Host, { key: '7aaf182b98f9dbdbb1d6534a1d7b466bbc486fca', class: "JumpPaginationTable" }, index.h("div", { key: 'b8a5d5213ae3a20ee69aeb75b0d82c58ab4d5200', class: "JumpPaginationTable__Wrapper" }, index.h("div", { key: '2de29a7b2bb549e3b6e4260429651c1cc3ba72b6', class: "elementsPerPage" }, index.h("label", { key: 'a9d541046112f0a44239b3d61dea7a80924e56a6', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { key: '28db5dfa88e11493b41a1b846ae35da95ab97926', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (index.h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), index.h("div", { key: '67f6433160f242f108682af2e97c6fdca2136836', class: "indicators" }, index.h("div", { key: 'a2babacab58ca903d543396f184ac0e82af517c0', class: "elements" }, index.h("span", { key: 'b50d80c5aff8d99a9146fb22a7624f3c47784f78' }, index.h("span", { key: '33e54e9d66a4c80ed6c85ad3ac48e82bd1b329f0' }, this.first), " - ", index.h("span", { key: '925393912439fb60530f18eb863de15b22e41f25' }, this.last), " ", this.pagLabel, " ", index.h("span", { key: '1d27a6418dbe2a43e18b99bb48164ffbc0c2c8ca' }, this.total))), index.h("div", { key: '7d5f3508e4110320bf990c51e8f324d1e2c3cb8a', class: "arrow" }, this.showFirstAndLast &&
-            index.h("button", { key: '6807e1defb67535f7ca92443d6869ae203155226', onClick: () => this.doChangePage('first'), disabled: this.first === 1 }, index.h("jump-icon", { key: '221eda90c3a22540531674ff4bf6e980fded8e22', slot: "prefix", name: "chevrons-left" })), index.h("button", { key: '7cc613b04ac2aee3621fe8d8375afc5fbfffe41b', onClick: () => this.doChangePage('previous'), disabled: this.first === 1 }, index.h("jump-icon", { key: 'e05d4ea32e2f48fb59c768a6f5a7589b16dbabe2', slot: "prefix", name: "chevron-left" })), index.h("button", { key: 'dc347685f6183ed76c4b3e0ac1e9b762d974ef39', onClick: () => this.doChangePage('next'), disabled: this.last === this.total }, index.h("jump-icon", { key: 'd2b9da97638a1d53936d7ff238ee93f0eff910c2', slot: "prefix", name: "chevron-right" })), this.showFirstAndLast &&
-            index.h("button", { key: '9a4a7253847f4e60ae44866b3e12d8623562f7f6', onClick: () => this.doChangePage('last'), disabled: this.last === this.total }, index.h("jump-icon", { key: 'bcec81a82757e92facd426c351986b19552c9506', slot: "prefix", name: "chevrons-right" })))))));
+        return (index.h(index.Host, { key: '824d23ed1c7c26ea21047e5ce764887d526b2df6', class: "JumpPaginationTable" }, index.h("div", { key: '742793df17e3f1826768d7839905baddd0223d2b', class: "JumpPaginationTable__Wrapper" }, index.h("div", { key: 'b11952c253e2472672418fc1c48ab59a1ba06e51', class: "elementsPerPage" }, index.h("label", { key: '9dd4f75b634d818787f050bf2fcf01ef4faad36e', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { key: 'f33c5d47808e09b0d6cef474b29373564243c3a2', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (index.h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), index.h("div", { key: '392ede73df269175c997b713f9a4a5ecd92a0e25', class: "indicators" }, index.h("div", { key: '2438ecab0062bb1fec07d62e32597e2b2aba3fe4', class: "elements" }, index.h("span", { key: '49e7ad9c4e6298c41b6dba1d984bc5649b15bbbe' }, index.h("span", { key: '471b63b04e31295192e992f9c61e31878e1cb04d' }, this.first), " - ", index.h("span", { key: 'b1d61554e28c1e254efc1cf6768da9480a363aea' }, this.last), " ", this.pagLabel, " ", index.h("span", { key: 'b0727788ea7159d9bc07708814429c95866faa62' }, this.total))), index.h("div", { key: '0aa5a04cb2837c519790d43805f83cca903eca7e', class: "arrow" }, this.showFirstAndLast &&
+            // <button
+            //   onClick={() => this.doChangePage('first')}
+            //   disabled={this.first === 1}
+            // >
+            //   <jump-icon slot="prefix" name="chevrons-left"></jump-icon>
+            // </button>
+            index.h("jump-button", { key: 'd767d7705db97eecb2d9111eca909f633c4ae6fa', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", index.h("jump-icon", { key: 'f6799dbdd47a0e845bf7860585c21f5b06d39811', slot: "suffix", name: "chevrons-left" }), " "), index.h("jump-button", { key: 'd417512e45c62fbed1a1780da00fb01dea27a7e1', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", index.h("jump-icon", { key: '22199b55ffcfc402f01b9880a728a86b00dc47d3', slot: "suffix", name: "chevron-left" }), " "), index.h("jump-button", { key: 'ea388be01e0be9adb03033e94665078cb30f64a2', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", index.h("jump-icon", { key: '1cdb6a7d147ad4757e3b7c717e0bd1fab8e356fb', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            // <button
+            //   onClick={() => this.doChangePage('last')}
+            //   disabled={this.last === this.total}
+            // >
+            //   <jump-icon slot="prefix" name="chevrons-right"></jump-icon>
+            // </button>
+            index.h("jump-button", { key: '2309eeed0c9a78ffaf9c886979ff35f566841592', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", index.h("jump-icon", { key: 'f8a929bcdbd2b488cb1bf481a2247fa8d0aa1daf', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get watchers() { return {
         "elPerPage": ["elPerPageChanged"]

package/dist/cjs/jump-pagination-table.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-pagination-table.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- /\n\n / ---------------------- @ELEMENT ---------------------------- /\n\n / ---------------------- @STATE ------------------------------ /\n\n / ---------------------- @PROPERTIES ------------------------- /\n\n /\n Values for the elements per page select\n /\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /\n Number of elements per page selected\n /\n @Prop() elPerPage: number = 10;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /\n Label for the elements per page select\n /\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /\n Total of elements\n /\n @Prop({ reflect: true }) total: number = 100; \n\n /\n First element of the page\n /\n @Prop({ reflect: true }) first: number = 1;\n\n /\n Last element of the page\n /\n @Prop({ reflect: true }) last: number = 10;\n\n /\n Show button to navigate so first e last page\n /\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n / -------------------- LYFECYCLE EVENTS ---------------------- /\n componentWillLoad() {\n this.elPerPage = this.elementsRanges[0];\n }\n\n / -------------------- @LISTEN ------------------------------- /\n\n / -------------------- @METHOD ------------------------------- /\n\n / -------------------- LOCAL METHODS ------------------------- /\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n / --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRanges.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <button \n onClick={() => this.doChangePage('first')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n </button>\n }\n <button\n onClick={() => this.doChangePage('previous')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n </button>\n <button\n onClick={() => this.doChangePage('next')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n </button>\n {this.showFirstAndLast &&\n <button\n onClick={() => this.doChangePage('last')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n </button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-pagination-table.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- /\n\n / ---------------------- @ELEMENT ---------------------------- /\n\n / ---------------------- @STATE ------------------------------ /\n\n / ---------------------- @PROPERTIES ------------------------- /\n\n /\n Values for the elements per page select\n /\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /\n Number of elements per page selected\n /\n @Prop() elPerPage: number = 10;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /\n Label for the elements per page select\n /\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /\n Total of elements\n /\n @Prop({ reflect: true }) total: number = 100; \n\n /\n First element of the page\n /\n @Prop({ reflect: true }) first: number = 1;\n\n /\n Last element of the page\n /\n @Prop({ reflect: true }) last: number = 10;\n\n /\n Show button to navigate so first e last page\n /\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n / -------------------- LYFECYCLE EVENTS ---------------------- /\n componentWillLoad() {\n this.elPerPage = this.elementsRanges[0];\n }\n\n / -------------------- @LISTEN ------------------------------- /\n\n / -------------------- @METHOD ------------------------------- /\n\n / -------------------- LOCAL METHODS ------------------------- /\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n / --------------------- RENDER ------------------------------- /\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRanges.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n // <button \n // onClick={() => this.doChangePage('first')}\n // disabled={this.first === 1}\n // >\n // <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n // </button>\n <jump-button onClick={() => this.doChangePage('first')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n {/ <button\n onClick={() => this.doChangePage('previous')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n </button> /}\n <jump-button onClick={() => this.doChangePage('previous')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => this.doChangePage('next')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {/ <button\n onClick={() => this.doChangePage('next')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n </button> */}\n {this.showFirstAndLast &&\n // <button\n // onClick={() => this.doChangePage('last')}\n // disabled={this.last === this.total}\n // >\n // <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n // </button>\n <jump-button onClick={() => this.doChangePage('last')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/cjs/jump-pagination.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-418c607f.js');
+const index = require('./index-674508e2.js');
-const jumpPaginationCss = ":host{display:block}.JumpPagination{--jump-pagination-label:var(--neutral-grey-secondary);--jump-pagination-arrows-color:var(--neutral-grey-secondary);--jump-pagination-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-label)}.JumpPagination__Wrapper .indicators .arrow{color:var(--jump-pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--jump-pagination-label);display:flex;align-items:center;gap:5px}";
+const jumpPaginationCss = ":host{display:block;--jump-button-color:yellow}.JumpPagination{--jump-pagination-label:var(--neutral-grey-secondary);--jump-pagination-arrows-color:var(--neutral-grey-secondary);--jump-pagination-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-label)}.JumpPagination__Wrapper .indicators .arrow{color:var(--jump-pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--jump-pagination-label);display:flex;align-items:center;gap:5px}";
 const JumpPaginationStyle0 = jumpPaginationCss;
 const JumpPagination = class {
@@ -32,9 +32,22 @@ const JumpPagination = class {
     }
     /* --------------------- RENDER ------------------------------- */
     render() {
-        return (index.h(index.Host, { key: '91a535355690cc66cac5f6c7ba7b770cc1898d39', class: "JumpPagination" }, index.h("div", { key: 'b14a24e6c1f4d1cf7348eaacd2a77cd828eccb78', class: "JumpPagination__Wrapper" }, index.h("div", { key: '4492c23fc92b7aba537cb3f9025524a6bb07ce6c', class: "indicators" }, index.h("div", { key: 'f48411d785dd35e6404772c1d39d9d78f3da462b', class: "elements" }, index.h("span", { key: '1d2d195a9ec45c2bd5795b4474de9dc052af22d5' }, index.h("span", { key: 'c7f9f4473cc2e82e754c3748eb04704f62676e52' }, this.current), " ", this.pagLabel, " ", index.h("span", { key: 'c1a2a36aef2b86aef07aa040d4d5c9043aeaf75e' }, this.last))), index.h("div", { key: 'a2645af8e6ce12cc897796fa132dba44f448acd2', class: "arrow" }, this.showFirstAndLast &&
-            index.h("button", { key: 'ee246362f466d4691d31f8efc7182ca7c5e9963f', onClick: () => { this.current = 1; }, disabled: (this.current === 1) ? true : false }, " ", index.h("jump-icon", { key: 'e132a8f0c4aad2fb5924e54ad1015315983f2be5', slot: "prefix", name: "chevrons-left" }), "   "), index.h("button", { key: '0c7144d281a536b73fda1ac94a36e54a17af846b', onClick: () => { this.current--; }, disabled: (this.current === 1) ? true : false }, " ", index.h("jump-icon", { key: '15d1c8b75d229cc33349145bad0ac1dfb5eac83e', slot: "prefix", name: "chevron-left" }), "   "), index.h("button", { key: '0721ba5bfb54732174707e61833ceb19d5c8c2fa', onClick: () => { this.current++; }, disabled: (this.current === this.last) ? true : false }, " ", index.h("jump-icon", { key: '2f0545ccb0da5032604fe535af035be5059508e0', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
-            index.h("button", { key: '1a62859d3dd69ac106335f9fb3d605ec90d685a7', onClick: () => { this.current = this.last; }, disabled: (this.current === this.last) ? true : false }, " ", index.h("jump-icon", { key: 'de0dd15cf47d11a59118ca3b8f0999ef60c66997', slot: "prefix", name: "chevrons-right" }), "   "))))));
+        return (index.h(index.Host, { key: 'fff2409f80165635fb36aff91e928053a758e56d', class: "JumpPagination" }, index.h("div", { key: '02def4c71603b81f531c66c612fa492fa665631b', class: "JumpPagination__Wrapper" }, index.h("div", { key: '4bacda248ee1ee095e9272f0948df3f8d8e539e3', class: "indicators" }, index.h("div", { key: 'b344407f8e6f07cda556fd7f1f272763272786c8', class: "elements" }, index.h("span", { key: 'f2e31e33e8608244820bfc4596c47f6234cc25f2' }, index.h("span", { key: 'a64da6ab40dbea7f7fbeaafeb1a06ea2242993cc' }, this.current), " ", this.pagLabel, " ", index.h("span", { key: '5a6b9a269ea390192cab4ec6319bc4cca0883921' }, this.last))), index.h("div", { key: '01878b6a1ba85feb505ec230085f6cbff2edddca', class: "arrow" }, this.showFirstAndLast &&
+            // <button
+            //   onClick={() => {this.current = 1} }
+            //   disabled={(this.current === 1) ? true : false}>
+            //     <jump-icon library="fa" category="regular" name="chevrons-left" size="small" slot="prefix"
+            //     disabled={(this.current === 1) ? true : false}
+            //     ></jump-icon>
+            // </button>
+            index.h("jump-button", { key: 'b59a7068f61b1e1f7908e5bacd9dd029eb06f4bd', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", index.h("jump-icon", { key: '559950d3f0e77790efc1c301d1ce8e0ad2d9ab44', slot: "suffix", name: "chevrons-left" }), " "), index.h("jump-button", { key: '5e48895c5b5c39a468cac1b39d646a105288e0f4', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", index.h("jump-icon", { key: '6035d9060e9ea7ad1d0156dd1295cfb689578263', slot: "suffix", name: "chevron-left" }), " "), index.h("jump-button", { key: '06589d58a7202868b97ead74d5e7f7d1e3f66400', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", index.h("jump-icon", { key: '2e484cd77ece285b0e6e72941b06eab8e571c968', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            // <button
+            //   onClick={() => {this.current = this.last}}
+            //   disabled={(this.current === this.last) ? true : false}
+            //   >
+            //   <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
+            // </button>
+            index.h("jump-button", { key: '73d1096f381a0cfc35bfc4f0585ac7a35af8060a', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", index.h("jump-icon", { key: 'ca455641fadf5bec18d26d071678c7af07d14837', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get watchers() { return {
         "current": ["watchcurrent"]

package/dist/cjs/jump-pagination.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-pagination.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~6+BAA6+B~~,CAAC;~~AACxgC~~,6BAAe,iBAAiB;;MCMnB,cAAc;;;;uBAGE,CAAC;wBAmBD,IAAI;oBAKR,EAAE;gCAKW,KAAK;;IA1BzC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,OAAO,GAAG;YACZ,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,QAAQ;YACtB,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/B;;IAsBD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;KAClB;;IAGD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1BD,kEAAK,KAAK,EAAC,yBAAyB,IAClCA,kEAAK,KAAK,EAAC,YAAY,IACrBA,kEAAK,KAAK,EAAC,UAAU,IACnBA,qEACEA,qEAAO,IAAI,CAAC,OAAO,CAAQ,OAAE,IAAI,CAAC,QAAQ,OAAEA,qEAAO,IAAI,CAAC,IAAI,CAAQ,CAC/D,CACH,EACNA,kEAAK,KAAK,EAAC,OAAO,~~IACf~~,IAAI,CAAC,gBAAgB~~;YACpBA~~,~~qEACE~~,OAAO,EAAE,~~QAAO~~,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,EAAC,~~EACjC~~,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,~~SAC7CA~~,wEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,~~GAAa~~,~~QAAY~~,~~EAE1EA~~,~~qEACE~~,OAAO,EAAE,~~QAAO~~,IAAI,CAAC,OAAO,EAAE,CAAA,EAAC,~~EAC/B~~,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,~~SAC7CA~~,wEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,~~GAAa~~,~~QAAY~~,~~EACvEA~~,~~qEACE~~,OAAO,EAAE,~~QAAO~~,IAAI,CAAC,OAAO,EAAE,CAAA,EAAC,~~EAC/B~~,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,~~SACnDA~~,wEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,~~GAAa~~,~~QAAY~~,~~EACzE~~,IAAI,CAAC,gBAAgB~~;YACpBA~~,~~qEACE~~,OAAO,EAAE,~~QAAO~~,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,EAAC,~~EACzC~~,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,~~SACnDA~~,wEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,~~GAAa~~,~~QAAY~~,~~CAEzE~~,CACF,CACF,CACD,EACP;KACH;;;;;;;;;","names":["h","Host"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --jump-pagination-label: var(--neutral-grey-secondary);\n --jump-pagination-arrows-color: var(--neutral-grey-secondary);\n --jump-pagination-arrows-disabled: var(--neutral-grey-disabled);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-label);\n\n .arrow {\n color: var(--jump-pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n\n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n\n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-arrows-disabled); \n }\n }\n\n .elements {\n color: var(--jump-pagination-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n }\n}","import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: ~~false~~,\n})\nexport class JumpPagination {\n \n /* ---------------------- @STATE ------------------------- /\n @State() current: number = 1;\n\n @Watch('current')\n watchcurrent(newValue: number, oldValue: number) {\n let details = {\n current: newValue,\n previousPage: oldValue,\n first: 1,\n last: this.last,\n direction: newValue > oldValue ? 'next' : 'prev'\n };\n\n this.changePage.emit(details);\n }\n\n / ---------------------- @PROPERTIES ------------------------- /\n /\n Label of the pagination\n /\n @Prop() pagLabel: string = 'di'; \n\n /\n Last element of the page\n /\n @Prop() last: number = 10; \n\n /\n Show button to navigate so first e last page\n /\n @Prop() showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n / ---------------------- @LIFECYCLE ------------------------- /\n componentWillLoad() {\n this.current = 1;\n }\n \n / --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n <div class=\"indicators\"> \n <div class=\"elements\">\n <span>\n <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <button \n onClick={() => {this.current = 1} }\n disabled={(this.current === 1) ? true : false}\n > <jump-icon slot=\"~~prefix~~\" name=\"chevrons-left\"></jump-icon> </button>\n }\n <button \n onClick={() => {this.current--}} \n disabled={(this.current === 1) ? true : false}\n > <jump-icon slot=\"~~prefix~~\" name=\"chevron-left\"></jump-icon> </button>\n <button \n onClick={() => {this.current++}}\n disabled={(this.current === this.last) ? true : false}\n > <jump-icon ~~slot~~=\"~~prefix~~\" name=\"chevron-right\"></jump-icon> </button>\n {this.showFirstAndLast &&\n <button \n onClick={() => {this.current = this.last}}\n disabled={(this.current === this.last) ? true : false}\n > <jump-icon ~~slot~~=\"~~prefix~~\" name=\"chevrons-right\"></jump-icon> </button> \n }\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-pagination.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination&encapsulation=shadow","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n --jump-button-color: yellow;\n}\n\n.JumpPagination {\n --jump-pagination-label: var(--neutral-grey-secondary);\n --jump-pagination-arrows-color: var(--neutral-grey-secondary);\n --jump-pagination-arrows-disabled: var(--neutral-grey-disabled);\n\n\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-label);\n\n .arrow {\n color: var(--jump-pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n\n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n\n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-arrows-disabled); \n }\n }\n\n .elements {\n color: var(--jump-pagination-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n }\n}","import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: true,\n})\nexport class JumpPagination {\n \n /* ---------------------- @STATE ------------------------- /\n @State() current: number = 1;\n\n @Watch('current')\n watchcurrent(newValue: number, oldValue: number) {\n let details = {\n current: newValue,\n previousPage: oldValue,\n first: 1,\n last: this.last,\n direction: newValue > oldValue ? 'next' : 'prev'\n };\n\n this.changePage.emit(details);\n }\n\n / ---------------------- @PROPERTIES ------------------------- /\n /\n Label of the pagination\n /\n @Prop() pagLabel: string = 'di'; \n\n /\n Last element of the page\n /\n @Prop() last: number = 10; \n\n /\n Show button to navigate so first e last page\n /\n @Prop() showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n / ---------------------- @LIFECYCLE ------------------------- /\n componentWillLoad() {\n this.current = 1;\n }\n \n / --------------------- RENDER ------------------------------- /\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n <div class=\"indicators\"> \n <div class=\"elements\">\n <span>\n <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n </span>\n </div>\n <div class=\"arrow\">\n \n {this.showFirstAndLast &&\n // <button \n // onClick={() => {this.current = 1} }\n // disabled={(this.current === 1) ? true : false}> \n // <jump-icon library=\"fa\" category=\"regular\" name=\"chevrons-left\" size=\"small\" slot=\"prefix\"\n // disabled={(this.current === 1) ? true : false}\n // ></jump-icon> \n // </button>\n <jump-button onClick={() => { this.current = 1 }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === 1) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n {/ <button \n onClick={() => {this.current--}} \n disabled={(this.current === 1) ? true : false}>\n <jump-icon library=\"fa\" category=\"regular\" name=\"chevron-left\" size=\"small\" slot=\"prefix\"></jump-icon> \n </button> /}\n <jump-button onClick={() => { this.current-- }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === 1) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => { this.current++ }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === this.last) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {/ <button \n onClick={() => {this.current++}}\n disabled={(this.current === this.last) ? true : false}\n > \n <jump-icon library=\"fa\" category=\"regular\" name=\"chevron-right\" size=\"small\" slot=\"prefix\"></jump-icon> \n </button> */}\n {this.showFirstAndLast &&\n // <button \n // onClick={() => {this.current = this.last}}\n // disabled={(this.current === this.last) ? true : false}\n // >\n // <jump-icon library=\"fa\" category=\"regular\" name=\"chevrons-right\" size=\"small\" slot=\"prefix\"></jump-icon> \n // </button> \n <jump-button onClick={() => { this.current = this.last }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === this.last) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/cjs/{jump-badge_2.cjs.entry.js → jump-quantity.cjs.entry.js} RENAMED Viewed

@@ -2,24 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-418c607f.js');
+const index = require('./index-674508e2.js');
-const jumpBadgeCss = ":host{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-badge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-size:var(--fs-300);font-weight:var(--fw-900);line-height:1;border-radius:var(--jump-badge-border-radius);border:solid 1px var(--jump-badge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}";
-const JumpBadgeStyle0 = jumpBadgeCss;
-const AppBadge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.label = '';
-        this.variant = 'primary';
-    }
-    render() {
-        return (index.h(index.Host, { key: '00c947abf3e46b224b6f20421f3e8ee35fdd9401', "data-variant": this.variant }, this.label));
-    }
-};
-AppBadge.style = JumpBadgeStyle0;
-const jumpQuantityCss = ":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.75rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:16px;width:40px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer;width:16px}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";
+const jumpQuantityCss = ":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.75rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:16px;width:40px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer}:host ::slotted(jump-button){--jump-button-padding:0}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";
 const JumpQuantityStyle0 = jumpQuantityCss;
 const JumpQuantity = class {
@@ -36,7 +21,7 @@ const JumpQuantity = class {
         this.min = 1;
         this.max = undefined;
         this.step = 1;
-        this.label = 'Quantità';
+        this.label = '';
         this.type = 'buttons';
         this.variant = 'vertical';
         this.showButtons = true;
@@ -49,6 +34,15 @@ const JumpQuantity = class {
         });
         this.internals.setFormValue(newValue);
     }
+    /**
+     * Get the current value
+     */
+    async getValue() {
+        return this.value;
+    }
+    async reset() {
+        this.value = this.min;
+    }
     componentWillLoad() {
         this.value = this.min;
         this.internals.setFormValue(this.value);
@@ -58,7 +52,6 @@ const JumpQuantity = class {
         this.internals.setFormValue('');
     }
     handleChange(event) {
-        // console.log(event.target.value);
         this.value = event.target.value;
     }
     //avoid user can change the value below the min
@@ -68,11 +61,11 @@ const JumpQuantity = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3c14e68a630e8f8ce14b61b119a141b26d1250d1', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && index.h("label", { key: 'd3012ea3d7d21ec7433ec223f9b55d9547337f57' }, this.label), index.h("div", { key: '6d637b7fe69f1712f48587003ac491a7d63b54dc', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
-            index.h("jump-button", { key: 'a9a3d9368fb78dc4c060190d0069466611963995', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, "-"), index.h("input", { key: '9e728cdf29440f52d706e9e62961d0e2918cd3d8', ref: (el) => {
+        return (index.h(index.Host, { key: '2101c7f3d3f54d29b42659466f9b77f8ad9287c9', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && index.h("label", { key: '3e4e1c3e0675283ce6db21877d9e4260c7a2df38' }, this.label), index.h("div", { key: 'cdcbb08e5d778611d8d50aa38f8900ae7117a166', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
+            index.h("jump-button", { key: '70a2656261fbaea52d673ccbca513e0e76b2985b', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, index.h("jump-icon", { key: '5bb00edd0aa996f27cf4b34d130e5217ef2a7041', library: "lucide", name: "minus", size: "small" })), index.h("input", { key: '879bfdbc9ddcba94dc9bb478b5c5fb6c17d10389', ref: (el) => {
                 this.inputEl = el;
             }, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
-            index.h("jump-button", { key: 'cad00efcd74d365d4e9ffb17c6d366b830f2522b', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small', "only-icon": this.value >= this.max }, !this.max || this.value < this.max ? '+' : ''))));
+            index.h("jump-button", { key: '4fc5ea8736ccf4a17397b55c06db4d5a024792ab', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, index.h("jump-icon", { key: 'a2b77881cac77552fedcc14a5507a1b5c722addc', library: "lucide", name: "plus", size: "small" })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -82,7 +75,6 @@ const JumpQuantity = class {
 };
 JumpQuantity.style = JumpQuantityStyle0;
-exports.jump_badge = AppBadge;
 exports.jump_quantity = JumpQuantity;
-//# sourceMappingURL=jump-badge_2.cjs.entry.js.map
+//# sourceMappingURL=jump-quantity.cjs.entry.js.map

package/dist/cjs/jump-quantity.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"jump-quantity.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,q5BAAq5B,CAAC;AAC96B,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI;;;IAQnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACvB;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAID,sEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1CA,kEAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACbA,0EAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACzCA,wEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAa,CACtD,EAChBA,oEAAO,GAAG,EAAE,CAAC,EAAE;gBACb,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;aACnB,EACM,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,WAAW,GACtC,EACD,IAAI,CAAC,WAAW;YACfA,0EAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACzCA,wEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAa,CACrD,CACZ,CACD,EACP;KACH;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.75rem;\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 16px;\n width: 40px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value);\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/jump-tab-item.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-418c607f.js');
+const index = require('./index-674508e2.js');
-const jumpTabItemCss = ":host{display:block}.JumpTabItem{--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}.JumpTabItem.inline{border-bottom:1px solid var(--jump-tabitem-hover-color)}.JumpTabItem.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer}.JumpTabItem.inline.active{border-bottom:3px solid var(--jump-tabitem-active-color)}.JumpTabItem__Content{display:flex;}.JumpTabItem__Content label{font-size:16px}.JumpTabItem__Content.left{flex-direction:row;gap:6px;align-items:center}.JumpTabItem__Content.top{flex-direction:column;gap:2px;align-items:center}.JumpTabItem__Content.inline{color:var(--jump-tabitem-color);padding:12px 24px}.JumpTabItem__Content.inline.active{color:var(--jump-tabitem-active-color)}.JumpTabItem__Content.inline.active span{font-weight:bold}.JumpTabItem__Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}.JumpTabItem__Content.boxed:hover:not(.disabled),.JumpTabItem__Content.boxed:hover:not(.active){background-color:transparent}.JumpTabItem__Content.boxed:hover:not(.disabled) span,.JumpTabItem__Content.boxed:hover:not(.active) span{font-weight:bold}.JumpTabItem__Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}.JumpTabItem__Content.boxed.active span{font-weight:bold}.JumpTabItem__Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}.JumpTabItem__Content.rounded:hover:not(.disabled){cursor:pointer}.JumpTabItem__Content.rounded:hover:not(.disabled) span{font-weight:bold}.JumpTabItem__Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}.JumpTabItem__Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}.JumpTabItem__Content.sheet:hover:not(.disabled){cursor:pointer}.JumpTabItem__Content.sheet:hover:not(.disabled) span{font-weight:bold}.JumpTabItem__Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}.JumpTabItem__Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}";
+const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}:host .Content{display:flex;}:host .Content label{font-size:16px}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:12px 24px}:host .Content.inline.active{color:var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host .Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}:host(.inline){border-bottom:1px solid var(--jump-tabitem-hover-color)}:host(.inline):hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer}:host(.inline.active){border-bottom:3px solid var(--jump-tabitem-active-color)}";
 const JumpTabItemStyle0 = jumpTabItemCss;
 const JumpTabItem = class {
@@ -29,8 +29,8 @@ const JumpTabItem = class {
         this.variant = parentVariant;
     }
     render() {
-        return (index.h(index.Host, { key: '82864ca72b0febf6a25431ad2788b11e80744d57', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, index.h("div", { key: '9275613b491731afc823f0c63be2ae797b372fa6', class: "JumpTabItem__Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
-            index.h("jump-icon", { key: 'fcd4ab436a0695fdf3ca07f2ca9d1a6343c79d56', class: "small", name: this.iconName }), index.h("span", { key: '1d518eb336443596c090beafe74b5186f0a1ff37', class: "label" }, this.label))));
+        return (index.h(index.Host, { key: '99a63732d7cc75ed92a2b7fb9469a2bf18d75235', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, index.h("div", { key: 'ee7170cae00c17615e5e528bf103aebd9d97b45f', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            index.h("jump-icon", { key: 'd198fc5756bd145454d7298969905e8bcf306b20', library: "fa", category: "regular", name: this.iconName, size: "small" }), index.h("span", { key: 'bc008babf73fef929062f127a8eb976405046434', class: "label" }, this.label))));
     }
 };
 JumpTabItem.style = JumpTabItemStyle0;