@jumpgroup/jump-design-system 0.1.8 → 0.2.0

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 (118) hide show
  1. package/dist/cjs/{index-91a3ed32.js → index-4b95f596.js} +458 -43
  2. package/dist/cjs/index-4b95f596.js.map +1 -0
  3. package/dist/cjs/jump-badge.cjs.entry.js +24 -0
  4. package/dist/cjs/jump-badge.cjs.entry.js.map +1 -0
  5. package/dist/cjs/jump-button.cjs.entry.js +2 -2
  6. package/dist/cjs/jump-button.cjs.entry.js.map +1 -1
  7. package/dist/cjs/jump-card.cjs.entry.js +34 -0
  8. package/dist/cjs/jump-card.cjs.entry.js.map +1 -0
  9. package/dist/cjs/jump-design-system.cjs.js +3 -3
  10. package/dist/cjs/jump-design-system.cjs.js.map +1 -1
  11. package/dist/cjs/jump-icon.cjs.entry.js +1 -1
  12. package/dist/cjs/jump-pagination.cjs.entry.js +4 -4
  13. package/dist/cjs/loader.cjs.js +2 -2
  14. package/dist/collection/collection-manifest.json +3 -1
  15. package/dist/collection/components/jump-badge/jump-badge.css +25 -0
  16. package/dist/collection/components/jump-badge/jump-badge.js +62 -0
  17. package/dist/collection/components/jump-badge/jump-badge.js.map +1 -0
  18. package/dist/collection/components/jump-badge/jump-badge.stories.js +26 -0
  19. package/dist/collection/components/jump-badge/jump-badge.stories.js.map +1 -0
  20. package/dist/collection/components/jump-badge/test/jump-badge.e2e.js +10 -0
  21. package/dist/collection/components/jump-badge/test/jump-badge.e2e.js.map +1 -0
  22. package/dist/collection/components/jump-badge/test/jump-badge.spec.js +18 -0
  23. package/dist/collection/components/jump-badge/test/jump-badge.spec.js.map +1 -0
  24. package/dist/collection/components/jump-button/{jump-button.stories.js → jump-button-filled.stories.js} +12 -10
  25. package/dist/collection/components/jump-button/jump-button-filled.stories.js.map +1 -0
  26. package/dist/collection/components/jump-button/jump-button-outline.stories.js +376 -0
  27. package/dist/collection/components/jump-button/jump-button-outline.stories.js.map +1 -0
  28. package/dist/collection/components/jump-button/jump-button.js +1 -2
  29. package/dist/collection/components/jump-button/jump-button.js.map +1 -1
  30. package/dist/collection/components/jump-card/jump-card-border-radius.stories.js +114 -0
  31. package/dist/collection/components/jump-card/jump-card-border-radius.stories.js.map +1 -0
  32. package/dist/collection/components/jump-card/jump-card-border.stories.js +113 -0
  33. package/dist/collection/components/jump-card/jump-card-border.stories.js.map +1 -0
  34. package/dist/collection/components/jump-card/jump-card-boxed.stories.js +114 -0
  35. package/dist/collection/components/jump-card/jump-card-boxed.stories.js.map +1 -0
  36. package/dist/collection/components/jump-card/jump-card-horizontal.stories.js +114 -0
  37. package/dist/collection/components/jump-card/jump-card-horizontal.stories.js.map +1 -0
  38. package/dist/collection/components/jump-card/jump-card-media-rounded.stories.js +125 -0
  39. package/dist/collection/components/jump-card/jump-card-media-rounded.stories.js.map +1 -0
  40. package/dist/collection/components/jump-card/jump-card-no-image.stories.js +112 -0
  41. package/dist/collection/components/jump-card/jump-card-no-image.stories.js.map +1 -0
  42. package/dist/collection/components/jump-card/jump-card-shadow.stories.js +113 -0
  43. package/dist/collection/components/jump-card/jump-card-shadow.stories.js.map +1 -0
  44. package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js +114 -0
  45. package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js.map +1 -0
  46. package/dist/collection/components/jump-card/jump-card-video.stories.js +111 -0
  47. package/dist/collection/components/jump-card/jump-card-video.stories.js.map +1 -0
  48. package/dist/collection/components/jump-card/jump-card.css +99 -0
  49. package/dist/collection/components/jump-card/jump-card.js +232 -0
  50. package/dist/collection/components/jump-card/jump-card.js.map +1 -0
  51. package/dist/collection/components/jump-card/jump-card.stories.js +113 -0
  52. package/dist/collection/components/jump-card/jump-card.stories.js.map +1 -0
  53. package/dist/collection/components/jump-card/test/jump-card.e2e.js +10 -0
  54. package/dist/collection/components/jump-card/test/jump-card.e2e.js.map +1 -0
  55. package/dist/collection/components/jump-card/test/jump-card.spec.js +18 -0
  56. package/dist/collection/components/jump-card/test/jump-card.spec.js.map +1 -0
  57. package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
  58. package/dist/components/jump-badge.d.ts +11 -0
  59. package/dist/components/jump-badge.js +40 -0
  60. package/dist/components/jump-badge.js.map +1 -0
  61. package/dist/components/jump-button.js +2 -3
  62. package/dist/components/jump-button.js.map +1 -1
  63. package/dist/components/jump-card.d.ts +11 -0
  64. package/dist/components/jump-card.js +59 -0
  65. package/dist/components/jump-card.js.map +1 -0
  66. package/dist/components/jump-pagination.js +3 -3
  67. package/dist/esm/{index-3cf3394c.js → index-6fbf8ed3.js} +458 -43
  68. package/dist/esm/index-6fbf8ed3.js.map +1 -0
  69. package/dist/esm/jump-badge.entry.js +20 -0
  70. package/dist/esm/jump-badge.entry.js.map +1 -0
  71. package/dist/esm/jump-button.entry.js +2 -2
  72. package/dist/esm/jump-button.entry.js.map +1 -1
  73. package/dist/esm/jump-card.entry.js +30 -0
  74. package/dist/esm/jump-card.entry.js.map +1 -0
  75. package/dist/esm/jump-design-system.js +4 -4
  76. package/dist/esm/jump-design-system.js.map +1 -1
  77. package/dist/esm/jump-icon.entry.js +1 -1
  78. package/dist/esm/jump-pagination.entry.js +4 -4
  79. package/dist/esm/loader.js +3 -3
  80. package/dist/jump-design-system/jump-design-system.esm.js +1 -1
  81. package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
  82. package/dist/jump-design-system/p-22f19a67.entry.js +2 -0
  83. package/dist/jump-design-system/p-22f19a67.entry.js.map +1 -0
  84. package/dist/jump-design-system/{p-85fbbf60.entry.js → p-70d78318.entry.js} +2 -2
  85. package/dist/jump-design-system/p-c2ab38b9.js +3 -0
  86. package/dist/jump-design-system/p-c2ab38b9.js.map +1 -0
  87. package/dist/jump-design-system/{p-e2af0fd9.entry.js → p-db7d19d5.entry.js} +2 -2
  88. package/dist/jump-design-system/p-db7d19d5.entry.js.map +1 -0
  89. package/dist/jump-design-system/{p-f4cfa17d.entry.js → p-f1c84912.entry.js} +2 -2
  90. package/dist/jump-design-system/p-f77f001e.entry.js +2 -0
  91. package/dist/jump-design-system/p-f77f001e.entry.js.map +1 -0
  92. package/dist/jump-design-system-elements.json +78 -0
  93. package/dist/types/components/jump-badge/jump-badge.d.ts +11 -0
  94. package/dist/types/components/jump-badge/jump-badge.stories.d.ts +19 -0
  95. package/dist/types/components/jump-button/jump-button-outline.stories.d.ts +164 -0
  96. package/dist/types/components/jump-card/jump-card-border-radius.stories.d.ts +77 -0
  97. package/dist/types/components/jump-card/jump-card-border.stories.d.ts +77 -0
  98. package/dist/types/components/jump-card/jump-card-boxed.stories.d.ts +77 -0
  99. package/dist/types/components/jump-card/jump-card-horizontal.stories.d.ts +77 -0
  100. package/dist/types/components/jump-card/jump-card-media-rounded.stories.d.ts +79 -0
  101. package/dist/types/components/jump-card/jump-card-no-image.stories.d.ts +77 -0
  102. package/dist/types/components/jump-card/jump-card-shadow.stories.d.ts +77 -0
  103. package/dist/types/components/jump-card/jump-card-top-border-content-radius.stories.d.ts +77 -0
  104. package/dist/types/components/jump-card/jump-card-video.stories.d.ts +77 -0
  105. package/dist/types/components/jump-card/jump-card.d.ts +47 -0
  106. package/dist/types/components/jump-card/jump-card.stories.d.ts +77 -0
  107. package/dist/types/components.d.ts +130 -0
  108. package/package.json +1 -1
  109. package/readme.md +4 -3
  110. package/dist/cjs/index-91a3ed32.js.map +0 -1
  111. package/dist/collection/components/jump-button/jump-button.stories.js.map +0 -1
  112. package/dist/esm/index-3cf3394c.js.map +0 -1
  113. package/dist/jump-design-system/p-7216d46f.js +0 -3
  114. package/dist/jump-design-system/p-7216d46f.js.map +0 -1
  115. package/dist/jump-design-system/p-e2af0fd9.entry.js.map +0 -1
  116. /package/dist/jump-design-system/{p-85fbbf60.entry.js.map → p-70d78318.entry.js.map} +0 -0
  117. /package/dist/jump-design-system/{p-f4cfa17d.entry.js.map → p-f1c84912.entry.js.map} +0 -0
  118. /package/dist/types/components/jump-button/{jump-button.stories.d.ts → jump-button-filled.stories.d.ts} +0 -0
@@ -0,0 +1,24 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-4b95f596.js');
6
+
7
+ const jumpBadgeCss = "jump-badge{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-bafge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-size:var(--fs-300);font-weight:var(--fw-900);line-height:1;border-radius:var(--jump-bafge-border-radius);border:solid 1px var(--jump-bafge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}jump-badge[variant=primary]{--jump-badge-background:var(--primary-standard)}jump-badge[variant=secondary]{--jump-badge-background:var(--secondary-standard)}";
8
+ const JumpBadgeStyle0 = jumpBadgeCss;
9
+
10
+ const AppCard = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ this.label = '';
14
+ this.variant = 'primary';
15
+ }
16
+ render() {
17
+ return (index.h(index.Host, { key: '8a7bf8245f0edf5aa45f70be833001e7c2899a5e', variant: this.variant }, this.label));
18
+ }
19
+ };
20
+ AppCard.style = JumpBadgeStyle0;
21
+
22
+ exports.jump_badge = AppCard;
23
+
24
+ //# sourceMappingURL=jump-badge.cjs.entry.js.map
@@ -0,0 +1 @@
1
+ {"file":"jump-badge.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,koBAAkoB,CAAC;AACxpB,wBAAe,YAAY;;MCMd,OAAO;;;qBAIqB,EAAE;uBAKe,SAAS;;IAEjE,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":["jump-badge {\n --jump-badge-background: var(--primary-standard);\n --jump-badge-color: #fff;\n --jump-bafge-border-radius: 50px;\n\n display: inline-flex;\n color: var(--jump-badge-color);\n background-color: var(--jump-badge-background);\n align-items: center;\n justify-content: center;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n line-height: 1;\n border-radius: var(--jump-bafge-border-radius);\n border: solid 1px var(--jump-bafge-border-radius);\n white-space: nowrap;\n padding: 0.35em 0.6em;\n user-select: none;\n cursor: inherit;\n\n &[variant='primary'] {\n --jump-badge-background: var(--primary-standard);\n }\n\n &[variant='secondary'] {\n --jump-badge-background: var(--secondary-standard);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-badge',\n styleUrl: 'jump-badge.scss',\n shadow: false,\n})\nexport class AppCard {\n /**\n * Indicates the label of the badge\n */\n @Prop({reflect: true}) label: string = '';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary' = 'primary';\n\n render() {\n return (\n <Host variant={this.variant}>\n {this.label}\n </Host>\n );\n }\n\n}\n"],"version":3}
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-91a3ed32.js');
5
+ const index = require('./index-4b95f596.js');
6
6
 
7
7
  const jumpButtonCss = "jump-button button,jump-button a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}jump-button{display:inline-flex;align-items:center;--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem}jump-button button,jump-button a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);display:flex;align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}jump-button button:hover,jump-button a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}jump-button button[data-variant=primary],jump-button a[data-variant=primary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--primary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--primary-hard)}jump-button button[data-variant=secondary],jump-button a[data-variant=secondary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--secondary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--secondary-hard)}jump-button button[data-variant=neutral],jump-button a[data-variant=neutral]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--neutral-grey-secondary);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--neutral-grey-primary)}jump-button button[data-variant=white],jump-button a[data-variant=white]{--jump-button-color:var(--neutral-grey-primary);--jump-button-background:var(--neutral-white);--jump-button-color-hover:var(--neutral-grey-primary);--jump-button-background-hover:var(--neutral-grey-background)}jump-button button[disabled],jump-button a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}jump-button button[data-pill],jump-button a[data-pill]{border-radius:100rem}jump-button button[data-size=small],jump-button a[data-size=small]{font-size:var(--fs-300, 0.875rem);line-height:var(--lh-300, 1.2);--jump-button-padding:0.5rem 1rem}jump-button button[data-size=medium],jump-button a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3)}jump-button button[data-size=large],jump-button a[data-size=large]{font-size:var(--fs-500, 1.125rem);line-height:var(--lh-500, 1.4);--jump-button-padding:1.125rem 1.5rem}jump-button button[data-outline],jump-button a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}jump-button button[data-outline]:hover,jump-button a[data-outline]:hover{background-color:var(--jump-button-background-hover);border:1px solid var(--jump-button-background-hover);color:var(--jump-button-color-hover)}jump-button button[data-text],jump-button a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}jump-button button[data-text]:hover,jump-button a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}jump-button button[data-only-icon],jump-button a[data-only-icon]{--jump-button-padding:1.125rem}jump-button button[data-only-icon][data-size=small],jump-button a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}jump-button button[data-only-icon][data-size=medium],jump-button a[data-only-icon][data-size=medium]{--jump-button-padding:1rem}jump-button button[data-only-icon][data-size=large],jump-button a[data-only-icon][data-size=large]{--jump-button-padding:1.125rem}jump-button button.chat,jump-button a.chat{--jump-button-color:var(--neutral-white);--jump-button-background:hsla(133, 54%, 58%, 1);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:hsla(161, 63%, 31%, 1)}";
8
8
  const JumpButtonStyle0 = jumpButtonCss;
@@ -27,7 +27,7 @@ const AppButton = class {
27
27
  this.buttonId = undefined;
28
28
  }
29
29
  render() {
30
- return (index.h(index.Host, { key: 'd4555173c1ebe30560269c22cfd4fbb71c43494b' }, this.href ? (index.h("a", { href: this.href, id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, "aria-label": this.ariaLabel, target: this.target }, index.h("slot", { name: "prefix" }), !this.onlyIcon && index.h("slot", null), index.h("slot", { name: "suffix" }))) : (index.h("button", { id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled, "aria-label": this.ariaLabel, type: this.type, name: this.name, value: this.value }, index.h("slot", { name: "prefix" }), !this.onlyIcon && index.h("slot", null), index.h("slot", { name: "suffix" })))));
30
+ return (index.h(index.Host, { key: '21647cd89a0a179d5c035f5e7f533f54375311cf' }, this.href ? (index.h("a", { href: this.href, id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, "aria-label": this.ariaLabel, target: this.target }, index.h("slot", { name: "prefix" }), !this.onlyIcon && index.h("slot", null), index.h("slot", { name: "suffix" }))) : (index.h("button", { id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled, "aria-label": this.ariaLabel, type: this.type, name: this.name, value: this.value }, index.h("slot", { name: "prefix" }), !this.onlyIcon && index.h("slot", null), index.h("slot", { name: "suffix" })))));
31
31
  }
32
32
  };
33
33
  AppButton.style = JumpButtonStyle0;
@@ -1 +1 @@
1
- {"file":"jump-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,s3IAAs3I,CAAC;AAC74I,yBAAe,aAAa;;MCMf,SAAS;;;wBAIQ,KAAK;uBAK4C,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;oBAKV,SAAS;;oBAUU,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEnD,MAAM;QACJ,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,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAChQA,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,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,IAC7SA,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":["%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\njump-button {\n display: inline-flex;\n align-items: center;\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n display: flex;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n line-height: var(--lh-300, 1.2);\n --jump-button-padding: 0.5rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n line-height: var(--lh-500, 1.4);\n --jump-button-padding: 1.125rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 1.125rem;\n }\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 1rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1.125rem;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class AppButton {\n /**\n * Set the button as disabled; Vale solo per i bottoni\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary'|'tertiary'|'neutral' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop({reflect: true}) outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop({reflect: true}) size: string = 'medium';\n\n /**\n * Indicates the button as pill\n */\n @Prop({reflect: true}) pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop({reflect: true}) text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop({reflect: true}) onlyIcon: boolean = false;\n\n /**\n * Indicates if button becames a anchor\n **/\n @Prop({reflect: true}) href: string = undefined;\n\n /**\n * Indicates the type of anchor's target \n **/\n @Prop({reflect: true}) target: '_blank' | '_parent' | '_self' | '_top'\n\n /**\n * Indicates type button\n **/\n @Prop({reflect: true}) type: 'button'|'submit'|'reset' = 'button';\n\n /**\n * Indicates the name that the sender button will send\n **/\n @Prop({reflect: true}) name: string = undefined;\n\n /**\n * Indicates the value that the sender button will send\n **/\n @Prop({reflect: true}) value: string = undefined;\n\n /**\n * Indicates the value of text alternative to an element that has no visible text on the screen\n **/\n @Prop({reflect: true}) ariaLabel: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) class: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) buttonId: string = undefined;\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
1
+ {"file":"jump-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,s3IAAs3I,CAAC;AAC74I,yBAAe,aAAa;;MCMf,SAAS;;;wBAIQ,KAAK;uBAK4C,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;oBAKV,SAAS;;oBAUU,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEnD,MAAM;QACJ,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,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAChQA,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,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,IAC7SA,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","src/components/jump-button/jump-button.tsx"],"sourcesContent":["%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\njump-button {\n display: inline-flex;\n align-items: center;\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n display: flex;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n line-height: var(--lh-300, 1.2);\n --jump-button-padding: 0.5rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n line-height: var(--lh-500, 1.4);\n --jump-button-padding: 1.125rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 1.125rem;\n }\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 1rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1.125rem;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: false,\n})\nexport class AppButton {\n /**\n * Set the button as disabled; Vale solo per i bottoni\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary'|'tertiary'|'neutral' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop({reflect: true}) outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop({reflect: true}) size: string = 'medium';\n\n /**\n * Indicates the button as pill\n */\n @Prop({reflect: true}) pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop({reflect: true}) text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop({reflect: true}) onlyIcon: boolean = false;\n\n /**\n * Indicates if button becames a anchor\n **/\n @Prop({reflect: true}) href: string = undefined;\n\n /**\n * Indicates the type of anchor's target \n **/\n @Prop({reflect: true}) target: '_blank' | '_parent' | '_self' | '_top'\n\n /**\n * Indicates type button\n **/\n @Prop({reflect: true}) type: 'button'|'submit'|'reset' = 'button';\n\n /**\n * Indicates the name that the sender button will send\n **/\n @Prop({reflect: true}) name: string = undefined;\n\n /**\n * Indicates the value that the sender button will send\n **/\n @Prop({reflect: true}) value: string = undefined;\n\n /**\n * Indicates the value of text alternative to an element that has no visible text on the screen\n **/\n @Prop({reflect: true}) ariaLabel: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) class: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) buttonId: string = undefined;\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
@@ -0,0 +1,34 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-4b95f596.js');
6
+
7
+ const jumpCardCss = "jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:#fff;--jump-card-color-dark:#fff;--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;object-fit:cover;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
8
+ const JumpCardStyle0 = jumpCardCss;
9
+
10
+ const AppCard = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ this.horizontal = false;
14
+ this.dark = false;
15
+ this.shadow = undefined;
16
+ this.border = undefined;
17
+ this.borderRadius = false;
18
+ this.topBorderContentRadius = false;
19
+ this.boxed = false;
20
+ this.roundedMedia = false;
21
+ this.imgSrc = '';
22
+ this.imgAlt = '';
23
+ this.videoSrc = '';
24
+ }
25
+ render() {
26
+ return (index.h(index.Host, { key: 'a1f0752a89731d2f493060b79548fa69e99e1e68', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? index.h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
27
+ index.h("video", { autoplay: true }, index.h("source", { src: this.videoSrc, type: "video/mp4" }), index.h("source", { src: this.videoSrc, type: "video/mov" }), index.h("source", { src: this.videoSrc, type: "video/webm" })) : '', index.h("div", { key: 'a7d7a20a7a5960f3fab3d417d224dd711d119e0b', class: "Content" }, index.h("slot", { key: '7667cd1ea36b6f2115174f0fa39a6368bc020b16', name: "body" }), index.h("slot", { key: 'bbaded488f7b0603a9aa19e1549ba41e524ad322', name: "footer" }))));
28
+ }
29
+ };
30
+ AppCard.style = JumpCardStyle0;
31
+
32
+ exports.jump_card = AppCard;
33
+
34
+ //# sourceMappingURL=jump-card.cjs.entry.js.map
@@ -0,0 +1 @@
1
+ {"file":"jump-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,uvEAAuvE,CAAC;AAC5wE,uBAAe,WAAW;;MCMb,OAAO;;;0BAI2B,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE5C,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAGD,iBAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,GAAG,EAAE,EACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;YAC5BA,mBAAO,QAAQ,UACbA,oBAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9CA,oBAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9CA,oBAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,GAAG,EAAE,EACfA,kEAAK,KAAK,EAAC,SAAS,IAClBA,mEAAM,IAAI,EAAC,MAAM,GAAQ,EACzBA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-card/jump-card.scss?tag=jump-card","src/components/jump-card/jump-card.tsx"],"sourcesContent":["jump-card {\n display: flex;\n flex-direction: column;\n position: relative;\n // --jump-card-max-width: 320px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: #fff;\n --jump-card-color-dark: #fff;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-border-radius: 6px;\n --jump-card-border-top-radius: 1rem;\n --jump-card-top-border-body-radius: 1.5rem 1rem;\n --jump-card-padding: 1rem 1.25rem;\n\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n // max-width: var(--jump-card-max-width);\n overflow: hidden;\n\n img,\n video {\n aspect-ratio: 4/3;\n overflow: hidden;\n position: relative;\n }\n\n .Content {\n padding: 1.5rem 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n flex: 1;\n background-color: var(--jump-card-background);\n }\n\n &[dark] {\n background-color: var(--neutral-grey-primary);\n color: var(--jump-card-color-dark);\n\n .Content {\n background-color: var(--neutral-grey-primary);\n color: var(--jump-card-color-dark);\n }\n }\n\n &[border] {\n border: 1px solid var(--jump-card-border-color);\n }\n\n &[border-radius] {\n border-radius: var(--jump-card-border-radius);\n }\n\n &[top-border-content-radius] {\n border-radius: var(--jump-card-border-top-radius);\n\n .Content {\n border-top-left-radius: var(--jump-card-border-top-radius);\n border-top-right-radius: var(--jump-card-border-top-radius);\n margin-top: -1rem;\n z-index: 2;\n }\n }\n\n &[boxed] {\n border-radius: var(--jump-card-border-radius);\n\n img,\n video {\n border-radius: var(--jump-card-border-radius);\n background-color: var(--jump-card-background);\n margin: 0.5rem 0.5rem 0;\n }\n }\n\n &[horizontal] {\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n max-width: var(--jump-card-max-width-horizontal);\n }\n\n &[rounded-media] {\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n\n img,\n video {\n background-color: transparent;\n border-radius: 50%;\n aspect-ratio: 1;\n object-fit: cover;\n width: 100%;\n flex: 0 1 40%;\n }\n\n .Content {\n background-color: transparent;\n align-items: center;\n }\n }\n\n &[rounded-media][horizontal] {\n text-align: left;\n\n .Content {\n align-items: flex-start;\n }\n }\n\n &[shadow] {\n box-shadow: 0px 2px 25px 0px hsla(0, 0%, 0%, 0.1);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-card',\n styleUrl: 'jump-card.scss',\n shadow: false,\n})\nexport class AppCard {\n /**\n * Indicates if the card is horizontal\n */\n @Prop({reflect: true}) horizontal: boolean = false;\n\n /**\n * Indicates if the card is horizontal\n */\n @Prop({reflect: true}) dark: boolean = false;\n\n /**\n * Indicates if card has shadow\n */\n @Prop({reflect: true}) shadow: boolean;\n\n /**\n * Indicates if card has borders\n */\n @Prop({reflect: true}) border: boolean;\n\n /**\n * Indicates if borders of the entire card are rounded\n */\n @Prop({reflect: true}) borderRadius: boolean = false;\n\n /**\n * Indicates if border top of the body is rounded; Not compatible with boxed\n */\n @Prop({reflect: true}) topBorderContentRadius: boolean = false;\n\n /**\n * Indicates if media has padding; Not compatible with roundedMedia\n */\n @Prop({reflect: true}) boxed: boolean = false;\n\n /**\n * Indicates if image is rounded and there isnt a bg\n */\n @Prop({reflect: true}) roundedMedia: boolean = false;\n\n /**\n * Indicates the imgSrc of the card\n */\n @Prop({reflect: true}) imgSrc: string = '';\n\n /**\n * Indicates the img's alt of the card\n */\n @Prop({reflect: true}) imgAlt: string = '';\n\n /**\n * Indicates the videoSrc of the card\n */\n @Prop({reflect: true}) videoSrc: string = '';\n\n render() {\n return (\n <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n {this.videoSrc && !this.imgSrc ? \n <video autoplay> \n <source src={this.videoSrc} type=\"video/mp4\"/> \n <source src={this.videoSrc} type=\"video/mov\"/> \n <source src={this.videoSrc} type=\"video/webm\"/> \n </video> : ''}\n <div class=\"Content\">\n <slot name=\"body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-91a3ed32.js');
5
+ const index = require('./index-4b95f596.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  /*
9
- Stencil Client Patch Browser v4.12.4 | MIT Licensed | https://stenciljs.com
9
+ Stencil Client Patch Browser v4.12.6 | MIT Licensed | https://stenciljs.com
10
10
  */
11
11
  const patchBrowser = () => {
12
12
  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('jump-design-system.cjs.js', document.baseURI).href));
@@ -19,7 +19,7 @@ const patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]],["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-button.cjs",[[1,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]]], options);
22
+ return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -1 +1 @@
1
- {"file":"jump-design-system.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,oNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.12.4 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
1
+ {"file":"jump-design-system.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,oNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.12.6 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-91a3ed32.js');
5
+ const index = require('./index-4b95f596.js');
6
6
 
7
7
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-91a3ed32.js');
5
+ const index = require('./index-4b95f596.js');
6
6
 
7
7
  const jumpPaginationCss = ":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";
8
8
  const JumpPaginationStyle0 = jumpPaginationCss;
@@ -21,11 +21,11 @@ const JumpPagination = class {
21
21
  }
22
22
  render() {
23
23
  var _a;
24
- return (index.h(index.Host, { key: 'eacb989c1eafddab001bce8a3e7618b42e281604', class: "JumpPagination" }, index.h("div", { key: '52ebe6a91e9cde9f4bdcbad4be0a7e16d0a3867f', class: "JumpPagination__Wrapper" }, this.completeVersion &&
25
- index.h("div", { class: "elementsPerPage" }, index.h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { key: '97a70fd1f86f644ee0199f0a6f1945988579705c', class: "indicators" }, index.h("div", { key: '9e9a1c2f541b3aaad78105a58f051127770b6e4d', class: "elements" }, this.completeVersion ?
24
+ return (index.h(index.Host, { key: 'e19fd7770573042573cc19152c02c74054c80ca0', class: "JumpPagination" }, index.h("div", { key: '293584737d7a7d04e6d35756736f5041e79057bc', class: "JumpPagination__Wrapper" }, this.completeVersion &&
25
+ index.h("div", { class: "elementsPerPage" }, index.h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { key: 'abcc46875ebf0e3d6197b964b6ae5fc7d3478bd8', class: "indicators" }, index.h("div", { key: '4bf7e8c0470eb551389f35ac9325162a01ebdde2', class: "elements" }, this.completeVersion ?
26
26
  index.h("span", null, index.h("span", null, this.firstPage), " - ", index.h("span", null, this.currentPage), " di ", index.h("span", null, this.totalElements))
27
27
  :
28
- index.h("span", null, index.h("span", null, this.currentPage), " di ", index.h("span", null, this.lastPage))), index.h("div", { key: 'e7fe2402c2c6a1906f9f3bfc70cfde428590c964', class: "arrow" }, this.showAdditionalChrevrons && index.h("jump-icon", { name: "chevrons-left" }), index.h("jump-icon", { key: 'dadb4d94ce1bf31219adfa554a47b33f19b9b3a7', name: "chevron-left" }), index.h("jump-icon", { key: '841030e266c11bda6d75800bbc61f7e0899fd1ae', name: "chevron-right" }), this.showAdditionalChrevrons && index.h("jump-icon", { name: "chevrons-right" }))))));
28
+ index.h("span", null, index.h("span", null, this.currentPage), " di ", index.h("span", null, this.lastPage))), index.h("div", { key: '977288ffe184d14a7bf5b3fe8cb0d252324b303c', class: "arrow" }, this.showAdditionalChrevrons && index.h("jump-icon", { name: "chevrons-left" }), index.h("jump-icon", { key: 'b4707986287695a858e70ad2765f2b7e6a3d144c', name: "chevron-left" }), index.h("jump-icon", { key: '2cbe3824ee94c3d893784ffb78fefff385c714d3', name: "chevron-right" }), this.showAdditionalChrevrons && index.h("jump-icon", { name: "chevrons-right" }))))));
29
29
  }
30
30
  };
31
31
  JumpPagination.style = JumpPaginationStyle0;
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-91a3ed32.js');
5
+ const index = require('./index-4b95f596.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]],["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-button.cjs",[[1,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]]], options);
11
+ return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
@@ -1,12 +1,14 @@
1
1
  {
2
2
  "entries": [
3
3
  "components/app-icon/jump-icon.js",
4
+ "components/jump-badge/jump-badge.js",
4
5
  "components/jump-button/jump-button.js",
6
+ "components/jump-card/jump-card.js",
5
7
  "components/jump-pagination/jump-pagination.js"
6
8
  ],
7
9
  "compiler": {
8
10
  "name": "@stencil/core",
9
- "version": "4.12.4",
11
+ "version": "4.12.6",
10
12
  "typescriptVersion": "5.3.3"
11
13
  },
12
14
  "collections": [],
@@ -0,0 +1,25 @@
1
+ jump-badge {
2
+ --jump-badge-background: var(--primary-standard);
3
+ --jump-badge-color: #fff;
4
+ --jump-bafge-border-radius: 50px;
5
+ display: inline-flex;
6
+ color: var(--jump-badge-color);
7
+ background-color: var(--jump-badge-background);
8
+ align-items: center;
9
+ justify-content: center;
10
+ font-size: var(--fs-300);
11
+ font-weight: var(--fw-900);
12
+ line-height: 1;
13
+ border-radius: var(--jump-bafge-border-radius);
14
+ border: solid 1px var(--jump-bafge-border-radius);
15
+ white-space: nowrap;
16
+ padding: 0.35em 0.6em;
17
+ user-select: none;
18
+ cursor: inherit;
19
+ }
20
+ jump-badge[variant=primary] {
21
+ --jump-badge-background: var(--primary-standard);
22
+ }
23
+ jump-badge[variant=secondary] {
24
+ --jump-badge-background: var(--secondary-standard);
25
+ }
@@ -0,0 +1,62 @@
1
+ import { Host, h } from "@stencil/core";
2
+ export class AppCard {
3
+ constructor() {
4
+ this.label = '';
5
+ this.variant = 'primary';
6
+ }
7
+ render() {
8
+ return (h(Host, { key: '8a7bf8245f0edf5aa45f70be833001e7c2899a5e', variant: this.variant }, this.label));
9
+ }
10
+ static get is() { return "jump-badge"; }
11
+ static get originalStyleUrls() {
12
+ return {
13
+ "$": ["jump-badge.scss"]
14
+ };
15
+ }
16
+ static get styleUrls() {
17
+ return {
18
+ "$": ["jump-badge.css"]
19
+ };
20
+ }
21
+ static get properties() {
22
+ return {
23
+ "label": {
24
+ "type": "string",
25
+ "mutable": false,
26
+ "complexType": {
27
+ "original": "string",
28
+ "resolved": "string",
29
+ "references": {}
30
+ },
31
+ "required": false,
32
+ "optional": false,
33
+ "docs": {
34
+ "tags": [],
35
+ "text": "Indicates the label of the badge"
36
+ },
37
+ "attribute": "label",
38
+ "reflect": true,
39
+ "defaultValue": "''"
40
+ },
41
+ "variant": {
42
+ "type": "string",
43
+ "mutable": false,
44
+ "complexType": {
45
+ "original": "'primary'|'secondary'",
46
+ "resolved": "\"primary\" | \"secondary\"",
47
+ "references": {}
48
+ },
49
+ "required": false,
50
+ "optional": false,
51
+ "docs": {
52
+ "tags": [],
53
+ "text": "Indicates the variant of the badge"
54
+ },
55
+ "attribute": "variant",
56
+ "reflect": true,
57
+ "defaultValue": "'primary'"
58
+ }
59
+ };
60
+ }
61
+ }
62
+ //# sourceMappingURL=jump-badge.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"jump-badge.js","sourceRoot":"","sources":["../../../src/components/jump-badge/jump-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;qBAIqB,EAAE;uBAKe,SAAS;;IAEjE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-badge',\n styleUrl: 'jump-badge.scss',\n shadow: false,\n})\nexport class AppCard {\n /**\n * Indicates the label of the badge\n */\n @Prop({reflect: true}) label: string = '';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary' = 'primary';\n\n render() {\n return (\n <Host variant={this.variant}>\n {this.label}\n </Host>\n );\n }\n\n}\n"]}
@@ -0,0 +1,26 @@
1
+ export default {
2
+ title: 'Components/Badge/Primary',
3
+ tags: ['autodocs'],
4
+ argTypes: {
5
+ label: {
6
+ name: 'Scritta dentro il badge',
7
+ description: 'inserire la scritta che sarà visualizzata nel badge',
8
+ control: 'text',
9
+ },
10
+ variant: {
11
+ name: 'Colore del badge',
12
+ description: 'scegliere il colore dell badge',
13
+ control: 'options',
14
+ options: ['primary', 'secondary'],
15
+ },
16
+ }
17
+ };
18
+ const Template = (args) => {
19
+ var _a;
20
+ return `<jump-badge class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}">${args.label}</jump-badge>`;
21
+ };
22
+ export const Badge = Template.bind({});
23
+ Badge.args = {
24
+ label: 'badge'
25
+ };
26
+ //# sourceMappingURL=jump-badge.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"jump-badge.stories.js","sourceRoot":"","sources":["../../../src/components/jump-badge/jump-badge.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,yBAAyB;YAC/B,WAAW,EAAE,qDAAqD;YAClE,OAAO,EAAE,MAAM;SAChB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,gCAAgC;YAC7C,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;SAClC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;;IACxB,OAAO,sBAAsB,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,KAAK,IAAI,CAAC,KAAK,eAAe,CAAA;AAC7E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export default {\n title: 'Components/Badge/Primary',\n tags: ['autodocs'],\n argTypes: {\n label: {\n name: 'Scritta dentro il badge',\n description: 'inserire la scritta che sarà visualizzata nel badge',\n control: 'text',\n },\n variant: {\n name: 'Colore del badge',\n description: 'scegliere il colore dell badge',\n control: 'options',\n options: ['primary', 'secondary'],\n },\n }\n};\n\nconst Template = (args) => {\n return `<jump-badge class=\"${args.class ?? ''}\">${args.label}</jump-badge>`\n}\n\nexport const Badge = Template.bind({});\nBadge.args = {\n label: 'badge'\n};\n"]}
@@ -0,0 +1,10 @@
1
+ import { newE2EPage } from "@stencil/core/testing";
2
+ describe('jump-badge', () => {
3
+ it('renders', async () => {
4
+ const page = await newE2EPage();
5
+ await page.setContent('<jump-badge></jump-badge>');
6
+ const element = await page.find('jump-badge');
7
+ expect(element).toHaveClass('hydrated');
8
+ });
9
+ });
10
+ //# sourceMappingURL=jump-badge.e2e.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"jump-badge.e2e.js","sourceRoot":"","sources":["../../../../src/components/jump-badge/test/jump-badge.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;QAEnD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('jump-badge', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<jump-badge></jump-badge>');\n\n const element = await page.find('jump-badge');\n expect(element).toHaveClass('hydrated');\n });\n});\n"]}
@@ -0,0 +1,18 @@
1
+ import { newSpecPage } from "@stencil/core/testing";
2
+ import { AppCard } from "../jump-badge";
3
+ describe('jump-badge', () => {
4
+ it('renders', async () => {
5
+ const page = await newSpecPage({
6
+ components: [AppCard],
7
+ html: `<jump-badge></jump-badge>`,
8
+ });
9
+ expect(page.root).toEqualHtml(`
10
+ <jump-badge>
11
+ <mock:shadow-root>
12
+ <slot></slot>
13
+ </mock:shadow-root>
14
+ </jump-badge>
15
+ `);
16
+ });
17
+ });
18
+ //# sourceMappingURL=jump-badge.spec.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"jump-badge.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-badge/test/jump-badge.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { AppCard } from '../jump-badge';\n\ndescribe('jump-badge', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [AppCard],\n html: `<jump-badge></jump-badge>`,\n });\n expect(page.root).toEqualHtml(`\n <jump-badge>\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n </jump-badge>\n `);\n });\n});\n"]}
@@ -1,6 +1,6 @@
1
1
  import feather from "feather-icons";
2
2
  export default {
3
- title: 'Components/Atoms/Button',
3
+ title: 'Components/Button/Filled',
4
4
  tags: ['autodocs'],
5
5
  argTypes: {
6
6
  label: {
@@ -176,10 +176,13 @@ export default {
176
176
  };
177
177
  // TODO: non far passare gli undefined
178
178
  const Anchor = (args) => {
179
- return `<jump-button id="${args.id}" class="${args.class} "variant="${args.variant}" size="${args.size}" href="${args.href}" target="${args.target}" ariaLabel="${args.ariaLabel}" ${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${!args.label || args.iconOnly ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
179
+ var _a;
180
+ return `<jump-button id="${args.id}" class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" "variant="${args.variant}" size="${args.size}" href="${args.href}" target="${args.target}" ariaLabel="${args.ariaLabel}" ${args.pill == true ? ' pill' : ''} ${args.outline == true ? ' outline' : ''} ${args.text == true ? ' text' : ''} ${!args.label || args.iconOnly ? ' only-icon' : ''}>
181
+ ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''} ${!args.iconOnly ? args.label : ''} ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
180
182
  };
181
183
  const Button = (args) => {
182
- return `<jump-button id="${args.id}" class="${args.class} "variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''} ${!args.label || args.iconOnly ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
184
+ var _a;
185
+ return `<jump-button id="${args.id}" class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" "variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''} ${args.outline == true ? ' outline' : ''} ${args.text == true ? ' text' : ''} ${!args.label || args.iconOnly ? ' only-icon' : ''}> ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
183
186
  };
184
187
  const Template = (args) => `${args.href ? Anchor(args) : !args.label && !args.showIcon ? 'Errore nella configurazione del bottone' : Button(args)}`;
185
188
  // TODO: gestire la prop che è opzione: cmq se copio il codice e tolgo le props undefined dovrebbe andare tutto
@@ -435,7 +438,7 @@ TextWhite.args = {
435
438
  value: 'value bottone',
436
439
  ariaLabel: 'sono un bottone'
437
440
  };
438
- const TemplateWithIcon = (args) => `<jump-button id="${args.id}" class="${args.class} variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}> ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${args.label}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
441
+ const TemplateWithIcon = (args) => `<jump-button id="${args.id}" class="${args.class}" variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''} ${args.pill == true ? ' pill' : ''} ${args.outline == true ? ' outline' : ''} ${args.text == true ? ' text' : ''}> ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''} ${args.label} ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
439
442
  export const ButtonWithIcon = TemplateWithIcon.bind({});
440
443
  ButtonWithIcon.args = {
441
444
  label: 'Primary',
@@ -455,7 +458,7 @@ ButtonWithIcon.args = {
455
458
  };
456
459
  const TemplateWithOnlyIcon = (args) => `<jump-button
457
460
  id="${args.id}"
458
- class="${args.class}
461
+ class="${args.class}"
459
462
  variant="${args.variant}"
460
463
  size="${args.size}"
461
464
  type="${args.type}"
@@ -467,10 +470,9 @@ const TemplateWithOnlyIcon = (args) => `<jump-button
467
470
  ${args.outline == true ? ' outline' : ''}
468
471
  ${args.text == true ? ' text' : ''}
469
472
  ${!args.label ? ' only-icon' : ''}>
470
-
471
- ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
472
- ${args.label}
473
- ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
473
+ ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
474
+ ${args.label}
475
+ ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
474
476
 
475
477
  </jump-button>`;
476
478
  export const ButtonWithOnlyIconSquare = TemplateWithOnlyIcon.bind({});
@@ -574,4 +576,4 @@ CustomButton.args = {
574
576
  ariaLabel: 'sono un bottone',
575
577
  class: 'chat'
576
578
  };
577
- //# sourceMappingURL=jump-button.stories.js.map
579
+ //# sourceMappingURL=jump-button-filled.stories.js.map