@jumpgroup/jump-design-system 0.3.5 → 0.3.7
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.
- package/dist/cjs/jump-badge.cjs.entry.js +2 -2
- package/dist/cjs/jump-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js +4 -1
- package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js +8 -4
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-badge/jump-badge.css +8 -8
- package/dist/collection/components/jump-badge/jump-badge.js +5 -5
- package/dist/collection/components/jump-badge/jump-badge.js.map +1 -1
- package/dist/collection/components/jump-badge/jump-badge.stories.js +21 -10
- package/dist/collection/components/jump-badge/jump-badge.stories.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button-only-icon.stories.js +16 -7
- package/dist/collection/components/jump-button/jump-button-only-icon.stories.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css +1 -0
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js +26 -4
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js +7 -0
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js +21 -1
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js.map +1 -1
- package/dist/components/jump-badge2.js +6 -6
- package/dist/components/jump-badge2.js.map +1 -1
- package/dist/components/jump-card-ecommerce-option.js +6 -2
- package/dist/components/jump-card-ecommerce-option.js.map +1 -1
- package/dist/components/jump-card-ecommerce.js +11 -5
- package/dist/components/jump-card-ecommerce.js.map +1 -1
- package/dist/esm/jump-badge.entry.js +2 -2
- package/dist/esm/jump-badge.entry.js.map +1 -1
- package/dist/esm/jump-card-ecommerce-option.entry.js +4 -1
- package/dist/esm/jump-card-ecommerce-option.entry.js.map +1 -1
- package/dist/esm/jump-card-ecommerce.entry.js +8 -4
- package/dist/esm/jump-card-ecommerce.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-23fb306d.entry.js +2 -0
- package/dist/jump-design-system/p-23fb306d.entry.js.map +1 -0
- package/dist/jump-design-system/p-27fa0ba4.entry.js +2 -0
- package/dist/jump-design-system/p-27fa0ba4.entry.js.map +1 -0
- package/dist/jump-design-system/p-a5aaa1dd.entry.js +2 -0
- package/dist/jump-design-system/p-a5aaa1dd.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +8 -0
- package/dist/types/components/jump-badge/jump-badge.stories.d.ts +2 -2
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.d.ts +4 -0
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.stories.d.ts +5 -0
- package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.d.ts +1 -0
- package/dist/types/components.d.ts +10 -0
- package/package.json +1 -1
- package/dist/jump-design-system/p-8343b4f5.entry.js +0 -2
- package/dist/jump-design-system/p-8343b4f5.entry.js.map +0 -1
- package/dist/jump-design-system/p-b92e6459.entry.js +0 -2
- package/dist/jump-design-system/p-b92e6459.entry.js.map +0 -1
- package/dist/jump-design-system/p-bc64407a.entry.js +0 -2
- package/dist/jump-design-system/p-bc64407a.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-674508e2.js');
|
|
6
6
|
|
|
7
|
-
const jumpBadgeCss = ":host{--jump-badge-background:var(--primary-standard);--jump-badge-color
|
|
7
|
+
const jumpBadgeCss = ":host{--jump-badge-background:var(--primary-standard);--badge-color:var(--jump-badge-color, var(--neutral-white));--jump-badge-border-radius:50px;--jump-badge-border:var(--primary-standard);--jump-badge-padding:4px 12px;display:flex;width:fit-content;gap:0.5rem;color:var(--badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:1.2;border-radius:var(--jump-badge-border-radius);border:solid 1px var(--jump-badge-border);white-space:nowrap;padding:var(--jump-badge-padding);user-select:none;cursor:inherit}:host([variant=primary]):host([soft]){--jump-badge-background:var(--primary-soft);--badge-color:var(--primary-standard);--jump-badge-border:var(--primary-soft)}:host([variant=secondary]){--jump-badge-background:var(--secondary-standard);--jump-badge-border:var(--secondary-standard)}:host([variant=secondary]):host([soft]){--jump-badge-background:var(--secondary-soft);--badge-color:var(--secondary-standard);--jump-badge-border:var(--secondary-soft)}:host([variant=neutral]){--jump-badge-background:var(--neutral-grey-secondary);--jump-badge-border:var(--neutral-grey-secondary)}:host([variant=neutral]):host([soft]){--jump-badge-background:var(--neutral-grey-disabled);--badge-color:var(--neutral-grey-secondary);--jump-badge-border:var(--neutral-grey-disabled)}:host([variant=danger]){--jump-badge-background:var(--status-danger-standard);--jump-badge-border:var(--status-danger-standard)}:host([variant=danger]):host([soft]){--jump-badge-background:var(--status-danger-soft);--badge-color:var(--status-danger-standard);--jump-badge-border:var(--status-danger-soft)}:host([variant=success]){--jump-badge-background:var(--status-success-standard);--jump-badge-border:var(--status-success-standard)}:host([variant=success]):host([soft]){--jump-badge-background:var(--status-success-soft);--badge-color:var(--status-success-standard);--jump-badge-border:var(--status-success-soft)}:host([variant=warning]){--jump-badge-background:var(--status-warning-standard);--jump-badge-border:var(--status-warning-standard)}:host([variant=warning]):host([soft]){--jump-badge-background:var(--status-warning-soft);--badge-color:var(--status-warning-standard);--jump-badge-border:var(--status-warning-soft)}:host([dimension=small]){font-size:var(--fs-300)}:host([dimension=dot]){font-size:var(--fs-300);--jump-badge-padding:0 5px;--jump-badge-border-radius:50%}:host([dimension=microdot]){width:0.5rem;height:0.5rem;padding:0;--jump-badge-border-radius:50%}:host([outline]){background-color:var(--jump-badge-background-outline);border:1px solid var(--jump-badge-background);color:var(--jump-badge-background);background-color:transparent}";
|
|
8
8
|
const JumpBadgeStyle0 = jumpBadgeCss;
|
|
9
9
|
|
|
10
10
|
const AppBadge = class {
|
|
@@ -17,7 +17,7 @@ const AppBadge = class {
|
|
|
17
17
|
this.outline = false;
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return (index.h(index.Host, { key: '
|
|
20
|
+
return (index.h(index.Host, { key: '8dacecfae3bdd3b3a3bc7b89249db2f633b2f001' }, index.h("slot", { key: 'da4da1c4c23a614ff8c9c43189c9bb7a54ce426f', name: "prefix" }), this.label));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
AppBadge.style = JumpBadgeStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-badge.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"file":"jump-badge.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,yuFAAyuF,CAAC;AAC/vF,wBAAe,YAAY;;MCMd,QAAQ;;;qBAIK,EAAE;uBAKqE,SAAS;yBAKnC,OAAO;oBAKrC,KAAK;uBAKF,KAAK;;IAE/C,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,mEAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge&encapsulation=shadow","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":[":host {\n --jump-badge-background: var(--primary-standard);\n --badge-color: var(--jump-badge-color, var(--neutral-white));\n --jump-badge-border-radius: 50px;\n --jump-badge-border: var(--primary-standard);\n --jump-badge-padding: 4px 12px;\n\n display: flex;\n width: fit-content;\n gap: 0.5rem;\n color: var(--badge-color);\n background-color: var(--jump-badge-background);\n align-items: center;\n justify-content: center;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: 1.2;\n border-radius: var(--jump-badge-border-radius);\n border: solid 1px var(--jump-badge-border);\n white-space: nowrap;\n padding: var(--jump-badge-padding);\n user-select: none;\n cursor: inherit;\n}\n\n:host([variant='primary']) {\n &:host([soft]) {\n --jump-badge-background: var(--primary-soft);\n --badge-color: var(--primary-standard);\n --jump-badge-border: var(--primary-soft);\n }\n}\n\n:host([variant='secondary']) {\n --jump-badge-background: var(--secondary-standard);\n --jump-badge-border: var(--secondary-standard);\n\n &:host([soft]) {\n --jump-badge-background: var(--secondary-soft);\n --badge-color: var(--secondary-standard);\n --jump-badge-border: var(--secondary-soft);\n }\n}\n\n:host([variant='neutral']) {\n --jump-badge-background: var(--neutral-grey-secondary);\n --jump-badge-border: var(--neutral-grey-secondary);\n\n &:host([soft]) {\n --jump-badge-background: var(--neutral-grey-disabled);\n --badge-color: var(--neutral-grey-secondary);\n --jump-badge-border: var(--neutral-grey-disabled);\n }\n}\n\n:host([variant='danger']) {\n --jump-badge-background: var(--status-danger-standard);\n --jump-badge-border: var(--status-danger-standard);\n\n &:host([soft]) {\n --jump-badge-background: var(--status-danger-soft);\n --badge-color: var(--status-danger-standard);\n --jump-badge-border: var(--status-danger-soft);\n }\n}\n\n:host([variant='success']) {\n --jump-badge-background: var(--status-success-standard);\n --jump-badge-border: var(--status-success-standard);\n\n &:host([soft]) {\n --jump-badge-background: var(--status-success-soft);\n --badge-color: var(--status-success-standard);\n --jump-badge-border: var(--status-success-soft);\n }\n}\n\n:host([variant='warning']) {\n --jump-badge-background: var(--status-warning-standard);\n --jump-badge-border: var(--status-warning-standard);\n\n &:host([soft]) {\n --jump-badge-background: var(--status-warning-soft);\n --badge-color: var(--status-warning-standard);\n --jump-badge-border: var(--status-warning-soft);\n }\n}\n\n:host([dimension='small']) {\n font-size: var(--fs-300);\n}\n\n:host([dimension='dot']) {\n font-size: var(--fs-300);\n --jump-badge-padding: 0 5px;\n --jump-badge-border-radius: 50%;\n}\n\n:host([dimension='microdot']) {\n width: 0.5rem;\n height: 0.5rem;\n padding: 0;\n --jump-badge-border-radius: 50%;\n}\n\n:host([outline]) {\n background-color: var(--jump-badge-background-outline);\n border: 1px solid var(--jump-badge-background);\n color: var(--jump-badge-background);\n background-color: transparent;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-badge',\n styleUrl: 'jump-badge.scss',\n shadow: true,\n})\nexport class AppBadge {\n /**\n * Indicates the label of the badge\n */\n @Prop() label: string = '';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary'|'neutral'|'warning'|'success'|'danger' = 'primary';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) dimension: 'large'|'small'|'dot'|'microdot' = 'large';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) soft: boolean = false;\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) outline: boolean = false;\n\n render() {\n return (\n <Host>\n <slot name=\"prefix\"></slot>\n {this.label}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -15,16 +15,19 @@ const CardEcommerceOption = class {
|
|
|
15
15
|
this.imgUrl = undefined;
|
|
16
16
|
this.label = undefined;
|
|
17
17
|
this.sku = undefined;
|
|
18
|
+
this.taxonomy = undefined;
|
|
18
19
|
}
|
|
19
20
|
componentWillLoad() {
|
|
20
21
|
this.connectedEvent.emit({
|
|
21
22
|
code: this.code,
|
|
22
23
|
label: this.label,
|
|
23
24
|
imgUrl: this.imgUrl,
|
|
25
|
+
sku: this.sku,
|
|
26
|
+
taxonomy: this.taxonomy,
|
|
24
27
|
});
|
|
25
28
|
}
|
|
26
29
|
render() {
|
|
27
|
-
return index.h(index.Host, { key: '
|
|
30
|
+
return index.h(index.Host, { key: '2cb613a6943ff85b11b3daf50591377c464009c7' });
|
|
28
31
|
}
|
|
29
32
|
};
|
|
30
33
|
CardEcommerceOption.style = JumpCardEcommerceOptionStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-card-ecommerce-option.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,qBAAqB,CAAC;AACzD,sCAAe,0BAA0B;;MCM5B,mBAAmB
|
|
1
|
+
{"file":"jump-card-ecommerce-option.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,qBAAqB,CAAC;AACzD,sCAAe,0BAA0B;;MCM5B,mBAAmB;;;;;;;;;;IAS9B,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,OAAOA,QAACC,UAAI,sDAAQ,CAAC;KACtB;;;;;;","names":["h","Host"],"sources":["src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.scss?tag=jump-card-ecommerce-option&encapsulation=shadow","src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.tsx"],"sourcesContent":[":host {\n display: none;\n}\n","import { Component, Host, Event, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: \"jump-card-ecommerce-option\",\n styleUrl: \"jump-card-ecommerce-option.scss\",\n shadow: true,\n})\nexport class CardEcommerceOption {\n @Prop() code: string;\n @Prop() imgUrl: string;\n @Prop() label: string;\n @Prop() sku: string;\n @Prop() taxonomy: string;\n\n @Event({ eventName: \"jump-card-ecommerce-option-connected\" }) connectedEvent;\n\n componentWillLoad() {\n this.connectedEvent.emit({\n code: this.code,\n label: this.label,\n imgUrl: this.imgUrl,\n sku: this.sku,\n taxonomy: this.taxonomy,\n });\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-674508e2.js');
|
|
6
6
|
|
|
7
|
-
const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-top-left-radius:3px;border-top-right-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Product{font-size:var(--fs-400)}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
|
|
7
|
+
const jumpCardEcommerceCss = ":host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:2}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:2}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-top-left-radius:3px;border-top-right-radius:3px;aspect-ratio:1/1}:host .Media .Images{height:100%;margin:0;position:relative}:host .Media .Images img{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;overflow:hidden}:host .Media .Images__Front{z-index:1;transition:opacity 0.5s linear;cursor:pointer}:host .Media .Images.has-hover-image:hover .Images__Front{opacity:0}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box;z-index:2;transform:translate3d(0, 0, 0)}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Product{font-size:var(--fs-400)}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary);line-height:1.2}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px;z-index:2}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;column-gap:0.5rem;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host .SelectVariations select{appearance:none;background-color:transparent;border:1px solid var(--neutral-grey-secondary);border-radius:3px;color:var(--neutral-grey-secondary);font-size:var(--fs-300);padding:0.5rem 0.75rem;max-width:100%;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}.slide-in-bottom{animation:slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.slide-out-bottom{animation:slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both}.fade-in-out{animation-name:fade-in-out;animation-duration:6s;animation-timing-function:ease-in-out}@keyframes fade-in-out{from{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}";
|
|
8
8
|
const JumpCardEcommerceStyle0 = jumpCardEcommerceCss;
|
|
9
9
|
|
|
10
10
|
const JumpCardEcommerce = class {
|
|
@@ -19,6 +19,7 @@ const JumpCardEcommerce = class {
|
|
|
19
19
|
this.badge = undefined;
|
|
20
20
|
this.favorite = false;
|
|
21
21
|
this.hasFavorite = false;
|
|
22
|
+
this.favoriteBtnClass = undefined;
|
|
22
23
|
this.link = undefined;
|
|
23
24
|
this.img = undefined;
|
|
24
25
|
this.imgAlt = undefined;
|
|
@@ -41,12 +42,14 @@ const JumpCardEcommerce = class {
|
|
|
41
42
|
this.addedToCart = false;
|
|
42
43
|
this.endAddedToCart = false;
|
|
43
44
|
this.variations = [];
|
|
45
|
+
this.selectedVariation = undefined;
|
|
44
46
|
}
|
|
45
47
|
addOption(e) {
|
|
46
48
|
let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}
|
|
47
49
|
this.variations = [...this.variations, Object.assign({}, props)];
|
|
48
50
|
}
|
|
49
51
|
onVariationSelected(variation) {
|
|
52
|
+
this.selectedVariation = variation;
|
|
50
53
|
this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento
|
|
51
54
|
}
|
|
52
55
|
/* ---------------------- @LIFECYCLE ------------------------- */
|
|
@@ -79,12 +82,13 @@ const JumpCardEcommerce = class {
|
|
|
79
82
|
});
|
|
80
83
|
}
|
|
81
84
|
addProductToCart() {
|
|
82
|
-
var _a;
|
|
85
|
+
var _a, _b;
|
|
83
86
|
this.addedToCart = true;
|
|
84
87
|
const payload = {
|
|
85
88
|
productId: this.productId,
|
|
86
89
|
addedToCart: this.addedToCart,
|
|
87
|
-
quantity: (_a = this.quantity) !== null && _a !== void 0 ? _a : null
|
|
90
|
+
quantity: (_a = this.quantity) !== null && _a !== void 0 ? _a : null,
|
|
91
|
+
variation: (_b = this.selectedVariation) !== null && _b !== void 0 ? _b : null
|
|
88
92
|
};
|
|
89
93
|
this.productAddToCart.emit(payload);
|
|
90
94
|
setTimeout(() => {
|
|
@@ -108,7 +112,7 @@ const JumpCardEcommerce = class {
|
|
|
108
112
|
return discount.toFixed(0);
|
|
109
113
|
}
|
|
110
114
|
return (index.h(index.Host, null, this.badge ? index.h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', this.hasFavorite ?
|
|
111
|
-
index.h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'primary' : 'neutral', size: "small", text: true, onlyIcon: true }, index.h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'solid' : 'light', size: "medium" }))
|
|
115
|
+
index.h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass} ${this.favoriteBtnClass}`, variant: this.favorite ? 'primary' : 'neutral', size: "small", text: true, onlyIcon: true }, index.h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'solid' : 'light', size: "medium" }))
|
|
112
116
|
: null, index.h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, index.h("a", { href: this.link }, index.h("figure", { class: `Images ${hasImageOnHover} ` }, this.img && !this.videoSrc ? index.h("img", { class: "Images__Front", src: this.img, alt: this.imgAlt }) : '', this.hoverImg && !this.videoSrc ? index.h("img", { class: "Images__OnHover", src: this.hoverImg, alt: this.hoverImgAlt }) : ''), this.videoSrc && !this.img ?
|
|
113
117
|
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", { class: `NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}` }, index.h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, index.h("jump-icon", { slot: "prefix", name: "check" }), index.h("span", null, " ", this.notificationText, " "))), this.onlyIconButton ?
|
|
114
118
|
index.h("div", { class: "OnlyIconButton" }, index.h("jump-button", { variant: "secondary", size: "large", pill: true, onlyIcon: true, onClick: () => this.addProductToCart() }, index.h("jump-icon", { slot: "prefix", name: 'cart-shopping', category: "regular" })))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-card-ecommerce.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\n }\n\n .Favorite {\n position: absolute;\n top: 1rem;\n right: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n right: calc(1rem + 8px);\n }\n }\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n aspect-ratio: 1/1;\n\n .Images {\n height: 100%;\n margin: 0;\n position: relative;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\n\n &.has-hover-image {\n &:hover .Images__Front {\n opacity: 0;\n }\n }\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n\n &.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n }\n\n .NotificationCart {\n display: none;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2rem 1rem;\n background-color: hsl(0 0% 0% / 35%);\n box-sizing: border-box;\n z-index: 2;\n transform: translate3d(0, 0, 0);\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-padding) 0;\n\n & > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n & > * {\n flex: 0 1 auto;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Footer {\n line-height: var(--lh-400);\n justify-content: end;\n padding: var(--jump-card-padding) 0;\n align-items: flex-end;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n &.hasBackground {\n padding-bottom: 0;\n }\n\n &.iconOnly {\n padding: 0;\n }\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n z-index: 2;\n }\n\n .Price {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n grid-template-rows: 1.5rem 1.5rem auto;\n justify-items: end;\n align-items: end;\n column-gap: 0.5rem;\n\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n }\n\n .SelectVariations {\n select {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--neutral-grey-secondary);\n border-radius: 3px;\n color: var(--neutral-grey-secondary);\n font-size: var(--fs-300);\n padding: 0.5rem 0.75rem;\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n -webkit-print-color-adjust: exact;\n }\n }\n}\n\n.slide-in-bottom {\n animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.slide-out-bottom {\n animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;\n}\n\n.fade-in-out {\n animation-name: fade-in-out;\n animation-duration: 6s;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes fade-in-out {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n\n 50% {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen} from '@stencil/core';\n\ninterface Variation {\n code: string;\n imgUrl: string;\n label: string;\n // Add more keys as needed\n}\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicate if card has only icon button*/\n @Prop() onlyIconButton: boolean = false;\n\n /** Indicate if card has background*/\n @Prop() hasBackground: boolean = false;\n\n /** Indicates the badge of the card*/\n @Prop() badge: string;\n \n /** Indicates if the product is favorite */\n \n @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n /** Indicate if the whislist is active in shop*/\n @Prop() hasFavorite: boolean = false;\n\n /** Indicates the link of the card*/\n @Prop() link: string;\n\n /** Indicates the image's src of the card*/\n @Prop() img: string ;\n\n /** Indicates the img's alt of the card*/\n @Prop() imgAlt: string;\n\n /** Indicates the over image's src of the card*/\n @Prop() hoverImg: string ;\n\n /** Indicates the hover img's alt of the card*/\n @Prop() hoverImgAlt: string;\n\n /** Indicates the videoSrc of the card*/\n @Prop() videoSrc: string; \n\n /** Indicates the notificationUrl of the card*/\n @Prop() notificationUrl: string;\n\n /** Indicates the notificationText of the card*/\n @Prop() notificationText: string = '';\n\n /** Indicates the title of the card*/\n @Prop() productName: string ;\n\n /** Indicates the subtitle of the card*/\n @Prop() subtitle: string;\n\n /** Indicates the ID of the product, can be also a SKU*/\n @Prop() productId: string ;\n\n /** Indicates the price of the card */\n @Prop() price: number;\n\n /** Indicates the sale price of the card */\n @Prop() salePrice: number;\n\n /** Indicates the currency of the card */\n @Prop() currency: string = '€';\n\n /** Indicates if the product is outOfStock */\n @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n \n /** Indicates the outOfStockText of the product*/\n @Prop() outOfStockText: string;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() addToCartText: string ;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() waitingListText: string ;\n\n /** Indicate if the user request to be notified when te product is avaible*/\n @Prop() addToWaitingList: boolean = false;\n\n /* ---------------------- @STATE ------------------------- */ \n\n /** Indicate if the product is added to cart --> non deve esserci nelle storie! */ \n @Prop() addedToCart: boolean = false;\n\n @Prop() endAddedToCart: boolean = false;\n\n @State() variations: Variation[] = [];\n\n // è una proprietà che viene cambiata solo da dentro\n quantity: number;\n\n variationSelectEl: HTMLSelectElement;\n\n /* ---------------------- @EVENTS ------------------------- */\n \n @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n @Listen(\"jump-card-ecommerce-option-connected\")\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n this.variations = [...this.variations, { ...props }];\n }\n\n onVariationSelected(variation) {\n this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n }\n \n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentWillLoad() {}\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n \n if(this.jumpQuantityEl){\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n }\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.removeEventListener('jump-change',this.onQuantityChange);\n }\n }\n\n /* ---------------------- @METHODS ------------------------- */\n onQuantityChange(e) {\n this.quantity = e.detail.value ?? false;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite\n }\n ); \n }\n\n addProductToCart() {\n this.addedToCart = true;\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null\n };\n this.productAddToCart.emit(payload);\n\n setTimeout(() => {\n this.addedToCart = false;\n }, 6000);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList\n }\n )\n }\n\n render() {\n const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\n function calculateDiscount(price: number, salePrice: number): string {\n const discount = ((price - salePrice) / price) * 100;\n return discount.toFixed(0);\n };\n\n return (\n <Host>\n {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" label={this.badge}></jump-badge> : ''}\n \n {this.hasFavorite ? \n <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button> \n : null}\n\n <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} `}>\n {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n {this.hoverImg && !this.videoSrc ? <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n </figure>\n {this.videoSrc && !this.img ? \n <video autoplay> \n <source src={this.videoSrc} type=\"video/mp4\"/> \n <source src={this.videoSrc} type=\"video/mov\"/> \n <source src={this.videoSrc} type=\"video/webm\"/> \n </video> : ''}\n </a> \n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text> \n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon> \n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n {this.onlyIconButton ? \n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}> \n <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon> \n </jump-button> \n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n <div>\n <div class=\"Info\">\n <div class=\"Product\">{this.productName}</div>\n {this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n </div>\n\n {this.price ? \n <div class=\"Price\">\n {this.salePrice && this.salePrice != 0 ? \n <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n : null}\n <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n {this.currency}{this.price}\n </div>\n {this.salePrice ? \n <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n : null}\n </div>\n : null}\n </div>\n \n <div class=\"SelectVariations\">\n {this.variations.length != 0 ? \n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n let currentValue = this.variationSelectEl.value;\n let currentVariation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\n this.onVariationSelected(currentVariation);\n }}\n >\n {this.variations\n .filter((variation) => !variation.imgUrl)\n .map((variation) => (\n <option value={variation.code}>{variation.label}</option>\n ))}\n </select>\n : null }\n </div>\n <slot name=\"quantity\"></slot>\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\n \n {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n \n { this.outOfStock ? \n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}> \n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'} \n </jump-button> : ''\n }\n\n { !this.outOfStock && !this.onlyIconButton ? \n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}> \n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n {this.addToCartText ? this.addToCartText : 'Aggiungi al carrello'} \n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}"],"version":3}
|
|
1
|
+
{"file":"jump-card-ecommerce.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\n }\n\n .Favorite {\n position: absolute;\n top: 1rem;\n right: 1rem;\n z-index: 2;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n right: calc(1rem + 8px);\n }\n }\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n aspect-ratio: 1/1;\n\n .Images {\n height: 100%;\n margin: 0;\n position: relative;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\n\n &.has-hover-image {\n &:hover .Images__Front {\n opacity: 0;\n }\n }\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n\n &.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n }\n\n .NotificationCart {\n display: none;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2rem 1rem;\n background-color: hsl(0 0% 0% / 35%);\n box-sizing: border-box;\n z-index: 2;\n transform: translate3d(0, 0, 0);\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-padding) 0;\n\n & > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n & > * {\n flex: 0 1 auto;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Footer {\n line-height: var(--lh-400);\n justify-content: end;\n padding: var(--jump-card-padding) 0;\n align-items: flex-end;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n &.hasBackground {\n padding-bottom: 0;\n }\n\n &.iconOnly {\n padding: 0;\n }\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n z-index: 2;\n }\n\n .Price {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n grid-template-rows: 1.5rem 1.5rem auto;\n justify-items: end;\n align-items: end;\n column-gap: 0.5rem;\n\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n }\n\n .SelectVariations {\n select {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--neutral-grey-secondary);\n border-radius: 3px;\n color: var(--neutral-grey-secondary);\n font-size: var(--fs-300);\n padding: 0.5rem 0.75rem;\n max-width: 100%;\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n -webkit-print-color-adjust: exact;\n }\n }\n}\n\n.slide-in-bottom {\n animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.slide-out-bottom {\n animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;\n}\n\n.fade-in-out {\n animation-name: fade-in-out;\n animation-duration: 6s;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes fade-in-out {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n\n 50% {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen} from '@stencil/core';\n\ninterface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n // Add more keys as needed\n}\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicate if card has only icon button*/\n @Prop() onlyIconButton: boolean = false;\n\n /** Indicate if card has background*/\n @Prop() hasBackground: boolean = false;\n\n /** Indicates the badge of the card*/\n @Prop() badge: string;\n\n /** Indicates if the product is favorite */\n\n @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n /** Indicate if the whislist is active in shop*/\n @Prop() hasFavorite: boolean = false;\n\n /** Give possibility to add classes to icon favorite*/\n @Prop() favoriteBtnClass: string;\n\n /** Indicates the link of the card*/\n @Prop() link: string;\n\n /** Indicates the image's src of the card*/\n @Prop() img: string ;\n\n /** Indicates the img's alt of the card*/\n @Prop() imgAlt: string;\n\n /** Indicates the over image's src of the card*/\n @Prop() hoverImg: string ;\n\n /** Indicates the hover img's alt of the card*/\n @Prop() hoverImgAlt: string;\n\n /** Indicates the videoSrc of the card*/\n @Prop() videoSrc: string;\n\n /** Indicates the notificationUrl of the card*/\n @Prop() notificationUrl: string;\n\n /** Indicates the notificationText of the card*/\n @Prop() notificationText: string = '';\n\n /** Indicates the title of the card*/\n @Prop() productName: string ;\n\n /** Indicates the subtitle of the card*/\n @Prop() subtitle: string;\n\n /** Indicates the ID of the product, can be also a SKU*/\n @Prop() productId: string ;\n\n /** Indicates the price of the card */\n @Prop() price: number;\n\n /** Indicates the sale price of the card */\n @Prop() salePrice: number;\n\n /** Indicates the currency of the card */\n @Prop() currency: string = '€';\n\n /** Indicates if the product is outOfStock */\n @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n\n /** Indicates the outOfStockText of the product*/\n @Prop() outOfStockText: string;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() addToCartText: string ;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() waitingListText: string ;\n\n /** Indicate if the user request to be notified when te product is avaible*/\n @Prop() addToWaitingList: boolean = false;\n\n /* ---------------------- @STATE ------------------------- */\n\n /** Indicate if the product is added to cart --> non deve esserci nelle storie! */\n @Prop() addedToCart: boolean = false;\n\n @Prop() endAddedToCart: boolean = false;\n\n @State() variations: Variation[] = [];\n\n @State() selectedVariation: Variation;\n\n // è una proprietà che viene cambiata solo da dentro\n quantity: number;\n\n variationSelectEl: HTMLSelectElement;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n @Listen(\"jump-card-ecommerce-option-connected\")\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n this.variations = [...this.variations, { ...props }];\n }\n\n onVariationSelected(variation) {\n this.selectedVariation = variation;\n this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n }\n\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentWillLoad() {}\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n }\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.removeEventListener('jump-change',this.onQuantityChange);\n }\n }\n\n /* ---------------------- @METHODS ------------------------- */\n onQuantityChange(e) {\n this.quantity = e.detail.value ?? false;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite\n }\n );\n }\n\n addProductToCart() {\n this.addedToCart = true;\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: this.selectedVariation ?? null\n };\n this.productAddToCart.emit(payload);\n\n setTimeout(() => {\n this.addedToCart = false;\n }, 6000);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList\n }\n )\n }\n\n render() {\n const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\n function calculateDiscount(price: number, salePrice: number): string {\n const discount = ((price - salePrice) / price) * 100;\n return discount.toFixed(0);\n };\n\n return (\n <Host>\n {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" label={this.badge}></jump-badge> : ''}\n \n {this.hasFavorite ? \n <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass} ${this.favoriteBtnClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n : null}\n\n <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} `}>\n {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n {this.hoverImg && !this.videoSrc ? <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n </figure>\n {this.videoSrc && !this.img ?\n <video autoplay>\n <source src={this.videoSrc} type=\"video/mp4\"/>\n <source src={this.videoSrc} type=\"video/mov\"/>\n <source src={this.videoSrc} type=\"video/webm\"/>\n </video> : ''}\n </a>\n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text>\n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon>\n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n {this.onlyIconButton ?\n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon>\n </jump-button>\n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n <div>\n <div class=\"Info\">\n <div class=\"Product\">{this.productName}</div>\n {this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class=\"Price\">\n {this.salePrice && this.salePrice != 0 ?\n <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n : null}\n <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}>\n {this.currency}{this.price}\n </div>\n {this.salePrice ?\n <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n : null}\n </div>\n : null}\n </div>\n\n <div class=\"SelectVariations\">\n {this.variations.length != 0 ?\n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n let currentValue = this.variationSelectEl.value;\n let currentVariation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\n this.onVariationSelected(currentVariation);\n }}\n >\n {this.variations\n .filter((variation) => !variation.imgUrl)\n .map((variation) => (\n <option value={variation.code}>{variation.label}</option>\n ))}\n </select>\n : null }\n </div>\n <slot name=\"quantity\"></slot>\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\n\n {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n { this.outOfStock ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'}\n </jump-button> : ''\n }\n\n { !this.outOfStock && !this.onlyIconButton ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.addToCartText ? this.addToCartText : 'Aggiungi al carrello'}\n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -19,7 +19,7 @@ const patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["jump-button_2.cjs",[[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"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion.cjs",[[1,"jump-accordion"]]],["jump-card.cjs",[[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"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[
|
|
22
|
+
return index.bootstrapLazy([["jump-button_2.cjs",[[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"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"favoriteBtnClass":[1,"favorite-btn-class"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion.cjs",[[1,"jump-accordion"]]],["jump-card.cjs",[[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"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
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-button_2.cjs",[[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"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion.cjs",[[1,"jump-accordion"]]],["jump-card.cjs",[[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"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[
|
|
11
|
+
return index.bootstrapLazy([["jump-button_2.cjs",[[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"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"favoriteBtnClass":[1,"favorite-btn-class"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion.cjs",[[1,"jump-accordion"]]],["jump-card.cjs",[[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"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
--jump-badge-background: var(--primary-standard);
|
|
3
|
-
--jump-badge-color
|
|
3
|
+
--badge-color: var(--jump-badge-color, var(--neutral-white));
|
|
4
4
|
--jump-badge-border-radius: 50px;
|
|
5
5
|
--jump-badge-border: var(--primary-standard);
|
|
6
6
|
--jump-badge-padding: 4px 12px;
|
|
7
7
|
display: flex;
|
|
8
8
|
width: fit-content;
|
|
9
9
|
gap: 0.5rem;
|
|
10
|
-
color: var(--
|
|
10
|
+
color: var(--badge-color);
|
|
11
11
|
background-color: var(--jump-badge-background);
|
|
12
12
|
align-items: center;
|
|
13
13
|
justify-content: center;
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
:host([variant=primary]):host([soft]) {
|
|
27
27
|
--jump-badge-background: var(--primary-soft);
|
|
28
|
-
--
|
|
28
|
+
--badge-color: var(--primary-standard);
|
|
29
29
|
--jump-badge-border: var(--primary-soft);
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
}
|
|
36
36
|
:host([variant=secondary]):host([soft]) {
|
|
37
37
|
--jump-badge-background: var(--secondary-soft);
|
|
38
|
-
--
|
|
38
|
+
--badge-color: var(--secondary-standard);
|
|
39
39
|
--jump-badge-border: var(--secondary-soft);
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
}
|
|
46
46
|
:host([variant=neutral]):host([soft]) {
|
|
47
47
|
--jump-badge-background: var(--neutral-grey-disabled);
|
|
48
|
-
--
|
|
48
|
+
--badge-color: var(--neutral-grey-secondary);
|
|
49
49
|
--jump-badge-border: var(--neutral-grey-disabled);
|
|
50
50
|
}
|
|
51
51
|
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
}
|
|
56
56
|
:host([variant=danger]):host([soft]) {
|
|
57
57
|
--jump-badge-background: var(--status-danger-soft);
|
|
58
|
-
--
|
|
58
|
+
--badge-color: var(--status-danger-standard);
|
|
59
59
|
--jump-badge-border: var(--status-danger-soft);
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
}
|
|
66
66
|
:host([variant=success]):host([soft]) {
|
|
67
67
|
--jump-badge-background: var(--status-success-soft);
|
|
68
|
-
--
|
|
68
|
+
--badge-color: var(--status-success-standard);
|
|
69
69
|
--jump-badge-border: var(--status-success-soft);
|
|
70
70
|
}
|
|
71
71
|
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
}
|
|
76
76
|
:host([variant=warning]):host([soft]) {
|
|
77
77
|
--jump-badge-background: var(--status-warning-soft);
|
|
78
|
-
--
|
|
78
|
+
--badge-color: var(--status-warning-standard);
|
|
79
79
|
--jump-badge-border: var(--status-warning-soft);
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -8,7 +8,7 @@ export class AppBadge {
|
|
|
8
8
|
this.outline = false;
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: '8dacecfae3bdd3b3a3bc7b89249db2f633b2f001' }, h("slot", { key: 'da4da1c4c23a614ff8c9c43189c9bb7a54ce426f', name: "prefix" }), this.label));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "jump-badge"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -57,7 +57,7 @@ export class AppBadge {
|
|
|
57
57
|
"text": "Indicates the variant of the badge"
|
|
58
58
|
},
|
|
59
59
|
"attribute": "variant",
|
|
60
|
-
"reflect":
|
|
60
|
+
"reflect": true,
|
|
61
61
|
"defaultValue": "'primary'"
|
|
62
62
|
},
|
|
63
63
|
"dimension": {
|
|
@@ -75,7 +75,7 @@ export class AppBadge {
|
|
|
75
75
|
"text": "Indicates the variant of the badge"
|
|
76
76
|
},
|
|
77
77
|
"attribute": "dimension",
|
|
78
|
-
"reflect":
|
|
78
|
+
"reflect": true,
|
|
79
79
|
"defaultValue": "'large'"
|
|
80
80
|
},
|
|
81
81
|
"soft": {
|
|
@@ -93,7 +93,7 @@ export class AppBadge {
|
|
|
93
93
|
"text": "Indicates the variant of the badge"
|
|
94
94
|
},
|
|
95
95
|
"attribute": "soft",
|
|
96
|
-
"reflect":
|
|
96
|
+
"reflect": true,
|
|
97
97
|
"defaultValue": "false"
|
|
98
98
|
},
|
|
99
99
|
"outline": {
|
|
@@ -111,7 +111,7 @@ export class AppBadge {
|
|
|
111
111
|
"text": "Indicates the variant of the badge"
|
|
112
112
|
},
|
|
113
113
|
"attribute": "outline",
|
|
114
|
-
"reflect":
|
|
114
|
+
"reflect": true,
|
|
115
115
|
"defaultValue": "false"
|
|
116
116
|
}
|
|
117
117
|
};
|
|
@@ -1 +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,QAAQ;;qBAIK,EAAE;
|
|
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,QAAQ;;qBAIK,EAAE;uBAKqE,SAAS;yBAKnC,OAAO;oBAKrC,KAAK;uBAKF,KAAK;;IAE/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,QAAQ,GAAQ;YAC1B,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: true,\n})\nexport class AppBadge {\n /**\n * Indicates the label of the badge\n */\n @Prop() label: string = '';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary'|'neutral'|'warning'|'success'|'danger' = 'primary';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) dimension: 'large'|'small'|'dot'|'microdot' = 'large';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) soft: boolean = false;\n\n /**\n * Indicates the variant of the badge\n */\n @Prop({reflect: true}) outline: boolean = false;\n\n render() {\n return (\n <Host>\n <slot name=\"prefix\"></slot>\n {this.label}\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -76,16 +76,8 @@ Outline.args = {
|
|
|
76
76
|
soft: false,
|
|
77
77
|
dimension: 'large'
|
|
78
78
|
};
|
|
79
|
-
export const
|
|
80
|
-
|
|
81
|
-
label: 'badge',
|
|
82
|
-
variant: 'neutral',
|
|
83
|
-
outline: false,
|
|
84
|
-
soft: true,
|
|
85
|
-
dimension: 'large'
|
|
86
|
-
};
|
|
87
|
-
export const Small = Template.bind({});
|
|
88
|
-
Small.args = {
|
|
79
|
+
export const SoftSmall = Template.bind({});
|
|
80
|
+
SoftSmall.args = {
|
|
89
81
|
label: 'badge',
|
|
90
82
|
variant: 'warning',
|
|
91
83
|
outline: false,
|
|
@@ -108,4 +100,23 @@ MicroDot.args = {
|
|
|
108
100
|
soft: false,
|
|
109
101
|
dimension: 'microdot'
|
|
110
102
|
};
|
|
103
|
+
const TemplateOverride = (args) => {
|
|
104
|
+
const attributes = generateAttributesFromArgs(args);
|
|
105
|
+
return `<jump-badge ${attributes}>${args.label}</jump-badge>
|
|
106
|
+
<style>
|
|
107
|
+
// per overridare il css del componente:
|
|
108
|
+
// html, body jump-badge {
|
|
109
|
+
// --jump-badge-background: var(--secondary-standard);
|
|
110
|
+
// }
|
|
111
|
+
</style>
|
|
112
|
+
`;
|
|
113
|
+
};
|
|
114
|
+
export const Override = TemplateOverride.bind({});
|
|
115
|
+
Override.args = {
|
|
116
|
+
label: 'badge',
|
|
117
|
+
variant: 'primary',
|
|
118
|
+
outline: false,
|
|
119
|
+
soft: false,
|
|
120
|
+
dimension: 'large'
|
|
121
|
+
};
|
|
111
122
|
//# sourceMappingURL=jump-badge.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-badge.stories.js","sourceRoot":"","sources":["../../../src/components/jump-badge/jump-badge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,qDAAqD;YAClE,OAAO,EAAE,MAAM;SAChB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,gCAAgC;YAC7C,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,SAAS;gBACT,SAAS;gBACT,QAAQ;aACT;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,4DAA4D;YACzE,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,sDAAsD;YACnE,OAAO,EAAE,SAAS;SACnB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO;gBACP,OAAO;gBACP,KAAK;gBACL,UAAU;aACX;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,eAAe,UAAU,IAAI,IAAI,CAAC,KAAK,eAAe,CAAA;AAC/D,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC5B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,eAAe,UAAU,uFAAuF,IAAI,CAAC,KAAK,eAAe,CAAA;AAClJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,KAAK;IACX,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,KAAK;IACX,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,KAAK;IACX,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"jump-badge.stories.js","sourceRoot":"","sources":["../../../src/components/jump-badge/jump-badge.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Badge/Badge',\n tags: ['autodocs'],\n argTypes: {\n label: {\n name: 'label',\n description: 'inserire la scritta che sarà visualizzata nel badge',\n control: 'text',\n },\n variant: {\n name: 'variant',\n description: 'scegliere il colore dell badge',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'warning',\n 'success',\n 'danger',\n ],\n },\n outline: {\n name: 'outline',\n description: 'scegliere se il badge deve essere pieno o solo il contorno',\n control: 'boolean',\n },\n soft: {\n name: 'soft',\n description: 'scegliere se il badge deve avere i bordi arrotondati',\n control: 'boolean',\n },\n dimension: {\n name: 'dimension',\n description: 'scegliere la dimensione del badge',\n control: 'select',\n options: [\n 'large',\n 'small',\n 'dot',\n 'microdot',\n ],\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-badge ${attributes}>${args.label}</jump-badge>`\n}\n\nconst TemplateIcon = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-badge ${attributes}><jump-icon slot=\"prefix\" name=\"circle-exclamation\" category=\"regular\"></jump-icon> ${args.label}</jump-badge>`\n}\n\nexport const Badge = Template.bind({});\nBadge.args = {\n label: 'badge',\n variant: 'primary',\n outline: false,\n soft: false,\n dimension: 'large'\n};\n\nexport const IconBadge = TemplateIcon.bind({});\nIconBadge.args = {\n label: 'badge',\n variant: 'secondary',\n outline: false,\n soft: false,\n dimension: 'large'\n};\n\nexport const Outline = Template.bind({});\nOutline.args = {\n label: 'badge',\n variant: 'secondary',\n outline: true,\n soft: false,\n dimension: 'large'\n};\n\nexport const SoftSmall = Template.bind({});\nSoftSmall.args = {\n label: 'badge',\n variant: 'warning',\n outline: false,\n soft: true,\n dimension: 'small'\n};\n\nexport const Dot = Template.bind({});\nDot.args = {\n label: '1',\n variant: 'success',\n outline: false,\n soft: true,\n dimension: 'dot'\n};\n\nexport const MicroDot = Template.bind({});\nMicroDot.args = {\n label: '',\n variant: 'danger',\n outline: false,\n soft: false,\n dimension: 'microdot'\n};\n\n\nconst TemplateOverride = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-badge ${attributes}>${args.label}</jump-badge>\n <style>\n // per overridare il css del componente:\n // html, body jump-badge {\n // --jump-badge-background: var(--secondary-standard);\n // }\n </style>\n `\n}\n\nexport const Override = TemplateOverride.bind({});\nOverride.args = {\n label: 'badge',\n variant: 'primary',\n outline: false,\n soft: false,\n dimension: 'large'\n};"]}
|