@jumpgroup/jump-design-system 0.3.1 → 0.3.4

package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-674508e2.js');
+
+const jumpCardEcommerceOptionCss = ":host{display:none}";
+const JumpCardEcommerceOptionStyle0 = jumpCardEcommerceOptionCss;
+
+const CardEcommerceOption = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.connectedEvent = index.createEvent(this, "jump-card-ecommerce-option-connected", 7);
+        this.code = undefined;
+        this.imgUrl = undefined;
+        this.label = undefined;
+        this.sku = undefined;
+    }
+    componentWillLoad() {
+        this.connectedEvent.emit({
+            code: this.code,
+            label: this.label,
+            imgUrl: this.imgUrl,
+        });
+    }
+    render() {
+        return index.h(index.Host, { key: '21e35180b98eeeaee34582aab33e4cff620c8c29' });
+    }
+};
+CardEcommerceOption.style = JumpCardEcommerceOptionStyle0;
+
+exports.jump_card_ecommerce_option = CardEcommerceOption;
+
+//# sourceMappingURL=jump-card-ecommerce-option.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"jump-card-ecommerce-option.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,qBAAqB,CAAC;AACzD,sCAAe,0BAA0B;;MCM5B,mBAAmB;;;;;;;;;IAQ9B,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,OAAOA,QAACC,UAAI,sDAAQ,CAAC;KACtB;;;;;;","names":["h","Host"],"sources":["src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.scss?tag=jump-card-ecommerce-option&encapsulation=shadow","src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.tsx"],"sourcesContent":[":host {\n  display: none;\n}\n","import { Component, Host, Event, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"jump-card-ecommerce-option\",\n  styleUrl: \"jump-card-ecommerce-option.scss\",\n  shadow: true,\n})\nexport class CardEcommerceOption {\n  @Prop() code: string;\n  @Prop() imgUrl: string;\n  @Prop() label: string;\n  @Prop() sku: string;\n\n  @Event({ eventName: \"jump-card-ecommerce-option-connected\" }) connectedEvent;\n\n  componentWillLoad() {\n    this.connectedEvent.emit({\n      code: this.code,\n      label: this.label,\n      imgUrl: this.imgUrl,\n    });\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-674508e2.js');
 
-const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:1}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:1}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-top-left-radius:3px;border-top-right-radius:3px;aspect-ratio:1/1}:host .Media img{height:100%;width:100%;object-fit:cover}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Product{font-size:var(--fs-400)}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary)}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host(.Pippo){background-color:red}";
+const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-top-left-radius:3px;border-top-right-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Product{font-size:var(--fs-400)}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
 const JumpCardEcommerceStyle0 = jumpCardEcommerceCss;
 
 const JumpCardEcommerce = class {
@@ -13,30 +13,41 @@ const JumpCardEcommerce = class {
         this.toggleFavorite = index.createEvent(this, "jump-toggle-favorite", 7);
         this.productAddToCart = index.createEvent(this, "jump-add-to-cart", 7);
         this.productWaitingList = index.createEvent(this, "jump-add-to-waiting-list", 7);
-        this.changeVariation = index.createEvent(this, "jump-change-variation", 7);
+        this.variationSelected = index.createEvent(this, "jump-variation-selected", 7);
         this.onlyIconButton = false;
         this.hasBackground = false;
         this.badge = undefined;
         this.favorite = false;
+        this.hasFavorite = false;
         this.link = undefined;
         this.img = undefined;
         this.imgAlt = undefined;
+        this.hoverImg = undefined;
+        this.hoverImgAlt = undefined;
         this.videoSrc = undefined;
-        this.addedToCart = false;
         this.notificationUrl = undefined;
-        this.notificationText = 'Aggiunto al carrello';
+        this.notificationText = '';
         this.productName = undefined;
         this.subtitle = undefined;
         this.productId = undefined;
         this.price = undefined;
         this.salePrice = undefined;
-        this.currency = undefined;
+        this.currency = '€';
         this.outOfStock = false;
         this.outOfStockText = undefined;
-        this.addtoCartText = undefined;
+        this.addToCartText = undefined;
         this.waitingListText = undefined;
         this.addToWaitingList = false;
-        this.changedVariation = false;
+        this.addedToCart = false;
+        this.endAddedToCart = false;
+        this.variations = [];
+    }
+    addOption(e) {
+        let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}
+        this.variations = [...this.variations, Object.assign({}, props)];
+    }
+    onVariationSelected(variation) {
+        this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento
     }
     /* ---------------------- @LIFECYCLE ------------------------- */
     componentWillLoad() { }
@@ -47,7 +58,6 @@ const JumpCardEcommerce = class {
             this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {
                 this.quantity = quantity;
             });
-            console.log('Quantity:', this.quantity);
         }
     }
     disconnectedCallback() {
@@ -58,7 +68,8 @@ const JumpCardEcommerce = class {
     }
     /* ---------------------- @METHODS ------------------------- */
     onQuantityChange(e) {
-        this.quantity = e.detail.value;
+        var _a;
+        this.quantity = (_a = e.detail.value) !== null && _a !== void 0 ? _a : false;
     }
     onToggleFavorite() {
         this.favorite = !this.favorite;
@@ -68,15 +79,17 @@ const JumpCardEcommerce = class {
         });
     }
     addProductToCart() {
+        var _a;
         this.addedToCart = true;
         const payload = {
             productId: this.productId,
             addedToCart: this.addedToCart,
-            quantity: this.quantity
-            // mancano le variazioni
+            quantity: (_a = this.quantity) !== null && _a !== void 0 ? _a : null
         };
         this.productAddToCart.emit(payload);
-        console.log("productAddToCart payload:", payload);
+        setTimeout(() => {
+            this.addedToCart = false;
+        }, 6000);
     }
     waitingList() {
         this.addToWaitingList = true;
@@ -85,32 +98,37 @@ const JumpCardEcommerce = class {
             addToWaitingList: this.addToWaitingList
         });
     }
-    changeVariationBody(event) {
-        const selectElement = event.target;
-        const selectedValue = selectElement.value;
-        this.changedVariation = true;
-        const payload = {
-            productId: this.productId,
-            changedVariation: this.changedVariation,
-            variation: selectedValue // da sostituire
-        };
-        this.changeVariation.emit(payload);
-        console.log("changeVariation payload:", payload);
-    }
     render() {
         const backgroundClass = this.hasBackground ? 'hasBackground' : '';
         const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';
         const justifyClass = this.outOfStock ? 'justify-between' : '';
+        const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';
         function calculateDiscount(price, salePrice) {
             const discount = ((price - salePrice) / price) * 100;
             return discount.toFixed(0);
         }
-        return (index.h(index.Host, null, this.badge ? index.h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', index.h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'neutral' : 'primary', size: "small", text: true, onlyIcon: true }, index.h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'light' : 'solid', size: "medium" })), index.h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, index.h("a", { href: this.link }, this.img && !this.videoSrc ? index.h("img", { src: this.img, alt: this.imgAlt }) : '', this.videoSrc && !this.img ?
-            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", { class: `NotificationCart ${this.addedToCart == true ? 'is-active' : ''}` }, index.h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, index.h("jump-icon", { slot: "prefix", name: "check" }), index.h("span", null, " ", this.notificationText, " "))), this.onlyIconButton ?
+        return (index.h(index.Host, null, this.badge ? index.h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', this.hasFavorite ?
+            index.h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'primary' : 'neutral', size: "small", text: true, onlyIcon: true }, index.h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'solid' : 'light', size: "medium" }))
+            : null, index.h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, index.h("a", { href: this.link }, index.h("figure", { class: `Images ${hasImageOnHover} ` }, this.img && !this.videoSrc ? index.h("img", { class: "Images__Front", src: this.img, alt: this.imgAlt }) : '', this.hoverImg && !this.videoSrc ? index.h("img", { class: "Images__OnHover", src: this.hoverImg, alt: this.hoverImgAlt }) : ''), this.videoSrc && !this.img ?
+            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", { class: `NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}` }, index.h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, index.h("jump-icon", { slot: "prefix", name: "check" }), index.h("span", null, " ", this.notificationText, " "))), this.onlyIconButton ?
             index.h("div", { class: "OnlyIconButton" }, index.h("jump-button", { variant: "secondary", size: "large", pill: true, onlyIcon: true, onClick: () => this.addProductToCart() }, index.h("jump-icon", { slot: "prefix", name: 'cart-shopping', category: "regular" })))
-            : ''), index.h("div", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, index.h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, index.h("div", null, index.h("div", { class: "Info" }, index.h("div", { class: "Product" }, this.productName), index.h("div", { class: "Subtitle" }, this.subtitle)), index.h("div", { class: "Price" }, index.h("div", { class: "Price__Discount" }, calculateDiscount(this.price, this.salePrice), "%"), index.h("div", { class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), index.h("div", { class: "Price__Sale" }, this.currency, this.salePrice))), index.h("div", null, index.h("slot", { name: "select" }), index.h("slot", { name: "quantity" }))), index.h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? index.h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
+            : ''), index.h("div", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, index.h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, index.h("div", null, index.h("div", { class: "Info" }, index.h("div", { class: "Product" }, this.productName), this.subtitle ? index.h("div", { class: "Subtitle" }, this.subtitle) : null), this.price ?
+            index.h("div", { class: "Price" }, this.salePrice && this.salePrice != 0 ?
+                index.h("div", { class: "Price__Discount" }, " ", calculateDiscount(this.price, this.salePrice), "% ")
+                : null, index.h("div", { class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), this.salePrice ?
+                index.h("div", { class: "Price__Sale" }, this.currency, this.salePrice)
+                : null)
+            : null), index.h("div", { class: "SelectVariations" }, this.variations.length != 0 ?
+            index.h("select", { ref: (el) => (this.variationSelectEl = el), onChange: () => {
+                    let currentValue = this.variationSelectEl.value;
+                    let currentVariation = this.variations.find((variation) => variation.code == currentValue);
+                    this.onVariationSelected(currentVariation);
+                } }, this.variations
+                .filter((variation) => !variation.imgUrl)
+                .map((variation) => (index.h("option", { value: variation.code }, variation.label))))
+            : null), index.h("slot", { name: "quantity" })), index.h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? index.h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
             index.h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.waitingList() }, index.h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.waitingListText ? this.waitingListText : 'Notifica disponibilità') : '', !this.outOfStock && !this.onlyIconButton ?
-            index.h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, index.h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello') : ''))));
+            index.h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, index.h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addToCartText ? this.addToCartText : 'Aggiungi al carrello') : ''))));
     }
     get JumpCardEcommerce() { return index.getElement(this); }
 };

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

@@ -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\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}
+{"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: 2;\n\n    &.hasBackground.iconOnly {\n      top: calc(1rem + 8px);\n      left: calc(1rem + 8px);\n    }\n  }\n\n  .Favorite {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    z-index: 2;\n\n    &.hasBackground.iconOnly {\n      top: calc(1rem + 8px);\n      right: calc(1rem + 8px);\n    }\n  }\n\n  .Media {\n    // aspect-ratio: 3/4;\n    overflow: hidden;\n    position: relative;\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n    aspect-ratio: 1/1;\n\n    .Images {\n      height: 100%;\n      margin: 0;\n      position: relative;\n\n      img {\n        height: 100%;\n        width: 100%;\n        object-fit: cover;\n        position: absolute;\n        top: 0;\n        left: 0;\n        overflow: hidden;\n      }\n\n      &__Front {\n        z-index: 1;\n        transition: opacity 0.5s linear;\n        cursor: pointer;\n      }\n\n      &.has-hover-image {\n        &:hover .Images__Front {\n          opacity: 0;\n        }\n      }\n    }\n\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    z-index: 2;\n    transform: translate3d(0, 0, 0);\n\n    &.is-active {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  .Content {\n    &.hasBackground {\n      background-color: var(--neutral-white);\n      padding: calc(var(--jump-card-padding) * 2);\n    }\n\n    &.iconOnly {\n      padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n    }\n  }\n\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    line-height: 1.2;\n  }\n\n  .Footer {\n    line-height: var(--lh-400);\n    justify-content: end;\n    padding: var(--jump-card-padding) 0;\n    align-items: flex-end;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    &.hasBackground {\n      padding-bottom: 0;\n    }\n\n    &.iconOnly {\n      padding: 0;\n    }\n  }\n\n  .OutOfStock {\n    justify-items: start;\n    font-size: var(--fs-300);\n    font-weight: var(--fw-900);\n    color: var(--status-danger-standard);\n  }\n\n  .OnlyIconButton {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    background: var(--neutral-white);\n    border-top-left-radius: 20px;\n    padding: 8px 8px 0px 8px;\n    z-index: 2;\n  }\n\n  .Price {\n    position: relative;\n    display: grid;\n    grid-template-columns: auto auto;\n    grid-template-rows: 1.5rem 1.5rem auto;\n    justify-items: end;\n    align-items: end;\n    column-gap: 0.5rem;\n\n    font-size: var(--fs-500);\n    font-weight: var(--fw-900);\n    line-height: var(--lh-400);\n\n    & > * {\n      display: inline-flex;\n    }\n\n    &__Regular {\n      text-align: right;\n\n      &.sale {\n        text-decoration: line-through;\n        color: var(--neutral-grey-secondary);\n        font-weight: var(--fw-400);\n        font-size: var(--fs-400);\n        grid-column: 2;\n        grid-row: 1;\n      }\n    }\n\n    &__Sale {\n      grid-column: 2;\n      grid-row: 2;\n    }\n\n    &__Discount {\n      color: var(--status-danger-standard);\n      font-weight: var(--fw-400);\n      font-size: var(--fs-300);\n      grid-column: 1;\n      grid-row: 1;\n    }\n  }\n\n  .SelectVariations {\n    select {\n      appearance: none;\n      background-color: transparent;\n      border: 1px solid var(--neutral-grey-secondary);\n      border-radius: 3px;\n      color: var(--neutral-grey-secondary);\n      font-size: var(--fs-300);\n      padding: 0.5rem 0.75rem;\n      background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");\n      background-position: right 0.5rem center;\n      background-repeat: no-repeat;\n      background-size: 1.5em 1.5em;\n      padding-right: 2.5rem;\n      -webkit-print-color-adjust: exact;\n    }\n  }\n}\n\n.slide-in-bottom {\n  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.slide-out-bottom {\n  animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;\n}\n\n.fade-in-out {\n  animation-name: fade-in-out;\n  animation-duration: 6s;\n  animation-timing-function: ease-in-out;\n}\n\n@keyframes fade-in-out {\n  from {\n    opacity: 0;\n    transform: translateY(100px);\n  }\n\n  50% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(100px);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen} from '@stencil/core';\n\ninterface Variation {\n  code: string;\n  imgUrl: string;\n  label: string;\n  // Add more keys as needed\n}\n\n@Component({\n  tag: 'jump-card-ecommerce',\n  styleUrl: 'jump-card-ecommerce.scss',\n  shadow: true,\n})\nexport class JumpCardEcommerce {\n\n  @Element() JumpCardEcommerce: HTMLElement;\n  jumpQuantityEl;\n\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  \n  @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n  /** Indicate if the whislist is active in shop*/\n  @Prop() hasFavorite: boolean = false;\n\n  /** Indicates the link of the card*/\n  @Prop() link: string;\n\n  /** Indicates the image's src of the card*/\n  @Prop() img: string ;\n\n  /** Indicates the img's alt of the card*/\n  @Prop() imgAlt: string;\n\n  /** Indicates the over image's src of the card*/\n  @Prop() hoverImg: string ;\n\n  /** Indicates the hover img's alt of the card*/\n  @Prop() hoverImgAlt: string;\n\n  /** Indicates the videoSrc of the card*/\n  @Prop() videoSrc: string; \n\n  /** Indicates the notificationUrl of the card*/\n  @Prop() notificationUrl: string;\n\n  /** Indicates the notificationText of the card*/\n  @Prop() notificationText: string = '';\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  /* ---------------------- @STATE ------------------------- */ \n\n  /** Indicate if the product is added to cart --> non deve esserci nelle storie! */ \n  @Prop() addedToCart: boolean = false;\n\n  @Prop() endAddedToCart: boolean = false;\n\n  @State() variations: Variation[] = [];\n\n  // è una proprietà che viene cambiata solo da dentro\n  quantity: number;\n\n  variationSelectEl: HTMLSelectElement;\n\n /* ---------------------- @EVENTS ------------------------- */\n  \n  @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n  @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n  @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n  @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n  @Listen(\"jump-card-ecommerce-option-connected\")\n  addOption(e) {\n    let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n    this.variations = [...this.variations, { ...props }];\n  }\n\n  onVariationSelected(variation) {\n    this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n  }\n  \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  }\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 ?? false;\n  }\n\n  onToggleFavorite() {\n    this.favorite = !this.favorite;\n    this.toggleFavorite.emit(\n      {\n        productId: this.productId,\n        favorite: this.favorite\n      }\n    ); \n  }\n\n  addProductToCart() {\n    this.addedToCart = true;\n    const payload = {\n      productId: this.productId,\n      addedToCart: this.addedToCart,\n      quantity: this.quantity ?? null\n    };\n    this.productAddToCart.emit(payload);\n\n    setTimeout(() => {\n      this.addedToCart = false;\n    }, 6000);\n  }\n\n  waitingList() {\n    this.addToWaitingList = true;\n    this.productWaitingList.emit(\n      {\n        productId: this.productId,\n        addToWaitingList: this.addToWaitingList\n      }\n    )\n  }\n\n  render() {\n    const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n    const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n    const justifyClass = this.outOfStock ? 'justify-between' : '';\n    const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\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        {this.hasFavorite ? \n          <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n              <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n          </jump-button> \n        : null}\n\n        <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n          <a href={this.link}>\n            <figure class={`Images ${hasImageOnHover} `}>\n              {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n              {this.hoverImg && !this.videoSrc ? <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n            </figure>\n            {this.videoSrc && !this.img ? \n              <video autoplay> \n                <source src={this.videoSrc} type=\"video/mp4\"/> \n                <source src={this.videoSrc} type=\"video/mov\"/> \n                <source src={this.videoSrc} type=\"video/webm\"/> \n              </video> : ''}\n          </a> \n          <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n            <jump-button href={this.notificationUrl} variant=\"white\" text> \n              <jump-icon slot=\"prefix\" name=\"check\"></jump-icon> \n              <span> {this.notificationText} </span>\n            </jump-button>\n          </div>\n            {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                {this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n              </div>\n\n              {this.price ? \n                <div class=\"Price\">\n                  {this.salePrice && this.salePrice != 0 ? \n                    <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n                  : null}\n                  <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n                    {this.currency}{this.price}\n                  </div>\n                  {this.salePrice ? \n                    <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n                  : null}\n                </div>\n              : null}\n            </div>\n            \n            <div class=\"SelectVariations\">\n              {this.variations.length != 0 ? \n                <select\n                  ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n                  onChange={() => {\n                    let currentValue = this.variationSelectEl.value;\n                    let currentVariation = this.variations.find(\n                      (variation) => variation.code == currentValue,\n                    );\n                    this.onVariationSelected(currentVariation);\n                  }}\n                >\n                  {this.variations\n                    .filter((variation) => !variation.imgUrl)\n                    .map((variation) => (\n                      <option value={variation.code}>{variation.label}</option>\n                  ))}\n                </select>\n              : null }\n            </div>\n            <slot name=\"quantity\"></slot>\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-design-system.cjs.js

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

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

@@ -48,8 +48,8 @@ const JumpFilter = class {
         }
     }
     render() {
-        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' }))));
+        return (index.h(index.Host, { key: 'a8a5a1f52c55e0a4673950ccc8bf97ced277b5e1', mobileFilters: this.showMobileFilters }, this.isMobile && index.h("jump-button", { key: '8cb3ab66f4d8c8e7f40799c4ba75a1c4ae9afcdb', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, index.h("slot", { key: '9e04e5f5ae56d7b902bec14c5552cf6741569f0e', name: "prefix" }, this.filterButtonIcon && index.h("jump-icon", { key: '48ed3066dc3cf124dcbe331e75b173ff66e11ced', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), index.h("slot", { key: '05e6c49117d6a1d2948177c76b3cb147bcf56229', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), index.h("div", { key: '7cd87540e56dc46be79ea0ffce82b242d11d105a', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
+            index.h("div", { key: '315a7e739cb230f14dd02f965bebe8be357de3f7', class: 'filtersDrawer__header' }, index.h("jump-icon", { key: '931920029b78afd420d0aac3f20b050096de9e3c', class: "small", name: this.filterButtonIcon }), index.h("h3", { key: '634402d897250a72a282b79188d48a1813c27337' }, this.filterHeading)), index.h("slot", { key: '48db024bd7aeb2e29d537d59cd8556599613a8ba' }))));
     }
 };
 JumpFilter.style = JumpFilterStyle0;

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

@@ -108,8 +108,8 @@ const JumpFiltergroup = class {
         });
     }
     render() {
-        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' }))));
+        return (index.h(index.Host, { key: 'd830aaa7f43d5c7b8bd0f3fd031fc05feb6992a6' }, this.heading && index.h("h5", { key: '6cc93095701fd3661c080f3d90fcee49b6331b3e' }, this.heading), index.h("div", { key: '4a530aaf6ca0dc513b30a4fa71fe742d8880106a', class: "filterGroup" }, index.h("slot", { key: 'aa1a4a654084bae835eef9c73d1575c8b46c3307', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
+            index.h("jump-button", { key: 'daebaf36924d7f7a62a169b37d1c9f216800b5c9', 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: '3d6440909b8247a717c2fbc54e94009ef8dbc539', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
     }
 };
 JumpFiltergroup.style = JumpFiltergroupStyle0;

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

@@ -71,21 +71,21 @@ const JumpPaginationTable = class {
     /* --------------------- RENDER ------------------------------- */
     render() {
         var _a;
-        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 &&
+        return (index.h(index.Host, { key: '35e491be212d92ad5236fa808401b00519805464', class: "JumpPaginationTable" }, index.h("div", { key: '3d983450f3128aa27d7aaf71d88059c2286b78de', class: "JumpPaginationTable__Wrapper" }, index.h("div", { key: '18012e3b71c78c1f4b5fae8f8a3f0e62be9ce605', class: "elementsPerPage" }, index.h("label", { key: 'e5af13dfc62132a04bbf83968a17a32e25ed2db7', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { key: '813734540e10b51a533511f11e3c3c7b280dd323', 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: '260bf5e7c2775970b04d382ccb4fd14080588b94', class: "indicators" }, index.h("div", { key: '44da392904dea45319a1179c418cb690ccbe5c49', class: "elements" }, index.h("span", { key: '785cb75ecd13082ca489f5ee74397c1eb41ebfbf' }, index.h("span", { key: 'a5914c44df81c108034edf298860ced791c1c600' }, this.first), " - ", index.h("span", { key: 'c2e32a38e9bf3843a0881acd4792746a559718d3' }, this.last), " ", this.pagLabel, " ", index.h("span", { key: 'd30a564a486c4d06b2996b326b86ef85765064c8' }, this.total))), index.h("div", { key: '8193f04ee380f418b5b477ef7ca40e4de18e6b46', 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 &&
+            index.h("jump-button", { key: 'c7a833acee791a25257e237d88aef4e5bf5b5cc8', 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: 'ffb50e27e476c8ca8d58ff18ce30c96ff6330872', slot: "suffix", name: "chevrons-left" }), " "), index.h("jump-button", { key: '46bf715a0803deef866d90a1523675ab24c1793f', 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: '223bf0f161ffce6ee0e17fbae7b8467cae790be3', slot: "suffix", name: "chevron-left" }), " "), index.h("jump-button", { key: '97696457a54e5808a0c252eeda2c8d915bcfe2e8', 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: '9e01f45cc02450c41bf3ffc2f14cfd6606ab5a96', 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" }), " "))))));
+            index.h("jump-button", { key: '05a745e26f5f14383e745a744c0c23e5598b0623', 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: '0ba46ee7053a3aed0091c05a20444c767738dc2f', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get watchers() { return {
         "elPerPage": ["elPerPageChanged"]

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

@@ -32,7 +32,7 @@ const JumpPagination = class {
     }
     /* --------------------- RENDER ------------------------------- */
     render() {
-        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 &&
+        return (index.h(index.Host, { key: '18d410dc3a9511ace652112d4109918293df9906', class: "JumpPagination" }, index.h("div", { key: '9a7106cc8fad86b9d88df5bae5256c65dec638d2', class: "JumpPagination__Wrapper" }, index.h("div", { key: '408904b95e5ccbc5c8dec7992cf86bc6afa6d668', class: "indicators" }, index.h("div", { key: '89ac5f884a14e1bf4b9d7e191239b66a01f15dfc', class: "elements" }, index.h("span", { key: 'daebe2f9181ba0ca7d04534776433b278dd7f45d' }, index.h("span", { key: '1c340139fec9bb56b4419503e96da5db100389ad' }, this.current), " ", this.pagLabel, " ", index.h("span", { key: '1c8005a1a84d928bd03a019f55f8ce10bec6ef63' }, this.last))), index.h("div", { key: '22c30cb2b8e201ad83b861bafae9456af3651601', class: "arrow" }, this.showFirstAndLast &&
             // <button 
             //   onClick={() => {this.current = 1} }
             //   disabled={(this.current === 1) ? true : false}> 
@@ -40,14 +40,14 @@ const JumpPagination = class {
             //     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 &&
+            index.h("jump-button", { key: 'd33a4ab68bc65b7f3904339d2af6560d5087cc4f', 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: '96d22863c7fc2cbaae7b72ab96a1ba8217e595a9', slot: "suffix", name: "chevrons-left" }), " "), index.h("jump-button", { key: 'db02538122d3d8086efdbf49145c17e0e9af8788', 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: 'ffceb9d84a86c2cf2a8f21e0f9f5defea43c5f09', slot: "suffix", name: "chevron-left" }), " "), index.h("jump-button", { key: '855a75372082a8c9f749477ef28c47345f8a14fe', 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: '433de11f11450ecee65e4e0a9e4ff579589df7bc', 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" }), " "))))));
+            index.h("jump-button", { key: '80ccd477f717ce04e9c1411f2a8a808247f568ac', 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: '93bbfd2eeb6158397e93808f330babb27338a983', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get watchers() { return {
         "current": ["watchcurrent"]

package/dist/cjs/jump-quantity.cjs.entry.js

@@ -40,9 +40,12 @@ const JumpQuantity = class {
     async getValue() {
         return this.value;
     }
+    async reset() {
+        this.value = this.min;
+    }
     componentWillLoad() {
         this.value = this.min;
-        this.internals.setFormValue(this.value);
+        this.internals.setFormValue(this.value.toString());
     }
     formResetCallback() {
         this.internals.setValidity({});
@@ -58,11 +61,11 @@ const JumpQuantity = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'd35f6f474d41feae59c386e57c1dcc5f073e57f1', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && index.h("label", { key: '499373a638e6da996851852c2672a1462eb6fba1' }, this.label), index.h("div", { key: '2e8bb37e5961d00f38e7ff40520460d19b8945f9', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
-            index.h("jump-button", { key: 'f3f19ad26a807961fe63239f17354f6ff1d48809', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, index.h("jump-icon", { key: '3f86257fd93ae2c07261ef6f5bb62d239dbc7782', library: "lucide", name: "minus", size: "small" })), index.h("input", { key: '3277bb1382d298e4fdcd064f5c71d61c5bb75bb2', ref: (el) => {
+        return (index.h(index.Host, { key: '8dfa03a154994f2875c8e807ee718802ec7c456c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && index.h("label", { key: '7419fc79da61afc0122305fbb62e36dc822a71a4' }, this.label), index.h("div", { key: '3cf6c104a074519f1c96698bd359176c86d0ee84', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
+            index.h("jump-button", { key: '10ededb763feb5d0b15b12bdd1974a286d45e8fe', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small', "only-icon": true }, index.h("jump-icon", { key: '9c49f6f13bd2b119670273da89707651d5d2314e', library: "lucide", name: "minus", size: "small" })), index.h("input", { key: '4d97685a0216966a9ff43a5ea684f249ce8e590c', 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: '1a5847f2760dae8ecdf000de143af06fd1c8c3ce', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, index.h("jump-icon", { key: '25c05e4597739dd4e8df00cdda0d593ba1d55e1f', library: "lucide", name: "plus", size: "small" })))));
+            index.h("jump-button", { key: '58695769e8c593f0341d70daf85f7bd52f432f8d', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small', "only-icon": true }, index.h("jump-icon", { key: 'ce9cae43a1a56fb6fdd1b5035624ebba1798fa72', library: "lucide", name: "plus", size: "small" })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1 +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;;;IASnC,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;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, State, 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\n  @Event({ eventName: 'jump-change' }) change;\n\n  @State() value;\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  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}
+{"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,QAAQ,EAAE,CAAC,CAAC;KACpD;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,uBACzCA,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,uBACzCA,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: number;\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.toString());\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' only-icon>\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' only-icon>\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

@@ -29,8 +29,8 @@ const JumpTabItem = class {
         this.variant = parentVariant;
     }
     render() {
-        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))));
+        return (index.h(index.Host, { key: 'abb94cf6de77cb1e4b4364d3b391c2174949f60f', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, index.h("div", { key: '240bb79a1e9159b2568b6d98c502841bb3445bf5', 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: '2aa6dd7c0028f31f2a90a41e08517d1e2d475ab3', library: "fa", category: "regular", name: this.iconName, size: "small" }), index.h("span", { key: '7104baeadfefd66bfa057e66955067de8988a89e', class: "label" }, this.label))));
     }
 };
 JumpTabItem.style = JumpTabItemStyle0;

package/dist/cjs/jump-tab-panel.cjs.entry.js

@@ -14,7 +14,7 @@ const JumpTabPanel = class {
         this.active = false;
     }
     render() {
-        return (index.h(index.Host, { key: '90108df0339c76ec7ffef78722400cbd5e5b125d', class: "JumpTabPanel", id: this.identifier }, index.h("div", { key: '4e127ffdeb05efdd63dc538cb38976252ff5a060', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, index.h("slot", { key: '5e54c0eaed6558e97226ffdc347e0ca8c0d9aa1b' }))));
+        return (index.h(index.Host, { key: 'fc2eef0c94e117a26077c230693995b20acc7f3c', class: "JumpTabPanel", id: this.identifier }, index.h("div", { key: '9b924fa9506c131757cad87fbc1f5bed6a9c93f4', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, index.h("slot", { key: '01d32accd80af80358dbf2c247d5ce2c94b6c86e' }))));
     }
 };
 JumpTabPanel.style = JumpTabPanelStyle0;

package/dist/cjs/jump-tab.cjs.entry.js

@@ -82,7 +82,7 @@ const JumpTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '325ebf63677d7b1307ebb5be3d521d06efa22a5a', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: 'afa4eb17c8582aa59f8f3b55237de34fa04871d5', class: "Wrapper " + this.variant }, index.h("slot", { key: '69023d9ae6ae85ef8270d7c8ea4c881c60889f63', name: "tab-item" })), index.h("div", { key: '28257b0f8de4c3ef1b7dd7adb58dc2d0ce342164' }, index.h("slot", { key: '3097cf4876730499e2067aed722ff822582e173f', name: "tab-content" }))));
+        return (index.h(index.Host, { key: '141d0932c588a4644d67abf4378858eb8a3771f7', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: '2b84773fbb263e8a593793da0db59c0110566ad7', class: "Wrapper " + this.variant }, index.h("slot", { key: '559a5801972af5c746cfca3d0a387855316d10ee', name: "tab-item" })), index.h("div", { key: '5d2c365e4e6d9694faa073025560e1984135af47' }, index.h("slot", { key: 'ebf5b38c8a196ed002c88c24360942d05eb04ef7', name: "tab-content" }))));
     }
 };
 JumpTab.style = JumpTabStyle0;