@jumpgroup/jump-design-system 0.3.0 → 0.3.1

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

@@ -23,13 +23,29 @@ export class JumpCardEcommerce {
         this.addtoCartText = undefined;
         this.waitingListText = undefined;
         this.addToWaitingList = false;
-        this.quantity = false;
-        this.changedQuantity = false;
         this.changedVariation = false;
     }
     /* ---------------------- @LIFECYCLE ------------------------- */
-    componentWillLoad() {
-        // this._selectVariations = this.selectVariations?.split(',');
+    componentWillLoad() { }
+    componentDidLoad() {
+        this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');
+        if (this.jumpQuantityEl) {
+            this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));
+            this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {
+                this.quantity = quantity;
+            });
+            console.log('Quantity:', this.quantity);
+        }
+    }
+    disconnectedCallback() {
+        this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');
+        if (this.jumpQuantityEl) {
+            this.jumpQuantityEl.removeEventListener('jump-change', this.onQuantityChange);
+        }
+    }
+    /* ---------------------- @METHODS ------------------------- */
+    onQuantityChange(e) {
+        this.quantity = e.detail.value;
     }
     onToggleFavorite() {
         this.favorite = !this.favorite;
@@ -43,7 +59,7 @@ export class JumpCardEcommerce {
         const payload = {
             productId: this.productId,
             addedToCart: this.addedToCart,
-            quantity: 2 // da prendere dal quantity
+            quantity: this.quantity
             // mancano le variazioni
         };
         this.productAddToCart.emit(payload);
@@ -56,21 +72,6 @@ export class JumpCardEcommerce {
             addToWaitingList: this.addToWaitingList
         });
     }
-    changeQuantityProduct(event) {
-        // const quantityInput = this.JumpCardEcommerce.querySelector('jump-quantity');
-        // const quantityValue = quantityInput.value; // Access the `value` property
-        const quantityElement = event.target;
-        console.log('Valore selezionato:', quantityElement);
-        // const quantityValue = quantityElement.value;
-        this.changedQuantity = true;
-        const payload = {
-            productId: this.productId,
-            changedQuantity: this.changedQuantity,
-            quantity: 2 // da sostituire con quaintity value
-        };
-        this.changeQuantity.emit(payload);
-        console.log("changeQuantity payload:", payload);
-    }
     changeVariationBody(event) {
         const selectElement = event.target;
         const selectedValue = selectElement.value;
@@ -87,10 +88,15 @@ export class JumpCardEcommerce {
         const backgroundClass = this.hasBackground ? 'hasBackground' : '';
         const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';
         const justifyClass = this.outOfStock ? 'justify-between' : '';
-        return (h(Host, { key: 'cf789b80987e6382306da2ad5ace446580a61990', ref: (el) => { this.JumpCardEcommerce = el; } }, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", label: this.badge }) : '', h("jump-button", { key: 'd8a4cf5efe00c8524760cc72cbf442746e6c2597', onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'neutral' : 'primary', size: "small", text: true, onlyIcon: true }, h("jump-icon", { key: '16b89f2a5626b9e7fb4691a0de7d629c5ce8dc1c', slot: "prefix", name: "heart", category: this.favorite ? 'light' : 'solid', size: "medium" })), h("div", { key: 'dc3147d29ade372ee937f9cf2a65bd68069d7e30', class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { key: '92d62f4458c29704bda0170e15f00b72c0a79bd0', href: this.link }, this.img && !this.videoSrc ? h("img", { src: this.img, alt: this.imgAlt }) : '', this.videoSrc && !this.img ?
-            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : ''), h("div", { key: '0d9ac0e6d99a33313602eafeeba8f2bde64e02d0', class: `NotificationCart ${this.addedToCart == true ? 'is-active' : ''}` }, h("jump-button", { key: '4117a6d5811a18cab91efc6205a4b1674c417bd9', href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { key: '871ca055dbae216cac54bc269360b16836903cc1', slot: "prefix", name: "check" }), h("span", { key: '039ffeced52e62d4ffb381dfe18d349eed42973a' }, " ", this.notificationText, " "))), this.onlyIconButton ?
+        function calculateDiscount(price, salePrice) {
+            const discount = ((price - salePrice) / price) * 100;
+            return discount.toFixed(0);
+        }
+        ;
+        return (h(Host, null, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'neutral' : 'primary', size: "small", text: true, onlyIcon: true }, h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'light' : 'solid', size: "medium" })), h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { href: this.link }, this.img && !this.videoSrc ? h("img", { src: this.img, alt: this.imgAlt }) : '', this.videoSrc && !this.img ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : ''), h("div", { class: `NotificationCart ${this.addedToCart == true ? 'is-active' : ''}` }, h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { slot: "prefix", name: "check" }), h("span", null, " ", this.notificationText, " "))), this.onlyIconButton ?
             h("div", { class: "OnlyIconButton" }, h("jump-button", { variant: "secondary", size: "large", pill: true, onlyIcon: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: 'cart-shopping', category: "regular" })))
-            : ''), h("div", { key: 'ec82214460c67faba8af6098369d4235bec773e5', class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { key: '953cf7cfd621a0209c2fd10af584cc3cac98760e', class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", { key: '09701cab14c47d008f9fd381679c75fff137e3fa' }, h("div", { key: 'fd0bbbff94d79d1a6e0c6ba396da2e74cd4c080c', class: "Info" }, h("div", { key: '9c16dc172061744b418e263b8f2d361ec1761836', class: "Product" }, this.productName), h("div", { key: '5e2c9a1441a2f0dea4e7b6983204ec7a7071f52c', class: "Subtitle" }, this.subtitle)), h("div", { key: '4c0e6462f9600552c6bf2f958c0ece70804f3ab3', class: "Price" }, h("div", { key: 'f02d651ed87dda490d9dd5d45ba3f587b9ebe4e5', class: "Price__Discount" }, "-5%"), h("div", { key: 'cae9ab50ca4739f7e91a759e4d175c2341a98872', class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), h("div", { key: 'e628599318e8d4a8c249476712f95e8e19951d83', class: "Price__Sale" }, this.currency, this.salePrice))), h("div", { key: 'c324067e3c63718e56a3315cc7e14b1255b97103' }, h("select", { key: '43b91f6b4c88c865a3df41abd583b5aa1f538c84', name: "select", id: "selectID", onChange: (event) => this.changeVariationBody(event) }, h("option", { key: 'a9ae9bec327dc262608cd2dfd7efb5d877dc8a5c', value: 'm' }, "medium"), h("option", { key: '88c68917a0c97b8a208d7906b4603e1ccefec1a4', value: 'l' }, "large"), h("option", { key: '9d84d95a72aa2f7ab5299ea8a478c5c9cff85402', value: 'xl' }, "extra large")), this.quantity ? h("jump-quantity", { onClick: (event) => this.changeQuantityProduct(event) }) : '')), h("div", { key: 'a647b17041f2bc51d91f758e858ae7302930159e', class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
+            : ''), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", null, h("div", { class: "Info" }, h("div", { class: "Product" }, this.productName), h("div", { class: "Subtitle" }, this.subtitle)), h("div", { class: "Price" }, h("div", { class: "Price__Discount" }, calculateDiscount(this.price, this.salePrice), "%"), h("div", { class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), h("div", { class: "Price__Sale" }, this.currency, this.salePrice))), h("div", null, h("slot", { name: "select" }), h("slot", { name: "quantity" }))), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
             h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.waitingListText ? this.waitingListText : 'Notifica disponibilità') : '', !this.outOfStock && !this.onlyIconButton ?
             h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello') : ''))));
     }
@@ -489,42 +495,6 @@ export class JumpCardEcommerce {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "quantity": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates if the user can choose how much quantity of the product add to cart"
-                },
-                "attribute": "quantity",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "changedQuantity": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicate if the quantity is change"
-                },
-                "attribute": "changed-quantity",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "changedVariation": {
                 "type": "boolean",
                 "mutable": false,
@@ -591,21 +561,6 @@ export class JumpCardEcommerce {
                     "resolved": "any",
                     "references": {}
                 }
-            }, {
-                "method": "changeQuantity",
-                "name": "jump-change-quantity",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
             }, {
                 "method": "changeVariation",
                 "name": "jump-change-variation",
@@ -623,5 +578,6 @@ export class JumpCardEcommerce {
                 }
             }];
     }
+    static get elementRef() { return "JumpCardEcommerce"; }
 }
 //# sourceMappingURL=jump-card-ecommerce.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"jump-card-ecommerce.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'jump-card-ecommerce',\n  styleUrl: 'jump-card-ecommerce.scss',\n  shadow: true,\n})\nexport class JumpCardEcommerce {\n\n  JumpCardEcommerce: HTMLElement;\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  /** Indicate if card has only icon button*/\n  @Prop() onlyIconButton: boolean = false;\n\n  /** Indicate if card has background*/\n  @Prop() hasBackground: boolean = false;\n\n  /** Indicates the badge of the card*/\n  @Prop() badge: string;\n\n  /**  Indicates if the product is favorite */\n  @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n  /** Indicates the link of the card*/\n  @Prop() link: string;\n\n  /** Indicates the image's src of the card*/\n  @Prop() img: string ;\n\n  /** Indicates the img's alt of the card*/\n  @Prop() imgAlt: string;\n\n  /** Indicates the videoSrc of the card*/\n  @Prop() videoSrc: string; \n\n  /** Indicate if the product is added to cart*/\n  @Prop() addedToCart: boolean = false;\n\n  /** Indicates the notificationUrl of the card*/\n  @Prop() notificationUrl: string;\n\n  /** Indicates the notificationText of the card*/\n  @Prop() notificationText: string = 'Aggiunto al carrello';\n\n  /** Indicates the title of the card*/\n  @Prop() productName: string ;\n\n  /** Indicates the subtitle of the card*/\n  @Prop() subtitle: string;\n\n  /** Indicates the ID of the product, can be also a SKU*/\n  @Prop() productId: string ;\n\n  /**  Indicates the price of the card */\n  @Prop() price: number;\n\n  /** Indicates the sale price of the card */\n  @Prop() salePrice: number;\n\n  /** Indicates the currency of the card */\n  @Prop() currency: string;\n\n  /** Indicates if the product is outOfStock */\n  @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n  \n  /** Indicates the outOfStockText of the product*/\n  @Prop() outOfStockText: string;\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() addtoCartText: string ;\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() waitingListText: string ;\n\n  /** Indicate if the user request to be notified when te product is avaible*/\n  @Prop() addToWaitingList: boolean = false;\n\n  /** Indicates if the user can choose how much quantity of the product add to cart */\n  @Prop({mutable:true, reflect: true}) quantity: boolean = false;\n\n  /** Indicate if the quantity is change*/\n  @Prop() changedQuantity: boolean = false;\n\n  /** Indicate if the variation is change*/\n  @Prop() changedVariation: boolean = false;\n\n  // /** Indicates the inizial value of input quantity*/\n  // @Prop() quantity: number ;\n\n\n   /* ---------------------- @EVENTS ------------------------- */\n  \n  @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n  @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n  @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n  @Event({eventName: 'jump-change-quantity'}) changeQuantity: EventEmitter;\n\n  @Event({eventName: 'jump-change-variation'}) changeVariation: EventEmitter;\n\n  \n  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  componentWillLoad() {\n    // this._selectVariations = this.selectVariations?.split(',');\n  }\n\n  onToggleFavorite() {\n    this.favorite = !this.favorite;\n    this.toggleFavorite.emit(\n      {\n        productId: this.productId,\n        favorite: this.favorite\n      }\n    ); \n  }\n\n  addProductToCart() {\n    this.addedToCart = true;\n    const payload = {\n      productId: this.productId,\n      addedToCart: this.addedToCart,\n      quantity: 2 // da prendere dal quantity\n      // mancano le variazioni\n    };\n    this.productAddToCart.emit(payload);\n    console.log(\"productAddToCart payload:\", payload);\n  }\n\n  waitingList() {\n    this.addToWaitingList = true;\n    this.productWaitingList.emit(\n      {\n        productId: this.productId,\n        addToWaitingList: this.addToWaitingList\n      }\n    )\n  }\n\n  changeQuantityProduct(event: Event) {\n    // const quantityInput = this.JumpCardEcommerce.querySelector('jump-quantity');\n    // const quantityValue = quantityInput.value; // Access the `value` property\n    const quantityElement = event.target as HTMLInputElement;\n    console.log('Valore selezionato:', quantityElement);\n    // const quantityValue = quantityElement.value;\n\n    this.changedQuantity = true;\n    const payload = {\n      productId: this.productId,\n      changedQuantity: this.changedQuantity,\n      quantity: 2 // da sostituire con quaintity value\n    };\n    this.changeQuantity.emit(payload);\n    console.log(\"changeQuantity payload:\", payload)\n  }\n\n  changeVariationBody(event: Event) {\n    const selectElement = event.target as HTMLSelectElement;\n    const selectedValue = selectElement.value;\n\n    this.changedVariation = true;\n    const payload = {\n      productId: this.productId,\n      changedVariation: this.changedVariation,\n      variation: selectedValue // da sostituire\n    };\n    this.changeVariation.emit(payload);\n    console.log(\"changeVariation payload:\", payload)\n  }\n\n  render() {\n    const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n    const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n    const justifyClass = this.outOfStock ? 'justify-between' : '';\n\n    return (\n\n      <Host ref={(el) => {this.JumpCardEcommerce = el;}} >\n        {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" label={this.badge}></jump-badge> : ''}\n  \n        <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'neutral' : 'primary'} size=\"small\" text onlyIcon>\n            <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'light' : 'solid'} size=\"medium\"></jump-icon>\n        </jump-button> \n\n        <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n          <a href={this.link}>\n            {this.img && !this.videoSrc ? <img src={this.img} alt={this.imgAlt}></img> : ''}\n            {this.videoSrc && !this.img ? \n              <video autoplay> \n                <source src={this.videoSrc} type=\"video/mp4\"/> \n                <source src={this.videoSrc} type=\"video/mov\"/> \n                <source src={this.videoSrc} type=\"video/webm\"/> \n              </video> : ''}\n          </a> \n          <div class={`NotificationCart ${this.addedToCart == true ? 'is-active' : ''}`}>\n            <jump-button href={this.notificationUrl} variant=\"white\" text> \n            <jump-icon slot=\"prefix\" name=\"check\"></jump-icon> \n              <span> {this.notificationText} </span>\n            </jump-button>\n          </div>\n            {this.onlyIconButton ? \n              <div class=\"OnlyIconButton\">\n                <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}> \n                  <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon> \n                </jump-button> \n              </div>\n              : ''\n            }\n        </div>\n\n        <div class={`Content ${backgroundClass} ${iconOnlyClass}`}>\n          <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n            <div>\n              <div class=\"Info\">\n                <div class=\"Product\">{this.productName}</div>\n                <div class=\"Subtitle\">{this.subtitle}</div>\n              </div>\n\n              <div class=\"Price\">\n                <div class=\"Price__Discount\">-5%</div>\n                <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n                  {this.currency}{this.price}\n                </div>\n                <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n              </div>\n            </div>\n            <div>\n              {/* manca la proprietà se ci sono variazioni o no */}\n              <select name=\"select\" id=\"selectID\" onChange={(event) => this.changeVariationBody(event)}>\n                <option value='m'>medium</option>\n                <option value='l'>large</option>\n                <option value='xl'>extra large</option>\n              </select>\n\n              {this.quantity ? <jump-quantity onClick={(event) => this.changeQuantityProduct(event)}></jump-quantity> : ''}\n            \n              {/* <slot name=\"select\"></slot>\n              <slot name=\"quantity\"></slot> */}\n            </div>\n            \n          </div>\n\n          <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\n            \n            {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n            \n            { this.outOfStock ?  \n              <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}> \n                <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n                {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'} \n              </jump-button> : ''\n            }\n\n            { !this.outOfStock && !this.onlyIconButton ?  \n              <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}> \n                <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n                {this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello'} \n              </jump-button> : ''\n            }\n\n          </div>\n\n        </div>\n      </Host>\n    );\n  }\n\n}"]}
+{"version":3,"file":"jump-card-ecommerce.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"names":[],"mappings":"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","sourcesContent":["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}"]}

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

@@ -112,34 +112,29 @@ export default {
             description: 'cta per richiedere l\'avviso se il prodotto torna disponibile',
             control: 'text',
         },
-        quantity: {
-            name: 'quantity',
-            description: 'Indica se è visibile il campo per la quantità del prodotto',
-            control: 'boolean',
-            defaultValue: false
-        }
+        // quantity: {
+        //   name: 'quantity',
+        //   description: 'Indica se è visibile il campo per la quantità del prodotto',
+        //   control: 'boolean',
+        //   defaultValue: false
+        // }
     }
 };
-const Template = (args) => {
-    const attributes = generateAttributesFromArgs(args);
-    return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>`);
-};
 // const Template = (args) => {
 //   const attributes = generateAttributesFromArgs(args);
-//   return formatHtml(`
-//   <jump-card-ecommerce ${attributes}> 
-//     <select slot="select" name="select" id="selectID" onChange={(event) => this.changeVariationBody(event)}>
-//       <option value='m'>mono</option>
-//       <option value='l'>enciclopedico</option>
-//       <option value='xl'>superlativogalattico</option>
-//     </select>
-//     <jump-quantity slot="quantity" onClick={(event) => this.changeQuantityProduct(event)}></jump-quantity>
-//   </jump-card-ecommerce>`);
+//   return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>`);
 // }
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`
+  <jump-card-ecommerce ${attributes}> 
+    <jump-quantity slot="quantity"></jump-quantity>
+  </jump-card-ecommerce>`);
+};
 export const Card = Template.bind({});
 Card.args = {
     hasBackground: true,
-    onlyIconButton: true,
+    onlyIconButton: false,
     badge: 'Badge',
     favorite: true,
     link: '/prodotto',
@@ -157,7 +152,6 @@ Card.args = {
     outOfStockText: 'Esaurito',
     addtoCartText: 'Aggiungi al carrello',
     waitingListText: 'Notifica disponibilità',
-    quantity: true
 };
 // const TemplateWithEvent = (args, data) => {
 //   let id = data.id;

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

@@ -1 +1 @@
-{"version":3,"file":"jump-card-ecommerce.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/CardEcommerce/Card',\n  tags: ['autodocs'],\n  argTypes: {\n    hasBackground: {\n      name: 'hasBackground',\n      description: 'Aggiungi o meno il background alla card',\n      control: 'boolean',\n    },\n    onlyIconButton: {\n      name: 'onlyIconButton',\n      description: 'Cambia lo stile della card mostrando solo il bottone icona',\n      control: 'boolean',\n    },\n    badge: {\n      name: 'badge',\n      description: 'Badge della card',\n      control: 'text',\n    },\n    favorite: {\n      name: 'favorite',\n      description: 'Aggiunge il prodotto ai preferiti',\n      control: 'boolean',\n    },\n    link: {\n      name: 'link',\n      description: 'Link della card',\n      control: 'text',\n    },\n    img: {\n      name: 'img',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'imgAlt',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'videoSrc',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: false\n      }\n    },\n    notificationUrl: {\n      name: 'notificationUrl',\n      description: 'Url della notifica da visualizzare',\n      control: 'text',\n    },\n    notificationText: {\n      name: 'notificationText',\n      description: 'Testo della notifica da visualizzare',\n      control: 'text',\n    },\n    productName: {\n      name: 'productName',\n      description: 'Nome del prodotto',\n      control: 'text',\n    },\n    subtitle: {\n      name: 'subtitle',\n      description: 'Sottotitolo della card',\n      control: 'text',\n    },\n    productId: {\n      name: 'productId',\n      description: 'ID del prodotto',\n      control: 'text',\n    },\n    price: {\n      name: 'price',\n      description: 'Prezzo del prodotto',\n      control: 'number',\n    },\n    salePrice: {\n      name: 'salePrice',\n      description: 'Prezzo scontato del prodotto',\n      control: 'number',\n    },\n    outOfStock: {\n      name: 'outOfStock',\n      description: 'Indica se il prodotto è esaurito',\n      control: 'boolean',\n      defaultValue: false\n    },\n    outOfStockText: {\n      name: 'outOfStockText',\n      description: 'Testo da visualizzare se il prodotto è esaurito',\n      control: 'text',\n    },\n    addtoCartText: {\n      name: 'addtoCartText',\n      description: 'Testo bottone aggiungi al carrello',\n      control: 'text',\n    },\n    waitingListText: {\n      name: 'waitingListText',\n      description: 'cta per richiedere l\\'avviso se il prodotto torna disponibile',\n      control: 'text',\n    },\n    quantity: {\n      name: 'quantity',\n      description: 'Indica se è visibile il campo per la quantità del prodotto',\n      control: 'boolean',\n      defaultValue: false\n    }\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>`);\n}\n\n// const Template = (args) => {\n//   const attributes = generateAttributesFromArgs(args);\n//   return formatHtml(`\n//   <jump-card-ecommerce ${attributes}> \n//     <select slot=\"select\" name=\"select\" id=\"selectID\" onChange={(event) => this.changeVariationBody(event)}>\n//       <option value='m'>mono</option>\n//       <option value='l'>enciclopedico</option>\n//       <option value='xl'>superlativogalattico</option>\n//     </select>\n//     <jump-quantity slot=\"quantity\" onClick={(event) => this.changeQuantityProduct(event)}></jump-quantity>\n//   </jump-card-ecommerce>`);\n// }\n\nexport const Card = Template.bind({});\nCard.args = {\n  hasBackground: true,\n  onlyIconButton: true,\n  badge: 'Badge',\n  favorite: true,\n  link: '/prodotto',\n  img: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n  imgAlt: 'Immagine',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  currency: '€',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  addtoCartText: 'Aggiungi al carrello',\n  waitingListText: 'Notifica disponibilità',\n  quantity: true\n};\n\n\n// const TemplateWithEvent = (args, data) => {\n//   let id = data.id;\n//   const attributes = generateAttributesFromArgs(args);\n//   return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>\n//     <script>\n\n//     (function() {\n//       let container; \n//       container = document.querySelector('#story--${id}');\n//       container.querySelector('jump-card-ecommerce').addEventListener( 'jump-toggle-favorite',  ev => {\n//         let productId = ev.detail.productId;\n//         let favorite = ev.detail.favorite;\n//         if(favorite){\n//           alert( 'Prodotto ' + productId + ' aggiunto ai preferiti');\n//         } else {\n//           alert( 'Prodotto ' + productId + ' rimosso dai preferiti');\n//         }\n//       })\n\n//       container.querySelector('jump-card-ecommerce').addEventListener( 'jump-add-to-cart',  ev => {\n//         let productId = ev.detail.productId;\n//         let addedToCart = ev.detail.addedToCart;\n//         if(addedToCart){\n//           alert( 'Prodotto ' + productId + ' aggiunto al carrello');\n//         } \n//       })\n\n//     })();\n\n//     </script>\n//   ` );\n// }\n\n// export const CardEvent = TemplateWithEvent.bind({});\n// CardEvent.args = {\n//   badge: 'Badge',\n//   favorite: false,\n//   link: '/prodotto',\n//   img: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n//   imgAlt: 'Immagine',\n//   // ricordati di mettere anche esempio con video\n//   notificationUrl: '/cart',\n//   notificationText: 'Aggiunto al carrello',\n//   addedToCart: false,\n//   onSale: true,\n//   variant: 'light',\n//   productName: 'T-shirt',\n//   subtitle: 'T-shirt da uomo',\n//   discount: '5%',\n//   price: 15,\n//   salePrice: 10,\n//   background: false,\n//   productId: '1',\n// };\n"]}
+{"version":3,"file":"jump-card-ecommerce.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/CardEcommerce/Card',\n  tags: ['autodocs'],\n  argTypes: {\n    hasBackground: {\n      name: 'hasBackground',\n      description: 'Aggiungi o meno il background alla card',\n      control: 'boolean',\n    },\n    onlyIconButton: {\n      name: 'onlyIconButton',\n      description: 'Cambia lo stile della card mostrando solo il bottone icona',\n      control: 'boolean',\n    },\n    badge: {\n      name: 'badge',\n      description: 'Badge della card',\n      control: 'text',\n    },\n    favorite: {\n      name: 'favorite',\n      description: 'Aggiunge il prodotto ai preferiti',\n      control: 'boolean',\n    },\n    link: {\n      name: 'link',\n      description: 'Link della card',\n      control: 'text',\n    },\n    img: {\n      name: 'img',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'imgAlt',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'videoSrc',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: false\n      }\n    },\n    notificationUrl: {\n      name: 'notificationUrl',\n      description: 'Url della notifica da visualizzare',\n      control: 'text',\n    },\n    notificationText: {\n      name: 'notificationText',\n      description: 'Testo della notifica da visualizzare',\n      control: 'text',\n    },\n    productName: {\n      name: 'productName',\n      description: 'Nome del prodotto',\n      control: 'text',\n    },\n    subtitle: {\n      name: 'subtitle',\n      description: 'Sottotitolo della card',\n      control: 'text',\n    },\n    productId: {\n      name: 'productId',\n      description: 'ID del prodotto',\n      control: 'text',\n    },\n    price: {\n      name: 'price',\n      description: 'Prezzo del prodotto',\n      control: 'number',\n    },\n    salePrice: {\n      name: 'salePrice',\n      description: 'Prezzo scontato del prodotto',\n      control: 'number',\n    },\n    outOfStock: {\n      name: 'outOfStock',\n      description: 'Indica se il prodotto è esaurito',\n      control: 'boolean',\n      defaultValue: false\n    },\n    outOfStockText: {\n      name: 'outOfStockText',\n      description: 'Testo da visualizzare se il prodotto è esaurito',\n      control: 'text',\n    },\n    addtoCartText: {\n      name: 'addtoCartText',\n      description: 'Testo bottone aggiungi al carrello',\n      control: 'text',\n    },\n    waitingListText: {\n      name: 'waitingListText',\n      description: 'cta per richiedere l\\'avviso se il prodotto torna disponibile',\n      control: 'text',\n    },\n    // quantity: {\n    //   name: 'quantity',\n    //   description: 'Indica se è visibile il campo per la quantità del prodotto',\n    //   control: 'boolean',\n    //   defaultValue: false\n    // }\n  }\n};\n\n// const Template = (args) => {\n//   const attributes = generateAttributesFromArgs(args);\n//   return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>`);\n// }\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n  <jump-card-ecommerce ${attributes}> \n    <jump-quantity slot=\"quantity\"></jump-quantity>\n  </jump-card-ecommerce>`);\n}\n\nexport const Card = Template.bind({});\nCard.args = {\n  hasBackground: true,\n  onlyIconButton: false,\n  badge: 'Badge',\n  favorite: true,\n  link: '/prodotto',\n  img: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n  imgAlt: 'Immagine',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  currency: '€',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  addtoCartText: 'Aggiungi al carrello',\n  waitingListText: 'Notifica disponibilità',\n};\n\n\n// const TemplateWithEvent = (args, data) => {\n//   let id = data.id;\n//   const attributes = generateAttributesFromArgs(args);\n//   return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>\n//     <script>\n\n//     (function() {\n//       let container; \n//       container = document.querySelector('#story--${id}');\n//       container.querySelector('jump-card-ecommerce').addEventListener( 'jump-toggle-favorite',  ev => {\n//         let productId = ev.detail.productId;\n//         let favorite = ev.detail.favorite;\n//         if(favorite){\n//           alert( 'Prodotto ' + productId + ' aggiunto ai preferiti');\n//         } else {\n//           alert( 'Prodotto ' + productId + ' rimosso dai preferiti');\n//         }\n//       })\n\n//       container.querySelector('jump-card-ecommerce').addEventListener( 'jump-add-to-cart',  ev => {\n//         let productId = ev.detail.productId;\n//         let addedToCart = ev.detail.addedToCart;\n//         if(addedToCart){\n//           alert( 'Prodotto ' + productId + ' aggiunto al carrello');\n//         } \n//       })\n\n//     })();\n\n//     </script>\n//   ` );\n// }\n\n// export const CardEvent = TemplateWithEvent.bind({});\n// CardEvent.args = {\n//   badge: 'Badge',\n//   favorite: false,\n//   link: '/prodotto',\n//   img: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n//   imgAlt: 'Immagine',\n//   // ricordati di mettere anche esempio con video\n//   notificationUrl: '/cart',\n//   notificationText: 'Aggiunto al carrello',\n//   addedToCart: false,\n//   onSale: true,\n//   variant: 'light',\n//   productName: 'T-shirt',\n//   subtitle: 'T-shirt da uomo',\n//   discount: '5%',\n//   price: 15,\n//   salePrice: 10,\n//   background: false,\n//   productId: '1',\n// };\n"]}

package/dist/collection/components/jump-filter/jump-filter.js

@@ -39,8 +39,8 @@ export class JumpFilter {
         }
     }
     render() {
-        return (h(Host, { key: 'a25627f52d4e4eabd9714bca4605f7d506e8302a', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'e58ab446793fd152b0e724ea8067f1030d6ecaaa', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, h("slot", { key: '1ffb7d8f787733c037da73c4643d016a5d314c85', name: "prefix" }, this.filterButtonIcon && h("jump-icon", { key: 'ce09716fa23121cd5b4921eab94260d6a931a36a', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), h("slot", { key: 'fd339c7580f3e142fd80b4c4eb8503391b7ebfa2', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: '078c8038b81200c09f7ddf8d6d054449e896554b', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
-            h("div", { key: '5476fe397f3599a50548b0ea4f47b4c66bbbd6cd', class: 'filtersDrawer__header' }, h("jump-icon", { key: '1e16b65feb8f923c2b9d1f421d939f6eeee136f7', class: "small", name: this.filterButtonIcon }), h("h3", { key: '02f99e915aa045d62d7afedaf0d216adbf8db7d0' }, this.filterHeading)), h("slot", { key: 'aa697d79b5ca21bdcf75e020780019effd19898c' }))));
+        return (h(Host, { key: '66c02e0b1d1e1b57c12a7124874b4d41f0281579', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'c6533178a0f3a4b389f289ca919925c160a24df8', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, h("slot", { key: 'd95b2240c4a7cfec153213ba73c5679b9e72d227', name: "prefix" }, this.filterButtonIcon && h("jump-icon", { key: '9b964e09eb0942e796b4bee737a97326e0363c4e', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), h("slot", { key: '39cc668bd11bcbff18521fed0216024676827487', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: 'f864e224be6ef13cd2530cca0e4e61366253ccf0', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
+            h("div", { key: 'e56713bbe8701eb7c5cabf9a768206c688bebfac', class: 'filtersDrawer__header' }, h("jump-icon", { key: 'eb27d23ae68ed0e245d6ef2d9feb600a6e47ebd2', class: "small", name: this.filterButtonIcon }), h("h3", { key: '4396ffb6e8a10397fe12c322192ab085e06ffa32' }, this.filterHeading)), h("slot", { key: '54b6684aad46df572655a8f29e4c865182c0f1a3' }))));
     }
     static get is() { return "jump-filter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-filtergroup/jump-filtergroup.js

@@ -98,8 +98,8 @@ export class JumpFiltergroup {
         });
     }
     render() {
-        return (h(Host, { key: '839a19d9b3c6e54a9852942d5ed2742f0c3bb148' }, this.heading && h("h5", { key: 'e6ee76715547568a0a523238bccf1270bbf5e51d' }, this.heading), h("div", { key: 'bf592042f4ac6d24f1fc781a1bfa243096e6533b', class: "filterGroup" }, h("slot", { key: '017cdc449f638dfbd280053c7883ae2cdaf460c7', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
-            h("jump-button", { key: '4ab0117c15d7de1b4a026444f0492810bffe13bc', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '720871af9f4c520b8e11a72615300243b8d14dcb', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
+        return (h(Host, { key: '6ea498729a7279ad7b686ef158e6d912c7ec86ce' }, this.heading && h("h5", { key: 'a4d4a1b71dec49d90bd92a30c2335c8a69034906' }, this.heading), h("div", { key: '215a8386f89ba7026b2e1b05aad67157e7f512d6', class: "filterGroup" }, h("slot", { key: '6e96d228078df165e364adccae8d6dceac8626f4', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
+            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, h("jump-icon", { key: '79e9c1540e53fee842bc5ba0658b0437eddbf47d', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
     }
     static get is() { return "jump-filtergroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-pagination/jump-pagination.css

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  --jump-button-color: yellow;
 }
 
 .JumpPagination {

package/dist/collection/components/jump-pagination/jump-pagination.js

@@ -22,11 +22,25 @@ export class JumpPagination {
     }
     /* --------------------- RENDER ------------------------------- */
     render() {
-        return (h(Host, { key: '91a535355690cc66cac5f6c7ba7b770cc1898d39', class: "JumpPagination" }, h("div", { key: 'b14a24e6c1f4d1cf7348eaacd2a77cd828eccb78', class: "JumpPagination__Wrapper" }, h("div", { key: '4492c23fc92b7aba537cb3f9025524a6bb07ce6c', class: "indicators" }, h("div", { key: 'f48411d785dd35e6404772c1d39d9d78f3da462b', class: "elements" }, h("span", { key: '1d2d195a9ec45c2bd5795b4474de9dc052af22d5' }, h("span", { key: 'c7f9f4473cc2e82e754c3748eb04704f62676e52' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'c1a2a36aef2b86aef07aa040d4d5c9043aeaf75e' }, this.last))), h("div", { key: 'a2645af8e6ce12cc897796fa132dba44f448acd2', class: "arrow" }, this.showFirstAndLast &&
-            h("button", { key: 'ee246362f466d4691d31f8efc7182ca7c5e9963f', onClick: () => { this.current = 1; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'e132a8f0c4aad2fb5924e54ad1015315983f2be5', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: '0c7144d281a536b73fda1ac94a36e54a17af846b', onClick: () => { this.current--; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '15d1c8b75d229cc33349145bad0ac1dfb5eac83e', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '0721ba5bfb54732174707e61833ceb19d5c8c2fa', onClick: () => { this.current++; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '2f0545ccb0da5032604fe535af035be5059508e0', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
-            h("button", { key: '1a62859d3dd69ac106335f9fb3d605ec90d685a7', onClick: () => { this.current = this.last; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'de0dd15cf47d11a59118ca3b8f0999ef60c66997', slot: "prefix", name: "chevrons-right" }), "   "))))));
+        return (h(Host, { key: 'fff2409f80165635fb36aff91e928053a758e56d', class: "JumpPagination" }, h("div", { key: '02def4c71603b81f531c66c612fa492fa665631b', class: "JumpPagination__Wrapper" }, h("div", { key: '4bacda248ee1ee095e9272f0948df3f8d8e539e3', class: "indicators" }, h("div", { key: 'b344407f8e6f07cda556fd7f1f272763272786c8', class: "elements" }, h("span", { key: 'f2e31e33e8608244820bfc4596c47f6234cc25f2' }, h("span", { key: 'a64da6ab40dbea7f7fbeaafeb1a06ea2242993cc' }, this.current), " ", this.pagLabel, " ", h("span", { key: '5a6b9a269ea390192cab4ec6319bc4cca0883921' }, this.last))), h("div", { key: '01878b6a1ba85feb505ec230085f6cbff2edddca', class: "arrow" }, this.showFirstAndLast &&
+            // <button 
+            //   onClick={() => {this.current = 1} }
+            //   disabled={(this.current === 1) ? true : false}> 
+            //     <jump-icon library="fa" category="regular" name="chevrons-left" size="small" slot="prefix"
+            //     disabled={(this.current === 1) ? true : false}
+            //     ></jump-icon>   
+            // </button>
+            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 }, " ", h("jump-icon", { key: '559950d3f0e77790efc1c301d1ce8e0ad2d9ab44', slot: "suffix", name: "chevrons-left" }), " "), 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 }, " ", h("jump-icon", { key: '6035d9060e9ea7ad1d0156dd1295cfb689578263', slot: "suffix", name: "chevron-left" }), " "), 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 }, " ", h("jump-icon", { key: '2e484cd77ece285b0e6e72941b06eab8e571c968', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            // <button 
+            //   onClick={() => {this.current = this.last}}
+            //   disabled={(this.current === this.last) ? true : false}
+            //   >
+            //   <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>   
+            // </button> 
+            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 }, " ", h("jump-icon", { key: 'ca455641fadf5bec18d26d071678c7af07d14837', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get is() { return "jump-pagination"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["jump-pagination.scss"]

package/dist/collection/components/jump-pagination/jump-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO5F,MAAM,OAAO,cAAc;;uBAGE,CAAC;wBAmBD,IAAI;oBAKR,EAAE;gCAKW,KAAK;;IA1BzC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,OAAO,GAAG;YACZ,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,QAAQ;YACtB,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAqBD,iEAAiE;IACjE,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACnB,CAAC;IAED,kEAAkE;IAClE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YAC1B,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU;wBACnB;4BACE,+DAAO,IAAI,CAAC,OAAO,CAAQ;;4BAAE,IAAI,CAAC,QAAQ;;4BAAE,+DAAO,IAAI,CAAC,IAAI,CAAQ,CAC/D,CACH;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,CAAA,CAAC,EACjC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;sCAAY;wBAE1E,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa;kCAAY;wBACvE,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;kCAAY;wBACzE,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,CAAA,CAAC,EACzC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa;sCAAY,CAEzE,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @STATE ------------------------- */\n  @State() current: number = 1;\n\n  @Watch('current')\n  watchcurrent(newValue: number, oldValue: number) {\n    let details = {\n      current: newValue,\n      previousPage: oldValue,\n      first: 1,\n      last: this.last,\n      direction: newValue > oldValue ? 'next' : 'prev'\n    };\n\n    this.changePage.emit(details);\n  }\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  /**\n   * Label of the pagination\n   */\n  @Prop() pagLabel: string = 'di'; \n\n  /**\n   * Last element of the page\n   */\n  @Prop() last: number = 10; \n\n  /**\n   * Show button to navigate so first e last page\n   */\n  @Prop() showFirstAndLast: boolean = false;\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentWillLoad() {\n    this.current = 1;\n  }\n  \n  /* --------------------- RENDER ------------------------------- */\n  render() {\n    return (\n      <Host class=\"JumpPagination\">\n        <div class=\"JumpPagination__Wrapper\">\n          <div class=\"indicators\"> \n            <div class=\"elements\">\n              <span>\n                <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n              </span>\n            </div>\n            <div class=\"arrow\">\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.current = 1} }\n                  disabled={(this.current === 1) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>   </button>\n              }\n              <button \n                onClick={() => {this.current--}} \n                disabled={(this.current === 1) ? true : false}\n              > <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>   </button>\n              <button \n                onClick={() => {this.current++}}\n                disabled={(this.current === this.last) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>   </button>\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.current = this.last}}\n                  disabled={(this.current === this.last) ? true : false}\n                  > <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>   </button> \n              }\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: true,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @STATE ------------------------- */\n  @State() current: number = 1;\n\n  @Watch('current')\n  watchcurrent(newValue: number, oldValue: number) {\n    let details = {\n      current: newValue,\n      previousPage: oldValue,\n      first: 1,\n      last: this.last,\n      direction: newValue > oldValue ? 'next' : 'prev'\n    };\n\n    this.changePage.emit(details);\n  }\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  /**\n   * Label of the pagination\n   */\n  @Prop() pagLabel: string = 'di'; \n\n  /**\n   * Last element of the page\n   */\n  @Prop() last: number = 10; \n\n  /**\n   * Show button to navigate so first e last page\n   */\n  @Prop() showFirstAndLast: boolean = false;\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentWillLoad() {\n    this.current = 1;\n  }\n  \n  /* --------------------- RENDER ------------------------------- */\n  render() {\n    return (\n      <Host class=\"JumpPagination\">\n        <div class=\"JumpPagination__Wrapper\">\n          <div class=\"indicators\"> \n            <div class=\"elements\">\n              <span>\n                <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n              </span>\n            </div>\n            <div class=\"arrow\">\n             \n              {this.showFirstAndLast &&\n                // <button \n                //   onClick={() => {this.current = 1} }\n                //   disabled={(this.current === 1) ? true : false}> \n                //     <jump-icon library=\"fa\" category=\"regular\" name=\"chevrons-left\" size=\"small\" slot=\"prefix\"\n                //     disabled={(this.current === 1) ? true : false}\n                //     ></jump-icon>   \n                // </button>\n                <jump-button onClick={() => { this.current = 1 }}  variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === 1) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n              }\n              {/* <button \n                onClick={() => {this.current--}} \n                disabled={(this.current === 1) ? true : false}>\n                <jump-icon library=\"fa\" category=\"regular\" name=\"chevron-left\" size=\"small\" slot=\"prefix\"></jump-icon>   \n              </button> */}\n              <jump-button onClick={() => { this.current-- }}  variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === 1) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n              <jump-button onClick={() => { this.current++ }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === this.last) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n              {/* <button \n                onClick={() => {this.current++}}\n                disabled={(this.current === this.last) ? true : false}\n                >    \n                <jump-icon library=\"fa\" category=\"regular\" name=\"chevron-right\" size=\"small\" slot=\"prefix\"></jump-icon> \n                </button> */}\n              {this.showFirstAndLast &&\n                // <button \n                //   onClick={() => {this.current = this.last}}\n                //   disabled={(this.current === this.last) ? true : false}\n                //   >\n                //   <jump-icon library=\"fa\" category=\"regular\" name=\"chevrons-right\" size=\"small\" slot=\"prefix\"></jump-icon>   \n                // </button> \n                <jump-button onClick={() => { this.current = this.last }}  variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === this.last) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n              }\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/jump-pagination-table/jump-pagination-table.js

@@ -60,9 +60,21 @@ export class JumpPaginationTable {
     /* --------------------- RENDER ------------------------------- */
     render() {
         var _a;
-        return (h(Host, { key: '7aaf182b98f9dbdbb1d6534a1d7b466bbc486fca', class: "JumpPaginationTable" }, h("div", { key: 'b8a5d5213ae3a20ee69aeb75b0d82c58ab4d5200', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '2de29a7b2bb549e3b6e4260429651c1cc3ba72b6', class: "elementsPerPage" }, h("label", { key: 'a9d541046112f0a44239b3d61dea7a80924e56a6', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '28db5dfa88e11493b41a1b846ae35da95ab97926', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '67f6433160f242f108682af2e97c6fdca2136836', class: "indicators" }, h("div", { key: 'a2babacab58ca903d543396f184ac0e82af517c0', class: "elements" }, h("span", { key: 'b50d80c5aff8d99a9146fb22a7624f3c47784f78' }, h("span", { key: '33e54e9d66a4c80ed6c85ad3ac48e82bd1b329f0' }, this.first), " - ", h("span", { key: '925393912439fb60530f18eb863de15b22e41f25' }, this.last), " ", this.pagLabel, " ", h("span", { key: '1d27a6418dbe2a43e18b99bb48164ffbc0c2c8ca' }, this.total))), h("div", { key: '7d5f3508e4110320bf990c51e8f324d1e2c3cb8a', class: "arrow" }, this.showFirstAndLast &&
-            h("button", { key: '6807e1defb67535f7ca92443d6869ae203155226', onClick: () => this.doChangePage('first'), disabled: this.first === 1 }, h("jump-icon", { key: '221eda90c3a22540531674ff4bf6e980fded8e22', slot: "prefix", name: "chevrons-left" })), h("button", { key: '7cc613b04ac2aee3621fe8d8375afc5fbfffe41b', onClick: () => this.doChangePage('previous'), disabled: this.first === 1 }, h("jump-icon", { key: 'e05d4ea32e2f48fb59c768a6f5a7589b16dbabe2', slot: "prefix", name: "chevron-left" })), h("button", { key: 'dc347685f6183ed76c4b3e0ac1e9b762d974ef39', onClick: () => this.doChangePage('next'), disabled: this.last === this.total }, h("jump-icon", { key: 'd2b9da97638a1d53936d7ff238ee93f0eff910c2', slot: "prefix", name: "chevron-right" })), this.showFirstAndLast &&
-            h("button", { key: '9a4a7253847f4e60ae44866b3e12d8623562f7f6', onClick: () => this.doChangePage('last'), disabled: this.last === this.total }, h("jump-icon", { key: 'bcec81a82757e92facd426c351986b19552c9506', slot: "prefix", name: "chevrons-right" })))))));
+        return (h(Host, { key: '824d23ed1c7c26ea21047e5ce764887d526b2df6', class: "JumpPaginationTable" }, h("div", { key: '742793df17e3f1826768d7839905baddd0223d2b', class: "JumpPaginationTable__Wrapper" }, h("div", { key: 'b11952c253e2472672418fc1c48ab59a1ba06e51', class: "elementsPerPage" }, h("label", { key: '9dd4f75b634d818787f050bf2fcf01ef4faad36e', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: 'f33c5d47808e09b0d6cef474b29373564243c3a2', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '392ede73df269175c997b713f9a4a5ecd92a0e25', class: "indicators" }, h("div", { key: '2438ecab0062bb1fec07d62e32597e2b2aba3fe4', class: "elements" }, h("span", { key: '49e7ad9c4e6298c41b6dba1d984bc5649b15bbbe' }, h("span", { key: '471b63b04e31295192e992f9c61e31878e1cb04d' }, this.first), " - ", h("span", { key: 'b1d61554e28c1e254efc1cf6768da9480a363aea' }, this.last), " ", this.pagLabel, " ", h("span", { key: 'b0727788ea7159d9bc07708814429c95866faa62' }, this.total))), h("div", { key: '0aa5a04cb2837c519790d43805f83cca903eca7e', class: "arrow" }, this.showFirstAndLast &&
+            // <button 
+            //   onClick={() => this.doChangePage('first')}
+            //   disabled={this.first === 1}
+            // >
+            //   <jump-icon slot="prefix" name="chevrons-left"></jump-icon>
+            // </button>
+            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 }, " ", h("jump-icon", { key: 'f6799dbdd47a0e845bf7860585c21f5b06d39811', slot: "suffix", name: "chevrons-left" }), " "), 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 }, " ", h("jump-icon", { key: '22199b55ffcfc402f01b9880a728a86b00dc47d3', slot: "suffix", name: "chevron-left" }), " "), 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 }, " ", h("jump-icon", { key: '1cdb6a7d147ad4757e3b7c717e0bd1fab8e356fb', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            // <button
+            //   onClick={() => this.doChangePage('last')}
+            //   disabled={this.last === this.total}
+            // >
+            //   <jump-icon slot="prefix" name="chevrons-right"></jump-icon>
+            // </button>
+            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 }, " ", h("jump-icon", { key: 'f8a929bcdbd2b488cb1bf481a2247fa8d0aa1daf', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get is() { return "jump-pagination-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/jump-pagination-table/jump-pagination-table.js.map

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

package/dist/collection/components/jump-quantity/jump-quantity.css

@@ -39,7 +39,9 @@
 }
 :host input[type=button] {
   cursor: pointer;
-  width: 16px;
+}
+:host ::slotted(jump-button) {
+  --jump-button-padding: 0;
 }
 :host .jump-quantity__InnerWrapper {
   display: flex;