@jumpgroup/jump-design-system 0.2.2 → 0.2.3

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class AppButton {
+export class JumpButton {
     constructor() {
         this.disabled = false;
         this.variant = 'primary';
@@ -17,10 +17,14 @@ export class AppButton {
         this.class = undefined;
         this.buttonId = undefined;
     }
+    componentWillLoad() {
+        this.target = this.href ? this.target : '_self';
+    }
     render() {
-        return (h(Host, { key: '21647cd89a0a179d5c035f5e7f533f54375311cf' }, 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-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-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" })))));
+        return (h(Host, { key: '6b61dcd618e7aee12b9f539c6a092d524566ba47' }, 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-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-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 is() { return "jump-button"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["jump-button.scss"]
@@ -66,7 +70,7 @@ export class AppButton {
                     "text": "Indicates the variant of the button"
                 },
                 "attribute": "variant",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "'primary'"
             },
             "outline": {
@@ -84,7 +88,7 @@ export class AppButton {
                     "text": "Indicates the button as outline"
                 },
                 "attribute": "outline",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
@@ -102,7 +106,7 @@ export class AppButton {
                     "text": "Indicates the size of the button"
                 },
                 "attribute": "size",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "'medium'"
             },
             "pill": {
@@ -120,7 +124,7 @@ export class AppButton {
                     "text": "Indicates the button as pill"
                 },
                 "attribute": "pill",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "text": {
@@ -138,7 +142,7 @@ export class AppButton {
                     "text": "Indicates the button as text"
                 },
                 "attribute": "text",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "onlyIcon": {
@@ -156,7 +160,7 @@ export class AppButton {
                     "text": "Indicates the button as only icon"
                 },
                 "attribute": "only-icon",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "href": {
@@ -174,8 +178,7 @@ export class AppButton {
                     "text": "Indicates if button becames a anchor"
                 },
                 "attribute": "href",
-                "reflect": true,
-                "defaultValue": "undefined"
+                "reflect": false
             },
             "target": {
                 "type": "string",
@@ -192,7 +195,7 @@ export class AppButton {
                     "text": "Indicates the type of anchor's target"
                 },
                 "attribute": "target",
-                "reflect": true
+                "reflect": false
             },
             "type": {
                 "type": "string",
@@ -209,7 +212,7 @@ export class AppButton {
                     "text": "Indicates type button"
                 },
                 "attribute": "type",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "'button'"
             },
             "name": {
@@ -227,7 +230,7 @@ export class AppButton {
                     "text": "Indicates the name that the sender button will send"
                 },
                 "attribute": "name",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "undefined"
             },
             "value": {
@@ -245,7 +248,7 @@ export class AppButton {
                     "text": "Indicates the value that the sender button will send"
                 },
                 "attribute": "value",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "undefined"
             },
             "ariaLabel": {
@@ -263,7 +266,7 @@ export class AppButton {
                     "text": "Indicates the value of text alternative to an element that has no visible text on the screen"
                 },
                 "attribute": "aria-label",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "undefined"
             },
             "class": {
@@ -281,7 +284,7 @@ export class AppButton {
                     "text": "Indicates classes of the component"
                 },
                 "attribute": "class",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "undefined"
             },
             "buttonId": {
@@ -299,7 +302,7 @@ export class AppButton {
                     "text": "Indicates classes of the component"
                 },
                 "attribute": "button-id",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "undefined"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"jump-button.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;wBAIQ,KAAK;uBAK4C,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;oBAKV,SAAS;;oBAUU,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,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,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;YAChQ,YAAM,IAAI,EAAC,QAAQ,GAAQ;YAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa;YAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACL,CAAC,CAAC,CAAC,CACF,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,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;YAC7S,YAAM,IAAI,EAAC,QAAQ,GAAQ;YAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa;YAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-button',\n  styleUrl: 'jump-button.scss',\n  shadow: false,\n})\nexport class AppButton {\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({reflect: true}) variant: 'primary'|'secondary'|'tertiary'|'neutral' = 'primary';\n\n  /**\n   * Indicates the button as outline\n   */\n  @Prop({reflect: true}) outline: boolean = false;\n\n  /**\n   * Indicates the size of the button\n   */\n  @Prop({reflect: true}) size: string = 'medium';\n\n  /**\n   * Indicates the button as pill\n   */\n  @Prop({reflect: true}) pill: boolean = false;\n\n  /**\n    * Indicates the button as text\n   */\n  @Prop({reflect: true}) text: boolean = false;\n\n  /**\n   * Indicates the button as only icon\n   **/\n  @Prop({reflect: true}) onlyIcon: boolean = false;\n\n  /**\n   * Indicates if button becames a anchor\n   **/\n  @Prop({reflect: true}) href: string = undefined;\n\n  /**\n   * Indicates the type of anchor's target \n   **/\n  @Prop({reflect: true}) target: '_blank' | '_parent' | '_self' | '_top'\n\n  /**\n   * Indicates type button\n   **/\n  @Prop({reflect: true}) type: 'button'|'submit'|'reset' = 'button';\n\n  /**\n   * Indicates the name that the sender button will send\n   **/\n  @Prop({reflect: true}) name: string = undefined;\n\n  /**\n   * Indicates the value that the sender button will send\n   **/\n  @Prop({reflect: true}) 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({reflect: true}) ariaLabel: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop({reflect: true}) class: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop({reflect: true}) buttonId: string = undefined;\n\n  render() {\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-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-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","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;wBAIO,KAAK;uBAK6B,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,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,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAClD,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,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,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;YAChQ,YAAM,IAAI,EAAC,QAAQ,GAAQ;YAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa;YAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACL,CAAC,CAAC,CAAC,CACF,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,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;YAC7S,YAAM,IAAI,EAAC,QAAQ,GAAQ;YAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa;YAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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'|'tertiary'|'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 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-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-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"]}

package/dist/collection/components/jump-button/test/jump-button.spec.js

@@ -1,9 +1,9 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { AppButton } from "../jump-button";
+import { JumpButton } from "../jump-button";
 describe('jump-button', () => {
     it('renders', async () => {
         const page = await newSpecPage({
-            components: [AppButton],
+            components: [JumpButton],
             html: `<jump-button></jump-button>`,
         });
         expect(page.root).toEqualHtml(`

package/dist/collection/components/jump-button/test/jump-button.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"jump-button.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-button/test/jump-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { AppButton } from '../jump-button';\n\ndescribe('jump-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [AppButton],\n      html: `<jump-button></jump-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-button>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-button>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"jump-button.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-button/test/jump-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { JumpButton } from '../jump-button';\n\ndescribe('jump-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [JumpButton],\n      html: `<jump-button></jump-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-button>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-button>\n    `);\n  });\n});\n"]}

package/dist/collection/components/jump-card/jump-card-border-radius.stories.js

@@ -83,19 +83,7 @@ export default {
 };
 const Template = (args) => {
     var _a;
-    return `<jump-card class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" 
-  ${args.videoSrc ? `video-src="${args.videoSrc}"` : ''} 
-  ${args.imgSrc ? `img-src="${args.imgSrc}"` : ''} 
-  ${args.imgAlt ? `img-alt="${args.imgAlt}"` : ''} 
-  ${args.border == true ? 'border' : ''} 
-  ${args.horizontal == true ? 'horizontal' : ''} 
-  ${args.dark == true ? 'dark' : ''} 
-  ${args.borderRadius == true ? 'border-radius' : ''} 
-  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} 
-  ${args.boxed == true ? 'boxed' : ''} 
-  ${args.roundedMedia == true ? 'rounded-media' : ''} 
-  ${args.shadow == true ? 'shadow' : ''} 
-  > 
+    return `<jump-card class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" ${args.videoSrc ? `video-src="${args.videoSrc}"` : ''} ${args.imgSrc ? `img-src="${args.imgSrc}"` : ''} ${args.imgAlt ? `img-alt="${args.imgAlt}"` : ''} ${args.border == true ? 'border' : ''} ${args.horizontal == true ? 'horizontal' : ''} ${args.dark == true ? 'dark' : ''} ${args.borderRadius == true ? 'border-radius' : ''} ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} ${args.boxed == true ? 'boxed' : ''} ${args.roundedMedia == true ? 'rounded-media' : ''} ${args.shadow == true ? 'shadow' : ''}> 
     <div class="ContentWrapper" slot="body">
       <h3 style="margin-top: 0">Titolo della card</h3>
       <p>Testo della card</p>
@@ -106,7 +94,7 @@ const Template = (args) => {
 };
 export const CardWithBorderRadius = Template.bind({});
 CardWithBorderRadius.args = {
-    imgSrc: 'https://picsum.photos/300/200',
+    imgSrc: 'https://media.jumpgroup.it/taurus1908/uploads/2024/03/accessori-jpeg.webp',
     imgAlt: 'Immagine',
     borderRadius: true,
     shadow: true,

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

@@ -1 +1 @@
-{"version":3,"file":"jump-card-border-radius.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card-border-radius.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card/BorderRadiusCard',\n  tags: ['autodocs'],\n  argTypes: {\n    horizontal: {\n      name: 'Direzione della card',\n      description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',\n      control: 'boolean',\n      defaultValue: false\n    },\n    dark: {\n      name: 'Card di colore scuro',\n      description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',\n      control: 'boolean',\n      defaultValue: false\n    },\n    border:{\n      name: 'Card con bordo',\n      control: 'boolean',\n      defaultValue: false\n    },\n    shadow:{\n      name: 'Card con ombra',\n      control: 'boolean',\n      defaultValue: false\n    },\n    borderRadius: {\n      name: 'Bordi arrotondati',\n      description: 'Imposta i bordi della card arrotondati',\n      control: 'boolean',\n      // if:{\n      //   arg: 'topBorderContentRadius',\n      //   eq: false\n      // }\n    },\n    topBorderContentRadius: {\n      name: 'Border top Content',\n      description: 'Border top del Content (esclusa la sezione media) arrotondato',\n      control: 'boolean',\n      // if:{\n      //   arg: 'borderRadius',\n      //   eq: false\n      // }\n    },\n    boxed: {\n      name: 'Boxed',\n      description: 'Imposta un padding intorno al media',\n      control: 'boolean',\n    },\n    roundedMedia: {\n      name: 'Immagine o Video arrotondati',\n      description: 'Imposta l\\'immagine o il video arrotondati e senza sfondo',\n      control: 'boolean',\n    },\n    imgSrc: {\n      name: 'Url del\\'immagine',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'Alt dell\\'immagine',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'Url del video',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: false\n      }\n    },\n  }\n};\n\nconst Template = (args) => {\n  return `<jump-card class=\"${args.class ?? ''}\" \n  ${args.videoSrc ? `video-src=\"${args.videoSrc}\"` : ''} \n  ${args.imgSrc ? `img-src=\"${args.imgSrc}\"` : ''} \n  ${args.imgAlt ? `img-alt=\"${args.imgAlt}\"` : ''} \n  ${args.border == true ? 'border' : ''} \n  ${args.horizontal == true ? 'horizontal' : ''} \n  ${args.dark == true ? 'dark' : ''} \n  ${args.borderRadius == true ? 'border-radius' : ''} \n  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} \n  ${args.boxed == true ? 'boxed' : ''} \n  ${args.roundedMedia == true ? 'rounded-media' : ''} \n  ${args.shadow == true ? 'shadow' : ''} \n  > \n    <div class=\"ContentWrapper\" slot=\"body\">\n      <h3 style=\"margin-top: 0\">Titolo della card</h3>\n      <p>Testo della card</p>\n    </div>\n    <jump-button slot=\"footer\" id=\"#card\" class=\" \"variant=\"secondary\" size=\"medium\" href=\"#\" target=\"_self\" ariaLabel=\"sono un bottone\" text>\n    Scopri di più<jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon></jump-button>\n  </jump-card>`\n}\n\nexport const CardWithBorderRadius = Template.bind({});\nCardWithBorderRadius.args = {\n  imgSrc: 'https://picsum.photos/300/200',\n  imgAlt: 'Immagine',\n  borderRadius: true,\n  shadow: true,\n};"]}
+{"version":3,"file":"jump-card-border-radius.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card-border-radius.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card/BorderRadiusCard',\n  tags: ['autodocs'],\n  argTypes: {\n    horizontal: {\n      name: 'Direzione della card',\n      description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',\n      control: 'boolean',\n      defaultValue: false\n    },\n    dark: {\n      name: 'Card di colore scuro',\n      description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',\n      control: 'boolean',\n      defaultValue: false\n    },\n    border:{\n      name: 'Card con bordo',\n      control: 'boolean',\n      defaultValue: false\n    },\n    shadow:{\n      name: 'Card con ombra',\n      control: 'boolean',\n      defaultValue: false\n    },\n    borderRadius: {\n      name: 'Bordi arrotondati',\n      description: 'Imposta i bordi della card arrotondati',\n      control: 'boolean',\n      // if:{\n      //   arg: 'topBorderContentRadius',\n      //   eq: false\n      // }\n    },\n    topBorderContentRadius: {\n      name: 'Border top Content',\n      description: 'Border top del Content (esclusa la sezione media) arrotondato',\n      control: 'boolean',\n      // if:{\n      //   arg: 'borderRadius',\n      //   eq: false\n      // }\n    },\n    boxed: {\n      name: 'Boxed',\n      description: 'Imposta un padding intorno al media',\n      control: 'boolean',\n    },\n    roundedMedia: {\n      name: 'Immagine o Video arrotondati',\n      description: 'Imposta l\\'immagine o il video arrotondati e senza sfondo',\n      control: 'boolean',\n    },\n    imgSrc: {\n      name: 'Url del\\'immagine',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'Alt dell\\'immagine',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'Url del video',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: false\n      }\n    },\n  }\n};\n\nconst Template = (args) => {\n  return `<jump-card class=\"${args.class ?? ''}\" ${args.videoSrc ? `video-src=\"${args.videoSrc}\"` : ''} ${args.imgSrc ? `img-src=\"${args.imgSrc}\"` : ''} ${args.imgAlt ? `img-alt=\"${args.imgAlt}\"` : ''} ${args.border == true ? 'border' : ''} ${args.horizontal == true ? 'horizontal' : ''} ${args.dark == true ? 'dark' : ''} ${args.borderRadius == true ? 'border-radius' : ''} ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} ${args.boxed == true ? 'boxed' : ''} ${args.roundedMedia == true ? 'rounded-media' : ''} ${args.shadow == true ? 'shadow' : ''}> \n    <div class=\"ContentWrapper\" slot=\"body\">\n      <h3 style=\"margin-top: 0\">Titolo della card</h3>\n      <p>Testo della card</p>\n    </div>\n    <jump-button slot=\"footer\" id=\"#card\" class=\" \"variant=\"secondary\" size=\"medium\" href=\"#\" target=\"_self\" ariaLabel=\"sono un bottone\" text>\n    Scopri di più<jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon></jump-button>\n  </jump-card>`\n}\n\nexport const CardWithBorderRadius = Template.bind({});\nCardWithBorderRadius.args = {\n  imgSrc: 'https://media.jumpgroup.it/taurus1908/uploads/2024/03/accessori-jpeg.webp',\n  imgAlt: 'Immagine',\n  borderRadius: true,\n  shadow: true,\n};"]}

package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js

@@ -83,8 +83,7 @@ export default {
 };
 const Template = (args) => {
     var _a;
-    return `<jump-card class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" 
-  ${args.videoSrc ? `video-src="${args.videoSrc}"` : ''} 
+    return `<jump-card class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" ${args.videoSrc ? `video-src="${args.videoSrc}"` : ''} 
   ${args.imgSrc ? `img-src="${args.imgSrc}"` : ''} 
   ${args.imgAlt ? `img-alt="${args.imgAlt}"` : ''} 
   ${args.border == true ? 'border' : ''} 

package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"jump-card-top-border-content-radius.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card-top-border-content-radius.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card/TopBorderContentCard',\n  tags: ['autodocs'],\n  argTypes: {\n    horizontal: {\n      name: 'Direzione della card',\n      description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',\n      control: 'boolean',\n      defaultValue: false\n    },\n    dark: {\n      name: 'Card di colore scuro',\n      description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',\n      control: 'boolean',\n      defaultValue: false\n    },\n    border:{\n      name: 'Card con bordo',\n      control: 'boolean',\n      defaultValue: false\n    },\n    shadow:{\n      name: 'Card con ombra',\n      control: 'boolean',\n      defaultValue: false\n    },\n    borderRadius: {\n      name: 'Bordi arrotondati',\n      description: 'Imposta i bordi della card arrotondati',\n      control: 'boolean',\n      // if:{\n      //   arg: 'topBorderContentRadius',\n      //   eq: false\n      // }\n    },\n    topBorderContentRadius: {\n      name: 'Border top Content',\n      description: 'Border top del Content (esclusa la sezione media) arrotondato',\n      control: 'boolean',\n      // if:{\n      //   arg: 'borderRadius',\n      //   eq: false\n      // }\n    },\n    boxed: {\n      name: 'Boxed',\n      description: 'Imposta un padding intorno al media',\n      control: 'boolean',\n    },\n    roundedMedia: {\n      name: 'Immagine o Video arrotondati',\n      description: 'Imposta l\\'immagine o il video arrotondati e senza sfondo',\n      control: 'boolean',\n    },\n    imgSrc: {\n      name: 'Url del\\'immagine',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'Alt dell\\'immagine',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'Url del video',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: false\n      }\n    },\n  }\n};\n\nconst Template = (args) => {\n  return `<jump-card class=\"${args.class ?? ''}\" \n  ${args.videoSrc ? `video-src=\"${args.videoSrc}\"` : ''} \n  ${args.imgSrc ? `img-src=\"${args.imgSrc}\"` : ''} \n  ${args.imgAlt ? `img-alt=\"${args.imgAlt}\"` : ''} \n  ${args.border == true ? 'border' : ''} \n  ${args.horizontal == true ? 'horizontal' : ''} \n  ${args.dark == true ? 'dark' : ''} \n  ${args.borderRadius == true ? 'border-radius' : ''} \n  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} \n  ${args.boxed == true ? 'boxed' : ''} \n  ${args.roundedMedia == true ? 'rounded-media' : ''} \n  ${args.shadow == true ? 'shadow' : ''} \n  > \n    <div class=\"ContentWrapper\" slot=\"body\">\n      <h3 style=\"margin-top: 0\">Titolo della card</h3>\n      <p>Testo della card</p>\n    </div>\n    <jump-button slot=\"footer\" id=\"#card\" class=\" \"variant=\"secondary\" size=\"medium\" href=\"#\" target=\"_self\" ariaLabel=\"sono un bottone\" text>\n    Scopri di più<jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon></jump-button>\n  </jump-card>`\n}\n\nexport const CardWithTopBorderRadius = Template.bind({});\nCardWithTopBorderRadius.args = {\n  imgSrc: 'https://picsum.photos/300/200',\n  imgAlt: 'Immagine',\n  topBorderContentRadius: true,\n  border: true\n};\n"]}
+{"version":3,"file":"jump-card-top-border-content-radius.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card-top-border-content-radius.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card/TopBorderContentCard',\n  tags: ['autodocs'],\n  argTypes: {\n    horizontal: {\n      name: 'Direzione della card',\n      description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',\n      control: 'boolean',\n      defaultValue: false\n    },\n    dark: {\n      name: 'Card di colore scuro',\n      description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',\n      control: 'boolean',\n      defaultValue: false\n    },\n    border:{\n      name: 'Card con bordo',\n      control: 'boolean',\n      defaultValue: false\n    },\n    shadow:{\n      name: 'Card con ombra',\n      control: 'boolean',\n      defaultValue: false\n    },\n    borderRadius: {\n      name: 'Bordi arrotondati',\n      description: 'Imposta i bordi della card arrotondati',\n      control: 'boolean',\n      // if:{\n      //   arg: 'topBorderContentRadius',\n      //   eq: false\n      // }\n    },\n    topBorderContentRadius: {\n      name: 'Border top Content',\n      description: 'Border top del Content (esclusa la sezione media) arrotondato',\n      control: 'boolean',\n      // if:{\n      //   arg: 'borderRadius',\n      //   eq: false\n      // }\n    },\n    boxed: {\n      name: 'Boxed',\n      description: 'Imposta un padding intorno al media',\n      control: 'boolean',\n    },\n    roundedMedia: {\n      name: 'Immagine o Video arrotondati',\n      description: 'Imposta l\\'immagine o il video arrotondati e senza sfondo',\n      control: 'boolean',\n    },\n    imgSrc: {\n      name: 'Url del\\'immagine',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'Alt dell\\'immagine',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'Url del video',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: false\n      }\n    },\n  }\n};\n\nconst Template = (args) => {\n  return `<jump-card class=\"${args.class ?? ''}\" ${args.videoSrc ? `video-src=\"${args.videoSrc}\"` : ''} \n  ${args.imgSrc ? `img-src=\"${args.imgSrc}\"` : ''} \n  ${args.imgAlt ? `img-alt=\"${args.imgAlt}\"` : ''} \n  ${args.border == true ? 'border' : ''} \n  ${args.horizontal == true ? 'horizontal' : ''} \n  ${args.dark == true ? 'dark' : ''} \n  ${args.borderRadius == true ? 'border-radius' : ''} \n  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} \n  ${args.boxed == true ? 'boxed' : ''} \n  ${args.roundedMedia == true ? 'rounded-media' : ''} \n  ${args.shadow == true ? 'shadow' : ''} \n  > \n    <div class=\"ContentWrapper\" slot=\"body\">\n      <h3 style=\"margin-top: 0\">Titolo della card</h3>\n      <p>Testo della card</p>\n    </div>\n    <jump-button slot=\"footer\" id=\"#card\" class=\" \"variant=\"secondary\" size=\"medium\" href=\"#\" target=\"_self\" ariaLabel=\"sono un bottone\" text>\n    Scopri di più<jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon></jump-button>\n  </jump-card>`\n}\n\nexport const CardWithTopBorderRadius = Template.bind({});\nCardWithTopBorderRadius.args = {\n  imgSrc: 'https://picsum.photos/300/200',\n  imgAlt: 'Immagine',\n  topBorderContentRadius: true,\n  border: true\n};\n"]}

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

@@ -1,3 +1,52 @@
+:root {
+  /*BASE COLOR RULES*/
+  --neutral-grey-background: #eeeeee;
+  --neutral-grey-disabled: #cbcbcb;
+  --neutral-grey-primary: #282828;
+  --neutral-grey-secondary: #707070;
+  --neutral-white: #ffffff;
+  --primary-hard: #e75a50;
+  --primary-soft: #ffeae9;
+  --primary-standard: #fa7268;
+  --secondary-hard: #435171;
+  --secondary-soft: #dde3ed;
+  --secondary-standard: #5e79ba;
+  --status-danger-hard: #ba250a;
+  --status-danger-soft: #fdd3d1;
+  --status-danger-standard: #d72c0d;
+  --status-interaction-hard: #22559e;
+  --status-interaction-soft: #f2f7fe;
+  --status-interaction-standard: #2c6ecb;
+  --status-success-hard: #156048;
+  --status-success-soft: #f1f8f5;
+  --status-success-standard: #1d7f60;
+  --status-warning-hard: #987100;
+  --status-warning-soft: #fef5ea;
+  --status-warning-standard: #b98900;
+  /*TYPOGRAPHY RULES*/
+  --ff-primary: "Inter";
+  --ff-secondary: "Prompt";
+  --lh-300: 1.25rem;
+  --lh-400: 1.5rem;
+  --lh-500: 1.625rem;
+  --lh-600: 2rem;
+  --lh-700: 2.75rem;
+  --lh-800: 3.5rem;
+  --lh-850: 4.375rem;
+  --lh-900: 5.5rem;
+  --fs-300: 0.875rem;
+  --fs-400: 1rem;
+  --fs-500: 1.125rem;
+  --fs-600: 1.5rem;
+  --fs-700: 2.25rem;
+  --fs-800: 3rem;
+  --fs-850: 3.75rem;
+  --fs-900: 4.5rem;
+  --fw-300: 300;
+  --fw-400: 400;
+  --fw-900: 700;
+}
+
 jump-card {
   display: flex;
   flex-direction: column;
@@ -22,6 +71,7 @@ jump-card video {
   aspect-ratio: 4/3;
   overflow: hidden;
   position: relative;
+  object-fit: cover;
 }
 jump-card .Content {
   padding: 1.5rem 1rem;
@@ -80,7 +130,6 @@ jump-card[rounded-media] video {
   background-color: transparent;
   border-radius: 50%;
   aspect-ratio: 1;
-  object-fit: cover;
   width: 100%;
   flex: 0 1 40%;
 }

package/dist/collection/utils/utils.js

@@ -1,4 +1,17 @@
 export function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
+export const generateAttributesFromArgs = (arg) => {
+    // map attributes to strings. If the attribute is a boolean and is false, don't include it, otherwise include only the attribute name. otherwise include the attribute name and its value
+    return Object.entries(arg).map(([name, value]) => {
+        if (typeof value === 'boolean') {
+            return value ? name : '';
+        }
+        else {
+            return `${name}="${value}"`;
+        }
+    }).join(' ')
+        // replace all the spaces with a single space
+        .replace(/\s+/g, ' ');
+};
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;IAChE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI;IACxC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,GAAG,EAAE,EAAE;IAChD,yLAAyL;IACzL,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;QAC/C,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAA;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,IAAI,KAAK,KAAK,GAAG,CAAA;QAC7B,CAAC;IACH,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACZ,6CAA6C;SAC5C,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;AACvB,CAAC,CAAC","sourcesContent":["export function format(first, middle, last) {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const generateAttributesFromArgs = (arg) => {\n  // map attributes to strings. If the attribute is a boolean and is false, don't include it, otherwise include only the attribute name. otherwise include the attribute name and its value\n  return Object.entries(arg).map(([name, value]) => {\n    if (typeof value === 'boolean') {\n      return value ? name : ''\n    } else {\n      return `${name}=\"${value}\"`\n    }\n  }).join(' ')\n  // replace all the spaces with a single space\n  .replace(/\\s+/g, ' ')\n};"]}

package/dist/components/jump-button.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const jumpButtonCss = "jump-button button,jump-button a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}jump-button{display:inline-flex;align-items:center;--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}jump-button button,jump-button 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:var(--lh-400, 1.3);display:flex;align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}jump-button button:hover,jump-button a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}jump-button button[data-variant=primary],jump-button 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)}jump-button button[data-variant=secondary],jump-button 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)}jump-button button[data-variant=neutral],jump-button 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)}jump-button button[data-variant=white],jump-button 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)}jump-button button[disabled],jump-button a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}jump-button button[data-pill],jump-button a[data-pill]{border-radius:100rem}jump-button button[data-size=small],jump-button a[data-size=small]{font-size:var(--fs-300, 0.875rem);line-height:var(--lh-300, 1.2);--jump-button-padding:0.5rem 1rem}jump-button button[data-size=medium],jump-button a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3)}jump-button button[data-size=large],jump-button a[data-size=large]{font-size:var(--fs-500, 1.125rem);line-height:var(--lh-500, 1.4);--jump-button-padding:1.125rem 1.5rem}jump-button button[data-outline],jump-button a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}jump-button button[data-outline]:hover,jump-button 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)}jump-button button[data-text],jump-button a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}jump-button button[data-text]:hover,jump-button a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}jump-button button[data-only-icon],jump-button a[data-only-icon]{--jump-button-padding:1.125rem}jump-button button[data-only-icon][data-size=small],jump-button a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}jump-button button[data-only-icon][data-size=medium],jump-button a[data-only-icon][data-size=medium]{--jump-button-padding:1rem}jump-button button[data-only-icon][data-size=large],jump-button a[data-only-icon][data-size=large]{--jump-button-padding:1.125rem}jump-button button.chat,jump-button 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 = ":root{--neutral-grey-background:#eeeeee;--neutral-grey-disabled:#cbcbcb;--neutral-grey-primary:#282828;--neutral-grey-secondary:#707070;--neutral-white:#ffffff;--primary-hard:#e75a50;--primary-soft:#ffeae9;--primary-standard:#fa7268;--secondary-hard:#435171;--secondary-soft:#dde3ed;--secondary-standard:#5e79ba;--status-danger-hard:#ba250a;--status-danger-soft:#fdd3d1;--status-danger-standard:#d72c0d;--status-interaction-hard:#22559e;--status-interaction-soft:#f2f7fe;--status-interaction-standard:#2c6ecb;--status-success-hard:#156048;--status-success-soft:#f1f8f5;--status-success-standard:#1d7f60;--status-warning-hard:#987100;--status-warning-soft:#fef5ea;--status-warning-standard:#b98900;--ff-primary:\"Inter\";--ff-secondary:\"Prompt\";--lh-300:1.25rem;--lh-400:1.5rem;--lh-500:1.625rem;--lh-600:2rem;--lh-700:2.75rem;--lh-800:3.5rem;--lh-850:4.375rem;--lh-900:5.5rem;--fs-300:0.875rem;--fs-400:1rem;--fs-500:1.125rem;--fs-600:1.5rem;--fs-700:2.25rem;--fs-800:3rem;--fs-850:3.75rem;--fs-900:4.5rem;--fw-300:300;--fw-400:400;--fw-900:700}:host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{display:inline-flex;align-items:center;--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,: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:var(--lh-400, 1.3);display:flex;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);line-height:var(--lh-300, 1.2);--jump-button-padding:0.5rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3)}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);line-height:var(--lh-500, 1.4);--jump-button-padding:1.125rem 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:1.125rem}: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:1rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--jump-button-padding:1.125rem}: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 AppButton = /*@__PURE__*/ proxyCustomElement(class AppButton extends HTMLElement {
+const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.disabled = false;
         this.variant = 'primary';
         this.outline = false;
@@ -23,26 +24,29 @@ const AppButton = /*@__PURE__*/ proxyCustomElement(class AppButton extends HTMLE
         this.class = undefined;
         this.buttonId = undefined;
     }
+    componentWillLoad() {
+        this.target = this.href ? this.target : '_self';
+    }
     render() {
-        return (h(Host, { key: '21647cd89a0a179d5c035f5e7f533f54375311cf' }, 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-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-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" })))));
+        return (h(Host, { key: '6b61dcd618e7aee12b9f539c6a092d524566ba47' }, 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-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-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; }
-}, [4, "jump-button", {
+}, [1, "jump-button", {
         "disabled": [4],
-        "variant": [513],
-        "outline": [516],
-        "size": [513],
-        "pill": [516],
-        "text": [516],
-        "onlyIcon": [516, "only-icon"],
-        "href": [513],
-        "target": [513],
-        "type": [513],
-        "name": [513],
-        "value": [513],
-        "ariaLabel": [513, "aria-label"],
-        "class": [513],
-        "buttonId": [513, "button-id"]
+        "variant": [1],
+        "outline": [4],
+        "size": [1],
+        "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") {
@@ -52,13 +56,13 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "jump-button":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, AppButton);
+                customElements.define(tagName, JumpButton$1);
             }
             break;
     } });
 }
 
-const JumpButton = AppButton;
+const JumpButton = JumpButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { JumpButton, defineCustomElement };

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

@@ -1 +1 @@
-{"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,s3IAAs3I,CAAC;AAC74I,yBAAe,aAAa;;MCMf,SAAS;;;;wBAIQ,KAAK;uBAK4C,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;oBAKV,SAAS;;oBAUU,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEnD,MAAM;QACJ,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,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAChQ,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,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,IAC7S,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","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\njump-button {\n  display: inline-flex;\n  align-items: center;\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  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    display: flex;\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      line-height: var(--lh-300, 1.2);\n      --jump-button-padding: 0.5rem 1rem;\n    }\n\n    &[data-size='medium'] {\n      font-size: var(--fs-400, 1rem);\n      line-height: var(--lh-400, 1.3);\n    }\n\n    &[data-size='large'] {\n      font-size: var(--fs-500, 1.125rem);\n      line-height: var(--lh-500, 1.4);\n      --jump-button-padding: 1.125rem 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: 1.125rem;\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: 1rem;\n    }\n    &[data-only-icon][data-size='large'] {\n      --jump-button-padding: 1.125rem;\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: false,\n})\nexport class AppButton {\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({reflect: true}) variant: 'primary'|'secondary'|'tertiary'|'neutral' = 'primary';\n\n  /**\n   * Indicates the button as outline\n   */\n  @Prop({reflect: true}) outline: boolean = false;\n\n  /**\n   * Indicates the size of the button\n   */\n  @Prop({reflect: true}) size: string = 'medium';\n\n  /**\n   * Indicates the button as pill\n   */\n  @Prop({reflect: true}) pill: boolean = false;\n\n  /**\n    * Indicates the button as text\n   */\n  @Prop({reflect: true}) text: boolean = false;\n\n  /**\n   * Indicates the button as only icon\n   **/\n  @Prop({reflect: true}) onlyIcon: boolean = false;\n\n  /**\n   * Indicates if button becames a anchor\n   **/\n  @Prop({reflect: true}) href: string = undefined;\n\n  /**\n   * Indicates the type of anchor's target \n   **/\n  @Prop({reflect: true}) target: '_blank' | '_parent' | '_self' | '_top'\n\n  /**\n   * Indicates type button\n   **/\n  @Prop({reflect: true}) type: 'button'|'submit'|'reset' = 'button';\n\n  /**\n   * Indicates the name that the sender button will send\n   **/\n  @Prop({reflect: true}) name: string = undefined;\n\n  /**\n   * Indicates the value that the sender button will send\n   **/\n  @Prop({reflect: true}) 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({reflect: true}) ariaLabel: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop({reflect: true}) class: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop({reflect: true}) buttonId: string = undefined;\n\n  render() {\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-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-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":";;AAAA,MAAM,aAAa,GAAG,2oKAA2oK,CAAC;AAClqK,yBAAe,aAAa;;MCMfA,YAAU;;;;;wBAIO,KAAK;uBAK6B,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,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,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAChQ,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,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,IAC7S,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":[":root {\n  /*BASE COLOR RULES*/\n  --neutral-grey-background: #eeeeee;\n  --neutral-grey-disabled: #cbcbcb;\n  --neutral-grey-primary: #282828;\n  --neutral-grey-secondary: #707070;\n  --neutral-white: #ffffff;\n  --primary-hard: #e75a50;\n  --primary-soft: #ffeae9;\n  --primary-standard: #fa7268;\n  --secondary-hard: #435171;\n  --secondary-soft: #dde3ed;\n  --secondary-standard: #5e79ba;\n  --status-danger-hard: #ba250a;\n  --status-danger-soft: #fdd3d1;\n  --status-danger-standard: #d72c0d;\n  --status-interaction-hard: #22559e;\n  --status-interaction-soft: #f2f7fe;\n  --status-interaction-standard: #2c6ecb;\n  --status-success-hard: #156048;\n  --status-success-soft: #f1f8f5;\n  --status-success-standard: #1d7f60;\n  --status-warning-hard: #987100;\n  --status-warning-soft: #fef5ea;\n  --status-warning-standard: #b98900;\n\n  /*TYPOGRAPHY RULES*/\n  --ff-primary: 'Inter';\n  --ff-secondary: 'Prompt';\n\n  --lh-300: 1.25rem;\n  --lh-400: 1.5rem;\n  --lh-500: 1.625rem;\n  --lh-600: 2rem;\n  --lh-700: 2.75rem;\n  --lh-800: 3.5rem;\n  --lh-850: 4.375rem;\n  --lh-900: 5.5rem;\n  --fs-300: 0.875rem;\n  --fs-400: 1rem;\n  --fs-500: 1.125rem;\n  --fs-600: 1.5rem;\n  --fs-700: 2.25rem;\n  --fs-800: 3rem;\n  --fs-850: 3.75rem;\n  --fs-900: 4.5rem;\n  --fw-300: 300;\n  --fw-400: 400;\n  --fw-900: 700;\n}\n\n%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  display: inline-flex;\n  align-items: center;\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  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    display: flex;\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      line-height: var(--lh-300, 1.2);\n      --jump-button-padding: 0.5rem 1rem;\n    }\n\n    &[data-size='medium'] {\n      font-size: var(--fs-400, 1rem);\n      line-height: var(--lh-400, 1.3);\n    }\n\n    &[data-size='large'] {\n      font-size: var(--fs-500, 1.125rem);\n      line-height: var(--lh-500, 1.4);\n      --jump-button-padding: 1.125rem 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: 1.125rem;\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: 1rem;\n    }\n    &[data-only-icon][data-size='large'] {\n      --jump-button-padding: 1.125rem;\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'|'tertiary'|'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 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-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-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.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}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;object-fit:cover;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 = ":root{--neutral-grey-background:#eeeeee;--neutral-grey-disabled:#cbcbcb;--neutral-grey-primary:#282828;--neutral-grey-secondary:#707070;--neutral-white:#ffffff;--primary-hard:#e75a50;--primary-soft:#ffeae9;--primary-standard:#fa7268;--secondary-hard:#435171;--secondary-soft:#dde3ed;--secondary-standard:#5e79ba;--status-danger-hard:#ba250a;--status-danger-soft:#fdd3d1;--status-danger-standard:#d72c0d;--status-interaction-hard:#22559e;--status-interaction-soft:#f2f7fe;--status-interaction-standard:#2c6ecb;--status-success-hard:#156048;--status-success-soft:#f1f8f5;--status-success-standard:#1d7f60;--status-warning-hard:#987100;--status-warning-soft:#fef5ea;--status-warning-standard:#b98900;--ff-primary:\"Inter\";--ff-secondary:\"Prompt\";--lh-300:1.25rem;--lh-400:1.5rem;--lh-500:1.625rem;--lh-600:2rem;--lh-700:2.75rem;--lh-800:3.5rem;--lh-850:4.375rem;--lh-900:5.5rem;--fs-300:0.875rem;--fs-400:1rem;--fs-500:1.125rem;--fs-600:1.5rem;--fs-700:2.25rem;--fs-800:3rem;--fs-850:3.75rem;--fs-900:4.5rem;--fw-300:300;--fw-400:400;--fw-900:700}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 JumpCardStyle0 = jumpCardCss;
 
 const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLElement {