@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.
- package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js +34 -0
- package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js.map +1 -0
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js +46 -28
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-design-system.cjs.js +1 -1
- package/dist/cjs/jump-filter.cjs.entry.js +2 -2
- package/dist/cjs/jump-filtergroup.cjs.entry.js +2 -2
- package/dist/cjs/jump-pagination-table.cjs.entry.js +3 -3
- package/dist/cjs/jump-pagination.cjs.entry.js +3 -3
- package/dist/cjs/jump-quantity.cjs.entry.js +7 -4
- package/dist/cjs/jump-quantity.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab-item.cjs.entry.js +2 -2
- package/dist/cjs/jump-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/jump-tab.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/jump-button/jump-button.stories.js +1 -1
- package/dist/collection/components/jump-button/jump-button.stories.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css +67 -5
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js +131 -46
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js +119 -75
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map +1 -1
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.css +3 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js +122 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.js.map +1 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js +11 -0
- package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js.map +1 -0
- package/dist/collection/components/jump-filter/jump-filter.js +2 -2
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +2 -2
- package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +3 -3
- package/dist/collection/components/jump-quantity/jump-quantity.js +43 -11
- package/dist/collection/components/jump-quantity/jump-quantity.js.map +1 -1
- package/dist/collection/components/jump-tab/jump-tab.js +1 -1
- package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -2
- package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
- package/dist/components/jump-card-ecommerce-option.d.ts +11 -0
- package/dist/components/jump-card-ecommerce-option.js +53 -0
- package/dist/components/jump-card-ecommerce-option.js.map +1 -0
- package/dist/components/jump-card-ecommerce.js +54 -32
- package/dist/components/jump-card-ecommerce.js.map +1 -1
- package/dist/components/jump-filter.js +2 -2
- package/dist/components/jump-filtergroup.js +2 -2
- package/dist/components/jump-pagination-table.js +3 -3
- package/dist/components/jump-pagination.js +3 -3
- package/dist/components/jump-quantity.js +10 -6
- package/dist/components/jump-quantity.js.map +1 -1
- package/dist/components/jump-tab-item.js +2 -2
- package/dist/components/jump-tab-panel.js +1 -1
- package/dist/components/jump-tab.js +1 -1
- package/dist/esm/jump-card-ecommerce-option.entry.js +30 -0
- package/dist/esm/jump-card-ecommerce-option.entry.js.map +1 -0
- package/dist/esm/jump-card-ecommerce.entry.js +46 -28
- package/dist/esm/jump-card-ecommerce.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-filter.entry.js +2 -2
- package/dist/esm/jump-filtergroup.entry.js +2 -2
- package/dist/esm/jump-pagination-table.entry.js +3 -3
- package/dist/esm/jump-pagination.entry.js +3 -3
- package/dist/esm/jump-quantity.entry.js +7 -4
- package/dist/esm/jump-quantity.entry.js.map +1 -1
- package/dist/esm/jump-tab-item.entry.js +2 -2
- package/dist/esm/jump-tab-panel.entry.js +1 -1
- package/dist/esm/jump-tab.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-4e4cbdaf.entry.js +2 -0
- package/dist/jump-design-system/p-4e4cbdaf.entry.js.map +1 -0
- package/dist/jump-design-system/{p-5d713084.entry.js → p-529a09f6.entry.js} +2 -2
- package/dist/jump-design-system/{p-377a769b.entry.js → p-594b15ee.entry.js} +2 -2
- package/dist/jump-design-system/p-5da7839d.entry.js +2 -0
- package/dist/jump-design-system/{p-a6fc23f7.entry.js → p-65ac4e72.entry.js} +2 -2
- package/dist/jump-design-system/{p-493c7f4a.entry.js → p-8efeaa79.entry.js} +2 -2
- package/dist/jump-design-system/{p-2cb7d817.entry.js → p-95460fa4.entry.js} +2 -2
- package/dist/jump-design-system/p-b92e6459.entry.js +2 -0
- package/dist/jump-design-system/p-b92e6459.entry.js.map +1 -0
- package/dist/jump-design-system/p-bc64407a.entry.js +2 -0
- package/dist/jump-design-system/p-bc64407a.entry.js.map +1 -0
- package/dist/jump-design-system/{p-34a46a10.entry.js → p-d2ee7b9b.entry.js} +2 -2
- package/dist/jump-design-system-elements.json +50 -9
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.d.ts +21 -7
- package/dist/types/components/jump-card-ecommerce/jump-card-ecommerce.stories.d.ts +26 -1
- package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.d.ts +9 -0
- package/dist/types/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.d.ts +6 -0
- package/dist/types/components/jump-quantity/jump-quantity.d.ts +3 -2
- package/dist/types/components.d.ts +79 -21
- package/package.json +1 -1
- package/dist/jump-design-system/p-5a6fbc53.entry.js +0 -2
- package/dist/jump-design-system/p-7696c03d.entry.js +0 -2
- package/dist/jump-design-system/p-7696c03d.entry.js.map +0 -1
- package/dist/jump-design-system/p-fafe6478.entry.js +0 -2
- package/dist/jump-design-system/p-fafe6478.entry.js.map +0 -1
- /package/dist/jump-design-system/{p-5d713084.entry.js.map → p-529a09f6.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-377a769b.entry.js.map → p-594b15ee.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-5a6fbc53.entry.js.map → p-5da7839d.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-a6fc23f7.entry.js.map → p-65ac4e72.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-493c7f4a.entry.js.map → p-8efeaa79.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-2cb7d817.entry.js.map → p-95460fa4.entry.js.map} +0 -0
- /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<
|
|
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-
|
|
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,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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"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|