@jumpgroup/jump-design-system 0.3.46 → 0.3.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/cjs/jump-card-ecommerce.cjs.entry.js +16 -18
  2. package/dist/cjs/jump-card-ecommerce.cjs.entry.js.map +1 -1
  3. package/dist/cjs/jump-design-system.cjs.js +1 -1
  4. package/dist/cjs/jump-pagination-table.cjs.entry.js +5 -5
  5. package/dist/cjs/jump-pagination-table.cjs.entry.js.map +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css +2 -0
  8. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js +56 -37
  9. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js.map +1 -1
  10. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js +28 -8
  11. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map +1 -1
  12. package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +23 -7
  13. package/dist/collection/components/jump-pagination-table/jump-pagination-table.js.map +1 -1
  14. package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js +20 -0
  15. package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js.map +1 -1
  16. package/dist/components/jump-card-ecommerce.js +18 -19
  17. package/dist/components/jump-card-ecommerce.js.map +1 -1
  18. package/dist/components/jump-pagination-table.js +7 -7
  19. package/dist/components/jump-pagination-table.js.map +1 -1
  20. package/dist/esm/jump-card-ecommerce.entry.js +16 -18
  21. package/dist/esm/jump-card-ecommerce.entry.js.map +1 -1
  22. package/dist/esm/jump-design-system.js +1 -1
  23. package/dist/esm/jump-pagination-table.entry.js +5 -5
  24. package/dist/esm/jump-pagination-table.entry.js.map +1 -1
  25. package/dist/esm/loader.js +1 -1
  26. package/dist/jump-design-system/jump-design-system.esm.js +1 -1
  27. package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
  28. package/dist/jump-design-system/p-174d297f.entry.js +2 -0
  29. package/dist/jump-design-system/p-174d297f.entry.js.map +1 -0
  30. package/dist/jump-design-system/p-b505bb33.entry.js +2 -0
  31. package/dist/jump-design-system/p-b505bb33.entry.js.map +1 -0
  32. package/dist/jump-design-system-elements.json +46 -4
  33. package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.d.ts +4 -2
  34. package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.stories.d.ts +12 -5
  35. package/dist/types/components/jump-pagination-table/jump-pagination-table.stories.d.ts +14 -0
  36. package/dist/types/components.d.ts +24 -8
  37. package/package.json +1 -1
  38. package/dist/jump-design-system/p-24cac36a.entry.js +0 -2
  39. package/dist/jump-design-system/p-24cac36a.entry.js.map +0 -1
  40. package/dist/jump-design-system/p-745c61b2.entry.js +0 -2
  41. package/dist/jump-design-system/p-745c61b2.entry.js.map +0 -1
@@ -7,7 +7,6 @@ export class JumpCardEcommerce {
7
7
  this.favorite = false;
8
8
  this.hasFavorite = false;
9
9
  this.hasSlotForFavorite = false;
10
- this.favoriteHref = undefined;
11
10
  this.link = undefined;
12
11
  this.img = undefined;
13
12
  this.imgAlt = undefined;
@@ -15,17 +14,19 @@ export class JumpCardEcommerce {
15
14
  this.hoverImgAlt = undefined;
16
15
  this.videoSrc = undefined;
17
16
  this.notificationUrl = undefined;
18
- this.notificationText = '';
17
+ this.notificationText = 'Aggiunto al carrello';
19
18
  this.productName = undefined;
20
19
  this.subtitle = undefined;
21
20
  this.productId = undefined;
22
21
  this.price = undefined;
23
22
  this.salePrice = undefined;
24
23
  this.currency = '€';
24
+ this.addToCartColor = 'secondary';
25
+ this.badgeColor = 'secondary';
25
26
  this.outOfStock = false;
26
27
  this.outOfStockText = undefined;
27
- this.addToCartText = undefined;
28
- this.waitingListText = undefined;
28
+ this.addToCartText = 'Aggiungi al carrello';
29
+ this.waitingListText = 'Notifica disponibilità';
29
30
  this.addToWaitingList = false;
30
31
  this.isMini = false;
31
32
  this.addedToCart = false;
@@ -144,11 +145,8 @@ export class JumpCardEcommerce {
144
145
  }
145
146
  ;
146
147
  return (h(Host, null, !this.isMini && this.badge ?
147
- h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: "secondary", dimension: "small", label: this.badge }) : '', !this.isMini && this.hasFavorite ?
148
- this.favoriteHref != '' ?
149
- 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" }))
150
- :
151
- 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" }))
148
+ h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: this.badgeColor, dimension: "small", label: this.badge }) : '', !this.isMini && this.hasFavorite ?
149
+ 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" }))
152
150
  :
153
151
  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 ?
154
152
  h("img", { class: "Images__OnHover", src: this.hoverImg, alt: this.hoverImgAlt }) : ''), this.videoSrc && !this.img ?
@@ -156,7 +154,7 @@ export class JumpCardEcommerce {
156
154
  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, " ")))
157
155
  : null, !this.isMini && this.onlyIconButton ?
158
156
  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" })))
159
- : ''), 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 ?
157
+ : ''), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, h("div", null, h("div", { class: "Info" }, h("a", { href: this.link, class: "Product" }, this.productName), !this.isMini && this.subtitle ? h("div", { class: "Subtitle" }, this.subtitle) : null), this.price ?
160
158
  h("div", { class: `Price ${miniCard}` }, !this.isMini && this.salePrice && this.salePrice < this.price ?
161
159
  h("div", { class: "Price__Discount" }, " ", calculateDiscount(this.price, this.salePrice), "% ")
162
160
  : null, !this.isMini ?
@@ -166,17 +164,17 @@ export class JumpCardEcommerce {
166
164
  h("div", { class: "Price__Sale" }, this.currency, this.salePriceFormatted)
167
165
  : null)
168
166
  : null), !this.isMini ?
169
- h("div", { class: "SelectVariations" }, this.variations.length != 0 ?
170
- h("select", { ref: (el) => (this.variationSelectEl = el), onChange: () => {
167
+ h("div", null, this.variations.length != 0 ?
168
+ h("div", { class: "SelectVariations" }, h("select", { ref: (el) => (this.variationSelectEl = el), onChange: () => {
171
169
  this.onVariationSelected();
172
170
  } }, this.variations
173
171
  .filter((variation) => !variation.imgUrl)
174
- .map((variation) => (h("option", { value: variation.code }, variation.label))))
175
- : null)
176
- : null, !this.isMini ? h("slot", { name: "quantity" }) : null), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, this.outOfStock ?
172
+ .map((variation) => (h("option", { value: variation.code }, variation.label)))))
173
+ : null, h("slot", { name: "quantity" }))
174
+ : null), h("div", { class: `Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}` }, this.outOfStock ?
177
175
  h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : '', this.outOfStock ?
178
- 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 ?
179
- 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') : ''))));
176
+ h("jump-button", { variant: this.addToCartColor, 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.outOfStock && !this.onlyIconButton ?
177
+ h("jump-button", { variant: this.addToCartColor, size: "small", text: true, onClick: () => this.addProductToCart() }, h("jump-icon", { slot: "prefix", name: !this.outOfStock ? 'cart-shopping' : 'bell', category: "regular", size: "small" }), this.addToCartText) : ''))));
180
178
  }
181
179
  static get is() { return "jump-card-ecommerce"; }
182
180
  static get encapsulation() { return "shadow"; }
@@ -299,23 +297,6 @@ export class JumpCardEcommerce {
299
297
  "reflect": false,
300
298
  "defaultValue": "false"
301
299
  },
302
- "favoriteHref": {
303
- "type": "string",
304
- "mutable": false,
305
- "complexType": {
306
- "original": "string",
307
- "resolved": "string",
308
- "references": {}
309
- },
310
- "required": false,
311
- "optional": false,
312
- "docs": {
313
- "tags": [],
314
- "text": "Indicates if the favorite button is render as an anchor, and define the url"
315
- },
316
- "attribute": "favorite-href",
317
- "reflect": false
318
- },
319
300
  "link": {
320
301
  "type": "string",
321
302
  "mutable": false,
@@ -451,7 +432,7 @@ export class JumpCardEcommerce {
451
432
  },
452
433
  "attribute": "notification-text",
453
434
  "reflect": false,
454
- "defaultValue": "''"
435
+ "defaultValue": "'Aggiunto al carrello'"
455
436
  },
456
437
  "productName": {
457
438
  "type": "string",
@@ -556,6 +537,42 @@ export class JumpCardEcommerce {
556
537
  "reflect": false,
557
538
  "defaultValue": "'\u20AC'"
558
539
  },
540
+ "addToCartColor": {
541
+ "type": "string",
542
+ "mutable": false,
543
+ "complexType": {
544
+ "original": "'primary' | 'secondary'|'white'|'neutral'",
545
+ "resolved": "\"neutral\" | \"primary\" | \"secondary\" | \"white\"",
546
+ "references": {}
547
+ },
548
+ "required": false,
549
+ "optional": false,
550
+ "docs": {
551
+ "tags": [],
552
+ "text": "Indicates the variant of the button"
553
+ },
554
+ "attribute": "add-to-cart-color",
555
+ "reflect": false,
556
+ "defaultValue": "'secondary'"
557
+ },
558
+ "badgeColor": {
559
+ "type": "string",
560
+ "mutable": false,
561
+ "complexType": {
562
+ "original": "'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger'",
563
+ "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
564
+ "references": {}
565
+ },
566
+ "required": false,
567
+ "optional": false,
568
+ "docs": {
569
+ "tags": [],
570
+ "text": "Indicates the variant of the button"
571
+ },
572
+ "attribute": "badge-color",
573
+ "reflect": false,
574
+ "defaultValue": "'secondary'"
575
+ },
559
576
  "outOfStock": {
560
577
  "type": "boolean",
561
578
  "mutable": true,
@@ -606,7 +623,8 @@ export class JumpCardEcommerce {
606
623
  "text": "Indicates the button class of the add to cart / notification button"
607
624
  },
608
625
  "attribute": "add-to-cart-text",
609
- "reflect": false
626
+ "reflect": false,
627
+ "defaultValue": "'Aggiungi al carrello'"
610
628
  },
611
629
  "waitingListText": {
612
630
  "type": "string",
@@ -623,7 +641,8 @@ export class JumpCardEcommerce {
623
641
  "text": "Indicates the button class of the add to cart / notification button"
624
642
  },
625
643
  "attribute": "waiting-list-text",
626
- "reflect": false
644
+ "reflect": false,
645
+ "defaultValue": "'Notifica disponibilit\u00E0'"
627
646
  },
628
647
  "addToWaitingList": {
629
648
  "type": "boolean",
@@ -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, Method } 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 @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\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 /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n @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() {\n let currentValue = this.variationSelectEl.value;\n let variation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\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\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 this.formatPrices();\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 let variations = this.selectedVariation;\n if (!variations && this.variations.length > 0) {\n variations = this.variations[0];\n }\n\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: variations ?? 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 formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 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 ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n\n {!this.isMini && this.hasFavorite ?\n this.favoriteHref != '' ?\n <jump-button href={this.favoriteHref} onClick={() => this.onToggleFavorite()}\n class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n size=\"medium\"></jump-icon>\n </jump-button>\n :\n <jump-button onClick={() => this.onToggleFavorite()} class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n size=\"medium\"></jump-icon>\n </jump-button>\n :\n this.hasSlotForFavorite ? <div class=\"Favorite\">\n <slot name=\"favorite\"></slot>\n </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 ?\n <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.priceFormatted}\n </div>\n :\n <div class={`Price__Regular`}>\n {this.currency}{this.salePrice && this.salePrice < this.price ? this.salePriceFormatted : this.priceFormatted}\n </div>\n }\n\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</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 this.onVariationSelected();\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 ?\n <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\"\n 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\"\n 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":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Listen, Method } 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 @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 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 = 'Aggiunto al carrello';\n\n /** Indicates the title of the card*/\n @Prop() productName: string;\n\n /** Indicates the subtitle of the card*/\n @Prop() subtitle: string;\n\n /** Indicates the ID of the product, can be also a SKU*/\n @Prop() productId: string;\n\n /** Indicates the price of the card */\n @Prop() price: number;\n\n /** Indicates the sale price of the card */\n @Prop() salePrice: number;\n\n /** Indicates the currency of the card */\n @Prop() currency: string = '€';\n\n /** Indicates the variant of the button */\n @Prop() addToCartColor: 'primary' | 'secondary'|'white'|'neutral' = 'secondary';\n\n /** Indicates the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\n\n /** Indicates if the product is outOfStock */\n @Prop({ mutable: true, reflect: true }) outOfStock: boolean = false;\n\n /** Indicates the outOfStockText of the product*/\n @Prop() outOfStockText: string;\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() addToCartText: string = 'Aggiungi al carrello';\n\n /** Indicates the button class of the add to cart / notification button */\n @Prop() waitingListText: string = 'Notifica disponibilità';\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 @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\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 /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n @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() {\n let currentValue = this.variationSelectEl.value;\n let variation = this.variations.find(\n (variation) => variation.code == currentValue,\n );\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\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 this.formatPrices();\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 let variations = this.selectedVariation;\n if (!variations && this.variations.length > 0) {\n variations = this.variations[0];\n }\n\n const payload = {\n productId: this.productId,\n addedToCart: this.addedToCart,\n quantity: this.quantity ?? null,\n variation: variations ?? 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 formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 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 ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n\n {!this.isMini && this.hasFavorite ?\n <jump-button onClick={() => this.onToggleFavorite()} class={`Favorite ${backgroundClass} ${iconOnlyClass}`}\n variant={this.favorite ? 'primary' : 'neutral'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'solid' : 'light'}\n size=\"medium\"></jump-icon>\n </jump-button>\n :\n this.hasSlotForFavorite ? <div class=\"Favorite\">\n <slot name=\"favorite\"></slot>\n </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 ?\n <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 <a href={this.link} class=\"Product\">{this.productName}</a>\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.priceFormatted}\n </div>\n :\n <div class={`Price__Regular`}>\n {this.currency}{this.salePrice && this.salePrice < this.price ? this.salePriceFormatted : this.priceFormatted}\n </div>\n }\n\n {!this.isMini && this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n </div>\n\n {!this.isMini ?\n <div>\n {this.variations.length != 0 ?\n <div class=\"SelectVariations\">\n <select\n ref={(el) => (this.variationSelectEl = el)} //salvo questo elemento in this.variationSelectEl\n onChange={() => {\n this.onVariationSelected();\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 </div>\n : null}\n <slot name=\"quantity\"></slot>\n </div>\n : null}\n\n </div>\n\n <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass} ${miniCard}`}>\n\n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n\n {this.outOfStock ?\n <jump-button variant={this.addToCartColor} size=\"small\" text onClick={() => this.waitingList()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\"\n size=\"small\"></jump-icon>\n {this.waitingListText}\n </jump-button> : ''\n }\n\n {!this.outOfStock && !this.onlyIconButton ?\n <jump-button variant={this.addToCartColor} size=\"small\" text onClick={() => this.addProductToCart()}>\n <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\"\n size=\"small\"></jump-icon>\n {this.addToCartText}\n </jump-button> : ''\n }\n\n </div>\n\n </div>\n </Host>\n );\n }\n\n}\n"]}
@@ -28,11 +28,6 @@ export default {
28
28
  description: 'Aggiunge il prodotto ai preferiti',
29
29
  control: 'boolean',
30
30
  },
31
- favoriteHref: {
32
- name: 'favorite-href',
33
- description: 'Se l\'icona dei preferiti deve avere un link, inserire l\'href, altrimenti rimane un bottone che emette un evento',
34
- control: 'text',
35
- },
36
31
  hasSlotForFavorite: {
37
32
  name: 'has-slot-for-favorite',
38
33
  description: 'Di default la card ecommerce ha un bottone icona (o ancora); Se hasSlotForFavorite è true il bottone viene sostituito da uno slot',
@@ -126,6 +121,30 @@ export default {
126
121
  description: 'Prezzo scontato del prodotto',
127
122
  control: 'number',
128
123
  },
124
+ addToCartColor: {
125
+ name: 'add-to-cart-color',
126
+ description: 'Colore del bottone aggiungi al carrello',
127
+ control: 'select',
128
+ options: [
129
+ 'primary',
130
+ 'secondary',
131
+ 'neutral',
132
+ 'white'
133
+ ],
134
+ },
135
+ badgeColor: {
136
+ name: 'badge-color',
137
+ description: 'Colore del badge',
138
+ control: 'select',
139
+ options: [
140
+ 'primary',
141
+ 'secondary',
142
+ 'neutral',
143
+ 'warning',
144
+ 'success',
145
+ 'danger',
146
+ ],
147
+ },
129
148
  outOfStock: {
130
149
  name: 'out-of-stock',
131
150
  description: 'Indica se il prodotto è esaurito',
@@ -178,7 +197,6 @@ Card.args = {
178
197
  badge: 'In offerta',
179
198
  favorite: false,
180
199
  hasFavorite: true,
181
- favoriteHref: '/preferiti',
182
200
  link: '/prodotto',
183
201
  img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
184
202
  imgAlt: 'Immagine',
@@ -207,6 +225,7 @@ const TemplateWithEvent = (args, data) => {
207
225
  <jump-icon slot="prefix" name="heart" category="light" size="medium"></jump-icon>
208
226
  </jump-button>
209
227
  </div>
228
+ <jump-quantity slot="quantity" min="1" max="10" step="1" show-buttons variant="horizontal"> </jump-quantity>
210
229
  <jump-card-ecommerce-option code="size1" label="sono una select un pò lunga"></jump-card-ecommerce-option>
211
230
  <jump-card-ecommerce-option code="size2" label="L" sku="cod123"></jump-card-ecommerce-option>
212
231
  </jump-card-ecommerce>
@@ -249,7 +268,6 @@ CardEvent.args = {
249
268
  hasBackground: true,
250
269
  onlyIconButton: false,
251
270
  badge: 'In offerta',
252
- favorite: false,
253
271
  hasFavorite: false,
254
272
  hasSlotForFavorite: true,
255
273
  link: '/prodotto',
@@ -265,10 +283,12 @@ CardEvent.args = {
265
283
  price: 15,
266
284
  salePrice: 10,
267
285
  currency: '€',
286
+ addToCartColor: 'primary',
287
+ badgeColor: 'primary',
268
288
  outOfStock: false,
269
289
  outOfStockText: 'Esaurito',
270
290
  addtoCartText: 'Aggiungi al carrello',
271
291
  waitingListText: 'Notifica disponibilità',
272
- isMini: true,
292
+ isMini: false,
273
293
  };
274
294
  //# 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":"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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};"]}
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 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 addToCartColor: {\n name: 'add-to-cart-color',\n description: 'Colore del bottone aggiungi al carrello',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'white'\n ],\n },\n badgeColor: {\n name: 'badge-color',\n description: 'Colore del badge',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'warning',\n 'success',\n 'danger',\n ],\n },\n outOfStock: {\n name: 'out-of-stock',\n description: 'Indica se il prodotto è esaurito',\n control: 'boolean',\n defaultValue: false\n },\n outOfStockText: {\n name: 'out-of-stock-text',\n description: 'Testo da visualizzare se il prodotto è esaurito',\n control: 'text',\n },\n 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 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-quantity slot=\"quantity\" min=\"1\" max=\"10\" step=\"1\" show-buttons variant=\"horizontal\"> </jump-quantity>\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 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 addToCartColor: 'primary',\n badgeColor: 'primary',\n outOfStock: false,\n outOfStockText: 'Esaurito',\n addtoCartText: 'Aggiungi al carrello',\n waitingListText: 'Notifica disponibilità',\n isMini: false,\n};"]}
@@ -30,7 +30,7 @@ export class JumpPaginationTable {
30
30
  /* -------------------- LYFECYCLE EVENTS ---------------------- */
31
31
  componentWillLoad() {
32
32
  this.elementsRangesArray = this.elementsRanges.split(',').map(Number);
33
- this.elPerPage = this.elementsRangesArray[0];
33
+ this.elPerPage = !this.elPerPage ? this.elementsRangesArray[0] : this.elPerPage;
34
34
  }
35
35
  /* -------------------- @LISTEN ------------------------------- */
36
36
  /* -------------------- @METHOD ------------------------------- */
@@ -41,7 +41,7 @@ export class JumpPaginationTable {
41
41
  doChangePage(dir) {
42
42
  let newFirst;
43
43
  let newLast;
44
- //TODO refactorare
44
+ //TODO refactorare
45
45
  if (dir === 'first') {
46
46
  newFirst = 1;
47
47
  newLast = Math.min(this.total, this.elPerPage);
@@ -70,9 +70,9 @@ export class JumpPaginationTable {
70
70
  /* --------------------- RENDER ------------------------------- */
71
71
  render() {
72
72
  var _a;
73
- return (h(Host, { key: '1dda2093aa5db80f7f6260ec3b7b5bd72d4052e0', class: "JumpPaginationTable" }, h("div", { key: '5a2b79b4edae8d0e57634adebf82420e0af35c70', class: "JumpPaginationTable__Wrapper" }, h("div", { key: 'a850c96c7271cb8a1c397a9a2ddc73bdf2ee7c29', class: "elementsPerPage" }, h("label", { key: '6492f9b966c7d478294d94e094738326c61cdccd', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '9267913fac8a30d4a9c0808311cadcc1bbaf3040', 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: 'b537b63284129d72b74f5840c746e8c2af64ad5b', class: "indicators" }, h("div", { key: '953b71539236ec5568aa05c27c6013b410cf1bb2', class: "elements" }, h("span", { key: 'a4a7e076ae54547c28efe931abc6c47e46a10210' }, h("span", { key: '9aef003d0e4ae086054ed93474f41f41c9a8c9a0' }, this.first), " - ", h("span", { key: '8b21dcbe189896770d960f234be75b79aa472488' }, this.last), " ", this.pagLabel, " ", h("span", { key: '5bed4022d88261ba0f81ea1c4efe638e7b618256' }, this.total))), h("div", { key: 'e5e9157e33a0bc378ce23c067ca1697118f8e60a', class: "arrow" }, this.showFirstAndLast &&
74
- h("jump-button", { key: '425e0f5133d814a6d4ebc73a0286cddbb377e778', 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: '042d40650b7e22c7039f7a36f6bd139219ae7ee6', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '766ebbcfa2d5dec6094fa38f42b1a4fa41bc96d3', 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: 'f7e98586070a619cc614c2aaaf7cc8176f8c8737', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'e72ab0fd379b3ba4028ea454218f75d7d9871988', 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: '92c2a994bbadbdb6ac40044426587bfe8ecf790d', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
75
- h("jump-button", { key: '7028f82644633bfb112f62f2fba3bc7eef9754cf', 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: '4240630bbd9a0c0c219d15a0ea6eeb65883c0a4b', slot: "suffix", name: "chevrons-right" }), " "))))));
73
+ return (h(Host, { key: '6edc329e44cf550e18300dd949e985103e7ca907', class: "JumpPaginationTable" }, h("div", { key: '74763ae5bcead30bdb79c2f177042007e4f22d2b', class: "JumpPaginationTable__Wrapper" }, h("div", { key: 'fe9d73f1e28cebce87b9a6b26f1a252827b2e409', class: "elementsPerPage" }, h("label", { key: '69a557884ae8156f5090ae6414ad3ca6b381a1e6', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: 'f63030a70690021611c1d6a29945bd8cc9977e90', 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: '7dd82fa0620bbbdbeb825ab28ec6264257f18cbd', class: "indicators" }, h("div", { key: '09989643cd7073e9b7db95e4746d209f4294c7de', class: "elements" }, h("span", { key: '6f4bbd59fa39504953989a7692842a148733d9bc' }, h("span", { key: '12e664c2d3bad1033188da673e37e1dd58f32e26' }, this.first), " - ", h("span", { key: 'c22ca1d793efc54078699c9b7f35169c814f905c' }, this.last), " ", this.pagLabel, " ", h("span", { key: '64e26a44bbb9c524138925db2b9bd2588dcef3b8' }, this.total))), h("div", { key: 'f9527eaf1adf59530f470eeb03897cbd3d88d4c4', class: "arrow" }, this.showFirstAndLast &&
74
+ h("jump-button", { key: 'a0b3d12ea97aac3c53b5276ec4218bb79b8dd0dd', 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: '5a680f20e3a7db2898d13058153bd6426141598e', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '54450a58c6779efd7034449a9bf45b72c6250627', 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: 'c4ecfdef4dad35eda6a1cba4796fcd7f22cb508f', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'c8b17abee650024dab962db11bcc99d0a55660dd', 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: '871208668717b1fcab6af32989239a9a98aa8c4b', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
75
+ h("jump-button", { key: '8acd4bdceb333afa582d68342c09dff0b62e20a7', 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: 'cb0da9e45ad20c89534f62ac4f5a36032aeb3311', slot: "suffix", name: "chevrons-right" }), " "))))));
76
76
  }
77
77
  static get is() { return "jump-pagination-table"; }
78
78
  static get originalStyleUrls() {
@@ -105,6 +105,23 @@ export class JumpPaginationTable {
105
105
  "reflect": false,
106
106
  "defaultValue": "\"10,20,60,100\""
107
107
  },
108
+ "elPerPage": {
109
+ "type": "number",
110
+ "mutable": false,
111
+ "complexType": {
112
+ "original": "number",
113
+ "resolved": "number",
114
+ "references": {}
115
+ },
116
+ "required": false,
117
+ "optional": false,
118
+ "docs": {
119
+ "tags": [],
120
+ "text": "Number of elements per page selected"
121
+ },
122
+ "attribute": "el-per-page",
123
+ "reflect": false
124
+ },
108
125
  "pagLabel": {
109
126
  "type": "string",
110
127
  "mutable": false,
@@ -217,8 +234,7 @@ export class JumpPaginationTable {
217
234
  }
218
235
  static get states() {
219
236
  return {
220
- "elementsRangesArray": {},
221
- "elPerPage": {}
237
+ "elementsRangesArray": {}
222
238
  };
223
239
  }
224
240
  static get events() {
@@ -1 +1 @@
1
- {"version":3,"file":"jump-pagination-table.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- */\n\n /* ---------------------- @ELEMENT ---------------------------- */\n\n /* ---------------------- @STATE ------------------------------ */\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /**\n * Values for the elements per page select\n */\n @Prop() elementsRanges: string = \"10,20,60,100\";\n\n @State() elementsRangesArray: number[];\n @Watch('elementsRanges')\n elementsRangesChanged(newValue, oldValue) {\n console.log('dentro el');\n if(newValue !== oldValue) {\n this.elementsRangesArray = newValue.split(',').map(Number);\n }\n this.elementsRangesArray = [...this.elementsRangesArray]\n console.log('elementsRangesChanged', newValue, oldValue);\n }\n\n /**\n * Number of elements per page selected\n */\n @State() elPerPage: number;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Total of elements\n */\n @Prop({ reflect: true }) total: number = 100; \n\n /**\n * First element of the page\n */\n @Prop({ reflect: true }) first: number = 1;\n\n /**\n * Last element of the page\n */\n @Prop({ reflect: true }) last: number = 10;\n\n /**\n * Show button to navigate so first e last page\n */\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n /* ---------------------- @EVENTS ------------------------- */\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n /* -------------------- LYFECYCLE EVENTS ---------------------- */\n componentWillLoad() {\n this.elementsRangesArray = this.elementsRanges.split(',').map(Number);\n this.elPerPage = this.elementsRangesArray[0];\n }\n\n /* -------------------- @LISTEN ------------------------------- */\n\n /* -------------------- @METHOD ------------------------------- */\n\n /* -------------------- LOCAL METHODS ------------------------- */\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n /* --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRangesArray.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <jump-button onClick={() => this.doChangePage('first')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n <jump-button onClick={() => this.doChangePage('previous')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => this.doChangePage('next')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {this.showFirstAndLast &&\n <jump-button onClick={() => this.doChangePage('last')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"]}
1
+ {"version":3,"file":"jump-pagination-table.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- */\n\n /* ---------------------- @ELEMENT ---------------------------- */\n\n /* ---------------------- @STATE ------------------------------ */\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /**\n * Values for the elements per page select\n */\n @Prop() elementsRanges: string = \"10,20,60,100\";\n\n @State() elementsRangesArray: number[];\n @Watch('elementsRanges')\n elementsRangesChanged(newValue, oldValue) {\n console.log('dentro el');\n if(newValue !== oldValue) {\n this.elementsRangesArray = newValue.split(',').map(Number);\n }\n this.elementsRangesArray = [...this.elementsRangesArray]\n console.log('elementsRangesChanged', newValue, oldValue);\n }\n\n /**\n * Number of elements per page selected\n */\n @Prop() elPerPage: number;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination.\n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Total of elements\n */\n @Prop({ reflect: true }) total: number = 100;\n\n /**\n * First element of the page\n */\n @Prop({ reflect: true }) first: number = 1;\n\n /**\n * Last element of the page\n */\n @Prop({ reflect: true }) last: number = 10;\n\n /**\n * Show button to navigate so first e last page\n */\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n /* ---------------------- @EVENTS ------------------------- */\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n /* -------------------- LYFECYCLE EVENTS ---------------------- */\n componentWillLoad() {\n this.elementsRangesArray = this.elementsRanges.split(',').map(Number);\n this.elPerPage = !this.elPerPage ? this.elementsRangesArray[0] : this.elPerPage;\n }\n\n /* -------------------- @LISTEN ------------------------------- */\n\n /* -------------------- @METHOD ------------------------------- */\n\n /* -------------------- LOCAL METHODS ------------------------- */\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare\n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n /* --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRangesArray.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div>\n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <jump-button onClick={() => this.doChangePage('first')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n <jump-button onClick={() => this.doChangePage('previous')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => this.doChangePage('next')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {this.showFirstAndLast &&\n <jump-button onClick={() => this.doChangePage('last')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"]}