@jumpgroup/jump-design-system 0.3.1 → 0.3.4

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 (101) hide show
  1. package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js +34 -0
  2. package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js.map +1 -0
  3. package/dist/cjs/jump-card-ecommerce.cjs.entry.js +46 -28
  4. package/dist/cjs/jump-card-ecommerce.cjs.entry.js.map +1 -1
  5. package/dist/cjs/jump-design-system.cjs.js +1 -1
  6. package/dist/cjs/jump-filter.cjs.entry.js +2 -2
  7. package/dist/cjs/jump-filtergroup.cjs.entry.js +2 -2
  8. package/dist/cjs/jump-pagination-table.cjs.entry.js +3 -3
  9. package/dist/cjs/jump-pagination.cjs.entry.js +3 -3
  10. package/dist/cjs/jump-quantity.cjs.entry.js +7 -4
  11. package/dist/cjs/jump-quantity.cjs.entry.js.map +1 -1
  12. package/dist/cjs/jump-tab-item.cjs.entry.js +2 -2
  13. package/dist/cjs/jump-tab-panel.cjs.entry.js +1 -1
  14. package/dist/cjs/jump-tab.cjs.entry.js +1 -1
  15. package/dist/cjs/loader.cjs.js +1 -1
  16. package/dist/collection/collection-manifest.json +1 -0
  17. package/dist/collection/components/jump-button/jump-button.stories.js +1 -1
  18. package/dist/collection/components/jump-button/jump-button.stories.js.map +1 -1
  19. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css +67 -5
  20. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js +131 -46
  21. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js.map +1 -1
  22. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js +119 -75
  23. package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map +1 -1
  24. package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.css +3 -0
  25. package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js +122 -0
  26. package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js.map +1 -0
  27. package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js +11 -0
  28. package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js.map +1 -0
  29. package/dist/collection/components/jump-filter/jump-filter.js +2 -2
  30. package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +2 -2
  31. package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
  32. package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +3 -3
  33. package/dist/collection/components/jump-quantity/jump-quantity.js +43 -11
  34. package/dist/collection/components/jump-quantity/jump-quantity.js.map +1 -1
  35. package/dist/collection/components/jump-tab/jump-tab.js +1 -1
  36. package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -2
  37. package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
  38. package/dist/components/jump-card-ecommerce-option.d.ts +11 -0
  39. package/dist/components/jump-card-ecommerce-option.js +53 -0
  40. package/dist/components/jump-card-ecommerce-option.js.map +1 -0
  41. package/dist/components/jump-card-ecommerce.js +54 -32
  42. package/dist/components/jump-card-ecommerce.js.map +1 -1
  43. package/dist/components/jump-filter.js +2 -2
  44. package/dist/components/jump-filtergroup.js +2 -2
  45. package/dist/components/jump-pagination-table.js +3 -3
  46. package/dist/components/jump-pagination.js +3 -3
  47. package/dist/components/jump-quantity.js +10 -6
  48. package/dist/components/jump-quantity.js.map +1 -1
  49. package/dist/components/jump-tab-item.js +2 -2
  50. package/dist/components/jump-tab-panel.js +1 -1
  51. package/dist/components/jump-tab.js +1 -1
  52. package/dist/esm/jump-card-ecommerce-option.entry.js +30 -0
  53. package/dist/esm/jump-card-ecommerce-option.entry.js.map +1 -0
  54. package/dist/esm/jump-card-ecommerce.entry.js +46 -28
  55. package/dist/esm/jump-card-ecommerce.entry.js.map +1 -1
  56. package/dist/esm/jump-design-system.js +1 -1
  57. package/dist/esm/jump-filter.entry.js +2 -2
  58. package/dist/esm/jump-filtergroup.entry.js +2 -2
  59. package/dist/esm/jump-pagination-table.entry.js +3 -3
  60. package/dist/esm/jump-pagination.entry.js +3 -3
  61. package/dist/esm/jump-quantity.entry.js +7 -4
  62. package/dist/esm/jump-quantity.entry.js.map +1 -1
  63. package/dist/esm/jump-tab-item.entry.js +2 -2
  64. package/dist/esm/jump-tab-panel.entry.js +1 -1
  65. package/dist/esm/jump-tab.entry.js +1 -1
  66. package/dist/esm/loader.js +1 -1
  67. package/dist/jump-design-system/jump-design-system.esm.js +1 -1
  68. package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
  69. package/dist/jump-design-system/p-4e4cbdaf.entry.js +2 -0
  70. package/dist/jump-design-system/p-4e4cbdaf.entry.js.map +1 -0
  71. package/dist/jump-design-system/{p-5d713084.entry.js → p-529a09f6.entry.js} +2 -2
  72. package/dist/jump-design-system/{p-377a769b.entry.js → p-594b15ee.entry.js} +2 -2
  73. package/dist/jump-design-system/p-5da7839d.entry.js +2 -0
  74. package/dist/jump-design-system/{p-a6fc23f7.entry.js → p-65ac4e72.entry.js} +2 -2
  75. package/dist/jump-design-system/{p-493c7f4a.entry.js → p-8efeaa79.entry.js} +2 -2
  76. package/dist/jump-design-system/{p-2cb7d817.entry.js → p-95460fa4.entry.js} +2 -2
  77. package/dist/jump-design-system/p-b92e6459.entry.js +2 -0
  78. package/dist/jump-design-system/p-b92e6459.entry.js.map +1 -0
  79. package/dist/jump-design-system/p-bc64407a.entry.js +2 -0
  80. package/dist/jump-design-system/p-bc64407a.entry.js.map +1 -0
  81. package/dist/jump-design-system/{p-34a46a10.entry.js → p-d2ee7b9b.entry.js} +2 -2
  82. package/dist/jump-design-system-elements.json +50 -9
  83. package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.d.ts +21 -7
  84. package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.stories.d.ts +26 -1
  85. package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.d.ts +9 -0
  86. package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.d.ts +6 -0
  87. package/dist/types/components/jump-quantity/jump-quantity.d.ts +3 -2
  88. package/dist/types/components.d.ts +79 -21
  89. package/package.json +1 -1
  90. package/dist/jump-design-system/p-5a6fbc53.entry.js +0 -2
  91. package/dist/jump-design-system/p-7696c03d.entry.js +0 -2
  92. package/dist/jump-design-system/p-7696c03d.entry.js.map +0 -1
  93. package/dist/jump-design-system/p-fafe6478.entry.js +0 -2
  94. package/dist/jump-design-system/p-fafe6478.entry.js.map +0 -1
  95. /package/dist/jump-design-system/{p-5d713084.entry.js.map → p-529a09f6.entry.js.map} +0 -0
  96. /package/dist/jump-design-system/{p-377a769b.entry.js.map → p-594b15ee.entry.js.map} +0 -0
  97. /package/dist/jump-design-system/{p-5a6fbc53.entry.js.map → p-5da7839d.entry.js.map} +0 -0
  98. /package/dist/jump-design-system/{p-a6fc23f7.entry.js.map → p-65ac4e72.entry.js.map} +0 -0
  99. /package/dist/jump-design-system/{p-493c7f4a.entry.js.map → p-8efeaa79.entry.js.map} +0 -0
  100. /package/dist/jump-design-system/{p-2cb7d817.entry.js.map → p-95460fa4.entry.js.map} +0 -0
  101. /package/dist/jump-design-system/{p-34a46a10.entry.js.map → p-d2ee7b9b.entry.js.map} +0 -0
@@ -143,30 +143,27 @@ export namespace Components {
143
143
  "videoSrc": string;
144
144
  }
145
145
  interface JumpCardEcommerce {
146
+ /**
147
+ * Indicates the button class of the add to cart / notification button
148
+ */
149
+ "addToCartText": string;
146
150
  /**
147
151
  * Indicate if the user request to be notified when te product is avaible
148
152
  */
149
153
  "addToWaitingList": boolean;
150
154
  /**
151
- * Indicate if the product is added to cart
155
+ * Indicate if the product is added to cart --> non deve esserci nelle storie!
152
156
  */
153
157
  "addedToCart": boolean;
154
- /**
155
- * Indicates the button class of the add to cart / notification button
156
- */
157
- "addtoCartText": string;
158
158
  /**
159
159
  * Indicates the badge of the card
160
160
  */
161
161
  "badge": string;
162
- /**
163
- * Indicate if the variation is change
164
- */
165
- "changedVariation": boolean;
166
162
  /**
167
163
  * Indicates the currency of the card
168
164
  */
169
165
  "currency": string;
166
+ "endAddedToCart": boolean;
170
167
  /**
171
168
  * Indicates if the product is favorite
172
169
  */
@@ -175,6 +172,18 @@ export namespace Components {
175
172
  * Indicate if card has background
176
173
  */
177
174
  "hasBackground": boolean;
175
+ /**
176
+ * Indicate if the whislist is active in shop
177
+ */
178
+ "hasFavorite": boolean;
179
+ /**
180
+ * Indicates the over image's src of the card
181
+ */
182
+ "hoverImg": string;
183
+ /**
184
+ * Indicates the hover img's alt of the card
185
+ */
186
+ "hoverImgAlt": string;
178
187
  /**
179
188
  * Indicates the image's src of the card
180
189
  */
@@ -236,6 +245,12 @@ export namespace Components {
236
245
  */
237
246
  "waitingListText": string;
238
247
  }
248
+ interface JumpCardEcommerceOption {
249
+ "code": string;
250
+ "imgUrl": string;
251
+ "label": string;
252
+ "sku": string;
253
+ }
239
254
  interface JumpFilter {
240
255
  "direction": 'horizontal' | 'vertical';
241
256
  "filterButtonIcon": string;
@@ -339,13 +354,15 @@ export namespace Components {
339
354
  /**
340
355
  * Get the current value
341
356
  */
342
- "getValue": () => Promise<any>;
357
+ "getValue": () => Promise<number>;
343
358
  "label": string;
344
359
  "max": number;
345
360
  "min": number;
361
+ "reset": () => Promise<void>;
346
362
  "showButtons": boolean;
347
363
  "step": number;
348
364
  "type": 'buttons' | 'dropdown' | 'input';
365
+ "value": number;
349
366
  "variant": 'vertical' | 'horizontal';
350
367
  }
351
368
  interface JumpTab {
@@ -381,6 +398,10 @@ export interface JumpCardEcommerceCustomEvent<T> extends CustomEvent<T> {
381
398
  detail: T;
382
399
  target: HTMLJumpCardEcommerceElement;
383
400
  }
401
+ export interface JumpCardEcommerceOptionCustomEvent<T> extends CustomEvent<T> {
402
+ detail: T;
403
+ target: HTMLJumpCardEcommerceOptionElement;
404
+ }
384
405
  export interface JumpFiltergroupCustomEvent<T> extends CustomEvent<T> {
385
406
  detail: T;
386
407
  target: HTMLJumpFiltergroupElement;
@@ -434,7 +455,7 @@ declare global {
434
455
  "jump-toggle-favorite": any;
435
456
  "jump-add-to-cart": any;
436
457
  "jump-add-to-waiting-list": any;
437
- "jump-change-variation": any;
458
+ "jump-variation-selected": any;
438
459
  }
439
460
  interface HTMLJumpCardEcommerceElement extends Components.JumpCardEcommerce, HTMLStencilElement {
440
461
  addEventListener<K extends keyof HTMLJumpCardEcommerceElementEventMap>(type: K, listener: (this: HTMLJumpCardEcommerceElement, ev: JumpCardEcommerceCustomEvent<HTMLJumpCardEcommerceElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -450,6 +471,23 @@ declare global {
450
471
  prototype: HTMLJumpCardEcommerceElement;
451
472
  new (): HTMLJumpCardEcommerceElement;
452
473
  };
474
+ interface HTMLJumpCardEcommerceOptionElementEventMap {
475
+ "jump-card-ecommerce-option-connected": any;
476
+ }
477
+ interface HTMLJumpCardEcommerceOptionElement extends Components.JumpCardEcommerceOption, HTMLStencilElement {
478
+ addEventListener<K extends keyof HTMLJumpCardEcommerceOptionElementEventMap>(type: K, listener: (this: HTMLJumpCardEcommerceOptionElement, ev: JumpCardEcommerceOptionCustomEvent<HTMLJumpCardEcommerceOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
479
+ addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
480
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
481
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
482
+ removeEventListener<K extends keyof HTMLJumpCardEcommerceOptionElementEventMap>(type: K, listener: (this: HTMLJumpCardEcommerceOptionElement, ev: JumpCardEcommerceOptionCustomEvent<HTMLJumpCardEcommerceOptionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
483
+ removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
484
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
485
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
486
+ }
487
+ var HTMLJumpCardEcommerceOptionElement: {
488
+ prototype: HTMLJumpCardEcommerceOptionElement;
489
+ new (): HTMLJumpCardEcommerceOptionElement;
490
+ };
453
491
  interface HTMLJumpFilterElement extends Components.JumpFilter, HTMLStencilElement {
454
492
  }
455
493
  var HTMLJumpFilterElement: {
@@ -577,6 +615,7 @@ declare global {
577
615
  "jump-button": HTMLJumpButtonElement;
578
616
  "jump-card": HTMLJumpCardElement;
579
617
  "jump-card-ecommerce": HTMLJumpCardEcommerceElement;
618
+ "jump-card-ecommerce-option": HTMLJumpCardEcommerceOptionElement;
580
619
  "jump-filter": HTMLJumpFilterElement;
581
620
  "jump-filtergroup": HTMLJumpFiltergroupElement;
582
621
  "jump-icon": HTMLJumpIconElement;
@@ -726,30 +765,27 @@ declare namespace LocalJSX {
726
765
  "videoSrc"?: string;
727
766
  }
728
767
  interface JumpCardEcommerce {
768
+ /**
769
+ * Indicates the button class of the add to cart / notification button
770
+ */
771
+ "addToCartText"?: string;
729
772
  /**
730
773
  * Indicate if the user request to be notified when te product is avaible
731
774
  */
732
775
  "addToWaitingList"?: boolean;
733
776
  /**
734
- * Indicate if the product is added to cart
777
+ * Indicate if the product is added to cart --> non deve esserci nelle storie!
735
778
  */
736
779
  "addedToCart"?: boolean;
737
- /**
738
- * Indicates the button class of the add to cart / notification button
739
- */
740
- "addtoCartText"?: string;
741
780
  /**
742
781
  * Indicates the badge of the card
743
782
  */
744
783
  "badge"?: string;
745
- /**
746
- * Indicate if the variation is change
747
- */
748
- "changedVariation"?: boolean;
749
784
  /**
750
785
  * Indicates the currency of the card
751
786
  */
752
787
  "currency"?: string;
788
+ "endAddedToCart"?: boolean;
753
789
  /**
754
790
  * Indicates if the product is favorite
755
791
  */
@@ -758,6 +794,18 @@ declare namespace LocalJSX {
758
794
  * Indicate if card has background
759
795
  */
760
796
  "hasBackground"?: boolean;
797
+ /**
798
+ * Indicate if the whislist is active in shop
799
+ */
800
+ "hasFavorite"?: boolean;
801
+ /**
802
+ * Indicates the over image's src of the card
803
+ */
804
+ "hoverImg"?: string;
805
+ /**
806
+ * Indicates the hover img's alt of the card
807
+ */
808
+ "hoverImgAlt"?: string;
761
809
  /**
762
810
  * Indicates the image's src of the card
763
811
  */
@@ -780,8 +828,8 @@ declare namespace LocalJSX {
780
828
  "notificationUrl"?: string;
781
829
  "onJump-add-to-cart"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
782
830
  "onJump-add-to-waiting-list"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
783
- "onJump-change-variation"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
784
831
  "onJump-toggle-favorite"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
832
+ "onJump-variation-selected"?: (event: JumpCardEcommerceCustomEvent<any>) => void;
785
833
  /**
786
834
  * Indicate if card has only icon button
787
835
  */
@@ -823,6 +871,13 @@ declare namespace LocalJSX {
823
871
  */
824
872
  "waitingListText"?: string;
825
873
  }
874
+ interface JumpCardEcommerceOption {
875
+ "code"?: string;
876
+ "imgUrl"?: string;
877
+ "label"?: string;
878
+ "onJump-card-ecommerce-option-connected"?: (event: JumpCardEcommerceOptionCustomEvent<any>) => void;
879
+ "sku"?: string;
880
+ }
826
881
  interface JumpFilter {
827
882
  "direction"?: 'horizontal' | 'vertical';
828
883
  "filterButtonIcon"?: string;
@@ -926,6 +981,7 @@ declare namespace LocalJSX {
926
981
  "showButtons"?: boolean;
927
982
  "step"?: number;
928
983
  "type"?: 'buttons' | 'dropdown' | 'input';
984
+ "value"?: number;
929
985
  "variant"?: 'vertical' | 'horizontal';
930
986
  }
931
987
  interface JumpTab {
@@ -964,6 +1020,7 @@ declare namespace LocalJSX {
964
1020
  "jump-button": JumpButton;
965
1021
  "jump-card": JumpCard;
966
1022
  "jump-card-ecommerce": JumpCardEcommerce;
1023
+ "jump-card-ecommerce-option": JumpCardEcommerceOption;
967
1024
  "jump-filter": JumpFilter;
968
1025
  "jump-filtergroup": JumpFiltergroup;
969
1026
  "jump-icon": JumpIcon;
@@ -984,6 +1041,7 @@ declare module "@stencil/core" {
984
1041
  "jump-button": LocalJSX.JumpButton & JSXBase.HTMLAttributes<HTMLJumpButtonElement>;
985
1042
  "jump-card": LocalJSX.JumpCard & JSXBase.HTMLAttributes<HTMLJumpCardElement>;
986
1043
  "jump-card-ecommerce": LocalJSX.JumpCardEcommerce & JSXBase.HTMLAttributes<HTMLJumpCardEcommerceElement>;
1044
+ "jump-card-ecommerce-option": LocalJSX.JumpCardEcommerceOption & JSXBase.HTMLAttributes<HTMLJumpCardEcommerceOptionElement>;
987
1045
  "jump-filter": LocalJSX.JumpFilter & JSXBase.HTMLAttributes<HTMLJumpFilterElement>;
988
1046
  "jump-filtergroup": LocalJSX.JumpFiltergroup & JSXBase.HTMLAttributes<HTMLJumpFiltergroupElement>;
989
1047
  "jump-icon": LocalJSX.JumpIcon & JSXBase.HTMLAttributes<HTMLJumpIconElement>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jumpgroup/jump-design-system",
3
- "version": "0.3.1",
3
+ "version": "0.3.4",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -1,2 +0,0 @@
1
- import{r as e,h as a,H as s}from"./p-4d6cc90d.js";const t=":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";const c=t;const d=class{constructor(a){e(this,a);this.identifier=undefined;this.active=false}render(){return a(s,{key:"90108df0339c76ec7ffef78722400cbd5e5b125d",class:"JumpTabPanel",id:this.identifier},a("div",{key:"4e127ffdeb05efdd63dc538cb38976252ff5a060",class:"JumpTabPanel__Content "+(this.active?"active":"")},a("slot",{key:"5e54c0eaed6558e97226ffdc347e0ca8c0d9aa1b"})))}};d.style=c;export{d as jump_tab_panel};
2
- //# sourceMappingURL=p-5a6fbc53.entry.js.map
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,h as i,H as s,g as a}from"./p-4d6cc90d.js";const n=":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.75rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:16px;width:40px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer}:host ::slotted(jump-button){--jump-button-padding:0}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";const r=n;const o=class{constructor(i){t(this,i);this.change=e(this,"jump-change",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.min=1;this.max=undefined;this.step=1;this.label="";this.type="buttons";this.variant="vertical";this.showButtons=true;this.value=undefined}onValueChange(t,e){this.change.emit({value:t,oldValue:e});this.internals.setFormValue(t)}async getValue(){return this.value}componentWillLoad(){this.value=this.min;this.internals.setFormValue(this.value)}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}handleChange(t){this.value=t.target.value}handleBlur(t){if(t.target.value<this.min){this.value=this.min}}render(){return i(s,{key:"d35f6f474d41feae59c386e57c1dcc5f073e57f1",value:this.value,"data-variant":this.variant,"data-hasbuttons":this.showButtons},this.label&&i("label",{key:"499373a638e6da996851852c2672a1462eb6fba1"},this.label),i("div",{key:"2e8bb37e5961d00f38e7ff40520460d19b8945f9",class:`jump-quantity__InnerWrapper`},this.showButtons&&i("jump-button",{key:"f3f19ad26a807961fe63239f17354f6ff1d48809",onClick:()=>this.value=this.value-this.step,disabled:this.value<=this.min,variant:"neutral",size:"small"},i("jump-icon",{key:"3f86257fd93ae2c07261ef6f5bb62d239dbc7782",library:"lucide",name:"minus",size:"small"})),i("input",{key:"3277bb1382d298e4fdcd064f5c71d61c5bb75bb2",ref:t=>{this.inputEl=t},type:"number",value:this.value,onInput:t=>this.handleChange(t),min:this.min,max:this.max,step:this.step,"aria-hasbuttons":this.showButtons}),this.showButtons&&i("jump-button",{key:"1a5847f2760dae8ecdf000de143af06fd1c8c3ce",onClick:()=>this.value=this.value+this.step,disabled:this.value>=this.max,variant:"neutral",size:"small"},i("jump-icon",{key:"25c05e4597739dd4e8df00cdda0d593ba1d55e1f",library:"lucide",name:"plus",size:"small"}))))}static get formAssociated(){return true}get el(){return a(this)}static get watchers(){return{value:["onValueChange"]}}};o.style=r;export{o as jump_quantity};
2
- //# sourceMappingURL=p-7696c03d.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["jumpQuantityCss","JumpQuantityStyle0","JumpQuantity","onValueChange","newValue","oldValue","this","change","emit","value","internals","setFormValue","getValue","componentWillLoad","min","formResetCallback","setValidity","handleChange","event","target","handleBlur","render","h","Host","key","variant","showButtons","label","class","onClick","step","disabled","size","library","name","ref","el","inputEl","type","onInput","max"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.75rem;\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 16px;\n width: 40px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, State, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n\n @Event({ eventName: 'jump-change' }) change;\n\n @State() value;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value);\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,s5BACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,sOAKD,E,6BAEC,E,WACC,G,UACyB,U,aACJ,W,iBACd,K,qBAS/B,aAAAC,CAAcC,EAAUC,GACtBC,KAAKC,OAAOC,KAAK,CACfC,MAAOL,EACPC,SAAUA,IAEZC,KAAKI,UAAUC,aAAaP,E,CAO9B,cAAMQ,GACJ,OAAON,KAAKG,K,CAGd,iBAAAI,GACEP,KAAKG,MAAQH,KAAKQ,IAClBR,KAAKI,UAAUC,aAAaL,KAAKG,M,CAGnC,iBAAAM,GACET,KAAKI,UAAUM,YAAY,IAC3BV,KAAKI,UAAUC,aAAa,G,CAG9B,YAAAM,CAAaC,GACXZ,KAAKG,MAAQS,EAAMC,OAAOV,K,CAI5B,UAAAW,CAAWF,GACT,GAAIA,EAAMC,OAAOV,MAAQH,KAAKQ,IAAK,CACjCR,KAAKG,MAAQH,KAAKQ,G,EAItB,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACf,MAAOH,KAAKG,MAAK,eAAgBH,KAAKmB,QAAO,kBAAmBnB,KAAKoB,aACxEpB,KAAKqB,OAASL,EAAA,SAAAE,IAAA,4CAAQlB,KAAKqB,OAC5BL,EAAA,OAAAE,IAAA,2CAAKI,MAAO,+BACXtB,KAAKoB,aACFJ,EAAA,eAAAE,IAAA,2CAAaK,QAAS,IAAMvB,KAAKG,MAAQH,KAAKG,MAAQH,KAAKwB,KAAMC,SAAUzB,KAAKG,OAASH,KAAKQ,IACjFW,QAAQ,UAAUO,KAAK,SAClCV,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,SAASC,KAAK,QAAQF,KAAK,WAElDV,EAAA,SAAAE,IAAA,2CAAOW,IAAMC,IACX9B,KAAK+B,QAAUD,CAAE,EAEZE,KAAK,SACL7B,MAAOH,KAAKG,MACZ8B,QAAUrB,GAAUZ,KAAKW,aAAaC,GACtCJ,IAAKR,KAAKQ,IACV0B,IAAKlC,KAAKkC,IACVV,KAAMxB,KAAKwB,KAAI,kBACExB,KAAKoB,cAE5BpB,KAAKoB,aACJJ,EAAA,eAAAE,IAAA,2CAAaK,QAAS,IAAMvB,KAAKG,MAAQH,KAAKG,MAAQH,KAAKwB,KAAMC,SAAUzB,KAAKG,OAASH,KAAKkC,IACjFf,QAAQ,UAAUO,KAAK,SAClCV,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,SAASC,KAAK,OAAOF,KAAK,Y"}
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as s,H as o,g as a}from"./p-4d6cc90d.js";const e=':host{--card-max-width:450px;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:transparent;--jump-card-border-color:var(--neutral-grey-background);--jump-card-padding:0.5rem;max-width:var(--card-max-width);overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;font-family:var(--ff-primary, "Arial"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color)}:host .Footer,:host .Body{display:flex;width:100%}:host jump-badge{position:absolute;top:1rem;left:1rem;z-index:1}:host jump-badge.hasBackground.iconOnly{top:calc(1rem + 8px);left:calc(1rem + 8px)}:host .Favorite{position:absolute;top:1rem;right:1rem;z-index:1}:host .Favorite.hasBackground.iconOnly{top:calc(1rem + 8px);right:calc(1rem + 8px)}:host .Media{overflow:hidden;position:relative;border-top-left-radius:3px;border-top-right-radius:3px;aspect-ratio:1/1}:host .Media img{height:100%;width:100%;object-fit:cover}:host .Media.hasBackground{background-color:var(--neutral-white)}:host .Media.hasBackground.iconOnly{border-top-left-radius:6px;border-top-right-radius:6px;padding:var(--jump-card-padding) var(--jump-card-padding) 0}:host .Media.hasBackground.iconOnly img{border-radius:6px}:host .NotificationCart{display:none;position:absolute;bottom:0px;width:100%;padding:2rem 1rem;background-color:hsla(0, 0%, 0%, 0.35);box-sizing:border-box}:host .NotificationCart.is-active{display:flex;align-items:center;justify-content:center}:host .Content.hasBackground{background-color:var(--neutral-white);padding:calc(var(--jump-card-padding) * 2)}:host .Content.iconOnly{padding:calc(var(--jump-card-padding) * 2) var(--jump-card-padding)}:host .Body{display:flex;flex-direction:column;gap:0.75rem;padding:var(--jump-card-padding) 0}:host .Body>*{display:flex;flex-direction:row;justify-content:space-between}:host .Body>*>*{flex:0 1 auto}:host .Body.hasBackground{padding:0 0 var(--jump-card-padding)}:host .Body.iconOnly{padding:0}:host .Product{font-size:var(--fs-400)}:host .Subtitle{font-size:var(--fs-300);color:var(--neutral-grey-secondary)}:host .Footer{line-height:var(--lh-400);justify-content:end;padding:var(--jump-card-padding) 0;align-items:flex-end}:host .Footer.justify-between{justify-content:space-between}:host .Footer.hasBackground{padding-bottom:0}:host .Footer.iconOnly{padding:0}:host .OutOfStock{justify-items:start;font-size:var(--fs-300);font-weight:var(--fw-900);color:var(--status-danger-standard)}:host .OnlyIconButton{position:absolute;bottom:0;right:0;background:var(--neutral-white);border-top-left-radius:20px;padding:8px 8px 0px 8px}:host .Price{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1.5rem 1.5rem auto;justify-items:end;align-items:end;font-size:var(--fs-500);font-weight:var(--fw-900);line-height:var(--lh-400)}:host .Price>*{display:inline-flex}:host .Price__Regular{text-align:right}:host .Price__Regular.sale{text-decoration:line-through;color:var(--neutral-grey-secondary);font-weight:var(--fw-400);font-size:var(--fs-400);grid-column:2;grid-row:1}:host .Price__Sale{grid-column:2;grid-row:2}:host .Price__Discount{color:var(--status-danger-standard);font-weight:var(--fw-400);font-size:var(--fs-300);grid-column:1;grid-row:1}:host(.Pippo){background-color:red}';const r=e;const n=class{constructor(s){t(this,s);this.toggleFavorite=i(this,"jump-toggle-favorite",7);this.productAddToCart=i(this,"jump-add-to-cart",7);this.productWaitingList=i(this,"jump-add-to-waiting-list",7);this.changeVariation=i(this,"jump-change-variation",7);this.onlyIconButton=false;this.hasBackground=false;this.badge=undefined;this.favorite=false;this.link=undefined;this.img=undefined;this.imgAlt=undefined;this.videoSrc=undefined;this.addedToCart=false;this.notificationUrl=undefined;this.notificationText="Aggiunto al carrello";this.productName=undefined;this.subtitle=undefined;this.productId=undefined;this.price=undefined;this.salePrice=undefined;this.currency=undefined;this.outOfStock=false;this.outOfStockText=undefined;this.addtoCartText=undefined;this.waitingListText=undefined;this.addToWaitingList=false;this.changedVariation=false}componentWillLoad(){}componentDidLoad(){this.jumpQuantityEl=this.JumpCardEcommerce.querySelector("jump-quantity");if(this.jumpQuantityEl){this.jumpQuantityEl.addEventListener("jump-change",this.onQuantityChange.bind(this));this.quantity=this.jumpQuantityEl.getValue().then((t=>{this.quantity=t}));console.log("Quantity:",this.quantity)}}disconnectedCallback(){this.jumpQuantityEl=this.JumpCardEcommerce.querySelector("jump-quantity");if(this.jumpQuantityEl){this.jumpQuantityEl.removeEventListener("jump-change",this.onQuantityChange)}}onQuantityChange(t){this.quantity=t.detail.value}onToggleFavorite(){this.favorite=!this.favorite;this.toggleFavorite.emit({productId:this.productId,favorite:this.favorite})}addProductToCart(){this.addedToCart=true;const t={productId:this.productId,addedToCart:this.addedToCart,quantity:this.quantity};this.productAddToCart.emit(t);console.log("productAddToCart payload:",t)}waitingList(){this.addToWaitingList=true;this.productWaitingList.emit({productId:this.productId,addToWaitingList:this.addToWaitingList})}changeVariationBody(t){const i=t.target;const s=i.value;this.changedVariation=true;const o={productId:this.productId,changedVariation:this.changedVariation,variation:s};this.changeVariation.emit(o);console.log("changeVariation payload:",o)}render(){const t=this.hasBackground?"hasBackground":"";const i=this.onlyIconButton?"iconOnly":"";const a=this.outOfStock?"justify-between":"";function e(t,i){const s=(t-i)/t*100;return s.toFixed(0)}return s(o,null,this.badge?s("jump-badge",{class:`${t} ${i}`,variant:"secondary",dimension:"small",label:this.badge}):"",s("jump-button",{onClick:()=>this.onToggleFavorite(),class:`Favorite ${t} ${i}`,variant:this.favorite?"neutral":"primary",size:"small",text:true,onlyIcon:true},s("jump-icon",{slot:"prefix",name:"heart",category:this.favorite?"light":"solid",size:"medium"})),s("div",{class:`Media ${i} ${t}`},s("a",{href:this.link},this.img&&!this.videoSrc?s("img",{src:this.img,alt:this.imgAlt}):"",this.videoSrc&&!this.img?s("video",{autoplay:true},s("source",{src:this.videoSrc,type:"video/mp4"}),s("source",{src:this.videoSrc,type:"video/mov"}),s("source",{src:this.videoSrc,type:"video/webm"})):""),s("div",{class:`NotificationCart ${this.addedToCart==true?"is-active":""}`},s("jump-button",{href:this.notificationUrl,variant:"white",text:true},s("jump-icon",{slot:"prefix",name:"check"}),s("span",null," ",this.notificationText," "))),this.onlyIconButton?s("div",{class:"OnlyIconButton"},s("jump-button",{variant:"secondary",size:"large",pill:true,onlyIcon:true,onClick:()=>this.addProductToCart()},s("jump-icon",{slot:"prefix",name:"cart-shopping",category:"regular"}))):""),s("div",{class:`Content ${t} ${i}`},s("div",{class:`Body ${t} ${i}`},s("div",null,s("div",{class:"Info"},s("div",{class:"Product"},this.productName),s("div",{class:"Subtitle"},this.subtitle)),s("div",{class:"Price"},s("div",{class:"Price__Discount"},e(this.price,this.salePrice),"%"),s("div",{class:`Price__Regular ${this.salePrice?"sale":""}`},this.currency,this.price),s("div",{class:"Price__Sale"},this.currency,this.salePrice))),s("div",null,s("slot",{name:"select"}),s("slot",{name:"quantity"}))),s("div",{class:`Footer ${a} ${t} ${i}`},this.outOfStock?s("div",{class:"OutOfStock"},this.outOfStockText?this.outOfStockText:"Esaurito"):"",this.outOfStock?s("jump-button",{variant:"secondary",size:"small",text:true,onClick:()=>this.waitingList()},s("jump-icon",{slot:"prefix",name:!this.outOfStock?"cart-shopping":"bell",category:"regular",size:"small"}),this.waitingListText?this.waitingListText:"Notifica disponibilità"):"",!this.outOfStock&&!this.onlyIconButton?s("jump-button",{variant:"secondary",size:"small",text:true,onClick:()=>this.addProductToCart()},s("jump-icon",{slot:"prefix",name:!this.outOfStock?"cart-shopping":"bell",category:"regular",size:"small"}),this.addtoCartText?this.addtoCartText:"Aggiungi al carrello"):"")))}get JumpCardEcommerce(){return a(this)}};n.style=r;export{n as jump_card_ecommerce};
2
- //# sourceMappingURL=p-fafe6478.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["jumpCardEcommerceCss","JumpCardEcommerceStyle0","JumpCardEcommerce","componentWillLoad","componentDidLoad","this","jumpQuantityEl","querySelector","addEventListener","onQuantityChange","bind","quantity","getValue","then","console","log","disconnectedCallback","removeEventListener","e","detail","value","onToggleFavorite","favorite","toggleFavorite","emit","productId","addProductToCart","addedToCart","payload","productAddToCart","waitingList","addToWaitingList","productWaitingList","changeVariationBody","event","selectElement","target","selectedValue","changedVariation","variation","changeVariation","render","backgroundClass","hasBackground","iconOnlyClass","onlyIconButton","justifyClass","outOfStock","calculateDiscount","price","salePrice","discount","toFixed","h","Host","badge","class","variant","dimension","label","onClick","size","text","onlyIcon","slot","name","category","href","link","img","videoSrc","src","alt","imgAlt","autoplay","type","notificationUrl","notificationText","pill","productName","subtitle","currency","outOfStockText","waitingListText","addtoCartText"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n --card-max-width: 450px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: transparent;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-padding: 0.5rem;\n\n max-width: var(--card-max-width);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n\n .Footer,\n .Body {\n display: flex;\n width: 100%;\n }\n\n jump-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n z-index: 1;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n left: calc(1rem + 8px);\n }\n }\n\n .Favorite {\n position: absolute;\n top: 1rem;\n right: 1rem;\n z-index: 1;\n\n &.hasBackground.iconOnly {\n top: calc(1rem + 8px);\n right: calc(1rem + 8px);\n }\n }\n\n .Media {\n // aspect-ratio: 3/4;\n overflow: hidden;\n position: relative;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n aspect-ratio: 1/1;\n\n img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n\n &.hasBackground {\n background-color: var(--neutral-white);\n\n &.iconOnly {\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n img {\n border-radius: 6px;\n }\n }\n }\n }\n\n .NotificationCart {\n display: none;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2rem 1rem;\n background-color: hsl(0 0% 0% / 35%);\n box-sizing: border-box;\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n .Content {\n &.hasBackground {\n background-color: var(--neutral-white);\n padding: calc(var(--jump-card-padding) * 2);\n }\n\n &.iconOnly {\n padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n }\n }\n\n .Body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: var(--jump-card-padding) 0;\n\n & > * {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n & > * {\n flex: 0 1 auto;\n }\n }\n\n &.hasBackground {\n padding: 0 0 var(--jump-card-padding);\n }\n\n &.iconOnly {\n padding: 0;\n }\n }\n\n .Product {\n font-size: var(--fs-400);\n }\n\n .Subtitle {\n font-size: var(--fs-300);\n color: var(--neutral-grey-secondary);\n }\n\n .Footer {\n line-height: var(--lh-400);\n justify-content: end;\n padding: var(--jump-card-padding) 0;\n align-items: flex-end;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n &.hasBackground {\n padding-bottom: 0;\n }\n\n &.iconOnly {\n padding: 0;\n }\n }\n\n .OutOfStock {\n justify-items: start;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n color: var(--status-danger-standard);\n }\n\n .OnlyIconButton {\n position: absolute;\n bottom: 0;\n right: 0;\n background: var(--neutral-white);\n border-top-left-radius: 20px;\n padding: 8px 8px 0px 8px;\n }\n\n .Price {\n position: relative;\n display: grid;\n grid-template-columns: auto auto;\n grid-template-rows: 1.5rem 1.5rem auto;\n justify-items: end;\n align-items: end;\n\n font-size: var(--fs-500);\n font-weight: var(--fw-900);\n line-height: var(--lh-400);\n\n & > * {\n display: inline-flex;\n }\n\n &__Regular {\n text-align: right;\n\n &.sale {\n text-decoration: line-through;\n color: var(--neutral-grey-secondary);\n font-weight: var(--fw-400);\n font-size: var(--fs-400);\n grid-column: 2;\n grid-row: 1;\n }\n }\n\n &__Sale {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__Discount {\n color: var(--status-danger-standard);\n font-weight: var(--fw-400);\n font-size: var(--fs-300);\n grid-column: 1;\n grid-row: 1;\n }\n }\n}\n\n:host(.Pippo) {\n background-color: red;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element} from '@stencil/core';\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 /** 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 videoSrc of the card*/\n @Prop() videoSrc: string; \n\n /** Indicate if the product is added to cart*/\n @Prop() addedToCart: boolean = false;\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 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 variation is change*/\n @Prop() changedVariation: boolean = false;\n\n /* ---------------------- @STATE ------------------------- */ \n\n // è una proprietà che viene cambiata solo da dentro\n\n quantity: number;\n\n // @Watch('quantity') \n // funziona solo dalla seconda volta in poi \n // watchQuantity(newValue, oldValue) {\n // console.log('quantity changed:', newValue, oldValue);\n // }\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-change-variation'}) changeVariation: EventEmitter;\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 console.log('Quantity:', this.quantity)\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;\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\n // mancano le variazioni\n };\n this.productAddToCart.emit(payload);\n console.log(\"productAddToCart payload:\", payload);\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 changeVariationBody(event: Event) {\n const selectElement = event.target as HTMLSelectElement;\n const selectedValue = selectElement.value;\n\n this.changedVariation = true;\n const payload = {\n productId: this.productId,\n changedVariation: this.changedVariation,\n variation: selectedValue // da sostituire\n };\n this.changeVariation.emit(payload);\n console.log(\"changeVariation payload:\", payload)\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 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 <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'neutral' : 'primary'} size=\"small\" text onlyIcon>\n <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'light' : 'solid'} size=\"medium\"></jump-icon>\n </jump-button> \n\n <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n <a href={this.link}>\n {this.img && !this.videoSrc ? <img src={this.img} alt={this.imgAlt}></img> : ''}\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' : ''}`}>\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 <div class=\"Subtitle\">{this.subtitle}</div>\n </div>\n\n <div class=\"Price\">\n <div class=\"Price__Discount\">\n {calculateDiscount(this.price, this.salePrice)}%\n </div>\n <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n {this.currency}{this.price}\n </div>\n <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n </div>\n </div>\n <div>\n \n <slot name=\"select\"></slot>\n <slot name=\"quantity\"></slot>\n </div>\n \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}"],"mappings":"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"}