@jumpgroup/jump-design-system 1.0.18 → 1.0.20
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-card-ecommerce-showcase.cjs.entry.js +2 -2
- package/dist/cjs/jump-card-ecommerce-showcase.cjs.entry.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.css +8 -2
- package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.js +1 -1
- package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.js +0 -14
- package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.js.map +1 -1
- package/dist/components/jump-card-ecommerce-showcase.js +2 -2
- package/dist/components/jump-card-ecommerce-showcase.js.map +1 -1
- package/dist/esm/jump-card-ecommerce-showcase.entry.js +2 -2
- package/dist/esm/jump-card-ecommerce-showcase.entry.js.map +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/{p-3952598a.entry.js → p-0867da55.entry.js} +2 -2
- package/dist/jump-design-system/p-0867da55.entry.js.map +1 -0
- package/dist/types/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.d.ts +0 -14
- package/package.json +1 -1
- package/dist/jump-design-system/p-3952598a.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-e9479989.js');
|
|
6
6
|
|
|
7
|
-
const jumpCardEcommerceShowcaseCss = ":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images img {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n}\n:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height:
|
|
7
|
+
const jumpCardEcommerceShowcaseCss = ":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images img {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n}\n:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 4.5rem;\n }\n}\n:host .Body.is-vertical .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n@container (max-width: 239px) {\n :host .Body .Body__Top {\n flex-direction: column;\n }\n :host .Body .Body__Bottom {\n flex-direction: column;\n }\n :host .Body .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n }\n :host .Body .SelectVariations select {\n width: 100%;\n }\n :host .Body .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n}\n:host .Body.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n}\n:host .Body.iconOnly {\n padding: 0;\n}\n:host .Body.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n}\n:host .Body.is-mini > * {\n flex-direction: column;\n}\n:host .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n}\n:host .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n}\n:host .Subtitle:hover {\n cursor: pointer;\n}\n:host .OutOfStock, :host .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n}\n:host .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n}\n:host .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\n}\n:host .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 margin-top: 0;\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n}\n:host .Price > * {\n display: inline-flex;\n}\n:host .Price__Regular {\n text-align: right;\n}\n:host .Price__Regular.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:host .Price__Sale {\n grid-column: 2;\n grid-row: 2;\n}\n:host .Price__Discount {\n color: var(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n}\n:host .Price.is-mini {\n display: flex;\n font-size: var(--fs-400);\n}";
|
|
8
8
|
const JumpCardEcommerceShowcaseStyle0 = jumpCardEcommerceShowcaseCss;
|
|
9
9
|
|
|
10
10
|
const JumpCardEcommerceShowcase = class {
|
|
@@ -90,7 +90,7 @@ const JumpCardEcommerceShowcase = class {
|
|
|
90
90
|
index.h("div", { class: "Price__Sale" }, this.currency, this.salePriceFormatted)
|
|
91
91
|
: null)
|
|
92
92
|
: null, this.outOfStock ?
|
|
93
|
-
index.h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : index.h("div", { class: "
|
|
93
|
+
index.h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : index.h("div", { class: "AvailableStock" }, this.availableText ? this.availableText : 'Disponibile'))))));
|
|
94
94
|
}
|
|
95
95
|
get JumpCardEcommerceShowcase() { return index.getElement(this); }
|
|
96
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-card-ecommerce-showcase.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\n }\n\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-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 position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 3.2rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\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 margin-top: 0;\n \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(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"Available\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"version":3}
|
|
1
|
+
{"file":"jump-card-ecommerce-showcase.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\n }\n\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-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 position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 4.5rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock, .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n }\n\n .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n }\n\n .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\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 margin-top: 0;\n \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(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"AvailableStock\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"version":3}
|
package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.css
CHANGED
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
}
|
|
169
169
|
@container (max-width: 239px) {
|
|
170
170
|
:host .Body.is-vertical .Body__Top .Subtitle {
|
|
171
|
-
min-height:
|
|
171
|
+
min-height: 4.5rem;
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
:host .Body.is-vertical .Price {
|
|
@@ -225,12 +225,18 @@
|
|
|
225
225
|
:host .Subtitle:hover {
|
|
226
226
|
cursor: pointer;
|
|
227
227
|
}
|
|
228
|
-
:host .OutOfStock {
|
|
228
|
+
:host .OutOfStock, :host .AvailableStock {
|
|
229
229
|
justify-items: start;
|
|
230
230
|
font-size: var(--fs-300);
|
|
231
231
|
font-weight: var(--fw-900);
|
|
232
|
+
margin-top: 0.5rem;
|
|
233
|
+
}
|
|
234
|
+
:host .OutOfStock {
|
|
232
235
|
color: var(--jump-card-ecommerce-showcase-out-of-stock-color);
|
|
233
236
|
}
|
|
237
|
+
:host .AvailableStock {
|
|
238
|
+
color: var(--jump-card-ecommerce-showcase-available-color);
|
|
239
|
+
}
|
|
234
240
|
:host .Price {
|
|
235
241
|
position: relative;
|
|
236
242
|
display: grid;
|
package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.js
CHANGED
|
@@ -81,7 +81,7 @@ export class JumpCardEcommerceShowcase {
|
|
|
81
81
|
h("div", { class: "Price__Sale" }, this.currency, this.salePriceFormatted)
|
|
82
82
|
: null)
|
|
83
83
|
: null, this.outOfStock ?
|
|
84
|
-
h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : h("div", { class: "
|
|
84
|
+
h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : h("div", { class: "AvailableStock" }, this.availableText ? this.availableText : 'Disponibile'))))));
|
|
85
85
|
}
|
|
86
86
|
static get is() { return "jump-card-ecommerce-showcase"; }
|
|
87
87
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-card-ecommerce-showcase.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"Available\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"]}
|
|
1
|
+
{"version":3,"file":"jump-card-ecommerce-showcase.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"AvailableStock\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"]}
|
|
@@ -24,10 +24,6 @@ export default {
|
|
|
24
24
|
description: 'Url dell\'immagine da visualizzare, si attiva solo se non è presente video-src',
|
|
25
25
|
control: 'text',
|
|
26
26
|
defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',
|
|
27
|
-
if: {
|
|
28
|
-
arg: 'videoSrc',
|
|
29
|
-
exists: false
|
|
30
|
-
}
|
|
31
27
|
},
|
|
32
28
|
imgAlt: {
|
|
33
29
|
name: 'img-alt',
|
|
@@ -38,16 +34,6 @@ export default {
|
|
|
38
34
|
exists: true
|
|
39
35
|
}
|
|
40
36
|
},
|
|
41
|
-
hoverImg: {
|
|
42
|
-
name: 'hover-img',
|
|
43
|
-
description: 'Url dell\'immagine in hover da visualizzare, si attiva solo se non è presente videoSrc',
|
|
44
|
-
control: 'text',
|
|
45
|
-
defaultValue: 'https://ch.benetton.com/dw/image/v2/BBSF_PRD/on/demandware.static/-/Sites-ucb-master/default/dwf2799586/images/Full_Card_v/UCB-Bambino_24P_3096C10JA_0Z3_FS_Full_Card_v.jpg?sw=600&sh=800',
|
|
46
|
-
if: {
|
|
47
|
-
arg: 'videoSrc',
|
|
48
|
-
exists: false
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
37
|
productName: {
|
|
52
38
|
name: 'product-name',
|
|
53
39
|
description: 'Nome del prodotto',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-card-ecommerce-showcase.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,uCAAuC;IAC9C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,YAAY,EAAE;YACZ,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,KAAK;SACpB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,kBAAkB;YAC/B,OAAO,EAAE,MAAM;SAChB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,iBAAiB;YAC9B,OAAO,EAAE,MAAM;SAChB;QACD,GAAG,EAAE;YACH,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,gFAAgF;YAC7F,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,gIAAgI;
|
|
1
|
+
{"version":3,"file":"jump-card-ecommerce-showcase.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/CardEcommerce/CardShowcase',\n tags: ['autodocs'],\n argTypes: {\n verticalCard: {\n name: 'vertical-card',\n description: 'Mostra la card in modalità verticale',\n control: 'boolean',\n defaultValue: false,\n },\n badge: {\n name: 'badge',\n description: 'Badge della card',\n control: 'text',\n },\n link: {\n name: 'link',\n description: 'Link della card',\n control: 'text',\n },\n img: {\n name: 'img',\n description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente video-src',\n control: 'text',\n defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n },\n imgAlt: {\n name: 'img-alt',\n description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente img',\n control: 'text',\n if:{\n arg: 'img',\n exists: true\n }\n },\n productName: {\n name: 'product-name',\n description: 'Nome del prodotto',\n control: 'text',\n },\n subtitle: {\n name: 'subtitle',\n description: 'Sottotitolo della card',\n control: 'text',\n },\n productId: {\n name: 'product-id',\n description: 'ID del prodotto',\n control: 'text',\n },\n price: {\n name: 'price',\n description: 'Prezzo del prodotto; Se la card è in versione Mini gli va passato il prezzo scontato',\n control: 'number',\n },\n salePrice: {\n name: 'sale-price',\n description: 'Prezzo scontato del prodotto',\n control: 'number',\n },\n hideDiscountIfLessThreshold: {\n name: 'hide-discount-if-less-threshold',\n description: 'Indicates the threshold below which the discount will be hidden',\n control: 'number'\n },\n badgeColor: {\n name: 'badge-color',\n description: 'Colore del badge',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'warning',\n 'success',\n 'danger',\n ],\n },\n outOfStock: {\n name: 'out-of-stock',\n description: 'Indica se il prodotto è esaurito',\n control: 'boolean',\n defaultValue: false\n },\n outOfStockText: {\n name: 'out-of-stock-text',\n description: 'Testo da visualizzare se il prodotto è esaurito',\n control: 'text',\n },\n availableText: {\n name: 'available-text',\n description: 'Testo da visualizzare se il prodotto è disponibile',\n control: 'text',\n },\n imageObjectFit: {\n name: 'image-object-fit',\n description: 'Controlla il comportamento dell\\'object-fit delle immagini',\n control: 'select',\n options: ['cover', 'scale-down', 'contain', 'fill', 'none'],\n defaultValue: 'cover'\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <jump-card-ecommerce-showcase ${attributes}>\n </jump-card-ecommerce-showcase>\n `);\n}\n\nexport const Card = Template.bind({});\nCard.args = {\n badge: 'In offerta',\n link: '/prodotto',\n img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n imgAlt: 'Immagine',\n productName: 'T-shirt',\n subtitle: 'T-shirt da uomo',\n productId: '1',\n price: 15,\n salePrice: 10,\n hideDiscountIfLessThreshold: 10,\n badgeColor: 'secondary',\n currency: '€',\n outOfStock: false,\n outOfStockText: 'Esaurito',\n availableText: 'Disponibile',\n};"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as defineCustomElement$2 } from './jump-badge2.js';
|
|
3
3
|
|
|
4
|
-
const jumpCardEcommerceShowcaseCss = ":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images img {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n}\n:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height:
|
|
4
|
+
const jumpCardEcommerceShowcaseCss = ":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images img {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n}\n:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 4.5rem;\n }\n}\n:host .Body.is-vertical .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n@container (max-width: 239px) {\n :host .Body .Body__Top {\n flex-direction: column;\n }\n :host .Body .Body__Bottom {\n flex-direction: column;\n }\n :host .Body .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n }\n :host .Body .SelectVariations select {\n width: 100%;\n }\n :host .Body .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n}\n:host .Body.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n}\n:host .Body.iconOnly {\n padding: 0;\n}\n:host .Body.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n}\n:host .Body.is-mini > * {\n flex-direction: column;\n}\n:host .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n}\n:host .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n}\n:host .Subtitle:hover {\n cursor: pointer;\n}\n:host .OutOfStock, :host .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n}\n:host .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n}\n:host .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\n}\n:host .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 margin-top: 0;\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n}\n:host .Price > * {\n display: inline-flex;\n}\n:host .Price__Regular {\n text-align: right;\n}\n:host .Price__Regular.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:host .Price__Sale {\n grid-column: 2;\n grid-row: 2;\n}\n:host .Price__Discount {\n color: var(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n}\n:host .Price.is-mini {\n display: flex;\n font-size: var(--fs-400);\n}";
|
|
5
5
|
const JumpCardEcommerceShowcaseStyle0 = jumpCardEcommerceShowcaseCss;
|
|
6
6
|
|
|
7
7
|
const JumpCardEcommerceShowcase$1 = /*@__PURE__*/ proxyCustomElement(class JumpCardEcommerceShowcase extends HTMLElement {
|
|
@@ -89,7 +89,7 @@ const JumpCardEcommerceShowcase$1 = /*@__PURE__*/ proxyCustomElement(class JumpC
|
|
|
89
89
|
h("div", { class: "Price__Sale" }, this.currency, this.salePriceFormatted)
|
|
90
90
|
: null)
|
|
91
91
|
: null, this.outOfStock ?
|
|
92
|
-
h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : h("div", { class: "
|
|
92
|
+
h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : h("div", { class: "AvailableStock" }, this.availableText ? this.availableText : 'Disponibile'))))));
|
|
93
93
|
}
|
|
94
94
|
get JumpCardEcommerceShowcase() { return this; }
|
|
95
95
|
static get style() { return JumpCardEcommerceShowcaseStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-card-ecommerce-showcase.js","mappings":";;;AAAA,MAAM,4BAA4B,GAAG,u3NAAu3N,CAAC;AAC75N,wCAAe,4BAA4B;;MCM9BA,2BAAyB;;;;;;2CAQU,SAAS;;;;;;;;;;wBA8B5B,GAAG;0BAG+D,WAAW;0BAG1C,KAAK;;;8BAQY,OAAO;;;;;;;;;IAqBtF,MAAM,QAAQ,CAAC,KAAa,EAAE,SAAiB;QAC7C,IAAI,YAAY,GAAG,KAAK,CAAC;QACzB,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE;YACtB,YAAY,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB;QAED,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;SAC5B;QAED,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;;IAID,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;;IAID,WAAW;QACT,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAED,YAAY;;QACV,IAAI,MAAM,GAAG,MAAA,QAAQ,CAAC,eAAe,CAAC,IAAI,mCAAI,OAAO,CAAC;QACtD,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE;YACtB,MAAM,GAAG,GAAG,MAAM,IAAI,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC;SAC9C;;QAGD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,CAAC;QAChH,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,EAAE;YAC9D,qBAAqB,EAAE,CAAC;YACxB,qBAAqB,EAAE,CAAC;SACzB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,eAAe,CAAC;QACxC,MAAM,aAAa,GAAG,EAAE,CAAC;QAEzB,MAAM,eAAe,GAAI,EAAE,CAAC;QAC5B,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,MAAM,iBAAiB,GAAG,aAAa,CAAC;QACxC,MAAM,eAAe,GAAG,EAAE,CAAC;QAE3B,SAAS,iBAAiB,CAAC,KAAa,EAAE,SAAiB;YACzD,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,SAAS,IAAI,KAAK,IAAI,GAAG,CAAC;YACrD,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SAC5B;QAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,oBAAoB,EAAE,IAAI,CAAC,cAAc,EAAC,IAEtD,WACE,KAAK,EAAE,SAAS,aAAa,IAAI,eAAe,IAAI,QAAQ,EAAE,IAE7D,IAAI,CAAC,KAAK;YACT,kBAAY,KAAK,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,EAAC,OAAO,EACzF,KAAK,EAAE,IAAI,CAAC,KAAK,GAAe,GAAG,EAAE,EAElD,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,2BAA2B,KAAK,SAAS,IAAI,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,2BAA2B,CAAC;YAClM,WAAK,KAAK,EAAC,eAAe,SAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,MAAQ,GAAG,IAAI,EAE3F,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAChB,cAAQ,KAAK,EAAE,UAAU,eAAe,IAAI,eAAe,EAAE,IAC1D,IAAI,CAAC,GAAG,IAAI,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,CAExE,CACP,CACA,EAEN,WAAK,KAAK,EAAE,WAAW,eAAe,IAAI,aAAa,IAAI,QAAQ,IAAI,iBAAiB,EAAE,IACxF,WAAK,KAAK,EAAE,QAAQ,eAAe,IAAI,aAAa,IAAI,QAAQ,IAAI,iBAAiB,EAAE,IACrF,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAC,MAAM,IACf,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,WAAW,CAAK,EAC1D,IAAI,CAAC,QAAQ,GAAG,WAAK,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,GAAG,IAAI,CACjG,EAEL,IAAI,CAAC,KAAK;YACT,WAAK,KAAK,EAAE,SAAS,QAAQ,EAAE,IAC7B,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,EAAE,EAAE,IACxF,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAC/B,EAEL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;gBAC5C,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAO;kBACrE,IAAI,CACJ;cACJ,IAAI,EAEP,IAAI,CAAC,UAAU;YAChB,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,GAAG,UAAU,CAAO,GAAI,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,GAAG,aAAa,CAAO,CAE5K,CACF,CAGF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpCardEcommerceShowcase"],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\n }\n\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-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 position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 3.2rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\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 margin-top: 0;\n \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(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"Available\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"version":3}
|
|
1
|
+
{"file":"jump-card-ecommerce-showcase.js","mappings":"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","names":["JumpCardEcommerceShowcase"],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\n }\n\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-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 position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 4.5rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock, .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n }\n\n .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n }\n\n .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\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 margin-top: 0;\n \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(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"AvailableStock\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
|
-
const jumpCardEcommerceShowcaseCss = ":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images img {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n}\n:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height:
|
|
3
|
+
const jumpCardEcommerceShowcaseCss = ":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images img {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n}\n:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 4.5rem;\n }\n}\n:host .Body.is-vertical .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n@container (max-width: 239px) {\n :host .Body .Body__Top {\n flex-direction: column;\n }\n :host .Body .Body__Bottom {\n flex-direction: column;\n }\n :host .Body .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n }\n :host .Body .SelectVariations select {\n width: 100%;\n }\n :host .Body .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n}\n:host .Body.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n}\n:host .Body.iconOnly {\n padding: 0;\n}\n:host .Body.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n}\n:host .Body.is-mini > * {\n flex-direction: column;\n}\n:host .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n}\n:host .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n}\n:host .Subtitle:hover {\n cursor: pointer;\n}\n:host .OutOfStock, :host .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n}\n:host .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n}\n:host .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\n}\n:host .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 margin-top: 0;\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n}\n:host .Price > * {\n display: inline-flex;\n}\n:host .Price__Regular {\n text-align: right;\n}\n:host .Price__Regular.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:host .Price__Sale {\n grid-column: 2;\n grid-row: 2;\n}\n:host .Price__Discount {\n color: var(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n}\n:host .Price.is-mini {\n display: flex;\n font-size: var(--fs-400);\n}";
|
|
4
4
|
const JumpCardEcommerceShowcaseStyle0 = jumpCardEcommerceShowcaseCss;
|
|
5
5
|
|
|
6
6
|
const JumpCardEcommerceShowcase = class {
|
|
@@ -86,7 +86,7 @@ const JumpCardEcommerceShowcase = class {
|
|
|
86
86
|
h("div", { class: "Price__Sale" }, this.currency, this.salePriceFormatted)
|
|
87
87
|
: null)
|
|
88
88
|
: null, this.outOfStock ?
|
|
89
|
-
h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : h("div", { class: "
|
|
89
|
+
h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : h("div", { class: "AvailableStock" }, this.availableText ? this.availableText : 'Disponibile'))))));
|
|
90
90
|
}
|
|
91
91
|
get JumpCardEcommerceShowcase() { return getElement(this); }
|
|
92
92
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-card-ecommerce-showcase.entry.js","mappings":"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","names":[],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\n }\n\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-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 position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 3.2rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\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 margin-top: 0;\n \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(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"Available\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"version":3}
|
|
1
|
+
{"file":"jump-card-ecommerce-showcase.entry.js","mappings":"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","names":[],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\n }\n\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-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 position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 4.5rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock, .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n }\n\n .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n }\n\n .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\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 margin-top: 0;\n \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(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"AvailableStock\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-98d5dd1f.js";export{s as setNonce}from"./p-98d5dd1f.js";import{g as a}from"./p-e1255160.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-6ce30870",[[1,"jump-card-ecommerce",{hideDiscountIfLessThreshold:[2,"hide-discount-if-less-threshold"],onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],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],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListButtonShow:[1540,"waiting-list-button-show"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],isMini:[4,"is-mini"],disallowAddToCart:[4,"disallow-add-to-cart"],disallowAddToCartLabel:[1,"disallow-add-to-cart-label"],enableZoom:[4,"enable-zoom"],imageObjectFit:[1,"image-object-fit"],autoSelectFirstVariation:[4,"auto-select-first-variation"],showDiscountBadge:[4,"show-discount-badge"],verticalCard:[4,"vertical-card"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],optionsOrdered:[32],setPrice:[64],forceVariationsOrder:[64],selectVariation:[64],selectFirstVariation:[64],getSelectedVariation:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-5def5339",[[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],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-0140b32c",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-bb18f919",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-9eba7c7c",[[1,"jump-notice",{id:[1],title:[1],description:[1],link:[1],linkText:[1,"link-text"],closable:[4],type:[1],size:[1],visible:[32]}]]],["p-f36de1a8",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-629835ac",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],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"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-b6c7ffcd",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-038a2a14",[[1,"jump-search-bar",{searchValue:[1025,"search-value"],placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-6b8fccdb",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-b3765945",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-98d5dd1f.js";export{s as setNonce}from"./p-98d5dd1f.js";import{g as a}from"./p-e1255160.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-6ce30870",[[1,"jump-card-ecommerce",{hideDiscountIfLessThreshold:[2,"hide-discount-if-less-threshold"],onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],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],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListButtonShow:[1540,"waiting-list-button-show"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],isMini:[4,"is-mini"],disallowAddToCart:[4,"disallow-add-to-cart"],disallowAddToCartLabel:[1,"disallow-add-to-cart-label"],enableZoom:[4,"enable-zoom"],imageObjectFit:[1,"image-object-fit"],autoSelectFirstVariation:[4,"auto-select-first-variation"],showDiscountBadge:[4,"show-discount-badge"],verticalCard:[4,"vertical-card"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],optionsOrdered:[32],setPrice:[64],forceVariationsOrder:[64],selectVariation:[64],selectFirstVariation:[64],getSelectedVariation:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-5def5339",[[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],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-0140b32c",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-bb18f919",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-9eba7c7c",[[1,"jump-notice",{id:[1],title:[1],description:[1],link:[1],linkText:[1,"link-text"],closable:[4],type:[1],size:[1],visible:[32]}]]],["p-f36de1a8",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-629835ac",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],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"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-b6c7ffcd",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-038a2a14",[[1,"jump-search-bar",{searchValue:[1025,"search-value"],placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-6b8fccdb",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-b3765945",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-0867da55",[[1,"jump-card-ecommerce-showcase",{hideDiscountIfLessThreshold:[2,"hide-discount-if-less-threshold"],badge:[1],link:[1],img:[1],imgAlt:[1,"img-alt"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],badgeColor:[1,"badge-color"],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],availableText:[1,"available-text"],imageObjectFit:[1,"image-object-fit"],priceFormatted:[32],salePriceFormatted:[32],setPrice:[64]}]]],["p-421ebb5a",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-ff62e250",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-264fa972",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-bd692b1f",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-6905cee4",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-f7310fd5",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1],order:[2]}]]],["p-0d86819c",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-e30da431",[[1,"jump-filter-range",{name:[1],labelMinBefore:[1,"label-min-before"],labelMinAfter:[1,"label-min-after"],labelMaxBefore:[1,"label-max-before"],labelMaxAfter:[1,"label-max-after"],min:[2],max:[2],step:[2],minVal:[2,"min-val"],maxVal:[2,"max-val"],disabled:[516],internalMinVal:[32],internalMaxVal:[32],getValues:[64]},null,{minVal:["watchMinVal"],maxVal:["watchMaxVal"]}]]],["p-55fcebb1",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-7e35d9f1",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-02ab8fb7",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-d1fc1ddf",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-d0ea0f54",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-6d82feb3",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-18c359e3",[[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]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=jump-design-system.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as n,c as e,h as o,H as i,g as t}from"./p-98d5dd1f.js";const s=':host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images img {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n}\n:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.2rem;\n }\n}\n:host .Body.is-vertical .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n@container (max-width: 239px) {\n :host .Body .Body__Top {\n flex-direction: column;\n }\n :host .Body .Body__Bottom {\n flex-direction: column;\n }\n :host .Body .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n }\n :host .Body .SelectVariations select {\n width: 100%;\n }\n :host .Body .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n}\n:host .Body.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n}\n:host .Body.iconOnly {\n padding: 0;\n}\n:host .Body.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n}\n:host .Body.is-mini > * {\n flex-direction: column;\n}\n:host .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n}\n:host .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n}\n:host .Subtitle:hover {\n cursor: pointer;\n}\n:host .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n}\n:host .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 margin-top: 0;\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n}\n:host .Price > * {\n display: inline-flex;\n}\n:host .Price__Regular {\n text-align: right;\n}\n:host .Price__Regular.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:host .Price__Sale {\n grid-column: 2;\n grid-row: 2;\n}\n:host .Price__Discount {\n color: var(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n}\n:host .Price.is-mini {\n display: flex;\n font-size: var(--fs-400);\n}';const r=s;const a=class{constructor(o){n(this,o);this.goToProductPage=e(this,"jump-card-go-to-product-page",7);this.hideDiscountIfLessThreshold=undefined;this.badge=undefined;this.link=undefined;this.img=undefined;this.imgAlt=undefined;this.productName=undefined;this.subtitle=undefined;this.productId=undefined;this.price=undefined;this.salePrice=undefined;this.currency="€";this.badgeColor="secondary";this.outOfStock=false;this.outOfStockText=undefined;this.availableText=undefined;this.imageObjectFit="cover";this.priceFormatted=undefined;this.salePriceFormatted=undefined}async setPrice(n,e){let o=false;if(n&&n>0){o=true;this.price=n}if(e&&e>0){this.salePrice=e}if(o){this.formatPrices()}}componentDidLoad(){this.formatPrices()}goToProduct(){this.goToProductPage.emit({productId:this.productId,link:this.link})}formatPrices(){var n;let e=(n=document.documentElement.lang)!==null&&n!==void 0?n:"it-IT";if(e.length==2){e=`${e}-${e.toUpperCase()}`}this.priceFormatted=this.price.toLocaleString(e,{minimumFractionDigits:2,maximumFractionDigits:2});this.salePriceFormatted=this.salePrice.toLocaleString(e,{minimumFractionDigits:2,maximumFractionDigits:2})}render(){const n="hasBackground";const e="";const t="";const s="";const r="is-vertical";const a="";function c(n,e){const o=(n-e)/n*100;return o.toFixed(0)}return o(i,{style:{"--image-object-fit":this.imageObjectFit}},o("div",{class:`Media ${e} ${n} ${s}`},this.badge?o("jump-badge",{class:`${n} ${e}`,variant:this.badgeColor,dimension:"small",label:this.badge}):"",this.salePrice&&this.salePrice<this.price&&(this.hideDiscountIfLessThreshold===undefined||parseFloat(c(this.price,this.salePrice))>this.hideDiscountIfLessThreshold)?o("div",{class:"DiscountBadge"},"-",c(this.price,this.salePrice),"%"):null,o("a",{href:this.link},o("figure",{class:`Images ${t} ${a}`},this.img&&o("img",{class:"Images__Front",src:this.img,alt:this.imgAlt})))),o("div",{class:`Content ${n} ${e} ${s} ${r}`},o("div",{class:`Body ${n} ${e} ${s} ${r}`},o("div",{class:"Body__Top"},o("div",{class:"Info"},o("a",{href:this.link,class:"Product"},this.productName),this.subtitle?o("div",{class:"Subtitle",onClick:()=>this.goToProduct()},this.subtitle):null),this.price?o("div",{class:`Price ${s}`},o("div",{class:`Price__Regular ${this.salePrice&&this.salePrice<this.price?"sale":""}`},this.currency,this.priceFormatted),this.salePrice&&this.salePrice<this.price?o("div",{class:"Price__Sale"},this.currency,this.salePriceFormatted):null):null,this.outOfStock?o("div",{class:"OutOfStock"},this.outOfStockText?this.outOfStockText:"Esaurito"):o("div",{class:"Available"},this.availableText?this.availableText:"Disponibile")))))}get JumpCardEcommerceShowcase(){return t(this)}};a.style=r;export{a as jump_card_ecommerce_showcase};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as n,c as e,h as o,H as i,g as t}from"./p-98d5dd1f.js";const s=':host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n}\n:host .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n}\n:host .Footer,\n:host .Body {\n display: flex;\n width: 100%;\n}\n:host .Footer {\n container-type: inline-size;\n flex-direction: row;\n}\n@container (max-width: 239px) {\n :host .Footer {\n flex-direction: column;\n }\n :host .Footer .OutOfStock {\n margin-bottom: 0.25rem;\n }\n}\n:host jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n}\n:host .Media {\n container-type: inline-size;\n}\n@container (max-width: 239px) {\n :host .Media jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n}\n:host .Media {\n overflow: hidden;\n position: relative;\n border-radius: 3px;\n aspect-ratio: 1/1;\n}\n:host .Media .Images {\n height: 100%;\n margin: 0;\n position: relative;\n}\n:host .Media .Images img {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n}\n:host .Media .Images__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n}\n:host .Media.hasBackground {\n background-color: var(--neutral-white);\n}\n:host .Media.hasBackground.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n}\n:host .Media.hasBackground.iconOnly img {\n border-radius: 6px;\n}\n:host .Media.iconOnly {\n border-bottom-right-radius: 0;\n}\n:host .Media.is-mini {\n max-width: 180px;\n}\n:host .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n@container (max-width: 239px) {\n :host .Content {\n flex-direction: row;\n }\n}\n:host .Content.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n}\n:host .Content.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n}\n:host .Content.is-mini {\n max-width: 180px;\n}\n:host .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\n}\n:host .Body > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n:host .Body > * > * {\n flex: 0 1 auto;\n}\n:host .Body .Body__Top {\n display: flex;\n flex-direction: row;\n}\n:host .Body .Body__Bottom {\n display: flex;\n flex-direction: row;\n}\n:host .Body.is-vertical .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n}\n:host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 3.5rem;\n}\n@container (max-width: 239px) {\n :host .Body.is-vertical .Body__Top .Subtitle {\n min-height: 4.5rem;\n }\n}\n:host .Body.is-vertical .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n@container (max-width: 239px) {\n :host .Body .Body__Top {\n flex-direction: column;\n }\n :host .Body .Body__Bottom {\n flex-direction: column;\n }\n :host .Body .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n }\n :host .Body .SelectVariations select {\n width: 100%;\n }\n :host .Body .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n}\n:host .Body.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n}\n:host .Body.iconOnly {\n padding: 0;\n}\n:host .Body.is-mini {\n padding: calc(var(--jump-card-padding) / 2) 0;\n}\n:host .Body.is-mini > * {\n flex-direction: column;\n}\n:host .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n}\n:host .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n}\n:host .Subtitle:hover {\n cursor: pointer;\n}\n:host .OutOfStock, :host .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n}\n:host .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n}\n:host .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\n}\n:host .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 margin-top: 0;\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n}\n:host .Price > * {\n display: inline-flex;\n}\n:host .Price__Regular {\n text-align: right;\n}\n:host .Price__Regular.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:host .Price__Sale {\n grid-column: 2;\n grid-row: 2;\n}\n:host .Price__Discount {\n color: var(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n}\n:host .Price.is-mini {\n display: flex;\n font-size: var(--fs-400);\n}';const r=s;const a=class{constructor(o){n(this,o);this.goToProductPage=e(this,"jump-card-go-to-product-page",7);this.hideDiscountIfLessThreshold=undefined;this.badge=undefined;this.link=undefined;this.img=undefined;this.imgAlt=undefined;this.productName=undefined;this.subtitle=undefined;this.productId=undefined;this.price=undefined;this.salePrice=undefined;this.currency="€";this.badgeColor="secondary";this.outOfStock=false;this.outOfStockText=undefined;this.availableText=undefined;this.imageObjectFit="cover";this.priceFormatted=undefined;this.salePriceFormatted=undefined}async setPrice(n,e){let o=false;if(n&&n>0){o=true;this.price=n}if(e&&e>0){this.salePrice=e}if(o){this.formatPrices()}}componentDidLoad(){this.formatPrices()}goToProduct(){this.goToProductPage.emit({productId:this.productId,link:this.link})}formatPrices(){var n;let e=(n=document.documentElement.lang)!==null&&n!==void 0?n:"it-IT";if(e.length==2){e=`${e}-${e.toUpperCase()}`}this.priceFormatted=this.price.toLocaleString(e,{minimumFractionDigits:2,maximumFractionDigits:2});this.salePriceFormatted=this.salePrice.toLocaleString(e,{minimumFractionDigits:2,maximumFractionDigits:2})}render(){const n="hasBackground";const e="";const t="";const s="";const r="is-vertical";const a="";function c(n,e){const o=(n-e)/n*100;return o.toFixed(0)}return o(i,{style:{"--image-object-fit":this.imageObjectFit}},o("div",{class:`Media ${e} ${n} ${s}`},this.badge?o("jump-badge",{class:`${n} ${e}`,variant:this.badgeColor,dimension:"small",label:this.badge}):"",this.salePrice&&this.salePrice<this.price&&(this.hideDiscountIfLessThreshold===undefined||parseFloat(c(this.price,this.salePrice))>this.hideDiscountIfLessThreshold)?o("div",{class:"DiscountBadge"},"-",c(this.price,this.salePrice),"%"):null,o("a",{href:this.link},o("figure",{class:`Images ${t} ${a}`},this.img&&o("img",{class:"Images__Front",src:this.img,alt:this.imgAlt})))),o("div",{class:`Content ${n} ${e} ${s} ${r}`},o("div",{class:`Body ${n} ${e} ${s} ${r}`},o("div",{class:"Body__Top"},o("div",{class:"Info"},o("a",{href:this.link,class:"Product"},this.productName),this.subtitle?o("div",{class:"Subtitle",onClick:()=>this.goToProduct()},this.subtitle):null),this.price?o("div",{class:`Price ${s}`},o("div",{class:`Price__Regular ${this.salePrice&&this.salePrice<this.price?"sale":""}`},this.currency,this.priceFormatted),this.salePrice&&this.salePrice<this.price?o("div",{class:"Price__Sale"},this.currency,this.salePriceFormatted):null):null,this.outOfStock?o("div",{class:"OutOfStock"},this.outOfStockText?this.outOfStockText:"Esaurito"):o("div",{class:"AvailableStock"},this.availableText?this.availableText:"Disponibile")))))}get JumpCardEcommerceShowcase(){return t(this)}};a.style=r;export{a as jump_card_ecommerce_showcase};
|
|
2
|
+
//# sourceMappingURL=p-0867da55.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["jumpCardEcommerceShowcaseCss","JumpCardEcommerceShowcaseStyle0","JumpCardEcommerceShowcase","undefined","setPrice","price","salePrice","shouldFormat","this","formatPrices","componentDidLoad","goToProduct","goToProductPage","emit","productId","link","locale","_a","document","documentElement","lang","length","toUpperCase","priceFormatted","toLocaleString","minimumFractionDigits","maximumFractionDigits","salePriceFormatted","render","backgroundClass","iconOnlyClass","hasImageOnHover","miniCard","verticalCardClass","enableZoomClass","calculateDiscount","discount","toFixed","h","Host","style","imageObjectFit","class","badge","variant","badgeColor","dimension","label","hideDiscountIfLessThreshold","parseFloat","href","img","src","alt","imgAlt","productName","subtitle","onClick","currency","outOfStock","outOfStockText","availableText"],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\n }\n\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-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 position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 4.5rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock, .AvailableStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n margin-top: 0.5rem;\n }\n\n .OutOfStock {\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\n }\n\n .AvailableStock {\n color: var(--jump-card-ecommerce-showcase-available-color);\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 margin-top: 0;\n \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(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"AvailableStock\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"mappings":"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"}
|
package/dist/types/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.d.ts
CHANGED
|
@@ -23,10 +23,6 @@ declare const _default: {
|
|
|
23
23
|
description: string;
|
|
24
24
|
control: string;
|
|
25
25
|
defaultValue: string;
|
|
26
|
-
if: {
|
|
27
|
-
arg: string;
|
|
28
|
-
exists: boolean;
|
|
29
|
-
};
|
|
30
26
|
};
|
|
31
27
|
imgAlt: {
|
|
32
28
|
name: string;
|
|
@@ -37,16 +33,6 @@ declare const _default: {
|
|
|
37
33
|
exists: boolean;
|
|
38
34
|
};
|
|
39
35
|
};
|
|
40
|
-
hoverImg: {
|
|
41
|
-
name: string;
|
|
42
|
-
description: string;
|
|
43
|
-
control: string;
|
|
44
|
-
defaultValue: string;
|
|
45
|
-
if: {
|
|
46
|
-
arg: string;
|
|
47
|
-
exists: boolean;
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
36
|
productName: {
|
|
51
37
|
name: string;
|
|
52
38
|
description: string;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["jumpCardEcommerceShowcaseCss","JumpCardEcommerceShowcaseStyle0","JumpCardEcommerceShowcase","undefined","setPrice","price","salePrice","shouldFormat","this","formatPrices","componentDidLoad","goToProduct","goToProductPage","emit","productId","link","locale","_a","document","documentElement","lang","length","toUpperCase","priceFormatted","toLocaleString","minimumFractionDigits","maximumFractionDigits","salePriceFormatted","render","backgroundClass","iconOnlyClass","hasImageOnHover","miniCard","verticalCardClass","enableZoomClass","calculateDiscount","discount","toFixed","h","Host","style","imageObjectFit","class","badge","variant","badgeColor","dimension","label","hideDiscountIfLessThreshold","parseFloat","href","img","src","alt","imgAlt","productName","subtitle","onClick","currency","outOfStock","outOfStockText","availableText"],"sources":["src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.scss?tag=jump-card-ecommerce-showcase&encapsulation=shadow","src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-ecommerce-showcase-max-width-horizontal: 100%;\n --jump-card-ecommerce-showcase-color: var(--neutral-grey-primary);\n --jump-card-ecommerce-showcase-background: transparent;\n --jump-card-ecommerce-showcase-border-color: var(--neutral-grey-background);\n --jump-card-ecommerce-showcase-padding: 0.5rem;\n --jump-card-ecommerce-showcase-out-of-stock-color: var(--status-danger-standard);\n --jump-card-ecommerce-showcase-available-color: var(--status-success-standard);\n --jump-card-ecommerce-showcase-discount-color: var(--status-danger-standard);\n --image-object-fit: cover;\n --jump-card-ecommerce-showcase-hide-discover-button-visibility: block;\n --jump-card-ecommerce-showcase-discount-badge-bg-color: var(--neutral-white);\n --jump-card-ecommerce-showcase-discount-badge-text-color: var(--primary-standard);\n --jump-card-ecommerce-showcase-discount-badge-padding: 4px 12px;\n --jump-card-ecommerce-showcase-discount-badge-border-radius: 50px;\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-ecommerce-showcase-background);\n color: var(--jump-card-ecommerce-showcase-color);\n\n .DiscountBadge {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n z-index: 2;\n border: 2px solid var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n color: var(--jump-card-ecommerce-showcase-discount-badge-text-color);\n background-color: var(--jump-card-ecommerce-showcase-discount-badge-bg-color);\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n padding: var(--jump-card-ecommerce-showcase-discount-badge-padding);\n border-radius: var(--jump-card-ecommerce-showcase-discount-badge-border-radius);\n line-height: 1.2;\n }\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n .Footer {\n container-type: inline-size;\n flex-direction: row;\n\n @container (max-width: 239px) {\n flex-direction: column;\n\n .OutOfStock {\n margin-bottom: 0.25rem;\n }\n\n }\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 2;\n }\n\n .Media {\n container-type: inline-size;\n\n @container (max-width: 239px) {\n jump-badge {\n top: auto;\n bottom: 1rem;\n left: 0.2rem;\n right: auto;\n }\n }\n }\n\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-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 position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n object-fit: var(--image-object-fit, cover);\n }\n\n &__Front {\n z-index: 1;\n transition: opacity 0.5s linear;\n cursor: pointer;\n }\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-ecommerce-showcase-padding) var(--jump-card-ecommerce-showcase-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n\n &.iconOnly {\n border-bottom-right-radius: 0;\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Content {\n container-type: inline-size;\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n\n @container (max-width: 239px) {\n flex-direction: row;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-ecommerce-showcase-padding) * 2) var(--jump-card-ecommerce-showcase-padding);\n }\n\n &.is-mini {\n max-width: 180px;\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-ecommerce-showcase-padding) 0;\n container-type: inline-size;\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 .Body__Top {\n display: flex;\n flex-direction: row;\n }\n\n .Body__Bottom {\n display: flex;\n flex-direction: row;\n }\n \n &.is-vertical {\n .Body__Top {\n flex-direction: column;\n align-items: flex-start;\n \n .Subtitle {\n min-height: 3.5rem;\n }\n\n @container (max-width: 239px) {\n .Subtitle {\n min-height: 3.2rem;\n }\n }\n }\n\n .Price {\n justify-items: start;\n margin-top: 0.5rem;\n column-gap: 0;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-start;\n }\n\n }\n\n @container (max-width: 239px) {\n .Body__Top {\n flex-direction: column;\n }\n\n .Body__Bottom {\n flex-direction: column;\n }\n\n .SelectVariations {\n max-width: 100%;\n margin-bottom: 0.5rem;\n\n select {\n width: 100%;\n }\n }\n\n .Price {\n display: flex;\n flex-direction: column-reverse;\n margin-top: 0.5rem;\n align-items: start;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n\n &.is-mini {\n & > * {\n flex-direction: column;\n }\n\n padding: calc(var(--jump-card-padding) / 2) 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n color: var(--neutral-grey-primary);\n text-decoration: none;\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n line-height: 1.2;\n }\n\n .Subtitle:hover {\n cursor: pointer;\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--jump-card-ecommerce-showcase-out-of-stock-color);\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 margin-top: 0;\n \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(--jump-card-ecommerce-showcase-discount-color);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n\n &.is-mini {\n display: flex;\n font-size: var(--fs-400);\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: 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 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 the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\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 @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\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 style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"Available\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"],"mappings":"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"}
|