@jumpgroup/jump-design-system 0.3.2 → 0.3.5

package/dist/jump-design-system/{p-34a46a10.entry.js → p-d2ee7b9b.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as a,H as i}from"./p-4d6cc90d.js";const s=":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8)}:host .Wrapper{display:flex;width:fit-content}:host .Wrapper.rounded{border-radius:50px;background-color:#f8f8f8}";const d=s;const n=class{constructor(a){e(this,a);this.setActiveTab=t(this,"jump-change-activetab",7);this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(e){this.setActiveTab.emit(e.detail);const t=getComputedStyle(document.documentElement);const a=t.getPropertyValue("--neutral-grey-secondary").trim();let i=this.JumpTabEl.querySelectorAll("jump-tab-item");if(i.length>0){i.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","");if(this.variant==="sheet"){i.forEach(((e,s)=>{if(e!==t&&s!==i.length-1){e.style.borderRight=`1px solid ${a}`}else{e.style.borderRight="1px solid transparent"}}));let e=t.previousElementSibling;if(e){e.style.borderRight="1px solid transparent"}}}else{t.removeAttribute("active")}}))}let s=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(s.length>0){s.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","")}else{t.removeAttribute("active")}}))}}componentDidLoad(){console.log("Component has been rendered");if(this.variant==="sheet"){const e=getComputedStyle(document.documentElement);const t=e.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach(((e,i)=>{if(i===a.length-1||e.classList.contains("active")){e.style.borderRight="1px solid transparent"}else{e.style.borderRight=`1px solid ${t}`}}))}}}render(){return a(i,{key:"325ebf63677d7b1307ebb5be3d521d06efa22a5a",class:"JumpTab",id:this.tabGroupName,ref:e=>{this.JumpTabEl=e}},a("div",{key:"afa4eb17c8582aa59f8f3b55237de34fa04871d5",class:"Wrapper "+this.variant},a("slot",{key:"69023d9ae6ae85ef8270d7c8ea4c881c60889f63",name:"tab-item"})),a("div",{key:"28257b0f8de4c3ef1b7dd7adb58dc2d0ce342164"},a("slot",{key:"3097cf4876730499e2067aed722ff822582e173f",name:"tab-content"})))}};n.style=d;export{n as jump_tab};
-//# sourceMappingURL=p-34a46a10.entry.js.map
+import{r as e,c as t,h as a,H as i}from"./p-4d6cc90d.js";const s=":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8)}:host .Wrapper{display:flex;width:fit-content}:host .Wrapper.rounded{border-radius:50px;background-color:#f8f8f8}";const n=s;const c=class{constructor(a){e(this,a);this.setActiveTab=t(this,"jump-change-activetab",7);this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(e){this.setActiveTab.emit(e.detail);const t=getComputedStyle(document.documentElement);const a=t.getPropertyValue("--neutral-grey-secondary").trim();let i=this.JumpTabEl.querySelectorAll("jump-tab-item");if(i.length>0){i.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","");if(this.variant==="sheet"){i.forEach(((e,s)=>{if(e!==t&&s!==i.length-1){e.style.borderRight=`1px solid ${a}`}else{e.style.borderRight="1px solid transparent"}}));let e=t.previousElementSibling;if(e){e.style.borderRight="1px solid transparent"}}}else{t.removeAttribute("active")}}))}let s=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(s.length>0){s.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","")}else{t.removeAttribute("active")}}))}}componentDidLoad(){console.log("Component has been rendered");if(this.variant==="sheet"){const e=getComputedStyle(document.documentElement);const t=e.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach(((e,i)=>{if(i===a.length-1||e.classList.contains("active")){e.style.borderRight="1px solid transparent"}else{e.style.borderRight=`1px solid ${t}`}}))}}}render(){return a(i,{key:"141d0932c588a4644d67abf4378858eb8a3771f7",class:"JumpTab",id:this.tabGroupName,ref:e=>{this.JumpTabEl=e}},a("div",{key:"2b84773fbb263e8a593793da0db59c0110566ad7",class:"Wrapper "+this.variant},a("slot",{key:"559a5801972af5c746cfca3d0a387855316d10ee",name:"tab-item"})),a("div",{key:"5d2c365e4e6d9694faa073025560e1984135af47"},a("slot",{key:"ebf5b38c8a196ed002c88c24360942d05eb04ef7",name:"tab-content"})))}};c.style=n;export{c as jump_tab};
+//# sourceMappingURL=p-d2ee7b9b.entry.js.map

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

@@ -244,30 +244,30 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "add-to-cart-text",
+          "description": "Indicates the button class of the add to cart / notification button"
+        },
         {
           "name": "add-to-waiting-list",
           "description": "Indicate if the user request to be notified when te product is avaible"
         },
         {
           "name": "added-to-cart",
-          "description": "Indicate if the product is added to cart"
-        },
-        {
-          "name": "addto-cart-text",
-          "description": "Indicates the button class of the add to cart / notification button"
+          "description": "Indicate if the product is added to cart --> non deve esserci nelle storie!"
         },
         {
           "name": "badge",
           "description": "Indicates the badge of the card"
         },
-        {
-          "name": "changed-variation",
-          "description": "Indicate if the variation is change"
-        },
         {
           "name": "currency",
           "description": "Indicates the currency of the card"
         },
+        {
+          "name": "end-added-to-cart",
+          "description": ""
+        },
         {
           "name": "favorite",
           "description": "Indicates if the product is favorite"
@@ -276,6 +276,18 @@
           "name": "has-background",
           "description": "Indicate if card has background"
         },
+        {
+          "name": "has-favorite",
+          "description": "Indicate if the whislist is active in shop"
+        },
+        {
+          "name": "hover-img",
+          "description": "Indicates the over image's src of the card"
+        },
+        {
+          "name": "hover-img-alt",
+          "description": "Indicates the hover img's alt of the card"
+        },
         {
           "name": "img",
           "description": "Indicates the image's src of the card"
@@ -338,6 +350,31 @@
         }
       ]
     },
+    {
+      "name": "jump-card-ecommerce-option",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "code",
+          "description": ""
+        },
+        {
+          "name": "img-url",
+          "description": ""
+        },
+        {
+          "name": "label",
+          "description": ""
+        },
+        {
+          "name": "sku",
+          "description": ""
+        }
+      ]
+    },
     {
       "name": "jump-filter",
       "description": {

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

@@ -1,4 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+interface Variation {
+    code: string;
+    imgUrl: string;
+    label: string;
+}
 export declare class JumpCardEcommerce {
     JumpCardEcommerce: HTMLElement;
     jumpQuantityEl: any;
@@ -10,16 +15,20 @@ export declare class JumpCardEcommerce {
     badge: string;
     /**  Indicates if the product is favorite */
     favorite: boolean;
+    /** Indicate if the whislist is active in shop*/
+    hasFavorite: boolean;
     /** Indicates the link of the card*/
     link: string;
     /** Indicates the image's src of the card*/
     img: string;
     /** Indicates the img's alt of the card*/
     imgAlt: string;
+    /** Indicates the over image's src of the card*/
+    hoverImg: string;
+    /** Indicates the hover img's alt of the card*/
+    hoverImgAlt: string;
     /** Indicates the videoSrc of the card*/
     videoSrc: string;
-    /** Indicate if the product is added to cart*/
-    addedToCart: boolean;
     /** Indicates the notificationUrl of the card*/
     notificationUrl: string;
     /** Indicates the notificationText of the card*/
@@ -41,18 +50,23 @@ export declare class JumpCardEcommerce {
     /** Indicates the outOfStockText of the product*/
     outOfStockText: string;
     /** Indicates the button class of the add to cart / notification button */
-    addtoCartText: string;
+    addToCartText: string;
     /** Indicates the button class of the add to cart / notification button */
     waitingListText: string;
     /** Indicate if the user request to be notified when te product is avaible*/
     addToWaitingList: boolean;
-    /** Indicate if the variation is change*/
-    changedVariation: boolean;
+    /** Indicate if the product is added to cart --> non deve esserci nelle storie! */
+    addedToCart: boolean;
+    endAddedToCart: boolean;
+    variations: Variation[];
     quantity: number;
+    variationSelectEl: HTMLSelectElement;
     toggleFavorite: EventEmitter;
     productAddToCart: EventEmitter;
     productWaitingList: EventEmitter;
-    changeVariation: EventEmitter;
+    variationSelected: EventEmitter;
+    addOption(e: any): void;
+    onVariationSelected(variation: any): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
@@ -60,6 +74,6 @@ export declare class JumpCardEcommerce {
     onToggleFavorite(): void;
     addProductToCart(): void;
     waitingList(): void;
-    changeVariationBody(event: Event): void;
     render(): any;
 }
+export {};

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

@@ -22,6 +22,11 @@ declare const _default: {
             description: string;
             control: string;
         };
+        hasFavorite: {
+            name: string;
+            description: string;
+            control: string;
+        };
         link: {
             name: string;
             description: string;
@@ -46,6 +51,25 @@ declare const _default: {
                 exists: boolean;
             };
         };
+        hoverImg: {
+            name: string;
+            description: string;
+            control: string;
+            defaultValue: string;
+            if: {
+                arg: string;
+                exists: boolean;
+            };
+        };
+        hoverImgAlt: {
+            name: string;
+            description: string;
+            control: string;
+            if: {
+                arg: string;
+                exists: boolean;
+            };
+        };
         videoSrc: {
             name: string;
             description: string;
@@ -101,7 +125,7 @@ declare const _default: {
             description: string;
             control: string;
         };
-        addtoCartText: {
+        addToCartText: {
             name: string;
             description: string;
             control: string;
@@ -115,3 +139,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Card: any;
+export declare const CardEvent: any;

package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.d.ts

@@ -0,0 +1,9 @@
+export declare class CardEcommerceOption {
+    code: string;
+    imgUrl: string;
+    label: string;
+    sku: string;
+    connectedEvent: any;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Example: any;

package/dist/types/components/jump-quantity/jump-quantity.d.ts

@@ -8,14 +8,14 @@ export declare class JumpQuantity {
     type: 'buttons' | 'dropdown' | 'input';
     variant: 'vertical' | 'horizontal';
     showButtons: boolean;
-    value: any;
+    value: number;
     change: any;
     inputEl: HTMLInputElement;
     onValueChange(newValue: any, oldValue: any): void;
     /**
      * Get the current value
      */
-    getValue(): Promise<any>;
+    getValue(): Promise<number>;
     reset(): Promise<void>;
     componentWillLoad(): void;
     formResetCallback(): void;

package/dist/types/components.d.ts

@@ -143,30 +143,27 @@ export namespace Components {
         "videoSrc": string;
     }
     interface JumpCardEcommerce {
+        /**
+          * Indicates the button class of the add to cart / notification button
+         */
+        "addToCartText": string;
         /**
           * Indicate if the user request to be notified when te product is avaible
          */
         "addToWaitingList": boolean;
         /**
-          * Indicate if the product is added to cart
+          * Indicate if the product is added to cart --> non deve esserci nelle storie!
          */
         "addedToCart": boolean;
-        /**
-          * Indicates the button class of the add to cart / notification button
-         */
-        "addtoCartText": string;
         /**
           * Indicates the badge of the card
          */
         "badge": string;
-        /**
-          * Indicate if the variation is change
-         */
-        "changedVariation": boolean;
         /**
           * Indicates the currency of the card
          */
         "currency": string;
+        "endAddedToCart": boolean;
         /**
           * Indicates if the product is favorite
          */
@@ -175,6 +172,18 @@ export namespace Components {
           * Indicate if card has background
          */
         "hasBackground": boolean;
+        /**
+          * Indicate if the whislist is active in shop
+         */
+        "hasFavorite": boolean;
+        /**
+          * Indicates the over image's src of the card
+         */
+        "hoverImg": string;
+        /**
+          * Indicates the hover img's alt of the card
+         */
+        "hoverImgAlt": string;
         /**
           * Indicates the image's src of the card
          */
@@ -236,6 +245,12 @@ export namespace Components {
          */
         "waitingListText": string;
     }
+    interface JumpCardEcommerceOption {
+        "code": string;
+        "imgUrl": string;
+        "label": string;
+        "sku": string;
+    }
     interface JumpFilter {
         "direction": 'horizontal' | 'vertical';
         "filterButtonIcon": string;
@@ -339,7 +354,7 @@ export namespace Components {
         /**
           * Get the current value
          */
-        "getValue": () => Promise<any>;
+        "getValue": () => Promise<number>;
         "label": string;
         "max": number;
         "min": number;
@@ -347,7 +362,7 @@ export namespace Components {
         "showButtons": boolean;
         "step": number;
         "type": 'buttons' | 'dropdown' | 'input';
-        "value": any;
+        "value": number;
         "variant": 'vertical' | 'horizontal';
     }
     interface JumpTab {
@@ -383,6 +398,10 @@ export interface JumpCardEcommerceCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLJumpCardEcommerceElement;
 }
+export interface JumpCardEcommerceOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLJumpCardEcommerceOptionElement;
+}
 export interface JumpFiltergroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLJumpFiltergroupElement;
@@ -436,7 +455,7 @@ declare global {
         "jump-toggle-favorite": any;
         "jump-add-to-cart": any;
         "jump-add-to-waiting-list": any;
-        "jump-change-variation": any;
+        "jump-variation-selected": any;
     }
     interface HTMLJumpCardEcommerceElement extends Components.JumpCardEcommerce, HTMLStencilElement {
         addEventListener<K extends keyof HTMLJumpCardEcommerceElementEventMap>(type: K, listener: (this: HTMLJumpCardEcommerceElement, ev: JumpCardEcommerceCustomEvent<HTMLJumpCardEcommerceElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -452,6 +471,23 @@ declare global {
         prototype: HTMLJumpCardEcommerceElement;
         new (): HTMLJumpCardEcommerceElement;
     };
+    interface HTMLJumpCardEcommerceOptionElementEventMap {
+        "jump-card-ecommerce-option-connected": any;
+    }
+    interface HTMLJumpCardEcommerceOptionElement extends Components.JumpCardEcommerceOption, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLJumpCardEcommerceOptionElementEventMap>(type: K, listener: (this: HTMLJumpCardEcommerceOptionElement, ev: JumpCardEcommerceOptionCustomEvent<HTMLJumpCardEcommerceOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLJumpCardEcommerceOptionElementEventMap>(type: K, listener: (this: HTMLJumpCardEcommerceOptionElement, ev: JumpCardEcommerceOptionCustomEvent<HTMLJumpCardEcommerceOptionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLJumpCardEcommerceOptionElement: {
+        prototype: HTMLJumpCardEcommerceOptionElement;
+        new (): HTMLJumpCardEcommerceOptionElement;
+    };
     interface HTMLJumpFilterElement extends Components.JumpFilter, HTMLStencilElement {
     }
     var HTMLJumpFilterElement: {
@@ -579,6 +615,7 @@ declare global {
         "jump-button": HTMLJumpButtonElement;
         "jump-card": HTMLJumpCardElement;
         "jump-card-ecommerce": HTMLJumpCardEcommerceElement;
+        "jump-card-ecommerce-option": HTMLJumpCardEcommerceOptionElement;
         "jump-filter": HTMLJumpFilterElement;
         "jump-filtergroup": HTMLJumpFiltergroupElement;
         "jump-icon": HTMLJumpIconElement;
@@ -728,30 +765,27 @@ declare namespace LocalJSX {
         "videoSrc"?: string;
     }
     interface JumpCardEcommerce {
+        /**
+          * Indicates the button class of the add to cart / notification button
+         */
+        "addToCartText"?: string;
         /**
           * Indicate if the user request to be notified when te product is avaible
          */
         "addToWaitingList"?: boolean;
         /**
-          * Indicate if the product is added to cart
+          * Indicate if the product is added to cart --> non deve esserci nelle storie!
          */
         "addedToCart"?: boolean;
-        /**
-          * Indicates the button class of the add to cart / notification button
-         */
-        "addtoCartText"?: string;
         /**
           * Indicates the badge of the card
          */
         "badge"?: string;
-        /**
-          * Indicate if the variation is change
-         */
-        "changedVariation"?: boolean;
         /**
           * Indicates the currency of the card
          */
         "currency"?: string;
+        "endAddedToCart"?: boolean;
         /**
           * Indicates if the product is favorite
          */
@@ -760,6 +794,18 @@ declare namespace LocalJSX {
           * Indicate if card has background
          */
         "hasBackground"?: boolean;
+        /**
+          * Indicate if the whislist is active in shop
+         */
+        "hasFavorite"?: boolean;
+        /**
+          * Indicates the over image's src of the card
+         */
+        "hoverImg"?: string;
+        /**
+          * Indicates the hover img's alt of the card
+         */
+        "hoverImgAlt"?: string;
         /**
           * Indicates the image's src of the card
          */
@@ -782,8 +828,8 @@ declare namespace LocalJSX {
         "notificationUrl"?: string;
         "onJump-add-to-cart"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
         "onJump-add-to-waiting-list"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
-        "onJump-change-variation"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
         "onJump-toggle-favorite"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
+        "onJump-variation-selected"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
         /**
           * Indicate if card has only icon button
          */
@@ -825,6 +871,13 @@ declare namespace LocalJSX {
          */
         "waitingListText"?: string;
     }
+    interface JumpCardEcommerceOption {
+        "code"?: string;
+        "imgUrl"?: string;
+        "label"?: string;
+        "onJump-card-ecommerce-option-connected"?: (event: JumpCardEcommerceOptionCustomEvent<any>) => void;
+        "sku"?: string;
+    }
     interface JumpFilter {
         "direction"?: 'horizontal' | 'vertical';
         "filterButtonIcon"?: string;
@@ -928,7 +981,7 @@ declare namespace LocalJSX {
         "showButtons"?: boolean;
         "step"?: number;
         "type"?: 'buttons' | 'dropdown' | 'input';
-        "value"?: any;
+        "value"?: number;
         "variant"?: 'vertical' | 'horizontal';
     }
     interface JumpTab {
@@ -967,6 +1020,7 @@ declare namespace LocalJSX {
         "jump-button": JumpButton;
         "jump-card": JumpCard;
         "jump-card-ecommerce": JumpCardEcommerce;
+        "jump-card-ecommerce-option": JumpCardEcommerceOption;
         "jump-filter": JumpFilter;
         "jump-filtergroup": JumpFiltergroup;
         "jump-icon": JumpIcon;
@@ -987,6 +1041,7 @@ declare module "@stencil/core" {
             "jump-button": LocalJSX.JumpButton & JSXBase.HTMLAttributes<HTMLJumpButtonElement>;
             "jump-card": LocalJSX.JumpCard & JSXBase.HTMLAttributes<HTMLJumpCardElement>;
             "jump-card-ecommerce": LocalJSX.JumpCardEcommerce & JSXBase.HTMLAttributes<HTMLJumpCardEcommerceElement>;
+            "jump-card-ecommerce-option": LocalJSX.JumpCardEcommerceOption & JSXBase.HTMLAttributes<HTMLJumpCardEcommerceOptionElement>;
             "jump-filter": LocalJSX.JumpFilter & JSXBase.HTMLAttributes<HTMLJumpFilterElement>;
             "jump-filtergroup": LocalJSX.JumpFiltergroup & JSXBase.HTMLAttributes<HTMLJumpFiltergroupElement>;
             "jump-icon": LocalJSX.JumpIcon & JSXBase.HTMLAttributes<HTMLJumpIconElement>;

package/package.json

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

package/dist/jump-design-system/p-5a6fbc53.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as s}from"./p-4d6cc90d.js";const t=":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";const c=t;const d=class{constructor(a){e(this,a);this.identifier=undefined;this.active=false}render(){return a(s,{key:"90108df0339c76ec7ffef78722400cbd5e5b125d",class:"JumpTabPanel",id:this.identifier},a("div",{key:"4e127ffdeb05efdd63dc538cb38976252ff5a060",class:"JumpTabPanel__Content "+(this.active?"active":"")},a("slot",{key:"5e54c0eaed6558e97226ffdc347e0ca8c0d9aa1b"})))}};d.style=c;export{d as jump_tab_panel};
-//# sourceMappingURL=p-5a6fbc53.entry.js.map

package/dist/jump-design-system/p-7dcb59ed.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as a,H as i,g as s}from"./p-4d6cc90d.js";const n=":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.75rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:16px;width:40px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer}:host ::slotted(jump-button){--jump-button-padding:0}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";const r=n;const o=class{constructor(a){t(this,a);this.change=e(this,"jump-change",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.min=1;this.max=undefined;this.step=1;this.label="";this.type="buttons";this.variant="vertical";this.showButtons=true;this.value=undefined}onValueChange(t,e){this.change.emit({value:t,oldValue:e});this.internals.setFormValue(t)}async getValue(){return this.value}async reset(){this.value=this.min}componentWillLoad(){this.value=this.min;this.internals.setFormValue(this.value)}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}handleChange(t){this.value=t.target.value}handleBlur(t){if(t.target.value<this.min){this.value=this.min}}render(){return a(i,{key:"2101c7f3d3f54d29b42659466f9b77f8ad9287c9",value:this.value,"data-variant":this.variant,"data-hasbuttons":this.showButtons},this.label&&a("label",{key:"3e4e1c3e0675283ce6db21877d9e4260c7a2df38"},this.label),a("div",{key:"cdcbb08e5d778611d8d50aa38f8900ae7117a166",class:`jump-quantity__InnerWrapper`},this.showButtons&&a("jump-button",{key:"70a2656261fbaea52d673ccbca513e0e76b2985b",onClick:()=>this.value=this.value-this.step,disabled:this.value<=this.min,variant:"neutral",size:"small"},a("jump-icon",{key:"5bb00edd0aa996f27cf4b34d130e5217ef2a7041",library:"lucide",name:"minus",size:"small"})),a("input",{key:"879bfdbc9ddcba94dc9bb478b5c5fb6c17d10389",ref:t=>{this.inputEl=t},type:"number",value:this.value,onInput:t=>this.handleChange(t),min:this.min,max:this.max,step:this.step,"aria-hasbuttons":this.showButtons}),this.showButtons&&a("jump-button",{key:"4fc5ea8736ccf4a17397b55c06db4d5a024792ab",onClick:()=>this.value=this.value+this.step,disabled:this.value>=this.max,variant:"neutral",size:"small"},a("jump-icon",{key:"a2b77881cac77552fedcc14a5507a1b5c722addc",library:"lucide",name:"plus",size:"small"}))))}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{value:["onValueChange"]}}};o.style=r;export{o as jump_quantity};
-//# sourceMappingURL=p-7dcb59ed.entry.js.map

package/dist/jump-design-system/p-7dcb59ed.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["jumpQuantityCss","JumpQuantityStyle0","JumpQuantity","onValueChange","newValue","oldValue","this","change","emit","value","internals","setFormValue","getValue","reset","min","componentWillLoad","formResetCallback","setValidity","handleChange","event","target","handleBlur","render","h","Host","key","variant","showButtons","label","class","onClick","step","disabled","size","library","name","ref","el","inputEl","type","onInput","max"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: flex-start;\n  justify-content: center;\n  flex-direction: column;\n  gap: 0.75rem;\n\n  [data-variant='horizontal'] {\n    flex-direction: row;\n  }\n\n  label {\n    color: var(--neutral-grey-secondary);\n    font-size: 0.875rem;\n  }\n\n  input {\n    //remove user agent styles\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background: none;\n    margin: 0;\n\n    //remove + and - buttons\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    outline: none;\n\n    &:focus {\n      border-color: var(--secondary-standard);\n    }\n\n    border: 1px solid transparent;\n    border-radius: 3px;\n    padding: 0.5rem;\n    height: 16px;\n    width: 40px;\n    font-size: 0.875rem;\n    text-align: center;\n\n    &:not([aria-hasbuttons]) {\n      border-color: var(--neutral-grey-secondary);\n    }\n\n    &[type='button'] {\n      cursor: pointer;\n    }\n  }\n\n  ::slotted(jump-button) {\n    --jump-button-padding: 0;\n  }\n\n\n  .jump-quantity__InnerWrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    gap: 0;\n  }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n  tag: 'jump-quantity',\n  styleUrl: 'jump-quantity.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class JumpQuantity {\n\n  @AttachInternals() internals: ElementInternals;\n  @Element() el;\n\n  @Prop() min: number = 1;\n  @Prop() max: number;\n  @Prop() step: number = 1;\n  @Prop() label: string = '';\n  @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n  @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() showButtons: boolean = true;\n  @Prop() value;\n\n  @Event({ eventName: 'jump-change' }) change;\n\n  inputEl: HTMLInputElement;\n\n  @Watch('value')\n  onValueChange(newValue, oldValue) {\n    this.change.emit({\n      value: newValue,\n      oldValue: oldValue,\n    });\n    this.internals.setFormValue(newValue);\n  }\n\n  /**\n   * Get the current value\n   */\n  @Method()\n  async getValue() {\n    return this.value;\n  }\n\n  @Method()\n  async reset() {\n    this.value = this.min;\n  }\n\n  componentWillLoad() {\n    this.value = this.min;\n    this.internals.setFormValue(this.value);\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue('');\n  }\n\n  handleChange(event) {\n    this.value = event.target.value;\n  }\n\n  //avoid user can change the value below the min\n  handleBlur(event) {\n    if (event.target.value < this.min) {\n      this.value = this.min;\n    }\n  }\n\n  render() {\n    return (\n      <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n        {this.label && <label>{this.label}</label>}\n        <div class={`jump-quantity__InnerWrapper`}>\n        {this.showButtons &&\n            <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n                         variant='neutral' size='small'>\n              <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n            </jump-button>}\n          <input ref={(el) => {\n            this.inputEl = el;\n          }}\n                 type='number'\n                 value={this.value}\n                 onInput={(event) => this.handleChange(event)}\n                 min={this.min}\n                 max={this.max}\n                 step={this.step}\n                 aria-hasbuttons={this.showButtons}\n          />\n          {this.showButtons &&\n            <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n                         variant='neutral' size='small'>\n              <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n            </jump-button>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,s5BACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,sOAKD,E,6BAEC,E,WACC,G,UACyB,U,aACJ,W,iBACd,K,qBAQ/B,aAAAC,CAAcC,EAAUC,GACtBC,KAAKC,OAAOC,KAAK,CACfC,MAAOL,EACPC,SAAUA,IAEZC,KAAKI,UAAUC,aAAaP,E,CAO9B,cAAMQ,GACJ,OAAON,KAAKG,K,CAId,WAAMI,GACJP,KAAKG,MAAQH,KAAKQ,G,CAGpB,iBAAAC,GACET,KAAKG,MAAQH,KAAKQ,IAClBR,KAAKI,UAAUC,aAAaL,KAAKG,M,CAGnC,iBAAAO,GACEV,KAAKI,UAAUO,YAAY,IAC3BX,KAAKI,UAAUC,aAAa,G,CAG9B,YAAAO,CAAaC,GACXb,KAAKG,MAAQU,EAAMC,OAAOX,K,CAI5B,UAAAY,CAAWF,GACT,GAAIA,EAAMC,OAAOX,MAAQH,KAAKQ,IAAK,CACjCR,KAAKG,MAAQH,KAAKQ,G,EAItB,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAAChB,MAAOH,KAAKG,MAAK,eAAgBH,KAAKoB,QAAO,kBAAmBpB,KAAKqB,aACxErB,KAAKsB,OAASL,EAAA,SAAAE,IAAA,4CAAQnB,KAAKsB,OAC5BL,EAAA,OAAAE,IAAA,2CAAKI,MAAO,+BACXvB,KAAKqB,aACFJ,EAAA,eAAAE,IAAA,2CAAaK,QAAS,IAAMxB,KAAKG,MAAQH,KAAKG,MAAQH,KAAKyB,KAAMC,SAAU1B,KAAKG,OAASH,KAAKQ,IACjFY,QAAQ,UAAUO,KAAK,SAClCV,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,SAASC,KAAK,QAAQF,KAAK,WAElDV,EAAA,SAAAE,IAAA,2CAAOW,IAAMC,IACX/B,KAAKgC,QAAUD,CAAE,EAEZE,KAAK,SACL9B,MAAOH,KAAKG,MACZ+B,QAAUrB,GAAUb,KAAKY,aAAaC,GACtCL,IAAKR,KAAKQ,IACV2B,IAAKnC,KAAKmC,IACVV,KAAMzB,KAAKyB,KAAI,kBACEzB,KAAKqB,cAE5BrB,KAAKqB,aACJJ,EAAA,eAAAE,IAAA,2CAAaK,QAAS,IAAMxB,KAAKG,MAAQH,KAAKG,MAAQH,KAAKyB,KAAMC,SAAU1B,KAAKG,OAASH,KAAKmC,IACjFf,QAAQ,UAAUO,KAAK,SAClCV,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,SAASC,KAAK,OAAOF,KAAK,Y"}

package/dist/jump-design-system/p-fafe6478.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,H as o,g as a}from"./p-4d6cc90d.js";const e=':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 r=e;const n=class{constructor(s){t(this,s);this.toggleFavorite=i(this,"jump-toggle-favorite",7);this.productAddToCart=i(this,"jump-add-to-cart",7);this.productWaitingList=i(this,"jump-add-to-waiting-list",7);this.changeVariation=i(this,"jump-change-variation",7);this.onlyIconButton=false;this.hasBackground=false;this.badge=undefined;this.favorite=false;this.link=undefined;this.img=undefined;this.imgAlt=undefined;this.videoSrc=undefined;this.addedToCart=false;this.notificationUrl=undefined;this.notificationText="Aggiunto al carrello";this.productName=undefined;this.subtitle=undefined;this.productId=undefined;this.price=undefined;this.salePrice=undefined;this.currency=undefined;this.outOfStock=false;this.outOfStockText=undefined;this.addtoCartText=undefined;this.waitingListText=undefined;this.addToWaitingList=false;this.changedVariation=false}componentWillLoad(){}componentDidLoad(){this.jumpQuantityEl=this.JumpCardEcommerce.querySelector("jump-quantity");if(this.jumpQuantityEl){this.jumpQuantityEl.addEventListener("jump-change",this.onQuantityChange.bind(this));this.quantity=this.jumpQuantityEl.getValue().then((t=>{this.quantity=t}));console.log("Quantity:",this.quantity)}}disconnectedCallback(){this.jumpQuantityEl=this.JumpCardEcommerce.querySelector("jump-quantity");if(this.jumpQuantityEl){this.jumpQuantityEl.removeEventListener("jump-change",this.onQuantityChange)}}onQuantityChange(t){this.quantity=t.detail.value}onToggleFavorite(){this.favorite=!this.favorite;this.toggleFavorite.emit({productId:this.productId,favorite:this.favorite})}addProductToCart(){this.addedToCart=true;const t={productId:this.productId,addedToCart:this.addedToCart,quantity:this.quantity};this.productAddToCart.emit(t);console.log("productAddToCart payload:",t)}waitingList(){this.addToWaitingList=true;this.productWaitingList.emit({productId:this.productId,addToWaitingList:this.addToWaitingList})}changeVariationBody(t){const i=t.target;const s=i.value;this.changedVariation=true;const o={productId:this.productId,changedVariation:this.changedVariation,variation:s};this.changeVariation.emit(o);console.log("changeVariation payload:",o)}render(){const t=this.hasBackground?"hasBackground":"";const i=this.onlyIconButton?"iconOnly":"";const a=this.outOfStock?"justify-between":"";function e(t,i){const s=(t-i)/t*100;return s.toFixed(0)}return s(o,null,this.badge?s("jump-badge",{class:`${t} ${i}`,variant:"secondary",dimension:"small",label:this.badge}):"",s("jump-button",{onClick:()=>this.onToggleFavorite(),class:`Favorite ${t} ${i}`,variant:this.favorite?"neutral":"primary",size:"small",text:true,onlyIcon:true},s("jump-icon",{slot:"prefix",name:"heart",category:this.favorite?"light":"solid",size:"medium"})),s("div",{class:`Media ${i} ${t}`},s("a",{href:this.link},this.img&&!this.videoSrc?s("img",{src:this.img,alt:this.imgAlt}):"",this.videoSrc&&!this.img?s("video",{autoplay:true},s("source",{src:this.videoSrc,type:"video/mp4"}),s("source",{src:this.videoSrc,type:"video/mov"}),s("source",{src:this.videoSrc,type:"video/webm"})):""),s("div",{class:`NotificationCart ${this.addedToCart==true?"is-active":""}`},s("jump-button",{href:this.notificationUrl,variant:"white",text:true},s("jump-icon",{slot:"prefix",name:"check"}),s("span",null," ",this.notificationText," "))),this.onlyIconButton?s("div",{class:"OnlyIconButton"},s("jump-button",{variant:"secondary",size:"large",pill:true,onlyIcon:true,onClick:()=>this.addProductToCart()},s("jump-icon",{slot:"prefix",name:"cart-shopping",category:"regular"}))):""),s("div",{class:`Content ${t} ${i}`},s("div",{class:`Body ${t} ${i}`},s("div",null,s("div",{class:"Info"},s("div",{class:"Product"},this.productName),s("div",{class:"Subtitle"},this.subtitle)),s("div",{class:"Price"},s("div",{class:"Price__Discount"},e(this.price,this.salePrice),"%"),s("div",{class:`Price__Regular ${this.salePrice?"sale":""}`},this.currency,this.price),s("div",{class:"Price__Sale"},this.currency,this.salePrice))),s("div",null,s("slot",{name:"select"}),s("slot",{name:"quantity"}))),s("div",{class:`Footer ${a} ${t} ${i}`},this.outOfStock?s("div",{class:"OutOfStock"},this.outOfStockText?this.outOfStockText:"Esaurito"):"",this.outOfStock?s("jump-button",{variant:"secondary",size:"small",text:true,onClick:()=>this.waitingList()},s("jump-icon",{slot:"prefix",name:!this.outOfStock?"cart-shopping":"bell",category:"regular",size:"small"}),this.waitingListText?this.waitingListText:"Notifica disponibilità"):"",!this.outOfStock&&!this.onlyIconButton?s("jump-button",{variant:"secondary",size:"small",text:true,onClick:()=>this.addProductToCart()},s("jump-icon",{slot:"prefix",name:!this.outOfStock?"cart-shopping":"bell",category:"regular",size:"small"}),this.addtoCartText?this.addtoCartText:"Aggiungi al carrello"):"")))}get JumpCardEcommerce(){return a(this)}};n.style=r;export{n as jump_card_ecommerce};
-//# sourceMappingURL=p-fafe6478.entry.js.map

package/dist/jump-design-system/p-fafe6478.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["jumpCardEcommerceCss","JumpCardEcommerceStyle0","JumpCardEcommerce","componentWillLoad","componentDidLoad","this","jumpQuantityEl","querySelector","addEventListener","onQuantityChange","bind","quantity","getValue","then","console","log","disconnectedCallback","removeEventListener","e","detail","value","onToggleFavorite","favorite","toggleFavorite","emit","productId","addProductToCart","addedToCart","payload","productAddToCart","waitingList","addToWaitingList","productWaitingList","changeVariationBody","event","selectElement","target","selectedValue","changedVariation","variation","changeVariation","render","backgroundClass","hasBackground","iconOnlyClass","onlyIconButton","justifyClass","outOfStock","calculateDiscount","price","salePrice","discount","toFixed","h","Host","badge","class","variant","dimension","label","onClick","size","text","onlyIcon","slot","name","category","href","link","img","videoSrc","src","alt","imgAlt","autoplay","type","notificationUrl","notificationText","pill","productName","subtitle","currency","outOfStockText","waitingListText","addtoCartText"],"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}"],"mappings":"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"}