@jumpgroup/jump-design-system 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/jump-button.cjs.entry.js +1 -1
  2. package/dist/cjs/jump-button.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/jump-button/jump-button-anchor.stories.js +1 -2
  4. package/dist/collection/components/jump-button/jump-button-anchor.stories.js.map +1 -1
  5. package/dist/collection/components/jump-button/jump-button-outline.stories.js.map +1 -1
  6. package/dist/collection/components/jump-button/jump-button.css +11 -5
  7. package/dist/components/jump-button.js +1 -1
  8. package/dist/components/jump-button.js.map +1 -1
  9. package/dist/esm/jump-button.entry.js +1 -1
  10. package/dist/esm/jump-button.entry.js.map +1 -1
  11. package/dist/jump-design-system/jump-design-system.esm.js +1 -1
  12. package/dist/jump-design-system/{p-9e47f451.entry.js → p-960188c6.entry.js} +2 -2
  13. package/dist/jump-design-system/p-960188c6.entry.js.map +1 -0
  14. package/package.json +1 -1
  15. package/dist/jump-design-system/p-9e47f451.entry.js.map +0 -1
package/dist/cjs/jump-button.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-41aaa52a.js');
6
6
 
7
- 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{--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.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}: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:1rem 1.5rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}: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.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)}";
7
+ 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{--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.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}: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: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.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)}:host button[data-full]{width:100%;justify-content:center}:host a{display:inline-flex}:host a[data-full]{width:100%;justify-content:center}";
8
8
  const JumpButtonStyle0 = jumpButtonCss;
9
9
 
10
10
  const JumpButton = class {
package/dist/cjs/jump-button.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"jump-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,ktKAAktK,CAAC;AACzuK,yBAAe,aAAa;;MCMf,UAAU;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtRA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJA,oBAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnUA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;","names":["h","Host"],"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.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\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: 1rem 1.5rem;\n }\n\n &[data-full] {\n width: 100%;\n justify-content: center;\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 &.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}
1
+ {"file":"jump-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,gxKAAgxK,CAAC;AACvyK,yBAAe,aAAa;;MCMf,UAAU;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtRA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJA,oBAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnUA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;","names":["h","Host"],"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.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\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: 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 &.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 button {\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n }\n\n a {\n display: inline-flex;\n\n &[data-full] {\n width: 100%;\n justify-content: center;\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/collection/components/jump-button/jump-button-anchor.stories.js CHANGED
@@ -64,7 +64,6 @@ export const LinkSecondary = Template.bind({});
64
64
  LinkSecondary.args = {
65
65
  variant: 'secondary',
66
66
  size: 'medium',
67
- text: true,
68
67
  };
69
68
  export const LinkNeutral = Template.bind({});
70
69
  LinkNeutral.args = {
@@ -82,6 +81,6 @@ export const LinkWithIcon = TemplateWithIcon.bind({});
82
81
  LinkWithIcon.args = {
83
82
  variant: 'primary',
84
83
  size: 'medium',
85
- text: true,
84
+ full: true
86
85
  };
87
86
  //# sourceMappingURL=jump-button-anchor.stories.js.map
package/dist/collection/components/jump-button/jump-button-anchor.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"jump-button-anchor.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-anchor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,OAAO;aACR;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,gCAAgC;YAC7C,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO;gBACP,QAAQ;gBACR,OAAO;aACR;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,6CAA6C;YAC1D,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,uEAAuE;YACpF,OAAO,EAAE,SAAS;SACnB;QACD,EAAE,EAAE;YACF,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,wEAAwE,CAAA;AAC3G,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,iIAAiI,CAAA;AACpK,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,WAAW;IACpB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Button/Anchor',\n tags: ['autodocs'],\n argTypes: {\n variant: {\n name: 'Variante',\n description: 'Imposta la variante di colore del link',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'white'\n ],\n },\n size: {\n name: 'Dimensione',\n description: 'Imposta la dimensione del link',\n control: 'select',\n options: [\n 'small',\n 'medium',\n 'large'\n ],\n labels: {\n small: 'Piccolo',\n medium: 'Medio',\n large: 'Grande'\n }\n },\n disabled: {\n name: 'Disabilitato',\n description: 'Imposta se il link deve essere disabilitato',\n control: 'boolean'\n },\n text: {\n name: 'Testo',\n description: 'Imposta se il link è solo testo, quindi senza bordo, sfondo e padding',\n control: 'boolean'\n },\n id: {\n name: 'ID',\n description: 'Imposta l\\'id del link',\n control: 'text'\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} href=\"www.jumpgroup.it\" target=\"_blank\"> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} href=\"www.jumpgroup.it\" target=\"_blank\"> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const LinkPrimary = Template.bind({});\nLinkPrimary.args = {\n variant: 'primary',\n size: 'small',\n text: true,\n};\n\nexport const LinkSecondary = Template.bind({});\nLinkSecondary.args = {\n variant: 'secondary',\n size: 'medium',\n text: true,\n};\n\nexport const LinkNeutral = Template.bind({});\nLinkNeutral.args = {\n variant: 'neutral',\n size: 'large',\n text: true,\n};\n\nexport const LinkWhite = Template.bind({});\nLinkWhite.args = {\n variant: 'white',\n size: 'medium',\n text: true,\n};\n\nexport const LinkWithIcon = TemplateWithIcon.bind({});\nLinkWithIcon.args = {\n variant: 'primary',\n size: 'medium',\n text: true,\n};"]}
1
+ {"version":3,"file":"jump-button-anchor.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-anchor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,OAAO;aACR;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,gCAAgC;YAC7C,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO;gBACP,QAAQ;gBACR,OAAO;aACR;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,6CAA6C;YAC1D,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,uEAAuE;YACpF,OAAO,EAAE,SAAS;SACnB;QACD,EAAE,EAAE;YACF,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,wEAAwE,CAAA;AAC3G,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,iIAAiI,CAAA;AACpK,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,WAAW;IACpB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Button/Anchor',\n tags: ['autodocs'],\n argTypes: {\n variant: {\n name: 'Variante',\n description: 'Imposta la variante di colore del link',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'white'\n ],\n },\n size: {\n name: 'Dimensione',\n description: 'Imposta la dimensione del link',\n control: 'select',\n options: [\n 'small',\n 'medium',\n 'large'\n ],\n labels: {\n small: 'Piccolo',\n medium: 'Medio',\n large: 'Grande'\n }\n },\n disabled: {\n name: 'Disabilitato',\n description: 'Imposta se il link deve essere disabilitato',\n control: 'boolean'\n },\n text: {\n name: 'Testo',\n description: 'Imposta se il link è solo testo, quindi senza bordo, sfondo e padding',\n control: 'boolean'\n },\n id: {\n name: 'ID',\n description: 'Imposta l\\'id del link',\n control: 'text'\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} href=\"www.jumpgroup.it\" target=\"_blank\"> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} href=\"www.jumpgroup.it\" target=\"_blank\"> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const LinkPrimary = Template.bind({});\nLinkPrimary.args = {\n variant: 'primary',\n size: 'small',\n text: true,\n};\n\nexport const LinkSecondary = Template.bind({});\nLinkSecondary.args = {\n variant: 'secondary',\n size: 'medium',\n};\n\nexport const LinkNeutral = Template.bind({});\nLinkNeutral.args = {\n variant: 'neutral',\n size: 'large',\n text: true,\n};\n\nexport const LinkWhite = Template.bind({});\nLinkWhite.args = {\n variant: 'white',\n size: 'medium',\n text: true,\n};\n\nexport const LinkWithIcon = TemplateWithIcon.bind({});\nLinkWithIcon.args = {\n variant: 'primary',\n size: 'medium',\n full: true\n};"]}
package/dist/collection/components/jump-button/jump-button-outline.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"jump-button-outline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-outline.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,OAAO;aACR;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO;gBACP,QAAQ;gBACR,OAAO;aACR;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,4EAA4E;YACzF,OAAO,EAAE,SAAS;SACnB;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,gDAAgD;YAC7D,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,mEAAmE;YAChF,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,SAAS;SACnB;QACD,EAAE,EAAE;YACF,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,2BAA2B;YACxC,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,+FAA+F,CAAA;AAClI,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,wJAAwJ,CAAA;AAC3L,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,WAAW;IACpB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAClB,KAAK,EAAE,eAAe;IACtB,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,cAAc;IACrB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,UAAU;IACjB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,QAAQ;CACf,CAAC","sourcesContent":["import feather from 'feather-icons';\nimport { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Button/Outline',\n tags: ['autodocs'],\n argTypes: {\n variant: {\n name: 'Variante',\n description: 'Imposta la variante di colore del bottone',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'white'\n ],\n },\n size: {\n name: 'Dimensione',\n description: 'Imposta la dimensione del bottone',\n control: 'select',\n options: [\n 'small',\n 'medium',\n 'large'\n ],\n labels: {\n small: 'Piccolo',\n medium: 'Medio',\n large: 'Grande'\n }\n },\n pill: {\n name: 'Bordo a Pillola',\n description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',\n control: 'boolean'\n },\n disabled: {\n name: 'Disabilitato',\n description: 'Imposta se il bottone deve essere disabilitato',\n control: 'boolean'\n },\n full: {\n name: 'Full Width',\n description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',\n control: 'boolean'\n },\n text: {\n name: 'Testo',\n description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n control: 'boolean'\n },\n id: {\n name: 'ID',\n description: 'Imposta l\\'id del bottone',\n control: 'text'\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} outline name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} outline name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const OutlinePrimary = Template.bind({});\nOutlinePrimary.args = {\n variant: 'primary',\n size: 'small',\n};\n\nexport const OutlineSecondary = Template.bind({});\nOutlineSecondary.args = {\n label: 'Outline Secondary',\n variant: 'secondary',\n size: 'medium',\n};\n\nexport const OutlineGrey = Template.bind({});\nOutlineGrey.args = {\n label: 'Outline Neutral',\n variant: 'neutral',\n size: 'large',\n};\n\nexport const OutlineWhite = Template.bind({});\nOutlineWhite.args = {\n label: 'Outline White',\n variant: 'white',\n size: 'medium',\n};\n\nexport const outlinePill = Template.bind({});\noutlinePill.args = {\n label: 'Pill Primary',\n variant: 'primary',\n pill: true,\n size: 'medium',\n};\n\nexport const withIcon = TemplateWithIcon.bind({});\nwithIcon.args = {\n label: 'Primary',\n variant: 'primary',\n size: 'medium',\n full: true,\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n label: 'Disabled',\n variant: 'primary',\n disabled: true,\n size: 'medium',\n};\n"]}
1
+ {"version":3,"file":"jump-button-outline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-outline.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,OAAO;aACR;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO;gBACP,QAAQ;gBACR,OAAO;aACR;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,4EAA4E;YACzF,OAAO,EAAE,SAAS;SACnB;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,gDAAgD;YAC7D,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,mEAAmE;YAChF,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,SAAS;SACnB;QACD,EAAE,EAAE;YACF,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,2BAA2B;YACxC,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,+FAA+F,CAAA;AAClI,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,wJAAwJ,CAAA;AAC3L,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,WAAW;IACpB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAClB,KAAK,EAAE,eAAe;IACtB,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,cAAc;IACrB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,UAAU;IACjB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,QAAQ;CACf,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Button/Outline',\n tags: ['autodocs'],\n argTypes: {\n variant: {\n name: 'Variante',\n description: 'Imposta la variante di colore del bottone',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'white'\n ],\n },\n size: {\n name: 'Dimensione',\n description: 'Imposta la dimensione del bottone',\n control: 'select',\n options: [\n 'small',\n 'medium',\n 'large'\n ],\n labels: {\n small: 'Piccolo',\n medium: 'Medio',\n large: 'Grande'\n }\n },\n pill: {\n name: 'Bordo a Pillola',\n description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',\n control: 'boolean'\n },\n disabled: {\n name: 'Disabilitato',\n description: 'Imposta se il bottone deve essere disabilitato',\n control: 'boolean'\n },\n full: {\n name: 'Full Width',\n description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',\n control: 'boolean'\n },\n text: {\n name: 'Testo',\n description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n control: 'boolean'\n },\n id: {\n name: 'ID',\n description: 'Imposta l\\'id del bottone',\n control: 'text'\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} outline name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} outline name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const OutlinePrimary = Template.bind({});\nOutlinePrimary.args = {\n variant: 'primary',\n size: 'small',\n};\n\nexport const OutlineSecondary = Template.bind({});\nOutlineSecondary.args = {\n label: 'Outline Secondary',\n variant: 'secondary',\n size: 'medium',\n};\n\nexport const OutlineGrey = Template.bind({});\nOutlineGrey.args = {\n label: 'Outline Neutral',\n variant: 'neutral',\n size: 'large',\n};\n\nexport const OutlineWhite = Template.bind({});\nOutlineWhite.args = {\n label: 'Outline White',\n variant: 'white',\n size: 'medium',\n};\n\nexport const outlinePill = Template.bind({});\noutlinePill.args = {\n label: 'Pill Primary',\n variant: 'primary',\n pill: true,\n size: 'medium',\n};\n\nexport const withIcon = TemplateWithIcon.bind({});\nwithIcon.args = {\n label: 'Primary',\n variant: 'primary',\n size: 'medium',\n full: true,\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n label: 'Disabled',\n variant: 'primary',\n disabled: true,\n size: 'medium',\n};\n"]}
package/dist/collection/components/jump-button/jump-button.css CHANGED
@@ -145,11 +145,6 @@
145
145
  line-height: var(--lh-500, 1.4);
146
146
  --jump-button-padding: 1rem 1.5rem;
147
147
  }
148
- :host button[data-full],
149
- :host a[data-full] {
150
- width: 100%;
151
- justify-content: center;
152
- }
153
148
  :host button[data-outline],
154
149
  :host a[data-outline] {
155
150
  background-color: var(--jump-button-background-outline);
@@ -197,4 +192,15 @@
197
192
  --jump-button-background: hsla(133, 54%, 58%, 1);
198
193
  --jump-button-color-hover: var(--neutral-white);
199
194
  --jump-button-background-hover: hsla(161, 63%, 31%, 1);
195
+ }
196
+ :host button[data-full] {
197
+ width: 100%;
198
+ justify-content: center;
199
+ }
200
+ :host a {
201
+ display: inline-flex;
202
+ }
203
+ :host a[data-full] {
204
+ width: 100%;
205
+ justify-content: center;
200
206
  }
package/dist/components/jump-button.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- 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{--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.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}: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:1rem 1.5rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}: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.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)}";
3
+ 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{--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.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}: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: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.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)}:host button[data-full]{width:100%;justify-content:center}:host a{display:inline-flex}:host a[data-full]{width:100%;justify-content:center}";
4
4
  const JumpButtonStyle0 = jumpButtonCss;
5
5
 
6
6
  const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends HTMLElement {
package/dist/components/jump-button.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ktKAAktK,CAAC;AACzuK,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":[":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.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\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: 1rem 1.5rem;\n }\n\n &[data-full] {\n width: 100%;\n justify-content: center;\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 &.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}
1
+ {"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gxKAAgxK,CAAC;AACvyK,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":[":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.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\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: 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 &.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 button {\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n }\n\n a {\n display: inline-flex;\n\n &[data-full] {\n width: 100%;\n justify-content: center;\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/esm/jump-button.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host } from './index-192aeaf1.js';
2
2
 
3
- 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{--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.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}: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:1rem 1.5rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}: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.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)}";
3
+ 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{--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.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}: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: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.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)}:host button[data-full]{width:100%;justify-content:center}:host a{display:inline-flex}:host a[data-full]{width:100%;justify-content:center}";
4
4
  const JumpButtonStyle0 = jumpButtonCss;
5
5
 
6
6
  const JumpButton = class {
package/dist/esm/jump-button.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"jump-button.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ktKAAktK,CAAC;AACzuK,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":[":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.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\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: 1rem 1.5rem;\n }\n\n &[data-full] {\n width: 100%;\n justify-content: center;\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 &.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}
1
+ {"file":"jump-button.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gxKAAgxK,CAAC;AACvyK,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":[":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.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\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: 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 &.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 button {\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n }\n\n a {\n display: inline-flex;\n\n &[data-full] {\n width: 100%;\n justify-content: center;\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/jump-design-system/jump-design-system.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as a}from"./p-20ceb40c.js";export{s as setNonce}from"./p-20ceb40c.js";import{g as t}from"./p-e1255160.js";const r=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};r().then((async e=>{await t();return a([["p-87256ed6",[[0,"jump-pagination",{totalElements:[514,"total-elements"],pagLabel:[513,"pag-label"],initialPage:[514,"initial-page"],lastPage:[514,"last-page"],labelElementsPerPage:[513,"label-elements-per-page"],elementsRanges:[16],completeVersion:[516,"complete-version"],showFirstAndLast:[516,"show-first-and-last"],firstPage:[32],currentPage:[32]},null,{currentPage:["watchCurrentPage"]}]]],["p-8f5caf32",[[0,"jump-badge",{label:[1],variant:[1]}]]],["p-9e47f451",[[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"]}]]],["p-700b96b4",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-61729377",[[1,"jump-tab",{activeTab:[1,"active-tab"],tabNames:[16]}]]],["p-511d4425",[[0,"jump-icon",{name:[1],class:[1]}]]]],e)}));
1
+ import{p as e,b as a}from"./p-20ceb40c.js";export{s as setNonce}from"./p-20ceb40c.js";import{g as t}from"./p-e1255160.js";const r=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};r().then((async e=>{await t();return a([["p-87256ed6",[[0,"jump-pagination",{totalElements:[514,"total-elements"],pagLabel:[513,"pag-label"],initialPage:[514,"initial-page"],lastPage:[514,"last-page"],labelElementsPerPage:[513,"label-elements-per-page"],elementsRanges:[16],completeVersion:[516,"complete-version"],showFirstAndLast:[516,"show-first-and-last"],firstPage:[32],currentPage:[32]},null,{currentPage:["watchCurrentPage"]}]]],["p-8f5caf32",[[0,"jump-badge",{label:[1],variant:[1]}]]],["p-960188c6",[[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"]}]]],["p-700b96b4",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-61729377",[[1,"jump-tab",{activeTab:[1,"active-tab"],tabNames:[16]}]]],["p-511d4425",[[0,"jump-icon",{name:[1],class:[1]}]]]],e)}));
2
2
  //# sourceMappingURL=jump-design-system.esm.js.map
package/dist/jump-design-system/{p-9e47f451.entry.js → p-960188c6.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as t,h as a,H as r}from"./p-20ceb40c.js";const o=':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{--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.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}: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:1rem 1.5rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}: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.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 n=o;const e=class{constructor(a){t(this,a);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 a(r,{key:"2f1a96f504d7f273bfdf0b49d7a708aea570f59f"},this.href?a("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},a("slot",{name:"prefix"}),!this.onlyIcon&&a("slot",null),a("slot",{name:"suffix"})):a("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},a("slot",{name:"prefix"}),!this.onlyIcon&&a("slot",null),a("slot",{name:"suffix"})))}};e.style=n;export{e as jump_button};
2
- //# sourceMappingURL=p-9e47f451.entry.js.map
1
+ import{r as t,h as a,H as r}from"./p-20ceb40c.js";const o=':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{--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.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}: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: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.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)}:host button[data-full]{width:100%;justify-content:center}:host a{display:inline-flex}:host a[data-full]{width:100%;justify-content:center}';const n=o;const e=class{constructor(a){t(this,a);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 a(r,{key:"2f1a96f504d7f273bfdf0b49d7a708aea570f59f"},this.href?a("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},a("slot",{name:"prefix"}),!this.onlyIcon&&a("slot",null),a("slot",{name:"suffix"})):a("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},a("slot",{name:"prefix"}),!this.onlyIcon&&a("slot",null),a("slot",{name:"suffix"})))}};e.style=n;export{e as jump_button};
2
+ //# sourceMappingURL=p-960188c6.entry.js.map
package/dist/jump-design-system/p-960188c6.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["jumpButtonCss","JumpButtonStyle0","JumpButton","undefined","componentWillLoad","this","target","href","render","h","Host","key","id","buttonId","class","variant","outline","size","full","pill","text","onlyIcon","ariaLabel","name","disabled","type","value"],"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.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\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: 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 &.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 button {\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n }\n\n a {\n display: inline-flex;\n\n &[data-full] {\n width: 100%;\n justify-content: center;\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"],"mappings":"kDAAA,MAAMA,EAAgB,2wKACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,uCAIO,M,aAK+B,U,aAKhC,M,UAKJ,S,UAKC,M,UAKA,M,UAKA,M,cAKI,M,oDAec,S,UAKnBC,U,WAKCA,U,eAKIA,U,WAKJA,U,cAKGA,S,CAE3B,iBAAAC,GACEC,KAAKC,OAASD,KAAKE,KAAOF,KAAKC,OAAS,O,CAG1C,MAAAE,GAEE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFN,KAAKE,KACJE,EAAA,KAAGF,KAAMF,KAAKE,KAAMK,GAAIP,KAAKQ,SAAUC,MAAOT,KAAKS,MAAK,eAAgBT,KAAKU,QAAO,eAAgBV,KAAKW,QAAO,YAAaX,KAAKY,KAAI,YAAaZ,KAAKa,KAAI,YAAab,KAAKc,KAAI,YAAad,KAAKe,KAAI,iBAAkBf,KAAKgB,SAAQ,aAAchB,KAAKiB,UAAWhB,OAAQD,KAAKC,QAChRG,EAAA,QAAMc,KAAK,YACTlB,KAAKgB,UAAYZ,EAAA,aACnBA,EAAA,QAAMc,KAAK,YAGbd,EAAA,UAAQG,GAAIP,KAAKQ,SAAUC,MAAOT,KAAKS,MAAK,eAAgBT,KAAKU,QAAO,eAAgBV,KAAKW,QAAO,YAAaX,KAAKY,KAAI,YAAaZ,KAAKa,KAAI,YAAab,KAAKc,KAAI,YAAad,KAAKe,KAAI,iBAAkBf,KAAKgB,SAAUG,SAAUnB,KAAKmB,SAAQ,aAAcnB,KAAKiB,UAAWG,KAAMpB,KAAKoB,KAAMF,KAAMlB,KAAKkB,KAAMG,MAAOrB,KAAKqB,OAC9TjB,EAAA,QAAMc,KAAK,YACTlB,KAAKgB,UAAYZ,EAAA,aACnBA,EAAA,QAAMc,KAAK,Y"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jumpgroup/jump-design-system",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/dist/jump-design-system/p-9e47f451.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["jumpButtonCss","JumpButtonStyle0","JumpButton","undefined","componentWillLoad","this","target","href","render","h","Host","key","id","buttonId","class","variant","outline","size","full","pill","text","onlyIcon","ariaLabel","name","disabled","type","value"],"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.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\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: 1rem 1.5rem;\n }\n\n &[data-full] {\n width: 100%;\n justify-content: center;\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 &.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"],"mappings":"kDAAA,MAAMA,EAAgB,6sKACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,uCAIO,M,aAK+B,U,aAKhC,M,UAKJ,S,UAKC,M,UAKA,M,UAKA,M,cAKI,M,oDAec,S,UAKnBC,U,WAKCA,U,eAKIA,U,WAKJA,U,cAKGA,S,CAE3B,iBAAAC,GACEC,KAAKC,OAASD,KAAKE,KAAOF,KAAKC,OAAS,O,CAG1C,MAAAE,GAEE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFN,KAAKE,KACJE,EAAA,KAAGF,KAAMF,KAAKE,KAAMK,GAAIP,KAAKQ,SAAUC,MAAOT,KAAKS,MAAK,eAAgBT,KAAKU,QAAO,eAAgBV,KAAKW,QAAO,YAAaX,KAAKY,KAAI,YAAaZ,KAAKa,KAAI,YAAab,KAAKc,KAAI,YAAad,KAAKe,KAAI,iBAAkBf,KAAKgB,SAAQ,aAAchB,KAAKiB,UAAWhB,OAAQD,KAAKC,QAChRG,EAAA,QAAMc,KAAK,YACTlB,KAAKgB,UAAYZ,EAAA,aACnBA,EAAA,QAAMc,KAAK,YAGbd,EAAA,UAAQG,GAAIP,KAAKQ,SAAUC,MAAOT,KAAKS,MAAK,eAAgBT,KAAKU,QAAO,eAAgBV,KAAKW,QAAO,YAAaX,KAAKY,KAAI,YAAaZ,KAAKa,KAAI,YAAab,KAAKc,KAAI,YAAad,KAAKe,KAAI,iBAAkBf,KAAKgB,SAAUG,SAAUnB,KAAKmB,SAAQ,aAAcnB,KAAKiB,UAAWG,KAAMpB,KAAKoB,KAAMF,KAAMlB,KAAKkB,KAAMG,MAAOrB,KAAKqB,OAC9TjB,EAAA,QAAMc,KAAK,YACTlB,KAAKgB,UAAYZ,EAAA,aACnBA,EAAA,QAAMc,KAAK,Y"}