@jumpgroup/jump-design-system 0.2.7 → 0.3.0

package/dist/components/jump-badge.js.map

@@ -1 +1 @@
-{"file":"jump-badge.js","mappings":";;AAAA,MAAM,YAAY,GAAG,urBAAurB,CAAC;AAC7sB,wBAAe,YAAY;;MCMd,QAAQ;;;;qBAIK,EAAE;uBAKe,SAAS;;IAElD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":["jump-badge {\n  --jump-badge-background: var(--primary-standard);\n  --jump-badge-color: #fff;\n  --jump-bafge-border-radius: 50px;\n\n  display: inline-flex;\n  color: var(--jump-badge-color);\n  background-color: var(--jump-badge-background);\n  align-items: center;\n  justify-content: center;\n  font-family: var(--ff-primary, 'Arial'), sans-serif;\n  font-size: var(--fs-300);\n  font-weight: var(--fw-900);\n  line-height: 1;\n  border-radius: var(--jump-bafge-border-radius);\n  border: solid 1px var(--jump-bafge-border-radius);\n  white-space: nowrap;\n  padding: 0.35em 0.6em;\n  user-select: none;\n  cursor: inherit;\n\n  &[variant='primary'] {\n    --jump-badge-background: var(--primary-standard);\n  }\n\n  &[variant='secondary'] {\n    --jump-badge-background: var(--secondary-standard);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-badge',\n  styleUrl: 'jump-badge.scss',\n  shadow: false,\n})\nexport class AppBadge {\n  /**\n   * Indicates the label of the badge\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Indicates the variant of the badge\n   */\n  @Prop() variant: 'primary'|'secondary' = 'primary';\n\n  render() {\n    return (\n      <Host variant={this.variant}>\n        {this.label}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"jump-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/jump-badge2.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const jumpBadgeCss = ":host{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-badge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-size:var(--fs-300);font-weight:var(--fw-900);line-height:1;border-radius:var(--jump-badge-border-radius);border:solid 1px var(--jump-badge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}";
+const JumpBadgeStyle0 = jumpBadgeCss;
+
+const AppBadge = /*@__PURE__*/ proxyCustomElement(class AppBadge extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.label = '';
+        this.variant = 'primary';
+    }
+    render() {
+        return (h(Host, { key: '00c947abf3e46b224b6f20421f3e8ee35fdd9401', "data-variant": this.variant }, this.label));
+    }
+    static get style() { return JumpBadgeStyle0; }
+}, [1, "jump-badge", {
+        "label": [1],
+        "variant": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AppBadge);
+            }
+            break;
+    } });
+}
+
+export { AppBadge as A, defineCustomElement as d };
+
+//# sourceMappingURL=jump-badge2.js.map

package/dist/components/jump-badge2.js.map

@@ -0,0 +1 @@
+{"file":"jump-badge2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,shBAAshB,CAAC;AAC5iB,wBAAe,YAAY;;MCMd,QAAQ;;;;;qBAIK,EAAE;uBAKe,SAAS;;IAElD,MAAM;QACJ,QACE,EAAC,IAAI,qEAAe,IAAI,CAAC,OAAO,IAC7B,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge&encapsulation=shadow","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":[":host {\n  --jump-badge-background: var(--primary-standard);\n  --jump-badge-color: #fff;\n  --jump-badge-border-radius: 50px;\n\n  display: inline-flex;\n  color: var(--jump-badge-color);\n  background-color: var(--jump-badge-background);\n  align-items: center;\n  justify-content: center;\n  font-family: var(--ff-primary, 'Arial'), sans-serif;\n  font-size: var(--fs-300);\n  font-weight: var(--fw-900);\n  line-height: 1;\n  border-radius: var(--jump-badge-border-radius);\n  border: solid 1px var(--jump-badge-border-radius);\n  white-space: nowrap;\n  padding: 0.35em 0.6em;\n  user-select: none;\n  cursor: inherit;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-badge',\n  styleUrl: 'jump-badge.scss',\n  shadow: true,\n})\nexport class AppBadge {\n  /**\n   * Indicates the label of the badge\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Indicates the variant of the badge\n   */\n  @Prop() variant: 'primary'|'secondary' = 'primary';\n\n  render() {\n    return (\n      <Host data-variant={this.variant}>\n        {this.label}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/jump-button.js

@@ -1,68 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-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}: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;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 JumpButtonStyle0 = jumpButtonCss;
-
-const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.disabled = false;
-        this.variant = 'primary';
-        this.outline = false;
-        this.size = 'medium';
-        this.full = false;
-        this.pill = false;
-        this.text = false;
-        this.onlyIcon = false;
-        this.href = undefined;
-        this.target = undefined;
-        this.type = 'button';
-        this.name = undefined;
-        this.value = undefined;
-        this.ariaLabel = undefined;
-        this.class = undefined;
-        this.buttonId = undefined;
-    }
-    componentWillLoad() {
-        this.target = this.href ? this.target : '_self';
-    }
-    render() {
-        return (h(Host, { key: '2f1a96f504d7f273bfdf0b49d7a708aea570f59f' }, this.href ? (h("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 }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))) : (h("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 }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" })))));
-    }
-    static get style() { return JumpButtonStyle0; }
-}, [1, "jump-button", {
-        "disabled": [4],
-        "variant": [1],
-        "outline": [4],
-        "size": [1],
-        "full": [4],
-        "pill": [4],
-        "text": [4],
-        "onlyIcon": [4, "only-icon"],
-        "href": [1],
-        "target": [1],
-        "type": [1],
-        "name": [1],
-        "value": [1],
-        "ariaLabel": [1, "aria-label"],
-        "class": [1],
-        "buttonId": [1, "button-id"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["jump-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "jump-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, JumpButton$1);
-            }
-            break;
-    } });
-}
+import { J as JumpButton$1, d as defineCustomElement$1 } from './jump-button2.js';
 
 const JumpButton = JumpButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/jump-button.js.map

@@ -1 +1 @@
-{"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4oIAA4oI,CAAC;AACnqI,yBAAe,aAAa;;MCMfA,YAAU;;;;;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,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,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,IACtR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,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,IACnU,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpButton"],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.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  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;\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"],"version":3}
+{"file":"jump-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/jump-button2.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 JumpButtonStyle0 = jumpButtonCss;
+
+const JumpButton = /*@__PURE__*/ proxyCustomElement(class JumpButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.disabled = false;
+        this.variant = 'primary';
+        this.outline = false;
+        this.size = 'medium';
+        this.full = false;
+        this.pill = false;
+        this.text = false;
+        this.onlyIcon = false;
+        this.href = undefined;
+        this.target = undefined;
+        this.type = 'button';
+        this.name = undefined;
+        this.value = undefined;
+        this.ariaLabel = undefined;
+        this.class = undefined;
+        this.buttonId = undefined;
+    }
+    componentWillLoad() {
+        this.target = this.href ? this.target : '_self';
+    }
+    render() {
+        return (h(Host, { key: 'b7db771baa0578e8397424b28d1c3aa3b99f5900' }, this.href ? (h("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 }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))) : (h("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 }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" })))));
+    }
+    static get style() { return JumpButtonStyle0; }
+}, [1, "jump-button", {
+        "disabled": [4],
+        "variant": [1],
+        "outline": [4],
+        "size": [1],
+        "full": [4],
+        "pill": [4],
+        "text": [4],
+        "onlyIcon": [4, "only-icon"],
+        "href": [1],
+        "target": [1],
+        "type": [1],
+        "name": [1],
+        "value": [1],
+        "ariaLabel": [1, "aria-label"],
+        "class": [1],
+        "buttonId": [1, "button-id"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpButton);
+            }
+            break;
+    } });
+}
+
+export { JumpButton as J, defineCustomElement as d };
+
+//# sourceMappingURL=jump-button2.js.map

package/dist/components/jump-button2.js.map

@@ -0,0 +1 @@
+{"file":"jump-button2.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,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,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,IACtR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,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,IACnU,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.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"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JumpCardEcommerce extends Components.JumpCardEcommerce, HTMLElement {}
+export const JumpCardEcommerce: {
+    prototype: JumpCardEcommerce;
+    new (): JumpCardEcommerce;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,180 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './jump-badge2.js';
+import { d as defineCustomElement$4 } from './jump-button2.js';
+import { d as defineCustomElement$3 } from './jump-icon2.js';
+import { d as defineCustomElement$2 } from './jump-quantity2.js';
+
+const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:1}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:1}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-top-left-radius:3px;border-top-right-radius:3px;aspect-ratio:1/1}:host .Media img{height:100%;width:100%;object-fit:cover}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Product{font-size:var(--fs-400)}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary)}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}";
+const JumpCardEcommerceStyle0 = jumpCardEcommerceCss;
+
+const JumpCardEcommerce$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcommerce extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.toggleFavorite = createEvent(this, "jump-toggle-favorite", 7);
+        this.productAddToCart = createEvent(this, "jump-add-to-cart", 7);
+        this.productWaitingList = createEvent(this, "jump-add-to-waiting-list", 7);
+        this.changeQuantity = createEvent(this, "jump-change-quantity", 7);
+        this.changeVariation = createEvent(this, "jump-change-variation", 7);
+        this.onlyIconButton = false;
+        this.hasBackground = false;
+        this.badge = undefined;
+        this.favorite = false;
+        this.link = undefined;
+        this.img = undefined;
+        this.imgAlt = undefined;
+        this.videoSrc = undefined;
+        this.addedToCart = false;
+        this.notificationUrl = undefined;
+        this.notificationText = 'Aggiunto al carrello';
+        this.productName = undefined;
+        this.subtitle = undefined;
+        this.productId = undefined;
+        this.price = undefined;
+        this.salePrice = undefined;
+        this.currency = undefined;
+        this.outOfStock = false;
+        this.outOfStockText = undefined;
+        this.addtoCartText = undefined;
+        this.waitingListText = undefined;
+        this.addToWaitingList = false;
+        this.quantity = false;
+        this.changedQuantity = false;
+        this.changedVariation = false;
+    }
+    /* ---------------------- @LIFECYCLE ------------------------- */
+    componentWillLoad() {
+        // this._selectVariations = this.selectVariations?.split(',');
+    }
+    onToggleFavorite() {
+        this.favorite = !this.favorite;
+        this.toggleFavorite.emit({
+            productId: this.productId,
+            favorite: this.favorite
+        });
+    }
+    addProductToCart() {
+        this.addedToCart = true;
+        const payload = {
+            productId: this.productId,
+            addedToCart: this.addedToCart,
+            quantity: 2 // da prendere dal quantity
+            // mancano le variazioni
+        };
+        this.productAddToCart.emit(payload);
+        console.log("productAddToCart payload:", payload);
+    }
+    waitingList() {
+        this.addToWaitingList = true;
+        this.productWaitingList.emit({
+            productId: this.productId,
+            addToWaitingList: this.addToWaitingList
+        });
+    }
+    changeQuantityProduct(event) {
+        // const quantityInput = this.JumpCardEcommerce.querySelector('jump-quantity');
+        // const quantityValue = quantityInput.value; // Access the `value` property
+        const quantityElement = event.target;
+        console.log('Valore selezionato:', quantityElement);
+        // const quantityValue = quantityElement.value;
+        this.changedQuantity = true;
+        const payload = {
+            productId: this.productId,
+            changedQuantity: this.changedQuantity,
+            quantity: 2 // da sostituire con quaintity value
+        };
+        this.changeQuantity.emit(payload);
+        console.log("changeQuantity payload:", payload);
+    }
+    changeVariationBody(event) {
+        const selectElement = event.target;
+        const selectedValue = selectElement.value;
+        this.changedVariation = true;
+        const payload = {
+            productId: this.productId,
+            changedVariation: this.changedVariation,
+            variation: selectedValue // da sostituire
+        };
+        this.changeVariation.emit(payload);
+        console.log("changeVariation payload:", payload);
+    }
+    render() {
+        const backgroundClass = this.hasBackground ? 'hasBackground' : '';
+        const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';
+        const justifyClass = this.outOfStock ? 'justify-between' : '';
+        return (h(Host, { key: 'cf789b80987e6382306da2ad5ace446580a61990', ref: (el) => { this.JumpCardEcommerce = el; } }, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", label: this.badge }) : '', h("jump-button", { key: 'd8a4cf5efe00c8524760cc72cbf442746e6c2597', onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'neutral' : 'primary', size: "small", text: true, onlyIcon: true }, h("jump-icon", { key: '16b89f2a5626b9e7fb4691a0de7d629c5ce8dc1c', slot: "prefix", name: "heart", category: this.favorite ? 'light' : 'solid', size: "medium" })), h("div", { key: 'dc3147d29ade372ee937f9cf2a65bd68069d7e30', class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { key: '92d62f4458c29704bda0170e15f00b72c0a79bd0', href: this.link }, this.img && !this.videoSrc ? h("img", { src: this.img, alt: this.imgAlt }) : '', this.videoSrc && !this.img ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : ''), h("div", { key: '0d9ac0e6d99a33313602eafeeba8f2bde64e02d0', class: `NotificationCart ${this.addedToCart == true ? 'is-active' : ''}` }, h("jump-button", { key: '4117a6d5811a18cab91efc6205a4b1674c417bd9', href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { key: '871ca055dbae216cac54bc269360b16836903cc1', slot: "prefix", name: "check" }), h("span", { key: '039ffeced52e62d4ffb381dfe18d349eed42973a' }, " ", this.notificationText, " "))), this.onlyIconButton ?
+            h("div", { class: "OnlyIconButton" }, h("jump-button", { variant: "secondary", size: "large", pill: true, onlyIcon: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: 'cart-shopping', category: "regular" })))
+            : ''), h("div", { key: 'ec82214460c67faba8af6098369d4235bec773e5', class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { key: '953cf7cfd621a0209c2fd10af584cc3cac98760e', class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", { key: '09701cab14c47d008f9fd381679c75fff137e3fa' }, h("div", { key: 'fd0bbbff94d79d1a6e0c6ba396da2e74cd4c080c', class: "Info" }, h("div", { key: '9c16dc172061744b418e263b8f2d361ec1761836', class: "Product" }, this.productName), h("div", { key: '5e2c9a1441a2f0dea4e7b6983204ec7a7071f52c', class: "Subtitle" }, this.subtitle)), h("div", { key: '4c0e6462f9600552c6bf2f958c0ece70804f3ab3', class: "Price" }, h("div", { key: 'f02d651ed87dda490d9dd5d45ba3f587b9ebe4e5', class: "Price__Discount" }, "-5%"), h("div", { key: 'cae9ab50ca4739f7e91a759e4d175c2341a98872', class: `Price__Regular ${this.salePrice ? 'sale' : ''}` }, this.currency, this.price), h("div", { key: 'e628599318e8d4a8c249476712f95e8e19951d83', class: "Price__Sale" }, this.currency, this.salePrice))), h("div", { key: 'c324067e3c63718e56a3315cc7e14b1255b97103' }, h("select", { key: '43b91f6b4c88c865a3df41abd583b5aa1f538c84', name: "select", id: "selectID", onChange: (event) => this.changeVariationBody(event) }, h("option", { key: 'a9ae9bec327dc262608cd2dfd7efb5d877dc8a5c', value: 'm' }, "medium"), h("option", { key: '88c68917a0c97b8a208d7906b4603e1ccefec1a4', value: 'l' }, "large"), h("option", { key: '9d84d95a72aa2f7ab5299ea8a478c5c9cff85402', value: 'xl' }, "extra large")), this.quantity ? h("jump-quantity", { onClick: (event) => this.changeQuantityProduct(event) }) : '')), h("div", { key: 'a647b17041f2bc51d91f758e858ae7302930159e', class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}` }, this.outOfStock ? h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
+            h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.waitingListText ? this.waitingListText : 'Notifica disponibilità') : '', !this.outOfStock && !this.onlyIconButton ?
+            h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello') : ''))));
+    }
+    static get style() { return JumpCardEcommerceStyle0; }
+}, [1, "jump-card-ecommerce", {
+        "onlyIconButton": [4, "only-icon-button"],
+        "hasBackground": [4, "has-background"],
+        "badge": [1],
+        "favorite": [1540],
+        "link": [1],
+        "img": [1],
+        "imgAlt": [1, "img-alt"],
+        "videoSrc": [1, "video-src"],
+        "addedToCart": [4, "added-to-cart"],
+        "notificationUrl": [1, "notification-url"],
+        "notificationText": [1, "notification-text"],
+        "productName": [1, "product-name"],
+        "subtitle": [1],
+        "productId": [1, "product-id"],
+        "price": [2],
+        "salePrice": [2, "sale-price"],
+        "currency": [1],
+        "outOfStock": [1540, "out-of-stock"],
+        "outOfStockText": [1, "out-of-stock-text"],
+        "addtoCartText": [1, "addto-cart-text"],
+        "waitingListText": [1, "waiting-list-text"],
+        "addToWaitingList": [4, "add-to-waiting-list"],
+        "quantity": [1540],
+        "changedQuantity": [4, "changed-quantity"],
+        "changedVariation": [4, "changed-variation"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-card-ecommerce", "jump-badge", "jump-button", "jump-icon", "jump-quantity"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-card-ecommerce":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpCardEcommerce$1);
+            }
+            break;
+        case "jump-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "jump-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "jump-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "jump-quantity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const JumpCardEcommerce = JumpCardEcommerce$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JumpCardEcommerce, defineCustomElement };
+
+//# sourceMappingURL=jump-card-ecommerce.js.map

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

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

package/dist/components/jump-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const jumpCardCss = "jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:#fff;--jump-card-color-dark:#fff;--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative;object-fit:cover}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
+const jumpCardCss = "jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:var(--neutral-white);--jump-card-color-dark:var(--neutral-white);--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative;object-fit:cover}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
 const JumpCardStyle0 = jumpCardCss;
 
 const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLElement {
@@ -20,8 +20,8 @@ const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLEleme
         this.videoSrc = '';
     }
     render() {
-        return (h(Host, { key: '990d2452fd2b295b5b5c78a5cbd311c938318ee7', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
-            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'cb2ca9a506ac28a88fb3e4fb7fe6626f9af6daf5', class: "Content" }, h("slot", { key: '8e893537441beedf925094a99a886f9d5c1a1377', name: "body" }), h("slot", { key: '9436fd7c5030bf0405bb88ab43ca21a4bb7e5e35', name: "footer" }))));
+        return (h(Host, { key: 'a6d672e0dc05d8d596bf3eb4472339f2b6ad0e33', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'cffc3af0b3c23d9738427113f03eb7f17eec99da', class: "Content" }, h("slot", { key: '69b0806f909ecea66e1b83d51ddd6d02003401ea', name: "body" }), h("slot", { key: '9830621fc1314e5f99f3e3f4b1626cb7feb29cb2', name: "footer" }))));
     }
     static get style() { return JumpCardStyle0; }
 }, [4, "jump-card", {

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

@@ -1 +1 @@
-{"file":"jump-card.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uvEAAuvE,CAAC;AAC5wE,uBAAe,WAAW;;MCMb,OAAO;;;;0BAIY,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE7B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,GAAG,EAAE,EACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;YAC5B,aAAO,QAAQ,UACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,GAAG,EAAE,EACf,4DAAK,KAAK,EAAC,SAAS,IAClB,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-card/jump-card.scss?tag=jump-card","src/components/jump-card/jump-card.tsx"],"sourcesContent":["jump-card {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  // --jump-card-max-width: 320px;\n  --jump-card-max-width-horizontal: 100%;\n  --jump-card-color: var(--neutral-grey-primary);\n  --jump-card-background: #fff;\n  --jump-card-color-dark: #fff;\n  --jump-card-border-color: var(--neutral-grey-background);\n  --jump-card-border-radius: 6px;\n  --jump-card-border-top-radius: 1rem;\n  --jump-card-top-border-body-radius: 1.5rem 1rem;\n  --jump-card-padding: 1rem 1.25rem;\n\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  // max-width: var(--jump-card-max-width);\n  overflow: hidden;\n\n  img,\n  video {\n    aspect-ratio: 4/3;\n    overflow: hidden;\n    position: relative;\n    object-fit: cover;\n  }\n\n  .Content {\n    padding: 1.5rem 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    flex: 1;\n    background-color: var(--jump-card-background);\n  }\n\n  &[dark] {\n    background-color: var(--neutral-grey-primary);\n    color: var(--jump-card-color-dark);\n\n    .Content {\n      background-color: var(--neutral-grey-primary);\n      color: var(--jump-card-color-dark);\n    }\n  }\n\n  &[border] {\n    border: 1px solid var(--jump-card-border-color);\n  }\n\n  &[border-radius] {\n    border-radius: var(--jump-card-border-radius);\n  }\n\n  &[top-border-content-radius] {\n    border-radius: var(--jump-card-border-top-radius);\n\n    .Content {\n      border-top-left-radius: var(--jump-card-border-top-radius);\n      border-top-right-radius: var(--jump-card-border-top-radius);\n      margin-top: -1rem;\n      z-index: 2;\n    }\n  }\n\n  &[boxed] {\n    border-radius: var(--jump-card-border-radius);\n\n    img,\n    video {\n      border-radius: var(--jump-card-border-radius);\n      background-color: var(--jump-card-background);\n      margin: 0.5rem 0.5rem 0;\n    }\n  }\n\n  &[horizontal] {\n    flex-direction: row;\n    gap: 0.5rem;\n    align-items: center;\n    max-width: var(--jump-card-max-width-horizontal);\n  }\n\n  &[rounded-media] {\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    background-color: transparent;\n\n    img,\n    video {\n      background-color: transparent;\n      border-radius: 50%;\n      aspect-ratio: 1;\n      width: 100%;\n      flex: 0 1 40%;\n    }\n\n    .Content {\n      background-color: transparent;\n      align-items: center;\n    }\n  }\n\n  &[rounded-media][horizontal] {\n    text-align: left;\n\n    .Content {\n      align-items: flex-start;\n    }\n  }\n\n  &[shadow] {\n    box-shadow: 0px 2px 25px 0px hsla(0, 0%, 0%, 0.1);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-card',\n  styleUrl: 'jump-card.scss',\n  shadow: false,\n})\nexport class AppCard {\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop() horizontal: boolean = false;\n\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop() dark: boolean = false;\n\n  /**\n * Indicates if card has shadow\n */\n  @Prop() shadow: boolean;\n\n  /**\n   * Indicates if card has borders\n   */\n  @Prop() border: boolean;\n\n  /**\n   * Indicates if borders of the entire card are rounded\n   */\n  @Prop() borderRadius: boolean = false;\n\n  /**\n   * Indicates if border top of the body is rounded; Not compatible with boxed\n   */\n  @Prop() topBorderContentRadius: boolean = false;\n\n  /**\n   * Indicates if media has padding; Not compatible with roundedMedia\n   */\n  @Prop() boxed: boolean = false;\n\n  /**\n   * Indicates if image is rounded and there isnt a bg\n   */\n  @Prop() roundedMedia: boolean = false;\n\n  /**\n   * Indicates the imgSrc of the card\n   */\n  @Prop() imgSrc: string = '';\n\n  /**\n   * Indicates the img's alt of the card\n   */\n  @Prop() imgAlt: string = '';\n\n  /**\n   * Indicates the videoSrc of the card\n   */\n  @Prop() videoSrc: string = '';\n\n  render() {\n    return (\n      <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n        {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n        {this.videoSrc && !this.imgSrc ? \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        <div class=\"Content\">\n          <slot name=\"body\"></slot>\n          <slot name=\"footer\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"jump-card.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uxEAAuxE,CAAC;AAC5yE,uBAAe,WAAW;;MCMb,OAAO;;;;0BAIY,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE7B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,GAAG,EAAE,EACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;YAC5B,aAAO,QAAQ,UACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,GAAG,EAAE,EACf,4DAAK,KAAK,EAAC,SAAS,IAClB,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-card/jump-card.scss?tag=jump-card","src/components/jump-card/jump-card.tsx"],"sourcesContent":["jump-card {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  // --jump-card-max-width: 320px;\n  --jump-card-max-width-horizontal: 100%;\n  --jump-card-color: var(--neutral-grey-primary);\n  --jump-card-background: var(--neutral-white);\n  --jump-card-color-dark: var(--neutral-white);\n  --jump-card-border-color: var(--neutral-grey-background);\n  --jump-card-border-radius: 6px;\n  --jump-card-border-top-radius: 1rem;\n  --jump-card-top-border-body-radius: 1.5rem 1rem;\n  --jump-card-padding: 1rem 1.25rem;\n\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  // max-width: var(--jump-card-max-width);\n  overflow: hidden;\n\n  img,\n  video {\n    aspect-ratio: 4/3;\n    overflow: hidden;\n    position: relative;\n    object-fit: cover;\n  }\n\n  .Content {\n    padding: 1.5rem 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    flex: 1;\n    background-color: var(--jump-card-background);\n  }\n\n  &[dark] {\n    background-color: var(--neutral-grey-primary);\n    color: var(--jump-card-color-dark);\n\n    .Content {\n      background-color: var(--neutral-grey-primary);\n      color: var(--jump-card-color-dark);\n    }\n  }\n\n  &[border] {\n    border: 1px solid var(--jump-card-border-color);\n  }\n\n  &[border-radius] {\n    border-radius: var(--jump-card-border-radius);\n  }\n\n  &[top-border-content-radius] {\n    border-radius: var(--jump-card-border-top-radius);\n\n    .Content {\n      border-top-left-radius: var(--jump-card-border-top-radius);\n      border-top-right-radius: var(--jump-card-border-top-radius);\n      margin-top: -1rem;\n      z-index: 2;\n    }\n  }\n\n  &[boxed] {\n    border-radius: var(--jump-card-border-radius);\n\n    img,\n    video {\n      border-radius: var(--jump-card-border-radius);\n      background-color: var(--jump-card-background);\n      margin: 0.5rem 0.5rem 0;\n    }\n  }\n\n  &[horizontal] {\n    flex-direction: row;\n    gap: 0.5rem;\n    align-items: center;\n    max-width: var(--jump-card-max-width-horizontal);\n  }\n\n  &[rounded-media] {\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    background-color: transparent;\n\n    img,\n    video {\n      background-color: transparent;\n      border-radius: 50%;\n      aspect-ratio: 1;\n      width: 100%;\n      flex: 0 1 40%;\n    }\n\n    .Content {\n      background-color: transparent;\n      align-items: center;\n    }\n  }\n\n  &[rounded-media][horizontal] {\n    text-align: left;\n\n    .Content {\n      align-items: flex-start;\n    }\n  }\n\n  &[shadow] {\n    box-shadow: 0px 2px 25px 0px hsla(0, 0%, 0%, 0.1);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-card',\n  styleUrl: 'jump-card.scss',\n  shadow: false,\n})\nexport class AppCard {\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop() horizontal: boolean = false;\n\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop() dark: boolean = false;\n\n  /**\n * Indicates if card has shadow\n */\n  @Prop() shadow: boolean;\n\n  /**\n   * Indicates if card has borders\n   */\n  @Prop() border: boolean;\n\n  /**\n   * Indicates if borders of the entire card are rounded\n   */\n  @Prop() borderRadius: boolean = false;\n\n  /**\n   * Indicates if border top of the body is rounded; Not compatible with boxed\n   */\n  @Prop() topBorderContentRadius: boolean = false;\n\n  /**\n   * Indicates if media has padding; Not compatible with roundedMedia\n   */\n  @Prop() boxed: boolean = false;\n\n  /**\n   * Indicates if image is rounded and there isnt a bg\n   */\n  @Prop() roundedMedia: boolean = false;\n\n  /**\n   * Indicates the imgSrc of the card\n   */\n  @Prop() imgSrc: string = '';\n\n  /**\n   * Indicates the img's alt of the card\n   */\n  @Prop() imgAlt: string = '';\n\n  /**\n   * Indicates the videoSrc of the card\n   */\n  @Prop() videoSrc: string = '';\n\n  render() {\n    return (\n      <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n        {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n        {this.videoSrc && !this.imgSrc ? \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        <div class=\"Content\">\n          <slot name=\"body\"></slot>\n          <slot name=\"footer\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/jump-filter.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JumpFilter extends Components.JumpFilter, HTMLElement {}
+export const JumpFilter: {
+    prototype: JumpFilter;
+    new (): JumpFilter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;