npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.50 → 0.3.51 - Mend

@jumpgroup/jump-design-system 0.3.50 → 0.3.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-97b3526b.js');
 const chunk_H33C3MRM = require('./chunk.H33C3MRM-2c09acb5.js');
-const jumpButtonCss = ":host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem;display:flex}:host button{display:flex}:host a{display:inline-flex;box-sizing:border-box}:host button,:host a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:1.2;align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-variant=primary],:host a[data-variant=primary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--primary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--secondary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--neutral-grey-secondary);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--jump-button-color:var(--neutral-grey-primary);--jump-button-background:var(--neutral-white);--jump-button-color-hover:var(--neutral-grey-primary);--jump-button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);--jump-button-padding:0.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);--jump-button-padding:0.75rem 1.25rem}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);--jump-button-padding:1rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover);border:1px solid var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}:host button[data-only-icon],:host a[data-only-icon]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--jump-button-padding:0.875rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--jump-button-padding:1rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}:host button.chat,:host a.chat{--jump-button-color:var(--neutral-white);--jump-button-background:hsla(133, 54%, 58%, 1);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:hsla(161, 63%, 31%, 1)}";
+const jumpButtonCss = ":host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{--button-color:#ffffff;--button-color-disabled:#cbcbcb;--button-background:var(--primary-standard);--button-background-outline:transparent;--button-color-hover:#ffffff;--button-background-hover:var(--primary-hard);--button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--button-padding:1rem 1.25rem;display:flex}:host button{display:flex}:host a{display:inline-flex;box-sizing:border-box}:host button,:host a{background-color:var(--jump-button-background, var(--button-background));border-radius:var(--button-border-radius);color:var(--jump-button-color, var(--button-color));position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:1.2;align-items:center;gap:var(--button-gap, 0.5rem);text-decoration:none;padding:var(--button-padding)}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover, var(--button-background-hover));color:var(--jump-button-color-hover, var(--button-color-hover))}:host button[data-variant=primary],:host a[data-variant=primary]{--button-color:var(--neutral-white);--button-background:var(--primary-standard);--button-color-hover:var(--neutral-white);--button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--button-color:var(--neutral-white);--button-background:var(--secondary-standard);--button-color-hover:var(--neutral-white);--button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--button-color:var(--neutral-white);--button-background:var(--neutral-grey-secondary);--button-color-hover:var(--neutral-white);--button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--button-color:var(--neutral-grey-primary);--button-background:var(--neutral-white);--button-color-hover:var(--neutral-grey-primary);--button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--button-background:var(--button-color-disabled);--button-background-hover:var(--button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);--button-padding:0.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);--button-padding:0.75rem 1.25rem}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);--button-padding:1rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-background-outline, var(--button-background-outline));border:1px solid var(--jump-button-background, var(--button-background));color:var(--jump-button-background, var(--button-background))}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover, var(--button-background-hover));border:1px solid var(--jump-button-background-hover, var(--button-background-hover));color:var(--jump-button-color-hover, var(--button-color-hover))}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background, var(--button-background));padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover, var(--button-background-hover))}:host button[data-only-icon],:host a[data-only-icon]{--button-padding:0.5rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--button-padding:0.875rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--button-padding:1rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}:host button.chat,:host a.chat{--button-color:var(--neutral-white);--button-background:hsla(133, 54%, 58%, 1);--button-color-hover:var(--neutral-white);--button-background-hover:hsla(161, 63%, 31%, 1)}";
 const JumpButtonStyle0 = jumpButtonCss;
 const JumpButton = class {

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

	@@ -1 +1 @@
1	- {"file":"jump-button.jump-icon.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,2pIAA2pI,CAAC;AAClrI,yBAAe,aAAa;;MCMf,UAAU;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtRA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJA,oBAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnUA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;ACzGHE,qBAAM,CAAC,MAAM,CAAC,SAAS,CAAC;;ACNxB,MAAM,WAAW,GAAG,y8CAAy8C,CAAC;AAC99C,uBAAe,WAAW;;MCQb,QAAQ;;;QAsEnB,8BAAyB,GAAG,CAAC,IAAY,EAAE,QAAgB;YACzD,IAAI,QAAQ,GAAG,EAAE,CAAC;YAClB,IAAI,cAAc,GAAG,CAAC,QAAQ,GAAG,kBAAkB,GAAG,YAAY,QAAQ,EAAE,CAAC;YAC7E,cAAc,IAAI,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAChD,IAAI,UAAU,GAAG,QAAQ,IAAI,EAAE,CAAC;YAChC,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAC3B,CAAC;QAEF,uBAAkB,GAAG;YACnB,QAAQ,EAAE,IAAI;gBACZ,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACtC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;gBAC7F,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;gBAEtF,OAAO,gDAAgD,QAAQ,IAAI,SAAS,MAAM,CAAC;aACpF;YACD,OAAO,EAAE,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC;SACzD,CAAC;QAEF,kBAAa,GAAG;YACd,QAAQ,EAAE,IAAI,IAAI,4DAA4D,IAAI,MAAM;SACzF,CAAC;;uBApFwB,IAAI;oBAKP,OAAO;wBAKqH,OAAO;;;;;IAiB1J,iBAAiB;QACf,IAAI,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;QACnC,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,IAAI;gBACP,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBACxC,MAAM;YAER,KAAK,QAAQ;gBACX,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;gBACnC,MAAM;SAIT;QAEDC,kCAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAClD;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAC3B,OAAO,6DAA6D,CAAC;SACtE;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,OAAOH,qBAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;SACtG;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,OAAOA,qBAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;SACxG;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YACzB,OAAOA,qBAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;SAC1K;KACF;;;;;;;","names":["h","Host","SlIcon","registerIconLibrary"],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx","node_modules/@shoelace-style/shoelace/dist/chunks/chunk.22M42QYS.js","src/components/jump-icon/jump-icon.scss?tag=jump-icon&encapsulation=shadow","src/components/jump-icon/jump-icon.tsx"],"sourcesContent":["%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n:host {\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n display: flex;\n\n button {\n display: flex;\n }\n\n a {\n display: inline-flex;\n box-sizing: border-box;\n }\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n // line-height: var(--lh-400, 1.3);\n line-height: 1.2;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n --jump-button-padding: 0.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n --jump-button-padding: 0.75rem 1.25rem;\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n --jump-button-padding: 1rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 0.5rem;\n }\n\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 0.875rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1rem;\n }\n\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class JumpButton {\n /*\n Set the button as disabled; Vale solo per i bottoni\n /\n @Prop() disabled: boolean = false;\n\n /\n Indicates the variant of the button\n /\n @Prop() variant: 'primary'\|'secondary'\|'white'\|'neutral' = 'primary';\n\n /\n Indicates the button as outline\n /\n @Prop() outline: boolean = false;\n\n /\n Indicates the size of the button\n /\n @Prop() size: string = 'medium';\n\n /\n Indicates if the button is full width\n /\n @Prop() full: boolean = false;\n\n /\n Indicates the button as pill\n /\n @Prop() pill: boolean = false;\n\n /\n Indicates the button as text\n /\n @Prop() text: boolean = false;\n\n /\n Indicates the button as only icon\n /\n @Prop() onlyIcon: boolean = false;\n\n /\n * Indicates if button becames a anchor\n /\n @Prop() href: string;\n\n /\n * Indicates the type of anchor's target \n /\n @Prop() target: '_blank' \| '_parent' \| '_self' \| '_top'\n\n /\n * Indicates type button\n /\n @Prop() type: 'button'\|'submit'\|'reset' = 'button';\n\n /\n * Indicates the name that the sender button will send\n /\n @Prop() name: string = undefined;\n\n /\n * Indicates the value that the sender button will send\n /\n @Prop() value: string = undefined;\n\n /\n * Indicates the value of text alternative to an element that has no visible text on the screen\n /\n @Prop() ariaLabel: string = undefined;\n\n /\n * Indicates classes of the component\n /\n @Prop() class: string = undefined;\n\n /\n * Indicates classes of the component\n /\n @Prop() buttonId: string = undefined;\n\n componentWillLoad() {\n this.target = this.href ? this.target : '_self';\n }\n\n render() {\n \n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n","import {\n SlIcon\n} from \"./chunk.H33C3MRM.js\";\n\n// src/components/icon/icon.ts\nvar icon_default = SlIcon;\nSlIcon.define(\"sl-icon\");\n\nexport {\n icon_default\n};\n",":host {\n display: inline-flex;\n}\n\nsl-icon {\n display: inline-flex;\n // --sl-icon-width: var(--fs-400, 1rem);\n // --sl-icon-height: var(--fs-400, 1rem);\n\n &[library='lucide'] {\n width: var(--sl-icon-width);\n height: var(--sl-icon-height);\n\n &[size='small'] {\n --sl-icon-width: var(--fs-400, 1rem);\n --sl-icon-height: var(--fs-400, 1rem);\n }\n\n &[size='medium'] {\n --sl-icon-width: var(--fs-500, 1.125rem);\n --sl-icon-height: var(--fs-500, 1.125rem);\n }\n\n &[size='large'] {\n --sl-icon-width: var(--fs-600, 1.5rem);\n --sl-icon-height: var(--fs-600, 1.5rem);\n }\n\n &[size='inherit'] {\n width: 100%;\n height: 100%;\n }\n }\n\n &[library='custom'] {\n width: var(--sl-icon-width);\n height: var(--sl-icon-height);\n\n &[size='small'] {\n --sl-icon-width: var(--fs-400, 1rem);\n --sl-icon-height: var(--fs-400, 1rem);\n }\n\n &[size='medium'] {\n --sl-icon-width: var(--fs-500, 1.125rem);\n --sl-icon-height: var(--fs-500, 1.125rem);\n }\n\n &[size='large'] {\n --sl-icon-width: var(--fs-600, 1.5rem);\n --sl-icon-height: var(--fs-600, 1.5rem);\n }\n\n &[size='inherit'] {\n width: inherit;\n height: inherit;\n }\n }\n\n &[library='fa'] {\n font-size: var(--font-size);\n line-height: var(--line-height);\n\n &[size='small'] {\n --font-size: var(--fs-400, 1rem);\n --line-height: var(--fs-400, 1rem);\n }\n\n &[size='medium'] {\n --font-size: var(--fs-500, 1.125rem);\n --line-height: var(--fs-500, 1.125rem);\n }\n\n &[size='large'] {\n --font-size: var(--fs-600, 1.5rem);\n --line-height: var(--fs-600, 1.5rem);\n }\n\n &[size='inherit'] {\n font-size: inherit;\n line-height: inherit;\n }\n }\n\n // width: var(--sl-icon-width);\n // height: var(--sl-icon-height);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport '@shoelace-style/shoelace/dist/components/icon/icon.js';\nimport { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library';\n\n@Component({\n tag: 'jump-icon',\n styleUrl: 'jump-icon.scss',\n shadow: true,\n})\nexport class JumpIcon {\n /\n * Class of the icon\n /\n @Prop() class: string;\n /\n Library of the icon\n /\n @Prop() library: string = 'fa';\n\n /\n Name of the icon\n /\n @Prop() name: string = 'heart';\n\n /\n * Category of the icon\n /\n @Prop() category: 'solid' \| 'sharp-light' \| 'sharp-regular' \| 'sharp-solid' \| 'sharp-thin' \| 'brands' \| 'regular' \| 'light' \| 'thin' \| 'duotone' = 'solid';\n\n /\n Size of the icon\n /\n @Prop() size: string;\n\n /\n * Label for the icon\n /\n @Prop() label: string;\n\n /\n Src of the icon\n */\n @Prop() src: string;\n\n componentWillLoad() {\n let libraryConfig = this.lucideLibrary;\n this.size = this.size \|\| 'inherit';\n switch (this.library) {\n case 'fa':\n libraryConfig = this.fontAwesomeLibrary;\n break;\n\n case 'lucide':\n libraryConfig = this.lucideLibrary;\n break;\n\n default:\n break;\n }\n\n registerIconLibrary(this.library, libraryConfig);\n }\n\n render() {\n if (!this.name && !this.src) {\n return `Please set the 'name' or 'src' property to display the icon`;\n }\n\n if (this.library === 'custom') {\n return <sl-icon library={this.library} src={this.src} size={this.size} label={this.label}></sl-icon>;\n }\n if (this.library === 'lucide') {\n return <sl-icon library={this.library} name={this.name} size={this.size} label={this.label}></sl-icon>;\n }\n if (this.library === 'fa') {\n return <sl-icon library={this.library} name={this.fontAwesomeClassGenerator(this.name, this.category)} class={this.class} size={this.size} label={this.label}></sl-icon>;\n }\n }\n\n fontAwesomeClassGenerator = (name: string, category: string) => {\n let fa_class = [];\n let category_class = !category ? 'category-classic' : `category-${category}`;\n category_class && fa_class.push(category_class);\n let name_class = `name-${name}`;\n name_class && fa_class.push(name_class);\n return fa_class.join(' ');\n };\n\n fontAwesomeLibrary = {\n resolver: name => {\n const found_classes = name.split(' ');\n const category = found_classes.find(c => c.startsWith('category-')).replace('category-', '');\n const icon_name = found_classes.find(c => c.startsWith('name-')).replace('name-', '');\n\n return `https://designsystem-media.jumpgroup.it/svgs/${category}/${icon_name}.svg`;\n },\n mutator: svg => svg.setAttribute('fill', 'currentColor'),\n };\n\n lucideLibrary = {\n resolver: name => `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`,\n };\n}\n"],"version":3}
1	+ {"file":"jump-button.jump-icon.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,uxIAAuxI,CAAC;AAC9yI,yBAAe,aAAa;;MCMf,UAAU;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtRA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJA,oBAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnUA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;ACzGHE,qBAAM,CAAC,MAAM,CAAC,SAAS,CAAC;;ACNxB,MAAM,WAAW,GAAG,y8CAAy8C,CAAC;AAC99C,uBAAe,WAAW;;MCQb,QAAQ;;;QAsEnB,8BAAyB,GAAG,CAAC,IAAY,EAAE,QAAgB;YACzD,IAAI,QAAQ,GAAG,EAAE,CAAC;YAClB,IAAI,cAAc,GAAG,CAAC,QAAQ,GAAG,kBAAkB,GAAG,YAAY,QAAQ,EAAE,CAAC;YAC7E,cAAc,IAAI,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAChD,IAAI,UAAU,GAAG,QAAQ,IAAI,EAAE,CAAC;YAChC,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAC3B,CAAC;QAEF,uBAAkB,GAAG;YACnB,QAAQ,EAAE,IAAI;gBACZ,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACtC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;gBAC7F,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;gBAEtF,OAAO,gDAAgD,QAAQ,IAAI,SAAS,MAAM,CAAC;aACpF;YACD,OAAO,EAAE,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC;SACzD,CAAC;QAEF,kBAAa,GAAG;YACd,QAAQ,EAAE,IAAI,IAAI,4DAA4D,IAAI,MAAM;SACzF,CAAC;;uBApFwB,IAAI;oBAKP,OAAO;wBAKqH,OAAO;;;;;IAiB1J,iBAAiB;QACf,IAAI,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;QACnC,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,IAAI;gBACP,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBACxC,MAAM;YAER,KAAK,QAAQ;gBACX,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;gBACnC,MAAM;SAIT;QAEDC,kCAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAClD;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAC3B,OAAO,6DAA6D,CAAC;SACtE;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,OAAOH,qBAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;SACtG;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,OAAOA,qBAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;SACxG;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YACzB,OAAOA,qBAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;SAC1K;KACF;;;;;;;","names":["h","Host","SlIcon","registerIconLibrary"],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx","node_modules/@shoelace-style/shoelace/dist/chunks/chunk.22M42QYS.js","src/components/jump-icon/jump-icon.scss?tag=jump-icon&encapsulation=shadow","src/components/jump-icon/jump-icon.tsx"],"sourcesContent":["%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n:host {\n --button-color: #ffffff;\n --button-color-disabled: #cbcbcb;\n --button-background: var(--primary-standard);\n --button-background-outline: transparent;\n --button-color-hover: #ffffff;\n --button-background-hover: var(--primary-hard);\n --button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --button-padding: 1rem 1.25rem;\n\n display: flex;\n\n button {\n display: flex;\n }\n\n a {\n display: inline-flex;\n box-sizing: border-box;\n }\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background, var(--button-background));\n border-radius: var(--button-border-radius);\n color: var(--jump-button-color, var(--button-color));\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n // line-height: var(--lh-400, 1.3);\n line-height: 1.2;\n align-items: center;\n gap: var(--button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover, var(--button-background-hover));\n color: var(--jump-button-color-hover, var(--button-color-hover));\n }\n\n &[data-variant='primary'] {\n --button-color: var(--neutral-white);\n --button-background: var(--primary-standard);\n --button-color-hover: var(--neutral-white);\n --button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --button-color: var(--neutral-white);\n --button-background: var(--secondary-standard);\n --button-color-hover: var(--neutral-white);\n --button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --button-color: var(--neutral-white);\n --button-background: var(--neutral-grey-secondary);\n --button-color-hover: var(--neutral-white);\n --button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --button-color: var(--neutral-grey-primary);\n --button-background: var(--neutral-white);\n --button-color-hover: var(--neutral-grey-primary);\n --button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --button-background: var(--button-color-disabled);\n --button-background-hover: var(--button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n --button-padding: 0.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n --button-padding: 0.75rem 1.25rem;\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n --button-padding: 1rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-background-outline, var(--button-background-outline));\n border: 1px solid var(--jump-button-background, var(--button-background));\n color: var(--jump-button-background, var(--button-background));\n &:hover {\n background-color: var(--jump-button-background-hover, var(--button-background-hover));\n border: 1px solid var(--jump-button-background-hover, var(--button-background-hover));\n color: var(--jump-button-color-hover, var(--button-color-hover));\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background, var(--button-background));\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover, var(--button-background-hover));\n }\n }\n\n &[data-only-icon] {\n --button-padding: 0.5rem;\n }\n\n &[data-only-icon][data-size='small'] {\n --button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --button-padding: 0.875rem;\n }\n &[data-only-icon][data-size='large'] {\n --button-padding: 1rem;\n }\n\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n\n &.chat {\n --button-color: var(--neutral-white);\n --button-background: hsla(133, 54%, 58%, 1);\n --button-color-hover: var(--neutral-white);\n --button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class JumpButton {\n /*\n Set the button as disabled; Vale solo per i bottoni\n /\n @Prop() disabled: boolean = false;\n\n /\n Indicates the variant of the button\n /\n @Prop() variant: 'primary'\|'secondary'\|'white'\|'neutral' = 'primary';\n\n /\n Indicates the button as outline\n /\n @Prop() outline: boolean = false;\n\n /\n Indicates the size of the button\n /\n @Prop() size: string = 'medium';\n\n /\n Indicates if the button is full width\n /\n @Prop() full: boolean = false;\n\n /\n Indicates the button as pill\n /\n @Prop() pill: boolean = false;\n\n /\n Indicates the button as text\n /\n @Prop() text: boolean = false;\n\n /\n Indicates the button as only icon\n /\n @Prop() onlyIcon: boolean = false;\n\n /\n * Indicates if button becames a anchor\n /\n @Prop() href: string;\n\n /\n * Indicates the type of anchor's target \n /\n @Prop() target: '_blank' \| '_parent' \| '_self' \| '_top'\n\n /\n * Indicates type button\n /\n @Prop() type: 'button'\|'submit'\|'reset' = 'button';\n\n /\n * Indicates the name that the sender button will send\n /\n @Prop() name: string = undefined;\n\n /\n * Indicates the value that the sender button will send\n /\n @Prop() value: string = undefined;\n\n /\n * Indicates the value of text alternative to an element that has no visible text on the screen\n /\n @Prop() ariaLabel: string = undefined;\n\n /\n * Indicates classes of the component\n /\n @Prop() class: string = undefined;\n\n /\n * Indicates classes of the component\n /\n @Prop() buttonId: string = undefined;\n\n componentWillLoad() {\n this.target = this.href ? this.target : '_self';\n }\n\n render() {\n \n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n","import {\n SlIcon\n} from \"./chunk.H33C3MRM.js\";\n\n// src/components/icon/icon.ts\nvar icon_default = SlIcon;\nSlIcon.define(\"sl-icon\");\n\nexport {\n icon_default\n};\n",":host {\n display: inline-flex;\n}\n\nsl-icon {\n display: inline-flex;\n // --sl-icon-width: var(--fs-400, 1rem);\n // --sl-icon-height: var(--fs-400, 1rem);\n\n &[library='lucide'] {\n width: var(--sl-icon-width);\n height: var(--sl-icon-height);\n\n &[size='small'] {\n --sl-icon-width: var(--fs-400, 1rem);\n --sl-icon-height: var(--fs-400, 1rem);\n }\n\n &[size='medium'] {\n --sl-icon-width: var(--fs-500, 1.125rem);\n --sl-icon-height: var(--fs-500, 1.125rem);\n }\n\n &[size='large'] {\n --sl-icon-width: var(--fs-600, 1.5rem);\n --sl-icon-height: var(--fs-600, 1.5rem);\n }\n\n &[size='inherit'] {\n width: 100%;\n height: 100%;\n }\n }\n\n &[library='custom'] {\n width: var(--sl-icon-width);\n height: var(--sl-icon-height);\n\n &[size='small'] {\n --sl-icon-width: var(--fs-400, 1rem);\n --sl-icon-height: var(--fs-400, 1rem);\n }\n\n &[size='medium'] {\n --sl-icon-width: var(--fs-500, 1.125rem);\n --sl-icon-height: var(--fs-500, 1.125rem);\n }\n\n &[size='large'] {\n --sl-icon-width: var(--fs-600, 1.5rem);\n --sl-icon-height: var(--fs-600, 1.5rem);\n }\n\n &[size='inherit'] {\n width: inherit;\n height: inherit;\n }\n }\n\n &[library='fa'] {\n font-size: var(--font-size);\n line-height: var(--line-height);\n\n &[size='small'] {\n --font-size: var(--fs-400, 1rem);\n --line-height: var(--fs-400, 1rem);\n }\n\n &[size='medium'] {\n --font-size: var(--fs-500, 1.125rem);\n --line-height: var(--fs-500, 1.125rem);\n }\n\n &[size='large'] {\n --font-size: var(--fs-600, 1.5rem);\n --line-height: var(--fs-600, 1.5rem);\n }\n\n &[size='inherit'] {\n font-size: inherit;\n line-height: inherit;\n }\n }\n\n // width: var(--sl-icon-width);\n // height: var(--sl-icon-height);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport '@shoelace-style/shoelace/dist/components/icon/icon.js';\nimport { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library';\n\n@Component({\n tag: 'jump-icon',\n styleUrl: 'jump-icon.scss',\n shadow: true,\n})\nexport class JumpIcon {\n /\n * Class of the icon\n /\n @Prop() class: string;\n /\n Library of the icon\n /\n @Prop() library: string = 'fa';\n\n /\n Name of the icon\n /\n @Prop() name: string = 'heart';\n\n /\n * Category of the icon\n /\n @Prop() category: 'solid' \| 'sharp-light' \| 'sharp-regular' \| 'sharp-solid' \| 'sharp-thin' \| 'brands' \| 'regular' \| 'light' \| 'thin' \| 'duotone' = 'solid';\n\n /\n Size of the icon\n /\n @Prop() size: string;\n\n /\n * Label for the icon\n /\n @Prop() label: string;\n\n /\n Src of the icon\n */\n @Prop() src: string;\n\n componentWillLoad() {\n let libraryConfig = this.lucideLibrary;\n this.size = this.size \|\| 'inherit';\n switch (this.library) {\n case 'fa':\n libraryConfig = this.fontAwesomeLibrary;\n break;\n\n case 'lucide':\n libraryConfig = this.lucideLibrary;\n break;\n\n default:\n break;\n }\n\n registerIconLibrary(this.library, libraryConfig);\n }\n\n render() {\n if (!this.name && !this.src) {\n return `Please set the 'name' or 'src' property to display the icon`;\n }\n\n if (this.library === 'custom') {\n return <sl-icon library={this.library} src={this.src} size={this.size} label={this.label}></sl-icon>;\n }\n if (this.library === 'lucide') {\n return <sl-icon library={this.library} name={this.name} size={this.size} label={this.label}></sl-icon>;\n }\n if (this.library === 'fa') {\n return <sl-icon library={this.library} name={this.fontAwesomeClassGenerator(this.name, this.category)} class={this.class} size={this.size} label={this.label}></sl-icon>;\n }\n }\n\n fontAwesomeClassGenerator = (name: string, category: string) => {\n let fa_class = [];\n let category_class = !category ? 'category-classic' : `category-${category}`;\n category_class && fa_class.push(category_class);\n let name_class = `name-${name}`;\n name_class && fa_class.push(name_class);\n return fa_class.join(' ');\n };\n\n fontAwesomeLibrary = {\n resolver: name => {\n const found_classes = name.split(' ');\n const category = found_classes.find(c => c.startsWith('category-')).replace('category-', '');\n const icon_name = found_classes.find(c => c.startsWith('name-')).replace('name-', '');\n\n return `https://designsystem-media.jumpgroup.it/svgs/${category}/${icon_name}.svg`;\n },\n mutator: svg => svg.setAttribute('fill', 'currentColor'),\n };\n\n lucideLibrary = {\n resolver: name => `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`,\n };\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-97b3526b.js');
-const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .Media.iconOnly{border-bottom-right-radius:0}:host .Media.is-mini{max-width:180px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Content.is-mini{max-width:180px}: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 .Body.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Body.is-mini>*{flex-direction:column}:host .Product{font-size:var(--fs-400);color:var(--neutral-grey-primary);text-decoration:none}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .Footer.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .Price.is-mini{display:flex;font-size:var(--fs-400)}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
+const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .Media.iconOnly{border-bottom-right-radius:0}:host .Media.is-mini{max-width:180px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Content.is-mini{max-width:180px}: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 .Body.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Body.is-mini>*{flex-direction:column}:host .Product{font-size:var(--fs-400);color:var(--neutral-grey-primary);text-decoration:none}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .Footer.is-mini{padding:calc(var(--jump-card-padding) / 2) 0}:host .Footer__AddToCart{--jump-button-color:var(--jump-card-ecommerce-add-to-cart-color);--jump-button-background:var(--jump-card-ecommerce-add-to-cart-background);--jump-button-color-hover:var(--jump-card-ecommerce-add-to-cart-color-hover);--jump-button-background-hover:var(--jump-card-ecommerce-add-to-cart-background-hover)}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .Price.is-mini{display:flex;font-size:var(--fs-400)}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
 const JumpCardEcommerceStyle0 = jumpCardEcommerceCss;
 const JumpCardEcommerce = class {
@@ -188,8 +188,8 @@ const JumpCardEcommerce = class {
                 : null, index.h("slot", { name: "quantity" }))
             : null), index.h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, this.outOfStock && !this.isMini ?
             index.h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
-            index.h("jump-button", { variant: this.addToCartColor, size: "small", text: true, onClick: () => this.waitingList() }, index.h("jump-icon", { slot: "prefix", name: "bell", category: "regular", size: "small" }), this.waitingListText) : '', !this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart ?
-            index.h("jump-button", { variant: this.addToCartColor, size: "small", text: true, onClick: () => this.addProductToCart() }, index.h("jump-icon", { slot: "prefix", name: "cart-shopping", category: "regular", size: "small" }), this.addToCartText) : '', !this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?
+            index.h("jump-button", { class: "Footer__AddToCart", variant: this.addToCartColor, size: "small", text: true, onClick: () => this.waitingList() }, index.h("jump-icon", { slot: "prefix", name: "bell", category: "regular", size: "small" }), this.waitingListText) : '', !this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart ?
+            index.h("jump-button", { class: "Footer__AddToCart", variant: this.addToCartColor, size: "small", text: true, onClick: () => this.addProductToCart() }, index.h("jump-icon", { slot: "prefix", name: "cart-shopping", category: "regular", size: "small" }), this.addToCartText) : '', !this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?
             index.h("slot", { name: "add-to-cart" })
             : null))));
     }

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

	@@ -1 +1 @@
1	- {"file":"jump-card-ecommerce.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,mgKAAmgK,CAAC;AACjiK,gCAAe,oBAAoB;;MCctB,iBAAiB;;;;;;;8BAQM,KAAK;6BAGN,KAAK;;wBAMsB,KAAK;2BAGlC,KAAK;kCAGE,KAAK;gCAGP,KAAK;;;;;;;;gCAwBN,sBAAsB;;;;;;wBAkB9B,GAAG;8BAGsC,WAAW;0BAGc,WAAW;0BAG1C,KAAK;;6BAMnC,sBAAsB;+BAGpB,wBAAwB;gCAGtB,KAAK;sBAGf,KAAK;2BAKA,KAAK;8BAEF,KAAK;0BAEJ,EAAE;;;;;;;;;;IA6BrC,MAAM,QAAQ,CAAC,KAAa,EAAE,SAAiB;QAC7C,IAAI,YAAY,GAAG,KAAK,CAAC;QACzB,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE;YACtB,YAAY,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB;QAED,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;SAC5B;QAED,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAGD,SAAS,CAAC,CAAC;QACT,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,oBAAO,KAAK,EAAG,CAAC;KACtD;IAED,mBAAmB;QACjB,IAAI,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;QAChD,IAAI,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAClC,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,IAAI,YAAY,CAC9C,CAAC;QACF,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACxC;;IAID,iBAAiB;KAChB;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE5E,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACtF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,QAAQ;gBAC3D,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;aAC1B,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAC5E,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC/E;KACF;;IAGD,gBAAgB,CAAC,CAAC;;QAChB,IAAI,CAAC,QAAQ,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,mCAAI,KAAK,CAAC;KACzC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CACtB;YACE,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CACF,CAAC;KACH;IAED,gBAAgB;;QACd,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACxC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7C,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;SACjC;QAED,MAAM,OAAO,GAAG;YACd,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,QAAQ,EAAE,MAAA,IAAI,CAAC,QAAQ,mCAAI,IAAI;YAC/B,SAAS,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,IAAI;SAC9B,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpC,UAAU,CAAC;YACT,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B,EAAE,IAAI,CAAC,CAAC;KACV;IAED,WAAW;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAC1B;YACE,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;SACxC,CACF,CAAC;KACH;IAED,YAAY;;QACV,IAAI,MAAM,GAAG,MAAA,QAAQ,CAAC,eAAe,CAAC,IAAI,mCAAI,OAAO,CAAC;QACtD,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE;YACtB,MAAM,GAAG,GAAG,MAAM,IAAI,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC;SAC9C;;QAGD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,CAAC;QAChH,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,EAAE;YAC9D,qBAAqB,EAAE,CAAC;YACxB,qBAAqB,EAAE,CAAC;SACzB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,EAAE,CAAC;QAClF,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,UAAU,GAAG,EAAE,CAAC;QAC5E,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,GAAG,iBAAiB,GAAG,EAAE,CAAC;QAC9D,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,iBAAiB,GAAG,EAAE,CAAC;QAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,CAAC;QAE9C,SAAS,iBAAiB,CAAC,KAAa,EAAE,SAAiB;YACzD,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,SAAS,IAAI,KAAK,IAAI,GAAG,CAAC;YACrD,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SAC5B;QAED,QACEA,QAACC,UAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK;YACzBD,wBAAY,KAAK,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,EAAC,OAAO,EACzF,KAAK,EAAE,IAAI,CAAC,KAAK,GAAe,GAAG,EAAE,EAElD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW;YAC/BA,yBAAa,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,EAChG,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,QAAQ,UACpFA,uBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,OAAO,EACvE,IAAI,EAAC,QAAQ,GAAa,CACtB;;gBAEd,IAAI,CAAC,kBAAkB,GAAGA,iBAAK,KAAK,EAAC,UAAU,IAC7CA,kBAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,GAAG,IAAI,EAGfA,iBAAK,KAAK,EAAE,SAAS,aAAa,IAAI,eAAe,IAAI,QAAQ,EAAE,IACjEA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAChBA,oBAAQ,KAAK,EAAE,UAAU,eAAe,GAAG,IACxC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAGA,iBAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,GAAG,EAAE,EACpG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC9BA,iBAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAQ,GAAG,EAAE,CAC9E,EACR,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG;YACzBA,mBAAO,QAAQ,UACbA,oBAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAG,EAC/CA,oBAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAG,EAC/CA,oBAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAG,CAC1C,GAAG,EAAE,CACb,EACH,CAAC,IAAI,CAAC,MAAM;YACXA,iBAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,uBAAuB,GAAG,EAAE,EAAE,IACvFA,yBAAa,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,EAAC,OAAO,EAAC,IAAI,UAC3DA,uBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAa,EAClDA,2BAAQ,IAAI,CAAC,gBAAgB,MAAS,CAC1B,CACV;cACJ,IAAI,EAGP,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAC5DA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,yBAAa,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,QAAQ,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAChGA,uBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,GAAa,CACjE,CACV;cACJ,EAAE,EAGL,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,gBAAgB;YAC3DA,iBAAK,KAAK,EAAC,gBAAgB,IACvBA,kBAAM,IAAI,EAAC,aAAa,GAAQ,CAC9B;cACJ,EAAE,CAEF,EAENA,iBAAK,KAAK,EAAE,WAAW,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE,IACnEA,iBAAK,KAAK,EAAE,QAAQ,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE,IAChEA,qBACEA,iBAAK,KAAK,EAAC,MAAM,IACfA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,WAAW,CAAK,EACzD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,GAAGA,iBAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAO,GAAG,IAAI,CAC/E,EAEL,IAAI,CAAC,KAAK;YACTA,iBAAK,KAAK,EAAE,SAAS,QAAQ,EAAE,IAC5B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;gBAC5DA,iBAAK,KAAK,EAAC,iBAAiB,SAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,OAAS;kBACnF,IAAI,EAEP,CAAC,IAAI,CAAC,MAAM;gBACXA,iBAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,EAAE,EAAE,IACxF,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAC/B;;oBAENA,iBAAK,KAAK,EAAE,gBAAgB,IACzB,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,cAAc,CACzG,EAGP,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;gBAC5DA,iBAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAO;kBACrE,IAAI,CACJ;cACJ,IAAI,CACJ,EAEL,CAAC,IAAI,CAAC,MAAM;YACXA,qBACG,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC;gBAC1BA,iBAAK,KAAK,EAAC,kBAAkB,IACzBA,oBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAC1C,QAAQ,EAAE;wBACR,IAAI,CAAC,mBAAmB,EAAE,CAAC;qBAC5B,IAEA,IAAI,CAAC,UAAU;qBACb,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;qBACxC,GAAG,CAAC,CAAC,SAAS,MACbA,oBAAQ,KAAK,EAAE,SAAS,CAAC,IAAI,IAAG,SAAS,CAAC,KAAK,CAAU,CAC1D,CAAC,CACG,CACP;kBACN,IAAI,EACNA,kBAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;cACN,IAAI,CAEF,EAENA,iBAAK,KAAK,EAAE,UAAU,YAAY,IAAI,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE,IAEjF,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM;YAC9BA,iBAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,GAAG,UAAU,CAAO,GAAG,EAAE,EAE5F,IAAI,CAAC,UAAU;YACdA,yBAAa,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAC5FA,uBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAa,EAChF,IAAI,CAAC,eAAe,CACT,GAAG,EAAE,EAGpB,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,gBAAgB;YACjEA,yBAAa,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,IACjGA,uBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAa,EACzF,IAAI,CAAC,aAAa,CACP,GAAG,EAAE,EAGpB,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,gBAAgB;YAC9DA,kBAAM,IAAI,EAAC,aAAa,GAAQ;cAChC,IAAI,CAEJ,CACF,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\n }\n\n .Favorite {\n position: absolute;\n top: 1rem;\n right: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n right: calc(1rem + 8px);\n }\n }\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n\n .Images {\n height: 100%;\n margin: 0;\n position: relative;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\n\n &.has-hover-image {\n &:hover .Images__Front {\n opacity: 0;\n }\n }\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n\n &.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .NotificationCart {\n display: none;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2rem 1rem;\n background-color: hsl(0 0% 0% / 35%);\n box-sizing: border-box;\n z-index: 2;\n transform: translate3d(0, 0, 0);\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .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 &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Footer {\n line-height: var(--lh-400);\n justify-content: end;\n padding: var(--jump-card-padding) 0;\n align-items: flex-end;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n &.hasBackground {\n padding-bottom: 0;\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n z-index: 2;\n }\n\n .Price {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n grid-template-rows: 1.5rem 1.5rem auto;\n justify-items: end;\n align-items: end;\n column-gap: 0.5rem;\n\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n\n .SelectVariations {\n select {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--neutral-grey-secondary);\n border-radius: 3px;\n color: var(--neutral-grey-secondary);\n font-size: var(--fs-300);\n padding: 0.5rem 0.75rem;\n max-width: 100%;\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n -webkit-print-color-adjust: exact;\n }\n }\n}\n\n.slide-in-bottom {\n animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.slide-out-bottom {\n animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;\n}\n\n.fade-in-out {\n animation-name: fade-in-out;\n animation-duration: 6s;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes fade-in-out {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n\n 50% {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen, Method } from '@stencil/core';\n\ninterface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n // Add more keys as needed\n}\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- /\n\n /* Indicate if card has only icon button/\n @Prop() onlyIconButton: boolean = false;\n\n /* Indicate if card has background/\n @Prop() hasBackground: boolean = false;\n\n /* Indicates the badge of the card/\n @Prop() badge: string;\n\n /* Indicates if the product is favorite /\n @Prop({ mutable: true, reflect: true }) favorite: boolean = false;\n\n /* Indicate if the whislist is active in shop/\n @Prop() hasFavorite: boolean = false;\n\n /* Indicate if the whislist will be slotted/\n @Prop() hasSlotForFavorite: boolean = false;\n\n /* Indicate if the add to cart btn will be slotted/\n @Prop() hasSlotAddToCart: boolean = false;\n\n /* Indicates the link of the card/\n @Prop() link: string;\n\n /* Indicates the image's src of the card/\n @Prop() img: string;\n\n /* Indicates the img's alt of the card/\n @Prop() imgAlt: string;\n\n /* Indicates the over image's src of the card/\n @Prop() hoverImg: string;\n\n /* Indicates the hover img's alt of the card/\n @Prop() hoverImgAlt: string;\n\n /* Indicates the videoSrc of the card/\n @Prop() videoSrc: string;\n\n /* Indicates the notificationUrl of the card/\n @Prop() notificationUrl: string;\n\n /* Indicates the notificationText of the card/\n @Prop() notificationText: string = 'Aggiunto al carrello';\n\n /* Indicates the title of the card/\n @Prop() productName: string;\n\n /* Indicates the subtitle of the card/\n @Prop() subtitle: string;\n\n /* Indicates the ID of the product, can be also a SKU/\n @Prop() productId: string;\n\n /* Indicates the price of the card /\n @Prop() price: number;\n\n /* Indicates the sale price of the card /\n @Prop() salePrice: number;\n\n /* Indicates the currency of the card /\n @Prop() currency: string = '€';\n\n /* Indicates the variant of the button /\n @Prop() addToCartColor: 'primary' \| 'secondary'\|'white'\|'neutral' = 'secondary';\n\n /* Indicates the variant of the button /\n @Prop() badgeColor: 'primary' \| 'secondary' \| 'neutral' \| 'warning' \| 'success' \| 'danger' = 'secondary';\n\n /* Indicates if the product is outOfStock /\n @Prop({ mutable: true, reflect: true }) outOfStock: boolean = false;\n\n /* Indicates the outOfStockText of the product/\n @Prop() outOfStockText: string;\n\n /* Indicates the button class of the add to cart / notification button /\n @Prop() addToCartText: string = 'Aggiungi al carrello';\n\n /* Indicates the button class of the add to cart / notification button /\n @Prop() waitingListText: string = 'Notifica disponibilità';\n\n /* Indicate if the user request to be notified when te product is avaible/\n @Prop() addToWaitingList: boolean = false;\n\n /* Indicate if the card is Mini Card/\n @Prop() isMini: boolean = false;\n\n / ---------------------- @STATE ------------------------- /\n\n /* Indicate if the product is added to cart --> non deve esserci nelle storie! /\n @Prop() addedToCart: boolean = false;\n\n @Prop() endAddedToCart: boolean = false;\n\n @State() variations: Variation[] = [];\n\n @State() selectedVariation: Variation;\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n // è una proprietà che viene cambiata solo da dentro\n quantity: number;\n\n variationSelectEl: HTMLSelectElement;\n\n / ---------------------- @EVENTS ------------------------- /\n\n @Event({ eventName: 'jump-toggle-favorite' }) toggleFavorite: EventEmitter;\n\n @Event({ eventName: 'jump-add-to-cart' }) productAddToCart: EventEmitter;\n\n @Event({ eventName: 'jump-add-to-waiting-list' }) productWaitingList: EventEmitter;\n\n @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n /\n Set the price of the product\n * @param price\n * @param salePrice\n /\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n @Listen('jump-card-ecommerce-option-connected')\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n this.variations = [...this.variations, { ...props }];\n }\n\n onVariationSelected() {\n let currentValue = this.variationSelectEl.value;\n let variation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\n this.selectedVariation = variation;\n this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n }\n\n / ---------------------- @LIFECYCLE ------------------------- /\n\n componentWillLoad() {\n }\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n\n if (this.jumpQuantityEl) {\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n }\n\n this.formatPrices();\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if (this.jumpQuantityEl) {\n this.jumpQuantityEl.removeEventListener('jump-change', this.onQuantityChange);\n }\n }\n\n / ---------------------- @METHODS ------------------------- /\n onQuantityChange(e) {\n this.quantity = e.detail.value ?? false;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite,\n },\n );\n }\n\n addProductToCart() {\n this.addedToCart = true;\n let variations = this.selectedVariation;\n if (!variations && this.variations.length > 0) {\n variations = this.variations[0];\n }\n\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: variations ?? null,\n };\n this.productAddToCart.emit(payload);\n\n setTimeout(() => {\n this.addedToCart = false;\n }, 6000);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList,\n },\n );\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = this.hasBackground && !this.isMini ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton && !this.isMini ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\n const miniCard = this.isMini ? 'is-mini' : '';\n\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.isMini && this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n\n {!this.isMini && this.hasFavorite ?\n <jump-button onClick={() => this.onToggleFavorite()} class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n size=\"medium\"></jump-icon>\n </jump-button>\n :\n this.hasSlotForFavorite ? <div class=\"Favorite\">\n <slot name=\"favorite\"></slot>\n </div> : null\n }\n\n <div class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}>\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} `}>\n {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n {this.hoverImg && !this.videoSrc ?\n <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n </figure>\n {this.videoSrc && !this.img ?\n <video autoplay>\n <source src={this.videoSrc} type=\"video/mp4\" />\n <source src={this.videoSrc} type=\"video/mov\" />\n <source src={this.videoSrc} type=\"video/webm\" />\n </video> : ''}\n </a>\n {!this.isMini ?\n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text>\n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon>\n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n : null\n }\n\n {!this.isMini && this.onlyIconButton && !this.hasSlotAddToCart ?\n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name=\"cart-shopping\" category=\"regular\"></jump-icon>\n </jump-button>\n </div>\n : ''\n }\n\n {!this.isMini && this.onlyIconButton && this.hasSlotAddToCart ?\n <div class=\"OnlyIconButton\">\n <slot name=\"add-to-cart\"></slot>\n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div>\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {!this.isMini && this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n : null}\n\n {!this.isMini ?\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n :\n <div class={`Price__Regular`}>\n {this.currency}{this.salePrice && this.salePrice < this.price ? this.salePriceFormatted : this.priceFormatted}\n </div>\n }\n\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n </div>\n\n {!this.isMini ?\n <div>\n {this.variations.length != 0 ?\n <div class=\"SelectVariations\">\n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n this.onVariationSelected();\n }}\n >\n {this.variations\n .filter((variation) => !variation.imgUrl)\n .map((variation) => (\n <option value={variation.code}>{variation.label}</option>\n ))}\n </select>\n </div>\n : null}\n <slot name=\"quantity\"></slot>\n </div>\n : null}\n\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n {this.outOfStock && !this.isMini?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n {this.outOfStock ?\n <jump-button variant={this.addToCartColor} size=\"small\" text onClick={() => this.waitingList()}>\n <jump-icon slot=\"prefix\" name=\"bell\" category=\"regular\" size=\"small\"></jump-icon>\n {this.waitingListText}\n </jump-button> : ''\n }\n\n {!this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart ?\n <jump-button variant={this.addToCartColor} size=\"small\" text onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name=\"cart-shopping\" category=\"regular\" size=\"small\"></jump-icon>\n {this.addToCartText}\n </jump-button> : ''\n }\n\n {!this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?\n <slot name=\"add-to-cart\"></slot>\n : null\n }\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-card-ecommerce.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\n }\n\n .Favorite {\n position: absolute;\n top: 1rem;\n right: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n right: calc(1rem + 8px);\n }\n }\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n\n .Images {\n height: 100%;\n margin: 0;\n position: relative;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\n\n &.has-hover-image {\n &:hover .Images__Front {\n opacity: 0;\n }\n }\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n\n &.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .NotificationCart {\n display: none;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2rem 1rem;\n background-color: hsl(0 0% 0% / 35%);\n box-sizing: border-box;\n z-index: 2;\n transform: translate3d(0, 0, 0);\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .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 &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Footer {\n line-height: var(--lh-400);\n justify-content: end;\n padding: var(--jump-card-padding) 0;\n align-items: flex-end;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n &.hasBackground {\n padding-bottom: 0;\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n\n &__AddToCart {\n --jump-button-color: var(--jump-card-ecommerce-add-to-cart-color);\n --jump-button-background: var(--jump-card-ecommerce-add-to-cart-background);\n --jump-button-color-hover: var(--jump-card-ecommerce-add-to-cart-color-hover);\n --jump-button-background-hover: var(--jump-card-ecommerce-add-to-cart-background-hover);\n }\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n z-index: 2;\n }\n\n .Price {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n grid-template-rows: 1.5rem 1.5rem auto;\n justify-items: end;\n align-items: end;\n column-gap: 0.5rem;\n\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n\n .SelectVariations {\n select {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--neutral-grey-secondary);\n border-radius: 3px;\n color: var(--neutral-grey-secondary);\n font-size: var(--fs-300);\n padding: 0.5rem 0.75rem;\n max-width: 100%;\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n -webkit-print-color-adjust: exact;\n }\n }\n}\n\n.slide-in-bottom {\n animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.slide-out-bottom {\n animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;\n}\n\n.fade-in-out {\n animation-name: fade-in-out;\n animation-duration: 6s;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes fade-in-out {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n\n 50% {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen, Method } from '@stencil/core';\n\ninterface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n // Add more keys as needed\n}\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- /\n\n /* Indicate if card has only icon button/\n @Prop() onlyIconButton: boolean = false;\n\n /* Indicate if card has background/\n @Prop() hasBackground: boolean = false;\n\n /* Indicates the badge of the card/\n @Prop() badge: string;\n\n /* Indicates if the product is favorite /\n @Prop({ mutable: true, reflect: true }) favorite: boolean = false;\n\n /* Indicate if the whislist is active in shop/\n @Prop() hasFavorite: boolean = false;\n\n /* Indicate if the whislist will be slotted/\n @Prop() hasSlotForFavorite: boolean = false;\n\n /* Indicate if the add to cart btn will be slotted/\n @Prop() hasSlotAddToCart: boolean = false;\n\n /* Indicates the link of the card/\n @Prop() link: string;\n\n /* Indicates the image's src of the card/\n @Prop() img: string;\n\n /* Indicates the img's alt of the card/\n @Prop() imgAlt: string;\n\n /* Indicates the over image's src of the card/\n @Prop() hoverImg: string;\n\n /* Indicates the hover img's alt of the card/\n @Prop() hoverImgAlt: string;\n\n /* Indicates the videoSrc of the card/\n @Prop() videoSrc: string;\n\n /* Indicates the notificationUrl of the card/\n @Prop() notificationUrl: string;\n\n /* Indicates the notificationText of the card/\n @Prop() notificationText: string = 'Aggiunto al carrello';\n\n /* Indicates the title of the card/\n @Prop() productName: string;\n\n /* Indicates the subtitle of the card/\n @Prop() subtitle: string;\n\n /* Indicates the ID of the product, can be also a SKU/\n @Prop() productId: string;\n\n /* Indicates the price of the card /\n @Prop() price: number;\n\n /* Indicates the sale price of the card /\n @Prop() salePrice: number;\n\n /* Indicates the currency of the card /\n @Prop() currency: string = '€';\n\n /* Indicates the variant of the button /\n @Prop() addToCartColor: 'primary' \| 'secondary'\|'white'\|'neutral' = 'secondary';\n\n /* Indicates the variant of the button /\n @Prop() badgeColor: 'primary' \| 'secondary' \| 'neutral' \| 'warning' \| 'success' \| 'danger' = 'secondary';\n\n /* Indicates if the product is outOfStock /\n @Prop({ mutable: true, reflect: true }) outOfStock: boolean = false;\n\n /* Indicates the outOfStockText of the product/\n @Prop() outOfStockText: string;\n\n /* Indicates the button class of the add to cart / notification button /\n @Prop() addToCartText: string = 'Aggiungi al carrello';\n\n /* Indicates the button class of the add to cart / notification button /\n @Prop() waitingListText: string = 'Notifica disponibilità';\n\n /* Indicate if the user request to be notified when te product is avaible/\n @Prop() addToWaitingList: boolean = false;\n\n /* Indicate if the card is Mini Card/\n @Prop() isMini: boolean = false;\n\n / ---------------------- @STATE ------------------------- /\n\n /* Indicate if the product is added to cart --> non deve esserci nelle storie! /\n @Prop() addedToCart: boolean = false;\n\n @Prop() endAddedToCart: boolean = false;\n\n @State() variations: Variation[] = [];\n\n @State() selectedVariation: Variation;\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n // è una proprietà che viene cambiata solo da dentro\n quantity: number;\n\n variationSelectEl: HTMLSelectElement;\n\n / ---------------------- @EVENTS ------------------------- /\n\n @Event({ eventName: 'jump-toggle-favorite' }) toggleFavorite: EventEmitter;\n\n @Event({ eventName: 'jump-add-to-cart' }) productAddToCart: EventEmitter;\n\n @Event({ eventName: 'jump-add-to-waiting-list' }) productWaitingList: EventEmitter;\n\n @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n /\n Set the price of the product\n * @param price\n * @param salePrice\n /\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n @Listen('jump-card-ecommerce-option-connected')\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n this.variations = [...this.variations, { ...props }];\n }\n\n onVariationSelected() {\n let currentValue = this.variationSelectEl.value;\n let variation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\n this.selectedVariation = variation;\n this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n }\n\n / ---------------------- @LIFECYCLE ------------------------- /\n\n componentWillLoad() {\n }\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n\n if (this.jumpQuantityEl) {\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n }\n\n this.formatPrices();\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if (this.jumpQuantityEl) {\n this.jumpQuantityEl.removeEventListener('jump-change', this.onQuantityChange);\n }\n }\n\n / ---------------------- @METHODS ------------------------- /\n onQuantityChange(e) {\n this.quantity = e.detail.value ?? false;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite,\n },\n );\n }\n\n addProductToCart() {\n this.addedToCart = true;\n let variations = this.selectedVariation;\n if (!variations && this.variations.length > 0) {\n variations = this.variations[0];\n }\n\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: variations ?? null,\n };\n this.productAddToCart.emit(payload);\n\n setTimeout(() => {\n this.addedToCart = false;\n }, 6000);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList,\n },\n );\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = this.hasBackground && !this.isMini ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton && !this.isMini ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\n const miniCard = this.isMini ? 'is-mini' : '';\n\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.isMini && this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n\n {!this.isMini && this.hasFavorite ?\n <jump-button onClick={() => this.onToggleFavorite()} class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n size=\"medium\"></jump-icon>\n </jump-button>\n :\n this.hasSlotForFavorite ? <div class=\"Favorite\">\n <slot name=\"favorite\"></slot>\n </div> : null\n }\n\n <div class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}>\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} `}>\n {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n {this.hoverImg && !this.videoSrc ?\n <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n </figure>\n {this.videoSrc && !this.img ?\n <video autoplay>\n <source src={this.videoSrc} type=\"video/mp4\" />\n <source src={this.videoSrc} type=\"video/mov\" />\n <source src={this.videoSrc} type=\"video/webm\" />\n </video> : ''}\n </a>\n {!this.isMini ?\n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text>\n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon>\n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n : null\n }\n\n {!this.isMini && this.onlyIconButton && !this.hasSlotAddToCart ?\n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name=\"cart-shopping\" category=\"regular\"></jump-icon>\n </jump-button>\n </div>\n : ''\n }\n\n {!this.isMini && this.onlyIconButton && this.hasSlotAddToCart ?\n <div class=\"OnlyIconButton\">\n <slot name=\"add-to-cart\"></slot>\n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div>\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {!this.isMini && this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n : null}\n\n {!this.isMini ?\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n :\n <div class={`Price__Regular`}>\n {this.currency}{this.salePrice && this.salePrice < this.price ? this.salePriceFormatted : this.priceFormatted}\n </div>\n }\n\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n </div>\n\n {!this.isMini ?\n <div>\n {this.variations.length != 0 ?\n <div class=\"SelectVariations\">\n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n this.onVariationSelected();\n }}\n >\n {this.variations\n .filter((variation) => !variation.imgUrl)\n .map((variation) => (\n <option value={variation.code}>{variation.label}</option>\n ))}\n </select>\n </div>\n : null}\n <slot name=\"quantity\"></slot>\n </div>\n : null}\n\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n {this.outOfStock && !this.isMini?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n {this.outOfStock ?\n <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.waitingList()}>\n <jump-icon slot=\"prefix\" name=\"bell\" category=\"regular\" size=\"small\"></jump-icon>\n {this.waitingListText}\n </jump-button> : ''\n }\n\n {!this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart ?\n <jump-button class=\"Footer__AddToCart\" variant={this.addToCartColor} size=\"small\" text onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name=\"cart-shopping\" category=\"regular\" size=\"small\"></jump-icon>\n {this.addToCartText}\n </jump-button> : ''\n }\n\n {!this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?\n <slot name=\"add-to-cart\"></slot>\n : null\n }\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/collection/components/jump-button/jump-button.css CHANGED Viewed

@@ -10,14 +10,14 @@
 }
 :host {
-  --jump-button-color: #ffffff;
-  --jump-button-color-disabled: #cbcbcb;
-  --jump-button-background: var(--primary-standard);
-  --jump-button-background-outline: transparent;
-  --jump-button-color-hover: #ffffff;
-  --jump-button-background-hover: var(--primary-hard);
-  --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);
-  --jump-button-padding: 1rem 1.25rem;
+  --button-color: #ffffff;
+  --button-color-disabled: #cbcbcb;
+  --button-background: var(--primary-standard);
+  --button-background-outline: transparent;
+  --button-color-hover: #ffffff;
+  --button-background-hover: var(--primary-hard);
+  --button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);
+  --button-padding: 1rem 1.25rem;
   display: flex;
 }
 :host button {
@@ -29,56 +29,56 @@
 }
 :host button,
 :host a {
-  background-color: var(--jump-button-background);
-  border-radius: var(--jump-button-border-radius);
-  color: var(--jump-button-color);
+  background-color: var(--jump-button-background, var(--button-background));
+  border-radius: var(--button-border-radius);
+  color: var(--jump-button-color, var(--button-color));
   position: relative;
   font-family: var(--ff-primary, "Arial"), sans-serif;
   font-weight: var(--fw-700, 700);
   font-size: var(--fs-400, 1rem);
   line-height: 1.2;
   align-items: center;
-  gap: var(--jump-button-gap, 0.5rem);
+  gap: var(--button-gap, 0.5rem);
   text-decoration: none;
-  padding: var(--jump-button-padding);
+  padding: var(--button-padding);
 }
 :host button:hover,
 :host a:hover {
-  background-color: var(--jump-button-background-hover);
-  color: var(--jump-button-color-hover);
+  background-color: var(--jump-button-background-hover, var(--button-background-hover));
+  color: var(--jump-button-color-hover, var(--button-color-hover));
 }
 :host button[data-variant=primary],
 :host a[data-variant=primary] {
-  --jump-button-color: var(--neutral-white);
-  --jump-button-background: var(--primary-standard);
-  --jump-button-color-hover: var(--neutral-white);
-  --jump-button-background-hover: var(--primary-hard);
+  --button-color: var(--neutral-white);
+  --button-background: var(--primary-standard);
+  --button-color-hover: var(--neutral-white);
+  --button-background-hover: var(--primary-hard);
 }
 :host button[data-variant=secondary],
 :host a[data-variant=secondary] {
-  --jump-button-color: var(--neutral-white);
-  --jump-button-background: var(--secondary-standard);
-  --jump-button-color-hover: var(--neutral-white);
-  --jump-button-background-hover: var(--secondary-hard);
+  --button-color: var(--neutral-white);
+  --button-background: var(--secondary-standard);
+  --button-color-hover: var(--neutral-white);
+  --button-background-hover: var(--secondary-hard);
 }
 :host button[data-variant=neutral],
 :host a[data-variant=neutral] {
-  --jump-button-color: var(--neutral-white);
-  --jump-button-background: var(--neutral-grey-secondary);
-  --jump-button-color-hover: var(--neutral-white);
-  --jump-button-background-hover: var(--neutral-grey-primary);
+  --button-color: var(--neutral-white);
+  --button-background: var(--neutral-grey-secondary);
+  --button-color-hover: var(--neutral-white);
+  --button-background-hover: var(--neutral-grey-primary);
 }
 :host button[data-variant=white],
 :host a[data-variant=white] {
-  --jump-button-color: var(--neutral-grey-primary);
-  --jump-button-background: var(--neutral-white);
-  --jump-button-color-hover: var(--neutral-grey-primary);
-  --jump-button-background-hover: var(--neutral-grey-background);
+  --button-color: var(--neutral-grey-primary);
+  --button-background: var(--neutral-white);
+  --button-color-hover: var(--neutral-grey-primary);
+  --button-background-hover: var(--neutral-grey-background);
 }
 :host button[disabled],
 :host a[disabled] {
-  --jump-button-background: var(--jump-button-color-disabled);
-  --jump-button-background-hover: var(--jump-button-color-disabled);
+  --button-background: var(--button-color-disabled);
+  --button-background-hover: var(--button-color-disabled);
   cursor: not-allowed;
 }
 :host button[data-pill],
@@ -88,58 +88,58 @@
 :host button[data-size=small],
 :host a[data-size=small] {
   font-size: var(--fs-300, 0.875rem);
-  --jump-button-padding: 0.65rem 1rem;
+  --button-padding: 0.65rem 1rem;
 }
 :host button[data-size=medium],
 :host a[data-size=medium] {
   font-size: var(--fs-400, 1rem);
-  --jump-button-padding: 0.75rem 1.25rem;
+  --button-padding: 0.75rem 1.25rem;
 }
 :host button[data-size=large],
 :host a[data-size=large] {
   font-size: var(--fs-500, 1.125rem);
-  --jump-button-padding: 1rem 1.5rem;
+  --button-padding: 1rem 1.5rem;
 }
 :host button[data-outline],
 :host a[data-outline] {
-  background-color: var(--jump-button-background-outline);
-  border: 1px solid var(--jump-button-background);
-  color: var(--jump-button-background);
+  background-color: var(--jump-background-outline, var(--button-background-outline));
+  border: 1px solid var(--jump-button-background, var(--button-background));
+  color: var(--jump-button-background, var(--button-background));
 }
 :host button[data-outline]:hover,
 :host a[data-outline]:hover {
-  background-color: var(--jump-button-background-hover);
-  border: 1px solid var(--jump-button-background-hover);
-  color: var(--jump-button-color-hover);
+  background-color: var(--jump-button-background-hover, var(--button-background-hover));
+  border: 1px solid var(--jump-button-background-hover, var(--button-background-hover));
+  color: var(--jump-button-color-hover, var(--button-color-hover));
 }
 :host button[data-text],
 :host a[data-text] {
   background-color: transparent;
   border: none;
-  color: var(--jump-button-background);
+  color: var(--jump-button-background, var(--button-background));
   padding: 0;
 }
 :host button[data-text]:hover,
 :host a[data-text]:hover {
   background-color: transparent;
   border: none;
-  color: var(--jump-button-background-hover);
+  color: var(--jump-button-background-hover, var(--button-background-hover));
 }
 :host button[data-only-icon],
 :host a[data-only-icon] {
-  --jump-button-padding: 0.5rem;
+  --button-padding: 0.5rem;
 }
 :host button[data-only-icon][data-size=small],
 :host a[data-only-icon][data-size=small] {
-  --jump-button-padding: 0.5rem;
+  --button-padding: 0.5rem;
 }
 :host button[data-only-icon][data-size=medium],
 :host a[data-only-icon][data-size=medium] {
-  --jump-button-padding: 0.875rem;
+  --button-padding: 0.875rem;
 }
 :host button[data-only-icon][data-size=large],
 :host a[data-only-icon][data-size=large] {
-  --jump-button-padding: 1rem;
+  --button-padding: 1rem;
 }
 :host button[data-full],
 :host a[data-full] {
@@ -148,8 +148,8 @@
 }
 :host button.chat,
 :host a.chat {
-  --jump-button-color: var(--neutral-white);
-  --jump-button-background: hsla(133, 54%, 58%, 1);
-  --jump-button-color-hover: var(--neutral-white);
-  --jump-button-background-hover: hsla(161, 63%, 31%, 1);
+  --button-color: var(--neutral-white);
+  --button-background: hsla(133, 54%, 58%, 1);
+  --button-color-hover: var(--neutral-white);
+  --button-background-hover: hsla(161, 63%, 31%, 1);
 }

package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css CHANGED Viewed

@@ -166,6 +166,12 @@
 :host .Footer.is-mini {
   padding: calc(var(--jump-card-padding) / 2) 0;
 }
+:host .Footer__AddToCart {
+  --jump-button-color: var(--jump-card-ecommerce-add-to-cart-color);
+  --jump-button-background: var(--jump-card-ecommerce-add-to-cart-background);
+  --jump-button-color-hover: var(--jump-card-ecommerce-add-to-cart-color-hover);
+  --jump-button-background-hover: var(--jump-card-ecommerce-add-to-cart-background-hover);
+}
 :host .OutOfStock {
   justify-items: start;
   font-size: var(--fs-300);

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

@@ -176,8 +176,8 @@ export class JumpCardEcommerce {
                 : null, h("slot", { name: "quantity" }))
             : null), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, this.outOfStock && !this.isMini ?
             h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
-            h("jump-button", { variant: this.addToCartColor, size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: "bell", category: "regular", size: "small" }), this.waitingListText) : '', !this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart ?
-            h("jump-button", { variant: this.addToCartColor, size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: "cart-shopping", category: "regular", size: "small" }), this.addToCartText) : '', !this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?
+            h("jump-button", { class: "Footer__AddToCart", variant: this.addToCartColor, size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: "bell", category: "regular", size: "small" }), this.waitingListText) : '', !this.outOfStock && !this.onlyIconButton && !this.hasSlotAddToCart ?
+            h("jump-button", { class: "Footer__AddToCart", variant: this.addToCartColor, size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: "cart-shopping", category: "regular", size: "small" }), this.addToCartText) : '', !this.outOfStock && !this.onlyIconButton && this.hasSlotAddToCart ?
             h("slot", { name: "add-to-cart" })
             : null))));
     }