@jumpgroup/jump-design-system 0.3.19 → 0.3.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/class-map-b27ebf69.js +37 -0
- package/dist/cjs/class-map-b27ebf69.js.map +1 -0
- package/dist/cjs/index-86f59981.js +1575 -0
- package/dist/cjs/index-86f59981.js.map +1 -0
- package/dist/cjs/jump-accordion.cjs.entry.js +533 -3
- package/dist/cjs/jump-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-badge.cjs.entry.js +2 -2
- package/dist/cjs/jump-button_2.cjs.entry.js +2 -2
- package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js +2 -2
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js +28 -19
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-card.cjs.entry.js +3 -3
- package/dist/cjs/jump-design-system.cjs.js +10 -10
- package/dist/cjs/jump-design-system.cjs.js.map +1 -1
- package/dist/cjs/jump-filter-checkbox.cjs.entry.js +8 -33
- package/dist/cjs/jump-filter-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-filter.cjs.entry.js +4 -4
- package/dist/cjs/jump-filtergroup.cjs.entry.js +4 -4
- package/dist/cjs/jump-pagination-table.cjs.entry.js +4 -4
- package/dist/cjs/jump-pagination.cjs.entry.js +4 -4
- package/dist/cjs/jump-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-quantity.cjs.entry.js +4 -4
- package/dist/cjs/jump-tab-item.cjs.entry.js +3 -3
- package/dist/cjs/jump-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/jump-tab.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/jump-accordion/jump-accordion.css +100 -1
- package/dist/collection/components/jump-accordion/jump-accordion.js +163 -1
- package/dist/collection/components/jump-accordion/jump-accordion.js.map +1 -1
- package/dist/collection/components/jump-accordion/jump-accordion.stories.js +127 -0
- package/dist/collection/components/jump-accordion/jump-accordion.stories.js.map +1 -0
- package/dist/collection/components/jump-badge/jump-badge.js +1 -1
- package/dist/collection/components/jump-button/jump-button.js +1 -1
- package/dist/collection/components/jump-card/jump-card.js +2 -2
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css +23 -2
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js +44 -17
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js +8 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js +1 -1
- package/dist/collection/components/jump-filter/jump-filter.js +3 -3
- package/dist/collection/components/jump-filter-checkbox/jump-filter-checkbox.js +2 -2
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +3 -3
- package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
- package/dist/collection/components/jump-pagination/jump-pagination.stories.js +3 -2
- package/dist/collection/components/jump-pagination/jump-pagination.stories.js.map +1 -1
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +3 -3
- package/dist/collection/components/jump-quantity/jump-quantity.js +3 -3
- package/dist/collection/components/jump-tab/jump-tab.js +1 -1
- package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -2
- package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
- package/dist/components/chunk.H33C3MRM.js +57 -57
- package/dist/components/chunk.H33C3MRM.js.map +1 -1
- package/dist/components/class-map.js +31 -0
- package/dist/components/class-map.js.map +1 -0
- package/dist/components/jump-accordion.js +548 -5
- package/dist/components/jump-accordion.js.map +1 -1
- package/dist/components/jump-badge2.js +1 -1
- package/dist/components/jump-button2.js +1 -1
- package/dist/components/jump-card-ecommerce-option.js +1 -1
- package/dist/components/jump-card-ecommerce.js +28 -18
- package/dist/components/jump-card-ecommerce.js.map +1 -1
- package/dist/components/jump-card.js +2 -2
- package/dist/components/jump-filter-checkbox.js +9 -34
- package/dist/components/jump-filter-checkbox.js.map +1 -1
- package/dist/components/jump-filter.js +3 -3
- package/dist/components/jump-filtergroup.js +3 -3
- package/dist/components/jump-pagination-table.js +3 -3
- package/dist/components/jump-pagination.js +3 -3
- package/dist/components/jump-pagination.js.map +1 -1
- package/dist/components/jump-quantity.js +3 -3
- package/dist/components/jump-tab-item.js +2 -2
- package/dist/components/jump-tab-panel.js +1 -1
- package/dist/components/jump-tab.js +1 -1
- package/dist/esm/{chunk.H33C3MRM-d1872e67.js → chunk.H33C3MRM-632f8755.js} +2 -2
- package/dist/esm/{chunk.H33C3MRM-d1872e67.js.map → chunk.H33C3MRM-632f8755.js.map} +1 -1
- package/dist/esm/class-map-3150cdfe.js +31 -0
- package/dist/esm/class-map-3150cdfe.js.map +1 -0
- package/dist/esm/index-a94d133e.js +1546 -0
- package/dist/esm/index-a94d133e.js.map +1 -0
- package/dist/esm/jump-accordion.entry.js +533 -3
- package/dist/esm/jump-accordion.entry.js.map +1 -1
- package/dist/esm/jump-badge.entry.js +2 -2
- package/dist/esm/jump-button_2.entry.js +3 -3
- package/dist/esm/jump-card-ecommerce-option.entry.js +2 -2
- package/dist/esm/jump-card-ecommerce.entry.js +28 -19
- package/dist/esm/jump-card-ecommerce.entry.js.map +1 -1
- package/dist/esm/jump-card.entry.js +3 -3
- package/dist/esm/jump-design-system.js +11 -11
- package/dist/esm/jump-design-system.js.map +1 -1
- package/dist/esm/jump-filter-checkbox.entry.js +10 -35
- package/dist/esm/jump-filter-checkbox.entry.js.map +1 -1
- package/dist/esm/jump-filter.entry.js +4 -4
- package/dist/esm/jump-filtergroup.entry.js +4 -4
- package/dist/esm/jump-pagination-table.entry.js +4 -4
- package/dist/esm/jump-pagination.entry.js +4 -4
- package/dist/esm/jump-pagination.entry.js.map +1 -1
- package/dist/esm/jump-quantity.entry.js +4 -4
- package/dist/esm/jump-tab-item.entry.js +3 -3
- package/dist/esm/jump-tab-panel.entry.js +2 -2
- package/dist/esm/jump-tab.entry.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/{p-a5aaa1dd.entry.js → p-13950869.entry.js} +2 -2
- package/dist/jump-design-system/p-198cfe62.js +22 -0
- package/dist/jump-design-system/p-198cfe62.js.map +1 -0
- package/dist/jump-design-system/{p-c8733544.entry.js → p-4d0c4007.entry.js} +2 -2
- package/dist/jump-design-system/p-570e63e4.entry.js +2 -0
- package/dist/jump-design-system/{p-23d91e12.entry.js → p-6309cc45.entry.js} +2 -2
- package/dist/jump-design-system/{p-9d9b0076.entry.js → p-678bd41e.entry.js} +2 -2
- package/dist/jump-design-system/{p-27fa0ba4.entry.js → p-6ad4dc92.entry.js} +2 -2
- package/dist/jump-design-system/{p-5e9b8062.entry.js → p-7272666a.entry.js} +11 -31
- package/dist/jump-design-system/p-7272666a.entry.js.map +1 -0
- package/dist/jump-design-system/p-8eb8c598.entry.js +2 -0
- package/dist/jump-design-system/p-8eb8c598.entry.js.map +1 -0
- package/dist/jump-design-system/p-95462766.entry.js +117 -0
- package/dist/jump-design-system/p-95462766.entry.js.map +1 -0
- package/dist/jump-design-system/{p-60849b83.entry.js → p-acd1dac1.entry.js} +2 -2
- package/dist/jump-design-system/{p-4302b229.entry.js → p-c964c3d9.entry.js} +2 -2
- package/dist/jump-design-system/p-c964c3d9.entry.js.map +1 -0
- package/dist/jump-design-system/{p-a4b9515b.js → p-d33f4f1d.js} +2 -2
- package/dist/jump-design-system/p-d4c681a4.js +3 -0
- package/dist/jump-design-system/p-d4c681a4.js.map +1 -0
- package/dist/jump-design-system/{p-ed897778.entry.js → p-e926995e.entry.js} +2 -2
- package/dist/jump-design-system/{p-c1665537.entry.js → p-f0590653.entry.js} +2 -2
- package/dist/jump-design-system/p-f281e150.entry.js +2 -0
- package/dist/jump-design-system/{p-839e054d.entry.js → p-f534e22b.entry.js} +2 -2
- package/dist/jump-design-system-elements.json +52 -1
- package/dist/types/components/jump-accordion/jump-accordion.d.ts +11 -0
- package/dist/types/components/jump-accordion/jump-accordion.stories.d.ts +39 -0
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.d.ts +2 -0
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.stories.d.ts +6 -0
- package/dist/types/components.d.ts +36 -0
- package/dist/types/stencil-public-runtime.d.ts +3 -8
- package/loader/cdn.js +1 -3
- package/loader/index.cjs.js +1 -3
- package/loader/index.es2017.js +1 -3
- package/loader/index.js +1 -3
- package/package.json +1 -1
- package/dist/cjs/index-674508e2.js +0 -2451
- package/dist/cjs/index-674508e2.js.map +0 -1
- package/dist/esm/index-70f1949a.js +0 -2422
- package/dist/esm/index-70f1949a.js.map +0 -1
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/jump-design-system/p-4302b229.entry.js.map +0 -1
- package/dist/jump-design-system/p-4d6cc90d.js +0 -3
- package/dist/jump-design-system/p-4d6cc90d.js.map +0 -1
- package/dist/jump-design-system/p-56609b82.entry.js +0 -2
- package/dist/jump-design-system/p-56609b82.entry.js.map +0 -1
- package/dist/jump-design-system/p-5e9b8062.entry.js.map +0 -1
- package/dist/jump-design-system/p-aee5a8c3.entry.js +0 -2
- package/dist/jump-design-system/p-d6be9517.entry.js +0 -2
- package/dist/jump-design-system/p-d6be9517.entry.js.map +0 -1
- package/dist/jump-design-system/p-fde99383.entry.js +0 -2
- /package/dist/jump-design-system/{p-a5aaa1dd.entry.js.map → p-13950869.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-c8733544.entry.js.map → p-4d0c4007.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-aee5a8c3.entry.js.map → p-570e63e4.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-23d91e12.entry.js.map → p-6309cc45.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-9d9b0076.entry.js.map → p-678bd41e.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-27fa0ba4.entry.js.map → p-6ad4dc92.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-60849b83.entry.js.map → p-acd1dac1.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-a4b9515b.js.map → p-d33f4f1d.js.map} +0 -0
- /package/dist/jump-design-system/{p-ed897778.entry.js.map → p-e926995e.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-c1665537.entry.js.map → p-f0590653.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-fde99383.entry.js.map → p-f281e150.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-839e054d.entry.js.map → p-f534e22b.entry.js.map} +0 -0
|
@@ -27,6 +27,7 @@ export class JumpCardEcommerce {
|
|
|
27
27
|
this.addToCartText = undefined;
|
|
28
28
|
this.waitingListText = undefined;
|
|
29
29
|
this.addToWaitingList = false;
|
|
30
|
+
this.isMini = false;
|
|
30
31
|
this.addedToCart = false;
|
|
31
32
|
this.endAddedToCart = false;
|
|
32
33
|
this.variations = [];
|
|
@@ -91,39 +92,47 @@ export class JumpCardEcommerce {
|
|
|
91
92
|
});
|
|
92
93
|
}
|
|
93
94
|
render() {
|
|
94
|
-
const backgroundClass = this.hasBackground ? 'hasBackground' : '';
|
|
95
|
-
const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';
|
|
95
|
+
const backgroundClass = this.hasBackground && !this.isMini ? 'hasBackground' : '';
|
|
96
|
+
const iconOnlyClass = this.onlyIconButton && !this.isMini ? 'iconOnly' : '';
|
|
96
97
|
const justifyClass = this.outOfStock ? 'justify-between' : '';
|
|
97
98
|
const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';
|
|
99
|
+
const miniCard = this.isMini ? 'is-mini' : '';
|
|
98
100
|
function calculateDiscount(price, salePrice) {
|
|
99
101
|
const discount = ((price - salePrice) / price) * 100;
|
|
100
102
|
return discount.toFixed(0);
|
|
101
103
|
}
|
|
102
104
|
;
|
|
103
|
-
return (h(Host, null, this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', this.hasFavorite ?
|
|
105
|
+
return (h(Host, null, !this.isMini && this.badge ? h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', !this.isMini && this.hasFavorite ?
|
|
104
106
|
this.favoriteHref != '' ?
|
|
105
107
|
h("jump-button", { href: this.favoriteHref, onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'primary' : 'neutral', size: "small", text: true, onlyIcon: true }, h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'solid' : 'light', size: "medium" }))
|
|
106
108
|
:
|
|
107
109
|
h("jump-button", { onClick: () => this.onToggleFavorite(), class: `Favorite ${backgroundClass} ${iconOnlyClass}`, variant: this.favorite ? 'primary' : 'neutral', size: "small", text: true, onlyIcon: true }, h("jump-icon", { slot: "prefix", name: "heart", category: this.favorite ? 'solid' : 'light', size: "medium" }))
|
|
108
110
|
:
|
|
109
|
-
this.hasSlotForFavorite ? h("div", { class: "Favorite" }, h("slot", { name: "favorite" }), " ") : null, h("div", { class: `Media ${iconOnlyClass} ${backgroundClass}` }, h("a", { href: this.link }, h("figure", { class: `Images ${hasImageOnHover} ` }, this.img && !this.videoSrc ? h("img", { class: "Images__Front", src: this.img, alt: this.imgAlt }) : '', this.hoverImg && !this.videoSrc ? h("img", { class: "Images__OnHover", src: this.hoverImg, alt: this.hoverImgAlt }) : ''), this.videoSrc && !this.img ?
|
|
110
|
-
h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : ''),
|
|
111
|
+
this.hasSlotForFavorite ? h("div", { class: "Favorite" }, h("slot", { name: "favorite" }), " ") : null, h("div", { class: `Media ${iconOnlyClass} ${backgroundClass} ${miniCard}` }, h("a", { href: this.link }, h("figure", { class: `Images ${hasImageOnHover} ` }, this.img && !this.videoSrc ? h("img", { class: "Images__Front", src: this.img, alt: this.imgAlt }) : '', this.hoverImg && !this.videoSrc ? h("img", { class: "Images__OnHover", src: this.hoverImg, alt: this.hoverImgAlt }) : ''), this.videoSrc && !this.img ?
|
|
112
|
+
h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : ''), !this.isMini ?
|
|
113
|
+
h("div", { class: `NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}` }, h("jump-button", { href: this.notificationUrl, variant: "white", text: true }, h("jump-icon", { slot: "prefix", name: "check" }), h("span", null, " ", this.notificationText, " ")))
|
|
114
|
+
: null, !this.isMini && this.onlyIconButton ?
|
|
111
115
|
h("div", { class: "OnlyIconButton" }, h("jump-button", { variant: "secondary", size: "large", pill: true, onlyIcon: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: 'cart-shopping', category: "regular" })))
|
|
112
|
-
: ''), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass}` }, h("div", null, h("div", { class: "Info" }, h("div", { class: "Product" }, this.productName), this.subtitle ? h("div", { class: "Subtitle" }, this.subtitle) : null), this.price ?
|
|
113
|
-
h("div", { class:
|
|
116
|
+
: ''), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, h("div", null, h("div", { class: "Info" }, h("div", { class: "Product" }, this.productName), !this.isMini && this.subtitle ? h("div", { class: "Subtitle" }, this.subtitle) : null), this.price ?
|
|
117
|
+
h("div", { class: `Price ${miniCard}` }, !this.isMini && this.salePrice && this.salePrice < this.price ?
|
|
114
118
|
h("div", { class: "Price__Discount" }, " ", calculateDiscount(this.price, this.salePrice), "% ")
|
|
115
|
-
: null,
|
|
119
|
+
: null, !this.isMini ?
|
|
120
|
+
h("div", { class: `Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}` }, this.currency, this.price)
|
|
121
|
+
:
|
|
122
|
+
h("div", { class: `Price__Regular` }, this.currency, this.salePrice), !this.isMini && this.salePrice && this.salePrice < this.price ?
|
|
116
123
|
h("div", { class: "Price__Sale" }, this.currency, this.salePrice)
|
|
117
124
|
: null)
|
|
118
|
-
: null),
|
|
119
|
-
h("
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
125
|
+
: null), !this.isMini ?
|
|
126
|
+
h("div", { class: "SelectVariations" }, this.variations.length != 0 ?
|
|
127
|
+
h("select", { ref: (el) => (this.variationSelectEl = el), onChange: () => {
|
|
128
|
+
let currentValue = this.variationSelectEl.value;
|
|
129
|
+
let currentVariation = this.variations.find((variation) => variation.code == currentValue);
|
|
130
|
+
this.onVariationSelected(currentVariation);
|
|
131
|
+
} }, this.variations
|
|
132
|
+
.filter((variation) => !variation.imgUrl)
|
|
133
|
+
.map((variation) => (h("option", { value: variation.code }, variation.label))))
|
|
134
|
+
: null)
|
|
135
|
+
: null, !this.isMini ? h("slot", { name: "quantity" }) : null), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, this.outOfStock ? h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
|
|
127
136
|
h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.waitingList() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.waitingListText ? this.waitingListText : 'Notifica disponibilità') : '', !this.outOfStock && !this.onlyIconButton ?
|
|
128
137
|
h("jump-button", { variant: "secondary", size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addToCartText ? this.addToCartText : 'Aggiungi al carrello') : ''))));
|
|
129
138
|
}
|
|
@@ -592,6 +601,24 @@ export class JumpCardEcommerce {
|
|
|
592
601
|
"reflect": false,
|
|
593
602
|
"defaultValue": "false"
|
|
594
603
|
},
|
|
604
|
+
"isMini": {
|
|
605
|
+
"type": "boolean",
|
|
606
|
+
"mutable": false,
|
|
607
|
+
"complexType": {
|
|
608
|
+
"original": "boolean",
|
|
609
|
+
"resolved": "boolean",
|
|
610
|
+
"references": {}
|
|
611
|
+
},
|
|
612
|
+
"required": false,
|
|
613
|
+
"optional": false,
|
|
614
|
+
"docs": {
|
|
615
|
+
"tags": [],
|
|
616
|
+
"text": "Indicate if the card is Mini Card"
|
|
617
|
+
},
|
|
618
|
+
"attribute": "is-mini",
|
|
619
|
+
"reflect": false,
|
|
620
|
+
"defaultValue": "false"
|
|
621
|
+
},
|
|
595
622
|
"addedToCart": {
|
|
596
623
|
"type": "boolean",
|
|
597
624
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-card-ecommerce.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen} from '@stencil/core';\n\ninterface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n // Add more keys as needed\n}\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicate if card has only icon button*/\n @Prop() onlyIconButton: boolean = false;\n\n /** Indicate if card has background*/\n @Prop() hasBackground: boolean = false;\n\n /** Indicates the badge of the card*/\n @Prop() badge: string;\n\n /** Indicates if the product is favorite */\n\n @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n /** Indicate if the whislist is active in shop*/\n @Prop() hasFavorite: boolean = false;\n\n /** Indicate if the whislist will be slotted*/\n @Prop() hasSlotForFavorite: boolean = false;\n\n /** Indicates if the favorite button is render as an anchor, and define the url*/\n @Prop() favoriteHref: string;\n\n /** Indicates the link of the card*/\n @Prop() link: string;\n\n /** Indicates the image's src of the card*/\n @Prop() img: string ;\n\n /** Indicates the img's alt of the card*/\n @Prop() imgAlt: string;\n\n /** Indicates the over image's src of the card*/\n @Prop() hoverImg: string ;\n\n /** Indicates the hover img's alt of the card*/\n @Prop() hoverImgAlt: string;\n\n /** Indicates the videoSrc of the card*/\n @Prop() videoSrc: string;\n\n /** Indicates the notificationUrl of the card*/\n @Prop() notificationUrl: string;\n\n /** Indicates the notificationText of the card*/\n @Prop() notificationText: string = '';\n\n /** Indicates the title of the card*/\n @Prop() productName: string ;\n\n /** Indicates the subtitle of the card*/\n @Prop() subtitle: string;\n\n /** Indicates the ID of the product, can be also a SKU*/\n @Prop() productId: string ;\n\n /** Indicates the price of the card */\n @Prop() price: number;\n\n /** Indicates the sale price of the card */\n @Prop() salePrice: number;\n\n /** Indicates the currency of the card */\n @Prop() currency: string = '€';\n\n /** Indicates if the product is outOfStock */\n @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n\n /** Indicates the outOfStockText of the product*/\n @Prop() outOfStockText: string;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() addToCartText: string ;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() waitingListText: string ;\n\n /** Indicate if the user request to be notified when te product is avaible*/\n @Prop() addToWaitingList: boolean = false;\n\n /* ---------------------- @STATE ------------------------- */\n\n /** Indicate if the product is added to cart --> non deve esserci nelle storie! */\n @Prop() addedToCart: boolean = false;\n\n @Prop() endAddedToCart: boolean = false;\n\n @State() variations: Variation[] = [];\n\n @State() selectedVariation: Variation;\n\n // è una proprietà che viene cambiata solo da dentro\n quantity: number;\n\n variationSelectEl: HTMLSelectElement;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n @Listen(\"jump-card-ecommerce-option-connected\")\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n this.variations = [...this.variations, { ...props }];\n }\n\n onVariationSelected(variation) {\n this.selectedVariation = variation;\n this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n }\n\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentWillLoad() {}\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n }\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.removeEventListener('jump-change',this.onQuantityChange);\n }\n }\n\n /* ---------------------- @METHODS ------------------------- */\n onQuantityChange(e) {\n this.quantity = e.detail.value ?? false;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite\n }\n );\n }\n\n addProductToCart() {\n this.addedToCart = true;\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: this.selectedVariation ?? null\n };\n this.productAddToCart.emit(payload);\n\n setTimeout(() => {\n this.addedToCart = false;\n }, 6000);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList\n }\n )\n }\n\n render() {\n const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\n function calculateDiscount(price: number, salePrice: number): string {\n const discount = ((price - salePrice) / price) * 100;\n return discount.toFixed(0);\n };\n\n return (\n <Host>\n {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" label={this.badge}></jump-badge> : ''}\n \n {this.hasFavorite ? \n this.favoriteHref != '' ? \n <jump-button href={this.favoriteHref} onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n :\n <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n : \n this.hasSlotForFavorite ? <div class=\"Favorite\"><slot name=\"favorite\"></slot> </div> : null\n }\n\n <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} `}>\n {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n {this.hoverImg && !this.videoSrc ? <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n </figure>\n {this.videoSrc && !this.img ?\n <video autoplay>\n <source src={this.videoSrc} type=\"video/mp4\"/>\n <source src={this.videoSrc} type=\"video/mov\"/>\n <source src={this.videoSrc} type=\"video/webm\"/>\n </video> : ''}\n </a>\n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text>\n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon>\n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n {this.onlyIconButton ?\n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon>\n </jump-button>\n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n <div>\n <div class=\"Info\">\n <div class=\"Product\">{this.productName}</div>\n {this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class=\"Price\">\n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n : null}\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.price}\n </div>\n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n : null}\n </div>\n : null}\n </div>\n\n <div class=\"SelectVariations\">\n {this.variations.length != 0 ?\n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n let currentValue = this.variationSelectEl.value;\n let currentVariation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\n this.onVariationSelected(currentVariation);\n }}\n >\n {this.variations\n .filter((variation) => !variation.imgUrl)\n .map((variation) => (\n <option value={variation.code}>{variation.label}</option>\n ))}\n </select>\n : null }\n </div>\n <slot name=\"quantity\"></slot>\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\n\n {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n { this.outOfStock ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'}\n </jump-button> : ''\n }\n\n { !this.outOfStock && !this.onlyIconButton ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.addToCartText ? this.addToCartText : 'Aggiungi al carrello'}\n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}\n"]}
|
|
1
|
+
{"version":3,"file":"jump-card-ecommerce.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AAerG,MAAM,OAAO,iBAAiB;;8BAQM,KAAK;6BAGN,KAAK;;wBAOmB,KAAK;2BAG/B,KAAK;kCAGE,KAAK;;;;;;;;;gCA2BR,EAAE;;;;;;wBAkBV,GAAG;0BAG6B,KAAK;;;;gCAY5B,KAAK;sBAGf,KAAK;2BAKA,KAAK;8BAEF,KAAK;0BAEJ,EAAE;;;IAoBrC,SAAS,CAAC,CAAC;QACT,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,qDAAqD;QAC3E,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,oBAAO,KAAK,EAAG,CAAC;IACvD,CAAC;IAED,mBAAmB,CAAC,SAAS;QAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,0CAA0C;IACpF,CAAC;IAGD,iEAAiE;IAEjE,iBAAiB,KAAI,CAAC;IAEtB,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE5E,IAAG,IAAI,CAAC,cAAc,EAAC,CAAC;YACtB,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,aAAa,EAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACvF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC/D,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YAC3B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAC5E,IAAG,IAAI,CAAC,cAAc,EAAC,CAAC;YACtB,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,aAAa,EAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC/E,CAAC;IACH,CAAC;IAED,+DAA+D;IAC/D,gBAAgB,CAAC,CAAC;;QAChB,IAAI,CAAC,QAAQ,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,mCAAI,KAAK,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CACtB;YACE,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CACF,CAAC;IACJ,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,MAAM,OAAO,GAAG;YACd,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,QAAQ,EAAE,MAAA,IAAI,CAAC,QAAQ,mCAAI,IAAI;YAC/B,SAAS,EAAE,MAAA,IAAI,CAAC,iBAAiB,mCAAI,IAAI;SAC1C,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAED,WAAW;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAC1B;YACE,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;SACxC,CACF,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;QAClF,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5E,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAE9C,SAAS,iBAAiB,CAAC,KAAa,EAAE,SAAiB;YACzD,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;YACrD,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC7B,CAAC;QAAA,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAY,KAAK,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAAE,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAe,CAAC,CAAC,CAAC,EAAE;YAElK,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;gBAClC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;oBACzB,mBAAa,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAG,KAAK,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,QAAQ;wBAC7M,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,EAAC,QAAQ,GAAa,CACnG;oBACV,CAAC;wBACL,mBAAa,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAG,KAAK,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,QAAQ;4BACpL,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,EAAC,QAAQ,GAAa,CACnG;gBAChB,CAAC;oBACC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,UAAU;wBAAC,YAAM,IAAI,EAAC,UAAU,GAAQ;4BAAO,CAAC,CAAC,CAAC,IAAI;YAG7F,WAAK,KAAK,EAAE,SAAS,aAAa,IAAI,eAAe,IAAI,QAAQ,EAAE;gBACjE,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI;oBAChB,cAAQ,KAAK,EAAE,UAAU,eAAe,GAAG;wBACxC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,CAAC,CAAC,CAAC,EAAE;wBACpG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAQ,CAAC,CAAC,CAAC,EAAE,CAC/G;oBACR,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;wBAC3B,aAAO,QAAQ;4BACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE;4BAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE;4BAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,CAAC,CAAC,CAAC,EAAE,CACb;gBACF,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;oBACd,WAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE;wBACvF,mBAAa,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,EAAC,OAAO,EAAC,IAAI;4BAC3D,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAa;4BAClD;;gCAAQ,IAAI,CAAC,gBAAgB;oCAAS,CAC1B,CACV;oBACR,CAAC,CAAC,IAAI;gBACJ,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC;oBACrC,WAAK,KAAK,EAAC,gBAAgB;wBACzB,mBAAa,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,QAAQ,QAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;4BAChG,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,GAAa,CACjE,CACV;oBACN,CAAC,CAAC,EAAE,CAEF;YAEN,WAAK,KAAK,EAAE,WAAW,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE;gBACnE,WAAK,KAAK,EAAE,QAAQ,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE;oBAChE;wBACE,WAAK,KAAK,EAAC,MAAM;4BACf,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,WAAW,CAAO;4BAC3C,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI,CAChF;wBAEL,IAAI,CAAC,KAAK,CAAC,CAAC;4BACX,WAAK,KAAK,EAAE,SAAS,QAAQ,EAAE;gCAC5B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;oCAC9D,WAAK,KAAK,EAAC,iBAAiB;;wCAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC;6CAAS;oCACvF,CAAC,CAAC,IAAI;gCAEL,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;oCACb,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;wCACxF,IAAI,CAAC,QAAQ;wCAAE,IAAI,CAAC,KAAK,CACtB;oCACR,CAAC;wCACC,WAAK,KAAK,EAAE,gBAAgB;4CACzB,IAAI,CAAC,QAAQ;4CAAE,IAAI,CAAC,SAAS,CAC1B;gCAGP,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;oCAC9D,WAAK,KAAK,EAAC,aAAa;wCAAE,IAAI,CAAC,QAAQ;wCAAE,IAAI,CAAC,SAAS,CAAO;oCAChE,CAAC,CAAC,IAAI,CACF;4BACN,CAAC,CAAC,IAAI,CACJ;oBAEL,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;wBACb,WAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;4BAC5B,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAC1C,QAAQ,EAAE,GAAG,EAAE;oCACb,IAAI,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;oCAChD,IAAI,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CACzC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,IAAI,YAAY,CAC9C,CAAC;oCACF,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;gCAC7C,CAAC,IAEA,IAAI,CAAC,UAAU;iCACb,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC;iCACxC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAClB,cAAQ,KAAK,EAAE,SAAS,CAAC,IAAI,IAAG,SAAS,CAAC,KAAK,CAAU,CAC5D,CAAC,CACK;4BACX,CAAC,CAAC,IAAI,CACF;wBACR,CAAC,CAAC,IAAI;oBAEL,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,GAAQ,CAAC,CAAC,CAAC,IAAI,CAChD;gBAEN,WAAK,KAAK,EAAE,UAAU,YAAY,IAAI,eAAe,IAAI,aAAa,IAAI,QAAQ,EAAE;oBAEjF,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAO,CAAC,CAAC,CAAC,EAAE;oBAE5G,IAAI,CAAC,UAAU,CAAC,CAAC;wBACjB,mBAAa,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;4BAClF,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAa;4BACvH,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,wBAAwB,CAC3D,CAAC,CAAC,CAAC,EAAE;oBAGnB,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;wBAC1C,mBAAa,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;4BACvF,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAa;4BACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,sBAAsB,CACrD,CAAC,CAAC,CAAC,EAAE,CAGjB,CAEF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen} from '@stencil/core';\n\ninterface Variation {\n code: string;\n imgUrl: string;\n label: string;\n taxonomy: string;\n // Add more keys as needed\n}\n\n@Component({\n tag: 'jump-card-ecommerce',\n styleUrl: 'jump-card-ecommerce.scss',\n shadow: true,\n})\nexport class JumpCardEcommerce {\n\n @Element() JumpCardEcommerce: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicate if card has only icon button*/\n @Prop() onlyIconButton: boolean = false;\n\n /** Indicate if card has background*/\n @Prop() hasBackground: boolean = false;\n\n /** Indicates the badge of the card*/\n @Prop() badge: string;\n\n /** Indicates if the product is favorite */\n\n @Prop({mutable:true, reflect: true}) favorite: boolean = false;\n\n /** Indicate if the whislist is active in shop*/\n @Prop() hasFavorite: boolean = false;\n\n /** Indicate if the whislist will be slotted*/\n @Prop() hasSlotForFavorite: boolean = false;\n\n /** Indicates if the favorite button is render as an anchor, and define the url*/\n @Prop() favoriteHref: string;\n\n /** Indicates the link of the card*/\n @Prop() link: string;\n\n /** Indicates the image's src of the card*/\n @Prop() img: string ;\n\n /** Indicates the img's alt of the card*/\n @Prop() imgAlt: string;\n\n /** Indicates the over image's src of the card*/\n @Prop() hoverImg: string ;\n\n /** Indicates the hover img's alt of the card*/\n @Prop() hoverImgAlt: string;\n\n /** Indicates the videoSrc of the card*/\n @Prop() videoSrc: string;\n\n /** Indicates the notificationUrl of the card*/\n @Prop() notificationUrl: string;\n\n /** Indicates the notificationText of the card*/\n @Prop() notificationText: string = '';\n\n /** Indicates the title of the card*/\n @Prop() productName: string ;\n\n /** Indicates the subtitle of the card*/\n @Prop() subtitle: string;\n\n /** Indicates the ID of the product, can be also a SKU*/\n @Prop() productId: string ;\n\n /** Indicates the price of the card */\n @Prop() price: number;\n\n /** Indicates the sale price of the card */\n @Prop() salePrice: number;\n\n /** Indicates the currency of the card */\n @Prop() currency: string = '€';\n\n /** Indicates if the product is outOfStock */\n @Prop({mutable:true, reflect: true}) outOfStock: boolean = false;\n\n /** Indicates the outOfStockText of the product*/\n @Prop() outOfStockText: string;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() addToCartText: string ;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() waitingListText: string ;\n\n /** Indicate if the user request to be notified when te product is avaible*/\n @Prop() addToWaitingList: boolean = false;\n\n /** Indicate if the card is Mini Card*/\n @Prop() isMini: boolean = false;\n\n /* ---------------------- @STATE ------------------------- */\n\n /** Indicate if the product is added to cart --> non deve esserci nelle storie! */\n @Prop() addedToCart: boolean = false;\n\n @Prop() endAddedToCart: boolean = false;\n\n @State() variations: Variation[] = [];\n\n @State() selectedVariation: Variation;\n\n // è una proprietà che viene cambiata solo da dentro\n quantity: number;\n\n variationSelectEl: HTMLSelectElement;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n @Event({ eventName: 'jump-variation-selected' }) variationSelected: EventEmitter; // verificare se corretto: aggiungo un evento\n\n @Listen(\"jump-card-ecommerce-option-connected\")\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n this.variations = [...this.variations, { ...props }];\n }\n\n onVariationSelected(variation) {\n this.selectedVariation = variation;\n this.variationSelected.emit(variation); // verificare se corretto: emetto l'evento\n }\n\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentWillLoad() {}\n\n componentDidLoad() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.addEventListener('jump-change', this.onQuantityChange.bind(this));\n this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n this.quantity = quantity;\n });\n }\n }\n\n disconnectedCallback() {\n this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n if(this.jumpQuantityEl){\n this.jumpQuantityEl.removeEventListener('jump-change',this.onQuantityChange);\n }\n }\n\n /* ---------------------- @METHODS ------------------------- */\n onQuantityChange(e) {\n this.quantity = e.detail.value ?? false;\n }\n\n onToggleFavorite() {\n this.favorite = !this.favorite;\n this.toggleFavorite.emit(\n {\n productId: this.productId,\n favorite: this.favorite\n }\n );\n }\n\n addProductToCart() {\n this.addedToCart = true;\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: this.selectedVariation ?? null\n };\n this.productAddToCart.emit(payload);\n\n setTimeout(() => {\n this.addedToCart = false;\n }, 6000);\n }\n\n waitingList() {\n this.addToWaitingList = true;\n this.productWaitingList.emit(\n {\n productId: this.productId,\n addToWaitingList: this.addToWaitingList\n }\n )\n }\n\n render() {\n const backgroundClass = this.hasBackground && !this.isMini ? 'hasBackground' : '';\n const iconOnlyClass = this.onlyIconButton && !this.isMini ? 'iconOnly' : '';\n const justifyClass = this.outOfStock ? 'justify-between' : '';\n const hasImageOnHover = this.hoverImg ? 'has-hover-image' : '';\n const miniCard = this.isMini ? 'is-mini' : '';\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>\n { !this.isMini && this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" label={this.badge}></jump-badge> : ''}\n \n { !this.isMini && this.hasFavorite ? \n this.favoriteHref != '' ? \n <jump-button href={this.favoriteHref} onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n :\n <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'} size=\"medium\"></jump-icon>\n </jump-button>\n : \n this.hasSlotForFavorite ? <div class=\"Favorite\"><slot name=\"favorite\"></slot> </div> : null\n }\n\n <div class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}>\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} `}>\n {this.img && !this.videoSrc ? <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> : ''}\n {this.hoverImg && !this.videoSrc ? <img class=\"Images__OnHover\" src={this.hoverImg} alt={this.hoverImgAlt}></img> : ''}\n </figure>\n {this.videoSrc && !this.img ?\n <video autoplay>\n <source src={this.videoSrc} type=\"video/mp4\"/>\n <source src={this.videoSrc} type=\"video/mov\"/>\n <source src={this.videoSrc} type=\"video/webm\"/>\n </video> : ''}\n </a>\n { !this.isMini ? \n <div class={`NotificationCart ${this.addedToCart == true ? 'is-active fade-in-out' : ''}`}>\n <jump-button href={this.notificationUrl} variant=\"white\" text>\n <jump-icon slot=\"prefix\" name=\"check\"></jump-icon>\n <span> {this.notificationText} </span>\n </jump-button>\n </div>\n : null}\n { !this.isMini && this.onlyIconButton ?\n <div class=\"OnlyIconButton\">\n <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon>\n </jump-button>\n </div>\n : ''\n }\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n <div>\n <div class=\"Info\">\n <div class=\"Product\">{this.productName}</div>\n { !this.isMini && this.subtitle ? <div class=\"Subtitle\">{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Discount\"> {calculateDiscount(this.price, this.salePrice)}% </div>\n : null}\n\n {!this.isMini ?\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.price}\n </div> \n : \n <div class={`Price__Regular`}>\n {this.currency}{this.salePrice}\n </div> \n }\n\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n : null}\n </div>\n : null}\n </div>\n\n {!this.isMini ? \n <div class=\"SelectVariations\">\n {this.variations.length != 0 ?\n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n let currentValue = this.variationSelectEl.value;\n let currentVariation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\n this.onVariationSelected(currentVariation);\n }}\n >\n {this.variations\n .filter((variation) => !variation.imgUrl)\n .map((variation) => (\n <option value={variation.code}>{variation.label}</option>\n ))}\n </select>\n : null }\n </div>\n : null}\n\n {!this.isMini ? <slot name=\"quantity\"></slot> : null}\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n { this.outOfStock ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'}\n </jump-button> : ''\n }\n\n { !this.outOfStock && !this.onlyIconButton ?\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon>\n {this.addToCartText ? this.addToCartText : 'Aggiungi al carrello'}\n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -118,7 +118,7 @@ export default {
|
|
|
118
118
|
},
|
|
119
119
|
price: {
|
|
120
120
|
name: 'price',
|
|
121
|
-
description: 'Prezzo del prodotto',
|
|
121
|
+
description: 'Prezzo del prodotto; Se la card è in versione Mini gli va passato il prezzo scontato',
|
|
122
122
|
control: 'number',
|
|
123
123
|
},
|
|
124
124
|
salePrice: {
|
|
@@ -147,6 +147,12 @@ export default {
|
|
|
147
147
|
description: 'cta per richiedere l\'avviso se il prodotto torna disponibile',
|
|
148
148
|
control: 'text',
|
|
149
149
|
},
|
|
150
|
+
isMini: {
|
|
151
|
+
name: 'is-mini',
|
|
152
|
+
description: 'Indica se la card è di dimensioni ridotte',
|
|
153
|
+
control: 'boolean',
|
|
154
|
+
defaultValue: false
|
|
155
|
+
},
|
|
150
156
|
}
|
|
151
157
|
};
|
|
152
158
|
// const Template = (args) => {
|
|
@@ -263,5 +269,6 @@ CardEvent.args = {
|
|
|
263
269
|
outOfStockText: 'Esaurito',
|
|
264
270
|
addtoCartText: 'Aggiungi al carrello',
|
|
265
271
|
waitingListText: 'Notifica disponibilità',
|
|
272
|
+
isMini: true,
|
|
266
273
|
};
|
|
267
274
|
//# sourceMappingURL=jump-card-ecommerce.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-card-ecommerce.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,IAAI,EAAE,gBAAgB;YACtB,WAAW,EAAE,yCAAyC;YACtD,OAAO,EAAE,SAAS;SACnB;QACD,cAAc,EAAE;YACd,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,4DAA4D;YACzE,OAAO,EAAE,SAAS;SACnB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,kBAAkB;YAC/B,OAAO,EAAE,MAAM;SAChB;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,SAAS;SACnB;QACD,WAAW,EAAE;YACX,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,SAAS;SACnB;QACD,YAAY,EAAE;YACZ,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,mHAAmH;YAChI,OAAO,EAAE,MAAM;SAChB;QACD,kBAAkB,EAAE;YAClB,IAAI,EAAE,uBAAuB;YAC7B,WAAW,EAAE,mIAAmI;YAChJ,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,IAAI;SACnB;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,+EAA+E;YAC5F,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,gIAAgI;YAC9I,EAAE,EAAC;gBACD,GAAG,EAAE,UAAU;gBACf,MAAM,EAAE,KAAK;aACd;SACF;QACD,MAAM,EAAE;YACN,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,sEAAsE;YACnF,OAAO,EAAE,MAAM;YACf,EAAE,EAAC;gBACD,GAAG,EAAE,KAAK;gBACV,MAAM,EAAE,IAAI;aACb;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,wFAAwF;YACrG,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,2LAA2L;YACzM,EAAE,EAAC;gBACD,GAAG,EAAE,UAAU;gBACf,MAAM,EAAE,KAAK;aACd;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,+EAA+E;YAC5F,OAAO,EAAE,MAAM;YACf,EAAE,EAAC;gBACD,GAAG,EAAE,KAAK;gBACV,MAAM,EAAE,IAAI;aACb;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,qEAAqE;YAClF,OAAO,EAAE,MAAM;YACf,EAAE,EAAC;gBACD,GAAG,EAAE,KAAK;gBACV,MAAM,EAAE,KAAK;aACd;SACF;QACD,eAAe,EAAE;YACf,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,oCAAoC;YACjD,OAAO,EAAE,MAAM;SAChB;QACD,gBAAgB,EAAE;YAChB,IAAI,EAAE,mBAAmB;YACzB,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,MAAM;SAChB;QACD,WAAW,EAAE;YACX,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,mBAAmB;YAChC,OAAO,EAAE,MAAM;SAChB;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM;SAChB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,iBAAiB;YAC9B,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,qBAAqB;YAClC,OAAO,EAAE,QAAQ;SAClB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,8BAA8B;YAC3C,OAAO,EAAE,QAAQ;SAClB;QACD,UAAU,EAAE;YACV,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,kCAAkC;YAC/C,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,KAAK;SACpB;QACD,cAAc,EAAE;YACd,IAAI,EAAE,mBAAmB;YACzB,WAAW,EAAE,iDAAiD;YAC9D,OAAO,EAAE,MAAM;SAChB;QACD,aAAa,EAAE;YACb,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,oCAAoC;YACjD,OAAO,EAAE,MAAM;SAChB;QACD,eAAe,EAAE;YACf,IAAI,EAAE,mBAAmB;YACzB,WAAW,EAAE,+DAA+D;YAC5E,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,+BAA+B;AAC/B,yDAAyD;AACzD,qFAAqF;AACrF,IAAI;AAEJ,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;yBACK,UAAU;;;;;;;GAOhC,CAAC,CAAC;AACL,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;IACV,aAAa,EAAE,IAAI;IACnB,cAAc,EAAE,KAAK;IACrB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,WAAW;IACjB,GAAG,EAAE,iHAAiH;IACtH,MAAM,EAAE,UAAU;IAClB,QAAQ,EAAE,iHAAiH;IAC3H,WAAW,EAAE,mBAAmB;IAChC,eAAe,EAAE,OAAO;IACxB,gBAAgB,EAAE,sBAAsB;IACxC,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,GAAG;IACd,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,GAAG;IACb,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,UAAU;IAC1B,aAAa,EAAE,sBAAsB;IACrC,eAAe,EAAE,wBAAwB;CAC1C,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACvC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;2BACO,UAAU;;;;;;;;;;;;;oDAae,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BnD,CAAE,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,SAAS,CAAC,IAAI,GAAG;IACf,aAAa,EAAE,IAAI;IACnB,cAAc,EAAE,KAAK;IACrB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,KAAK;IAClB,kBAAkB,EAAE,IAAI;IACxB,IAAI,EAAE,WAAW;IACjB,GAAG,EAAE,iHAAiH;IACtH,MAAM,EAAE,UAAU;IAClB,QAAQ,EAAE,iHAAiH;IAC3H,WAAW,EAAE,mBAAmB;IAChC,eAAe,EAAE,OAAO;IACxB,gBAAgB,EAAE,sBAAsB;IACxC,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,GAAG;IACd,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,GAAG;IACb,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,UAAU;IAC1B,aAAa,EAAE,sBAAsB;IACrC,eAAe,EAAE,wBAAwB;CAC1C,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/CardEcommerce/Card',\n tags: ['autodocs'],\n argTypes: {\n hasBackground: {\n name: 'has-background',\n description: 'Aggiungi o meno il background alla card',\n control: 'boolean',\n },\n onlyIconButton: {\n name: 'only-icon-button',\n description: 'Cambia lo stile della card mostrando solo il bottone icona',\n control: 'boolean',\n },\n badge: {\n name: 'badge',\n description: 'Badge della card',\n control: 'text',\n },\n favorite: {\n name: 'favorite',\n description: 'Aggiunge il prodotto ai preferiti',\n control: 'boolean',\n },\n hasFavorite: {\n name: 'has-favorite',\n description: 'Aggiunge il prodotto ai preferiti',\n control: 'boolean',\n },\n favoriteHref: {\n name: 'favorite-href',\n description: 'Se l\\'icona dei preferiti deve avere un link, inserire l\\'href, altrimenti rimane un bottone che emette un evento',\n control: 'text',\n },\n hasSlotForFavorite: {\n name: 'has-slot-for-favorite',\n description: 'Di default la card ecommerce ha un bottone icona (o ancora); Se hasSlotForFavorite è true il bottone viene sostituito da uno slot',\n control: 'boolean',\n defaultValue: true,\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 videoSrc',\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 if:{\n arg: 'videoSrc',\n exists: false\n }\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 hoverImg: {\n name: 'hover-img',\n description: 'Url dell\\'immagine in hover da visualizzare, si attiva solo se non è presente videoSrc',\n control: 'text',\n 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',\n if:{\n arg: 'videoSrc',\n exists: false\n }\n },\n hoverImgAlt: {\n name: 'hover-img-alt',\n description: 'Alt dell\\'immagine in hover da visualizzare, si attiva solo se è presente img',\n control: 'text',\n if:{\n arg: 'img',\n exists: true\n }\n },\n videoSrc: {\n name: 'video-src',\n description: 'Url del video da visualizzare, si attiva solo se non è presente img',\n control: 'text',\n if:{\n arg: 'img',\n exists: false\n }\n },\n notificationUrl: {\n name: 'notification-url',\n description: 'Url della notifica da visualizzare',\n control: 'text',\n },\n notificationText: {\n name: 'notification-text',\n description: 'Testo della notifica da visualizzare',\n control: 'text',\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',\n control: 'number',\n },\n salePrice: {\n name: 'sale-price',\n description: 'Prezzo scontato del prodotto',\n control: 'number',\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 addToCartText: {\n name: 'add-to-cart-text',\n description: 'Testo bottone aggiungi al carrello',\n control: 'text',\n },\n waitingListText: {\n name: 'waiting-list-text',\n description: 'cta per richiedere l\\'avviso se il prodotto torna disponibile',\n control: 'text',\n },\n }\n};\n\n// const Template = (args) => {\n// const attributes = generateAttributesFromArgs(args);\n// return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>`);\n// }\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <jump-card-ecommerce ${attributes}>\n </jump-card-ecommerce>\n <style>\n jump-card-ecommerce {\n --jump-badge-background: blue;\n }\n </style>\n `);\n}\n\nexport const Card = Template.bind({});\nCard.args = {\n hasBackground: true,\n onlyIconButton: false,\n badge: 'In offerta',\n favorite: false,\n hasFavorite: true,\n favoriteHref: '/preferiti',\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 hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n hoverImgAlt: 'immagine in hover',\n notificationUrl: '/cart',\n notificationText: 'Aggiunto al carrello',\n productName: 'T-shirt',\n subtitle: 'T-shirt da uomo',\n productId: '1',\n price: 15,\n salePrice: 10,\n currency: '€',\n outOfStock: false,\n outOfStockText: 'Esaurito',\n addtoCartText: 'Aggiungi al carrello',\n waitingListText: 'Notifica disponibilità',\n};\n\nconst TemplateWithEvent = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <jump-card-ecommerce ${attributes}> \n <div slot=\"favorite\">\n <jump-button class=\"Favorite\" variant=\"primary\" size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category=\"light\" size=\"medium\"></jump-icon>\n </jump-button>\n </div>\n <jump-card-ecommerce-option code=\"size1\" label=\"sono una select un pò lunga\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"size2\" label=\"L\" sku=\"cod123\"></jump-card-ecommerce-option>\n </jump-card-ecommerce>\n <script>\n\n (function() {\n let container; \n container = document.querySelector('#story--${id}');\n\n container.querySelector('jump-card-ecommerce').addEventListener( 'jump-toggle-favorite', ev => {\n let productId = ev.detail.productId;\n let favorite = ev.detail.favorite;\n if(favorite){\n console.log( 'Prodotto ' + productId + ' aggiunto ai preferiti');\n } else {\n console.log( 'Prodotto ' + productId + ' rimosso dai preferiti');\n }\n })\n\n container.querySelector('jump-card-ecommerce').addEventListener( 'jump-add-to-cart', ev => {\n let productId = ev.detail.productId;\n let addedToCart = ev.detail.addedToCart;\n if(addedToCart){\n console.log( 'Prodotto ' + productId + ' aggiunto al carrello');\n } \n })\n\n container.querySelector('jump-card-ecommerce').addEventListener('jump-variation-selected', ev => {\n let variation = ev.detail;\n console.log('Variation selected', variation);\n });\n\n })();\n\n </script>\n ` );\n}\n\nexport const CardEvent = TemplateWithEvent.bind({});\nCardEvent.args = {\n hasBackground: true,\n onlyIconButton: false,\n badge: 'In offerta',\n favorite: false,\n hasFavorite: false,\n hasSlotForFavorite: true,\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 hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n hoverImgAlt: 'immagine in hover',\n notificationUrl: '/cart',\n notificationText: 'Aggiunto al carrello',\n productName: 'T-shirt',\n subtitle: 'T-shirt da uomo',\n productId: '1',\n price: 15,\n salePrice: 10,\n currency: '€',\n outOfStock: false,\n outOfStockText: 'Esaurito',\n addtoCartText: 'Aggiungi al carrello',\n waitingListText: 'Notifica disponibilità',\n};"]}
|
|
1
|
+
{"version":3,"file":"jump-card-ecommerce.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/CardEcommerce/Card',\n tags: ['autodocs'],\n argTypes: {\n hasBackground: {\n name: 'has-background',\n description: 'Aggiungi o meno il background alla card',\n control: 'boolean',\n },\n onlyIconButton: {\n name: 'only-icon-button',\n description: 'Cambia lo stile della card mostrando solo il bottone icona',\n control: 'boolean',\n },\n badge: {\n name: 'badge',\n description: 'Badge della card',\n control: 'text',\n },\n favorite: {\n name: 'favorite',\n description: 'Aggiunge il prodotto ai preferiti',\n control: 'boolean',\n },\n hasFavorite: {\n name: 'has-favorite',\n description: 'Aggiunge il prodotto ai preferiti',\n control: 'boolean',\n },\n favoriteHref: {\n name: 'favorite-href',\n description: 'Se l\\'icona dei preferiti deve avere un link, inserire l\\'href, altrimenti rimane un bottone che emette un evento',\n control: 'text',\n },\n hasSlotForFavorite: {\n name: 'has-slot-for-favorite',\n description: 'Di default la card ecommerce ha un bottone icona (o ancora); Se hasSlotForFavorite è true il bottone viene sostituito da uno slot',\n control: 'boolean',\n defaultValue: true,\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 videoSrc',\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 if:{\n arg: 'videoSrc',\n exists: false\n }\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 hoverImg: {\n name: 'hover-img',\n description: 'Url dell\\'immagine in hover da visualizzare, si attiva solo se non è presente videoSrc',\n control: 'text',\n 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',\n if:{\n arg: 'videoSrc',\n exists: false\n }\n },\n hoverImgAlt: {\n name: 'hover-img-alt',\n description: 'Alt dell\\'immagine in hover da visualizzare, si attiva solo se è presente img',\n control: 'text',\n if:{\n arg: 'img',\n exists: true\n }\n },\n videoSrc: {\n name: 'video-src',\n description: 'Url del video da visualizzare, si attiva solo se non è presente img',\n control: 'text',\n if:{\n arg: 'img',\n exists: false\n }\n },\n notificationUrl: {\n name: 'notification-url',\n description: 'Url della notifica da visualizzare',\n control: 'text',\n },\n notificationText: {\n name: 'notification-text',\n description: 'Testo della notifica da visualizzare',\n control: 'text',\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 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 addToCartText: {\n name: 'add-to-cart-text',\n description: 'Testo bottone aggiungi al carrello',\n control: 'text',\n },\n waitingListText: {\n name: 'waiting-list-text',\n description: 'cta per richiedere l\\'avviso se il prodotto torna disponibile',\n control: 'text',\n },\n isMini: {\n name: 'is-mini',\n description: 'Indica se la card è di dimensioni ridotte',\n control: 'boolean',\n defaultValue: false\n },\n }\n};\n\n// const Template = (args) => {\n// const attributes = generateAttributesFromArgs(args);\n// return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>`);\n// }\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <jump-card-ecommerce ${attributes}>\n </jump-card-ecommerce>\n <style>\n jump-card-ecommerce {\n --jump-badge-background: blue;\n }\n </style>\n `);\n}\n\nexport const Card = Template.bind({});\nCard.args = {\n hasBackground: true,\n onlyIconButton: false,\n badge: 'In offerta',\n favorite: false,\n hasFavorite: true,\n favoriteHref: '/preferiti',\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 hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n hoverImgAlt: 'immagine in hover',\n notificationUrl: '/cart',\n notificationText: 'Aggiunto al carrello',\n productName: 'T-shirt',\n subtitle: 'T-shirt da uomo',\n productId: '1',\n price: 15,\n salePrice: 10,\n currency: '€',\n outOfStock: false,\n outOfStockText: 'Esaurito',\n addtoCartText: 'Aggiungi al carrello',\n waitingListText: 'Notifica disponibilità',\n};\n\nconst TemplateWithEvent = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <jump-card-ecommerce ${attributes}> \n <div slot=\"favorite\">\n <jump-button class=\"Favorite\" variant=\"primary\" size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category=\"light\" size=\"medium\"></jump-icon>\n </jump-button>\n </div>\n <jump-card-ecommerce-option code=\"size1\" label=\"sono una select un pò lunga\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"size2\" label=\"L\" sku=\"cod123\"></jump-card-ecommerce-option>\n </jump-card-ecommerce>\n <script>\n\n (function() {\n let container; \n container = document.querySelector('#story--${id}');\n\n container.querySelector('jump-card-ecommerce').addEventListener( 'jump-toggle-favorite', ev => {\n let productId = ev.detail.productId;\n let favorite = ev.detail.favorite;\n if(favorite){\n console.log( 'Prodotto ' + productId + ' aggiunto ai preferiti');\n } else {\n console.log( 'Prodotto ' + productId + ' rimosso dai preferiti');\n }\n })\n\n container.querySelector('jump-card-ecommerce').addEventListener( 'jump-add-to-cart', ev => {\n let productId = ev.detail.productId;\n let addedToCart = ev.detail.addedToCart;\n if(addedToCart){\n console.log( 'Prodotto ' + productId + ' aggiunto al carrello');\n } \n })\n\n container.querySelector('jump-card-ecommerce').addEventListener('jump-variation-selected', ev => {\n let variation = ev.detail;\n console.log('Variation selected', variation);\n });\n\n })();\n\n </script>\n ` );\n}\n\nexport const CardEvent = TemplateWithEvent.bind({});\nCardEvent.args = {\n hasBackground: true,\n onlyIconButton: false,\n badge: 'In offerta',\n favorite: false,\n hasFavorite: false,\n hasSlotForFavorite: true,\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 hoverImg: 'https://images.pexels.com/photos/9558695/pexels-photo-9558695.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n hoverImgAlt: 'immagine in hover',\n notificationUrl: '/cart',\n notificationText: 'Aggiunto al carrello',\n productName: 'T-shirt',\n subtitle: 'T-shirt da uomo',\n productId: '1',\n price: 15,\n salePrice: 10,\n currency: '€',\n outOfStock: false,\n outOfStockText: 'Esaurito',\n addtoCartText: 'Aggiungi al carrello',\n waitingListText: 'Notifica disponibilità',\n isMini: true,\n};"]}
|
|
@@ -17,7 +17,7 @@ export class CardEcommerceOption {
|
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return h(Host, { key: '
|
|
20
|
+
return h(Host, { key: '01f745fcf8e2c2c42f7bee83066a1b64617d3582' });
|
|
21
21
|
}
|
|
22
22
|
static get is() { return "jump-card-ecommerce-option"; }
|
|
23
23
|
static get encapsulation() { return "shadow"; }
|
|
@@ -39,9 +39,9 @@ export class JumpFilter {
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
|
-
return (h(Host, { key: '
|
|
43
|
-
h("jump-icon", { key: '
|
|
44
|
-
h("div", { key: '
|
|
42
|
+
return (h(Host, { key: '1a69c784c5b6db624ee6429ba62dd9d39af4464d', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'd7d685bf59530898edbf96808d6698ed9bc8cbd1', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, h("slot", { key: '995c601cf706391e6a07697c2df29a47294d5979', name: "prefix" }, this.filterButtonIcon &&
|
|
43
|
+
h("jump-icon", { key: '3a9272ac7f8c7a90939764cec46ef2747d2c0c37', library: "fa", category: "regular", name: this.filterButtonIcon, size: "small" }), this.filterButtonLabel), h("slot", { key: 'd5f4b65a97aaf640c4df6425194851f32897c553', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: 'aaac47cc408e75769c6cab47a8754c7cb1087e5b', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
|
|
44
|
+
h("div", { key: 'ebb54761b44ff83c26e3f6982f305ecd4b2e10af', class: 'filtersDrawer__header' }, h("jump-icon", { key: 'efd7fa78b5c7acf918115bd04461359468f7d83f', class: "small", name: this.filterButtonIcon }), h("h3", { key: '4eb1630d8ea915ee02a8d3a565c44a770ee6faad' }, this.filterHeading)), h("slot", { key: 'e77819fc97c8f6c675cbf750a7675a2073d57ed3' }))));
|
|
45
45
|
}
|
|
46
46
|
static get is() { return "jump-filter"; }
|
|
47
47
|
static get encapsulation() { return "shadow"; }
|
|
@@ -29,8 +29,8 @@ export class JumpFilterCheckbox {
|
|
|
29
29
|
return this.el.checked;
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h(Host, { key: '
|
|
33
|
-
h("sl-checkbox", { key: '
|
|
32
|
+
return (h(Host, { key: '758a9ecb3ef2c18e2bbc49b08d8ff61a280343b1', ref: (host) => this.host = host }, this.value && this.label &&
|
|
33
|
+
h("sl-checkbox", { key: 'cb755e8fb4863967583ec43b5e50df7cc9f22f3d', value: this.value, ref: (el) => this.el = el, checked: this.checked }, this.label), this.count && h("span", { key: 'd66bd4ae9299f8987fda43b047c1b1d75c79e822', class: "count" }, this.count)));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "jump-filter-checkbox"; }
|
|
36
36
|
static get encapsulation() { return "shadow"; }
|
|
@@ -119,10 +119,10 @@ export class JumpFiltergroup {
|
|
|
119
119
|
//this.toggleHiddenItems();
|
|
120
120
|
}
|
|
121
121
|
render() {
|
|
122
|
-
return (h(Host, { key: '
|
|
123
|
-
h("jump-button", { key: '
|
|
122
|
+
return (h(Host, { key: 'ce3016053c9b873e638053b21f57531e0b67bbe9' }, this.heading && h("h5", { key: '37ba791d0c3e7ba91bf9832dddbbc31c2778146d' }, this.heading), h("div", { key: '67cbb514b3633bd3804b930414f42b9f3281f700', class: "filterGroup" }, h("slot", { key: 'fdf5b012a9da04de96fab8f91ea856f42ac8c62b', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
|
|
123
|
+
h("jump-button", { key: '25c97a595a2d210938483a673e511020f77435e1', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, ref: (showMoreBtn) => {
|
|
124
124
|
this.showMoreBtn = showMoreBtn;
|
|
125
|
-
}, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '
|
|
125
|
+
}, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '962d1cc09d45e12a6a998d8313ce56b337c599f4', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-up' }))));
|
|
126
126
|
}
|
|
127
127
|
static get is() { return "jump-filtergroup"; }
|
|
128
128
|
static get encapsulation() { return "shadow"; }
|
|
@@ -22,7 +22,7 @@ export class JumpPagination {
|
|
|
22
22
|
}
|
|
23
23
|
/* --------------------- RENDER ------------------------------- */
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '65046c855bd1191502ecbe892f623b4f10d36f26', class: "JumpPagination" }, h("div", { key: '028b565a05e0fa852245e9899bb5c6cd98263cce', class: "JumpPagination__Wrapper" }, h("div", { key: 'e6c2d1402547dd8468e28764ba7e008a1624abb4', class: "indicators" }, h("div", { key: '53f9585d4cf3f99b37e25f84626553d79876d569', class: "elements" }, h("span", { key: '734c0828eeca8698a190c81d1a50899e4fcd0989' }, h("span", { key: 'd777032abe327a870b87194ddc7361601051ff6c' }, this.current), " ", this.pagLabel, " ", h("span", { key: '68433e5f31462e39561bbcc2fbff17ae4ebaa8a7' }, this.last))), h("div", { key: '36dd0dbd2f91d97e089cfe08664b70815d7d825a', class: "arrow" }, this.showFirstAndLast &&
|
|
26
26
|
// <button
|
|
27
27
|
// onClick={() => {this.current = 1} }
|
|
28
28
|
// disabled={(this.current === 1) ? true : false}>
|
|
@@ -30,14 +30,14 @@ export class JumpPagination {
|
|
|
30
30
|
// disabled={(this.current === 1) ? true : false}
|
|
31
31
|
// ></jump-icon>
|
|
32
32
|
// </button>
|
|
33
|
-
h("jump-button", { key: '
|
|
33
|
+
h("jump-button", { key: 'a5d7ebcae749f265b8efe90fc04ad18dca4bdae2', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '7cdf207787fe88998e0850ec85f64b917b170c74', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '297ff533f48da04c0da5a7ab33342c5913768fcb', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '13167c3b923ec229ff6112d246deaf7b59c3fbc7', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'b06cbb03ebc2c8fc4123051fd03177a80bc5a5ae', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'be3783abb94b0e7b7fc7cbc3542923ecb22e0211', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
34
34
|
// <button
|
|
35
35
|
// onClick={() => {this.current = this.last}}
|
|
36
36
|
// disabled={(this.current === this.last) ? true : false}
|
|
37
37
|
// >
|
|
38
38
|
// <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
|
|
39
39
|
// </button>
|
|
40
|
-
h("jump-button", { key: '
|
|
40
|
+
h("jump-button", { key: 'a2c99a817aee2a4d3382e23952f30c7248a08b58', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '6233f7f08663f11f680b23d376a168339c3b48ec', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "jump-pagination"; }
|
|
43
43
|
static get encapsulation() { return "shadow"; }
|
|
@@ -40,8 +40,9 @@ const TemplateWithListenerExample = (args, data) => {
|
|
|
40
40
|
container = document.querySelector('#story--${id}');
|
|
41
41
|
container.querySelector('#page-number').innerText = ${args.current};
|
|
42
42
|
|
|
43
|
-
container.querySelector('jump-pagination').addEventListener('jump-
|
|
44
|
-
|
|
43
|
+
container.querySelector('jump-pagination').addEventListener('jump-accordion-open', (ev) => {
|
|
44
|
+
console.log('ev', ev.detail);
|
|
45
|
+
// container.querySelector('#page-number').innerText = ev.detail.current;
|
|
45
46
|
});
|
|
46
47
|
})();
|
|
47
48
|
</script>`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-pagination.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,sCAAsC;IAC7C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QAED,gBAAgB,EAAE;YAChB,IAAI,EAAE,qBAAqB;YAC3B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,iBAAiB;SAC/B;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;KACF;CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,EAAE;IAC3B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU,qBAAqB,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACjD,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU;;;;;4DAKU,EAAE;oEACM,IAAI,CAAC,OAAO
|
|
1
|
+
{"version":3,"file":"jump-pagination.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,sCAAsC;IAC7C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QAED,gBAAgB,EAAE;YAChB,IAAI,EAAE,qBAAqB;YAC3B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,iBAAiB;SAC/B;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;KACF;CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,EAAE;IAC3B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU,qBAAqB,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACjD,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU;;;;;4DAKU,EAAE;oEACM,IAAI,CAAC,OAAO;;;;;;;oBAO5D,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,UAAU,CAAC,IAAI,GAAG;IAChB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtE,iBAAiB,CAAC,IAAI,GAAG;IACvB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,CAAC;IACV,IAAI,EAAC,EAAE;IACP,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvE,kBAAkB,CAAC,IAAI,GAAG;IACxB,gBAAgB,EAAE,IAAI;IACtB,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Pagination/PaginationBase',\n tags: ['autodocs'],\n argTypes: {\n pagLabel:{\n name: \"pag-label\",\n control: 'text',\n description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n },\n \n showFirstAndLast: {\n name: 'show-first-and-last',\n control: 'boolean',\n description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n },\n current: {\n name: 'current-page',\n control: 'number',\n description: 'Pagina corrente'\n },\n last: {\n name: 'last',\n control: 'number',\n description: 'Indica l\\'ultima pagina',\n },\n }\n};\n\nconst TemplatePag = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-pagination ${attributes}></jump-pagination>`);\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-pagination ${attributes}></jump-pagination>\n <div>La pagina corrente è: <span id=\"page-number\">loading..<span></div>\n <script>\n (function() {\n let container;\n container = document.querySelector('#story--${id}');\n container.querySelector('#page-number').innerText = ${args.current};\n\n container.querySelector('jump-pagination').addEventListener('jump-accordion-open', (ev) => {\n console.log('ev', ev.detail);\n // container.querySelector('#page-number').innerText = ev.detail.current;\n });\n })();\n </script>`);\n};\n\nexport const Playground = TemplatePag.bind({});\n\nPlayground.args = {\n showFirstAndLast: false,\n current: 1,\n last: 10,\n pagLabel: 'di'\n};\n\nexport const PaginationRidotto = TemplateWithListenerExample.bind({});\n\nPaginationRidotto.args = {\n showFirstAndLast: false,\n current: 1,\n last:10,\n pagLabel: 'di'\n};\n\nexport const PaginationCompleto = TemplateWithListenerExample.bind({});\n\nPaginationCompleto.args = {\n showFirstAndLast: true,\n current: 1,\n last: 10,\n pagLabel: 'di'\n};"]}
|
|
@@ -70,9 +70,9 @@ export class JumpPaginationTable {
|
|
|
70
70
|
/* --------------------- RENDER ------------------------------- */
|
|
71
71
|
render() {
|
|
72
72
|
var _a;
|
|
73
|
-
return (h(Host, { key: '
|
|
74
|
-
h("jump-button", { key: '
|
|
75
|
-
h("jump-button", { key: '
|
|
73
|
+
return (h(Host, { key: '9b2d529a1a4dafefe9107bedf7704d73d75b8fcb', class: "JumpPaginationTable" }, h("div", { key: 'd09e5e9b4b368332b7f92f86be272c4a12d4ffec', class: "JumpPaginationTable__Wrapper" }, h("div", { key: 'e3af23dcf805cc6f529517c91f3f2fabbc543b35', class: "elementsPerPage" }, h("label", { key: 'c7558061326b23be95e391657224792d590bb918', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '96f73a7f3f3aedd6d059b2e0dd8ce9133ab6654e', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '9160bf35ac48db7d2de9644da5f590b0bf6b0a3d', class: "indicators" }, h("div", { key: '09a475d1ac56cdfeb6135fe2b97f5758490981c3', class: "elements" }, h("span", { key: '3f11d9667843fb263353f2cdaa15fcfe7a6949dd' }, h("span", { key: '93024d6f5a7d7c44cc52a8c74dda2a62de0760e0' }, this.first), " - ", h("span", { key: '86324150394c9b2703919e05414d39e189738c9c' }, this.last), " ", this.pagLabel, " ", h("span", { key: '263569874c6a61abc9b4a854123496a4a2c3e6b8' }, this.total))), h("div", { key: '33730450809d5a29e0b878991c5dc33b9b15e03f', class: "arrow" }, this.showFirstAndLast &&
|
|
74
|
+
h("jump-button", { key: 'a56e565e29993942be493299fdcf7e52ca771f26', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '996ac7867f6216d82f19367c5ffa68f2e76a62d5', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '981929a37256f2b5dec3a7cee990bb48b49a4cc4', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '2b52a244117ec4b788ca0c09c6e5d43cdb61ef2d', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '1150e0c8b53c344d3217224873b2303257070e16', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '7877f5b820eee313b898c1f60d81643217a84b62', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
75
|
+
h("jump-button", { key: '2a28e054e8fb46b256f5d6ea3d35a68e1f510458', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '913d1c6baaed22a5e746322866dc17b409c46cde', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
76
76
|
}
|
|
77
77
|
static get is() { return "jump-pagination-table"; }
|
|
78
78
|
static get originalStyleUrls() {
|
|
@@ -44,11 +44,11 @@ export class JumpQuantity {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
48
|
-
h("jump-button", { key: '
|
|
47
|
+
return (h(Host, { key: 'e6811567495ec8f0f16869fe2b212dab943a4270', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: 'dd4d955b9a235c21332047bc095c82a1d094c88a' }, this.label), h("div", { key: 'aef877055f40d01b7d10380ca6ed31e43361cf48', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
48
|
+
h("jump-button", { key: '9475c6106e9b671e43ccf152b4ee2cb7ff08792a', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '5f8035d8f1247efb13b5cc10740ed371d2b6a692', library: "lucide", name: "minus", size: "small" })), h("input", { key: '980ab6a976445d76346b3819d0656bbb38072f31', ref: (el) => {
|
|
49
49
|
this.inputEl = el;
|
|
50
50
|
}, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
51
|
-
h("jump-button", { key: '
|
|
51
|
+
h("jump-button", { key: '9ebffb55fe109434fd5816bb9eb3772880f6bbe6', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '348f7746cdbf81dc3661ee94655d594e52349463', library: "lucide", name: "plus", size: "small" })))));
|
|
52
52
|
}
|
|
53
53
|
static get is() { return "jump-quantity"; }
|
|
54
54
|
static get encapsulation() { return "shadow"; }
|
|
@@ -72,7 +72,7 @@ export class JumpTab {
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
render() {
|
|
75
|
-
return (h(Host, { key: '
|
|
75
|
+
return (h(Host, { key: '3a44a455188ba68c8a032673181732b78cd9354e', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'c96a5609bbe3f72f1d587376cfae0e2dba5df433', class: "Wrapper " + this.variant }, h("slot", { key: 'aca6f37c75035073855dafcfb811065b23c40b75', name: "tab-item" })), h("div", { key: 'c16d14edc24c21f69e4bb72bc4a118b5011411df' }, h("slot", { key: 'ca9bf6d369db3be19d716c6395d6f922f0d477e2', name: "tab-content" }))));
|
|
76
76
|
}
|
|
77
77
|
static get is() { return "jump-tab"; }
|
|
78
78
|
static get encapsulation() { return "shadow"; }
|
|
@@ -19,8 +19,8 @@ export class JumpTabItem {
|
|
|
19
19
|
this.variant = parentVariant;
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (h(Host, { key: '
|
|
23
|
-
h("jump-icon", { key: '
|
|
22
|
+
return (h(Host, { key: '0bc03e23fbe7133b152ee378b40437975cabf5f8', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: 'f34ea1bf3292b6ae1995f3b4d055d811fd3f8d80', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
|
|
23
|
+
h("jump-icon", { key: 'd2c483a3a4b997227336d31fe25f342951aeaf60', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: 'e4b14bbec4dee6288b618c2c6cfb1b1377b070c8', class: "label" }, this.label))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "jump-tab-item"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,7 +5,7 @@ export class JumpTabPanel {
|
|
|
5
5
|
this.active = false;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: 'f1915ec3ee0123aa64a1b7e5fca21617ccbc4ee0', class: "JumpTabPanel", id: this.identifier }, h("div", { key: 'd559e4945498ec4d17fd0ed6c4cc7fd79410b94b', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: 'cddc57310ed0fc0a9090267a3f61eabd4770f8ee' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "jump-tab-panel"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|