vviinn-widgets 2.32.1 → 2.34.0

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 (77) hide show
  1. package/dist/cjs/{index-fcf59d51.js → index-0547e502.js} +4 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/{package-c346a8d8.js → package-bec51a19.js} +1 -1
  4. package/dist/cjs/search-filters_20.cjs.entry.js +1 -1
  5. package/dist/cjs/vviinn-button.cjs.entry.js +1 -1
  6. package/dist/cjs/{vviinn-carousel_3.cjs.entry.js → vviinn-carousel_4.cjs.entry.js} +146 -22
  7. package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js +1 -1
  8. package/dist/cjs/vviinn-vpr-button.cjs.entry.js +2 -2
  9. package/dist/cjs/vviinn-vps-button.cjs.entry.js +2 -2
  10. package/dist/cjs/vviinn-vps-widget.cjs.entry.js +1 -1
  11. package/dist/cjs/vviinn-widgets.cjs.js +1 -1
  12. package/dist/collection/collection-manifest.json +2 -1
  13. package/dist/collection/components/vviinn-carousel/vviinn-carousel.css +10 -9
  14. package/dist/collection/components/vviinn-carousel/vviinn-carousel.js +116 -13
  15. package/dist/collection/components/vviinn-icons/index.js +1 -0
  16. package/dist/collection/components/vviinn-product-card/vviinn-product-card.css +81 -10
  17. package/dist/collection/components/vviinn-product-card/vviinn-product-card.js +171 -6
  18. package/dist/collection/components/vviinn-skeleton/vviinn-skeleton.css +21 -0
  19. package/dist/collection/components/vviinn-skeleton/vviinn-skeleton.js +67 -0
  20. package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js +1 -1
  21. package/dist/collection/components/vviinn-vpr-button/stories/args.js +1 -1
  22. package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +2 -1
  23. package/dist/collection/components/vviinn-vpr-widget/stories/args.js +13 -0
  24. package/dist/collection/components/vviinn-vpr-widget/stories/vviinn-vpr-widget.stories.js +27 -0
  25. package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-vidget.js +48 -6
  26. package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.css +26 -0
  27. package/dist/esm/{index-d1215e03.js → index-77a778fc.js} +4 -1
  28. package/dist/esm/loader.js +1 -1
  29. package/dist/esm/{package-8676448e.js → package-48870c30.js} +1 -1
  30. package/dist/esm/search-filters_20.entry.js +1 -1
  31. package/dist/esm/vviinn-button.entry.js +1 -1
  32. package/dist/esm/{vviinn-carousel_3.entry.js → vviinn-carousel_4.entry.js} +146 -23
  33. package/dist/esm/vviinn-recommendations-sidebar.entry.js +1 -1
  34. package/dist/esm/vviinn-vpr-button.entry.js +2 -2
  35. package/dist/esm/vviinn-vps-button.entry.js +2 -2
  36. package/dist/esm/vviinn-vps-widget.entry.js +1 -1
  37. package/dist/esm/vviinn-widgets.js +1 -1
  38. package/dist/types/components/vviinn-carousel/vviinn-carousel.d.ts +14 -1
  39. package/dist/types/components/vviinn-icons/index.d.ts +1 -0
  40. package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts +19 -1
  41. package/dist/types/components/vviinn-skeleton/vviinn-skeleton.d.ts +6 -0
  42. package/dist/types/components/vviinn-vpr-button/vviinn-vpr-button.d.ts +1 -0
  43. package/dist/types/components/vviinn-vpr-widget/stories/args.d.ts +12 -0
  44. package/dist/types/components/vviinn-vpr-widget/stories/vviinn-vpr-widget.stories.d.ts +13 -0
  45. package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-vidget.d.ts +9 -0
  46. package/dist/types/components.d.ts +39 -2
  47. package/dist/types/recommendation/events.d.ts +5 -0
  48. package/dist/vviinn-widgets/{p-48a3c418.entry.js → p-40393244.entry.js} +1 -1
  49. package/dist/vviinn-widgets/{p-774581dc.entry.js → p-46ed6352.entry.js} +1 -1
  50. package/dist/vviinn-widgets/p-8615ddd8.entry.js +1 -0
  51. package/dist/vviinn-widgets/{p-17b380b1.entry.js → p-87cb4c54.entry.js} +1 -1
  52. package/dist/vviinn-widgets/p-b58ea29c.js +1 -0
  53. package/dist/vviinn-widgets/p-c51bea44.entry.js +1 -0
  54. package/dist/vviinn-widgets/{p-a69d3568.js → p-dc7e96d7.js} +1 -1
  55. package/dist/vviinn-widgets/{p-4bcffaa8.entry.js → p-de571b44.entry.js} +1 -1
  56. package/dist/vviinn-widgets/{p-c3bb5dc7.entry.js → p-f52d84e5.entry.js} +1 -1
  57. package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
  58. package/package.json +1 -1
  59. package/www/build/{p-48a3c418.entry.js → p-40393244.entry.js} +1 -1
  60. package/www/build/{p-774581dc.entry.js → p-46ed6352.entry.js} +1 -1
  61. package/www/build/p-8615ddd8.entry.js +1 -0
  62. package/www/build/{p-17b380b1.entry.js → p-87cb4c54.entry.js} +1 -1
  63. package/www/build/p-b58ea29c.js +1 -0
  64. package/www/build/p-c51bea44.entry.js +1 -0
  65. package/www/build/{p-a69d3568.js → p-dc7e96d7.js} +1 -1
  66. package/www/build/{p-4bcffaa8.entry.js → p-de571b44.entry.js} +1 -1
  67. package/www/build/{p-c3bb5dc7.entry.js → p-f52d84e5.entry.js} +1 -1
  68. package/www/build/vviinn-widgets.esm.js +1 -1
  69. package/www/index.html +7 -1
  70. package/dist/collection/slider/GridMode.js +0 -1
  71. package/dist/types/slider/GridMode.d.ts +0 -1
  72. package/dist/vviinn-widgets/p-bafae90c.entry.js +0 -1
  73. package/dist/vviinn-widgets/p-fa636cb1.js +0 -1
  74. package/dist/vviinn-widgets/p-fc88a6c2.entry.js +0 -1
  75. package/www/build/p-bafae90c.entry.js +0 -1
  76. package/www/build/p-fa636cb1.js +0 -1
  77. package/www/build/p-fc88a6c2.entry.js +0 -1
@@ -25,6 +25,9 @@ const VisualSearchIcon = () => (index.h("svg", { width: "20", height: "20", fill
25
25
  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z", fill: "#161616" })));
26
26
  const CrossIcon = () => (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
27
27
  index.h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
28
+ const UpdateIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
29
+ index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.5998 4.57C20.3898 4.19 19.8798 3.68 19.4198 0.37C19.3798 0.15 19.2198 0 19.0098 0C18.7998 0 18.6298 0.15 18.5898 0.37C18.1198 3.66 17.6298 4.13 14.4098 4.57C14.1698 4.61 14.0098 4.77 14.0098 5C14.0098 5.23 14.1698 5.39 14.4098 5.42C17.6298 5.81 18.1398 6.31 18.5898 9.62C18.6298 9.84 18.7998 10 19.0098 10C19.2198 10 19.3898 9.84 19.4198 9.62C19.8898 6.31 20.3898 5.81 23.5998 5.42C23.8398 5.38 23.9998 5.22 23.9998 5C23.9998 4.78 23.8298 4.6 23.5998 4.57Z", fill: "currentColor" }),
30
+ index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.93 13C19.43 13 19.01 13.37 18.95 13.86C18.52 17.36 15.51 20.06 11.89 20C8.24 19.94 5.15 16.92 5.01 13.27C4.92 10.79 6.13 8.58 8.01 7.27V11C8.01 11.55 8.46 12 9.01 12C9.56 12 10.01 11.55 10.01 11V5C10.01 4.45 9.56 4 9.01 4H3C2.45 4 2 4.45 2 5C2 5.55 2.45 6 3 6H6.35C4.24 7.71 2.91 10.35 3 13.3C3.15 17.98 7.06 21.87 11.74 22C16.45 22.13 20.37 18.65 20.93 14.13C21 13.53 20.53 13.01 19.93 13.01V13Z", fill: "currentColor" })));
28
31
 
29
32
  exports.ArrowIcon = ArrowIcon;
30
33
  exports.CameraIcon = CameraIcon;
@@ -33,4 +36,5 @@ exports.CrossIcon = CrossIcon;
33
36
  exports.OnboardingCard1Icon = OnboardingCard1Icon;
34
37
  exports.OnboardingCard2Icon = OnboardingCard2Icon;
35
38
  exports.OnboardingCard3Icon = OnboardingCard3Icon;
39
+ exports.UpdateIcon = UpdateIcon;
36
40
  exports.VisualSearchIcon = VisualSearchIcon;
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"imageLoaded":[32]}]]],["search-filters_20.cjs",[[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-teaser"],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"slider":[32]}],[1,"vviinn-onboarding-card-1",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-2",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-3",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
17
+ return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_4.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"imageLoaded":[32],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_20.cjs",[[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-teaser"],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"slider":[32]}],[1,"vviinn-onboarding-card-1",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-2",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-3",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
18
18
  });
19
19
  };
20
20
 
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const version = "2.32.1";
3
+ const version = "2.34.0";
4
4
 
5
5
  exports.version = version;
@@ -6,7 +6,7 @@ const index = require('./index-5619b5ec.js');
6
6
  const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
7
7
  const i18next = require('./i18next-74ff3413.js');
8
8
  const customizedSlots = require('./customized-slots-0a8d663c.js');
9
- const index$1 = require('./index-fcf59d51.js');
9
+ const index$1 = require('./index-0547e502.js');
10
10
 
11
11
  // -------------------------------------------------------------------------------------
12
12
  // -------------------------------------------------------------------------------------
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-5619b5ec.js');
6
- const index$1 = require('./index-fcf59d51.js');
6
+ const index$1 = require('./index-0547e502.js');
7
7
 
8
8
  const vviinnButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.raw-open-button{background:none;border:none;cursor:pointer}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#f4f4f4;outline:none}";
9
9
 
@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-5619b5ec.js');
6
6
  const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
7
- const index$1 = require('./index-fcf59d51.js');
7
+ const index$1 = require('./index-0547e502.js');
8
8
  const i18next = require('./i18next-74ff3413.js');
9
9
  const customizedSlots = require('./customized-slots-0a8d663c.js');
10
- const _package = require('./package-c346a8d8.js');
10
+ const _package = require('./package-bec51a19.js');
11
11
  const index$2 = require('./index-7ff2ab5f.js');
12
12
 
13
- const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) button{border-radius:2px}:host(.grid) button{border-radius:50%}button{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}button{fill:#525252}button:disabled{display:none}button.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
13
+ const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
14
14
 
15
15
  const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
16
16
  const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
@@ -21,14 +21,36 @@ const VviinnCarousel = class {
21
21
  index.registerInstance(this, hostRef);
22
22
  this.columns = 0;
23
23
  this.resizeObserver = new ResizeObserver(() => this.handleResize());
24
+ this.defaultAnimationInterval = 2000;
24
25
  this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
25
26
  this.isLastGroup = () => this.activeContentGroup === this.getContentGroups().length - 1 &&
26
- this.mode === "grid";
27
- this.isFirstGroup = () => this.activeContentGroup === 0 && this.mode === "grid";
27
+ this.isGridMode;
28
+ this.isFirstGroup = () => this.activeContentGroup === 0 && this.isGridMode;
29
+ this.updateCard = (productId, step, animationInterval) => {
30
+ let clickedProduct = this.crossSellingRecommendations.find((item) => item.productId === productId);
31
+ const crossSellingIndex = this.crossSellingRecommendations.indexOf(clickedProduct);
32
+ const recommendationIndex = this.recommendations.indexOf(clickedProduct);
33
+ const newCrossSellingRecommendations = this.crossSellingRecommendations;
34
+ if (recommendationIndex + step < this.recommendations.length) {
35
+ newCrossSellingRecommendations[crossSellingIndex] =
36
+ this.recommendations[recommendationIndex + step];
37
+ let element = this.el.querySelector(`[data-id="${productId}"]`);
38
+ const button = element.shadowRoot.querySelector(".update-button");
39
+ button.classList.add("hidden");
40
+ this.crossSellingRecommendations = [...newCrossSellingRecommendations];
41
+ const animationTimer = setTimeout(() => {
42
+ if (recommendationIndex + step * 2 <= this.recommendations.length - 1) {
43
+ button.classList.remove("hidden");
44
+ }
45
+ clearTimeout(animationTimer);
46
+ }, animationInterval);
47
+ }
48
+ };
28
49
  this.moveDirection = "right";
29
50
  this.contentGroups = [];
30
51
  this.activeContentGroup = 0;
31
52
  this.isRTL = false;
53
+ this.crossSellingRecommendations = [];
32
54
  this.mode = "continuity";
33
55
  this.imageWidth = 140;
34
56
  this.showScroll = true;
@@ -38,12 +60,22 @@ const VviinnCarousel = class {
38
60
  this.recommendations = [];
39
61
  this.widgetVersion = undefined;
40
62
  this.addToBasketShow = undefined;
63
+ this.updatingAllCards = undefined;
64
+ this.updateButtonLocation = undefined;
41
65
  }
42
66
  componentWillLoad() {
43
67
  this.isRTL = document.dir === "rtl";
44
68
  }
45
69
  connectedCallback() {
46
70
  this.setItemWidth();
71
+ this.isSetMode = this.mode === "set";
72
+ this.isGridMode = this.mode === "grid";
73
+ this.isContinuityMode = this.mode === "continuity";
74
+ this.isGridLike = this.isGridMode || this.isSetMode;
75
+ const columnsNumber = this.getColumnsNumber();
76
+ if (this.isSetMode && this.recommendations.length >= columnsNumber) {
77
+ this.crossSellingRecommendations = this.recommendations.slice(0, columnsNumber);
78
+ }
47
79
  }
48
80
  disconnectedCallback() {
49
81
  this.resizeObserver.disconnect();
@@ -56,6 +88,19 @@ const VviinnCarousel = class {
56
88
  this.mutationObserver.observe(slot, { subtree: true, childList: true });
57
89
  this.resizeObserver.observe(this.getHostParent());
58
90
  }
91
+ updatingAllCardsWatcher() {
92
+ if (!this.updatingAllCards)
93
+ return;
94
+ const step = this.getColumnsNumber();
95
+ this.crossSellingRecommendations.forEach((item) => {
96
+ this.updateCard(item.productId, step, this.defaultAnimationInterval);
97
+ });
98
+ }
99
+ crossSellingClickListener({ detail }) {
100
+ const step = this.getColumnsNumber();
101
+ const { animationInterval, productData } = detail;
102
+ this.updateCard(productData.productId, step, animationInterval);
103
+ }
59
104
  getItemWidthFromDocument() {
60
105
  return parseInt(getComputedStyle(document.body).getPropertyValue(CAROUSEL_IMAGE_WIDTH_CSS_VAR));
61
106
  }
@@ -70,7 +115,7 @@ const VviinnCarousel = class {
70
115
  return {
71
116
  content: true,
72
117
  [this.moveDirection]: true,
73
- [this.mode]: true,
118
+ [this.isSetMode ? "grid" : this.mode]: true,
74
119
  "show-scrollbar": this.showScroll,
75
120
  };
76
121
  }
@@ -185,19 +230,19 @@ const VviinnCarousel = class {
185
230
  this.activeContentGroup = this.getActiveGroupIndex();
186
231
  }
187
232
  showBullets() {
188
- return this.mode === "grid" && this.showScroll;
233
+ return this.isGridMode && this.showScroll;
189
234
  }
190
235
  showScrollbar() {
191
- return this.mode === "continuity" && this.showScroll;
236
+ return this.isContinuityMode && this.showScroll;
192
237
  }
193
238
  getClassMap() {
194
239
  return {
195
- [this.mode]: true,
240
+ [this.isSetMode ? "grid" : this.mode]: true,
196
241
  "show-scrollbar": this.showScrollbar(),
197
242
  };
198
243
  }
199
244
  renderRecommendation(recommendation, rank) {
200
- return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.mode === "continuity", campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode }));
245
+ return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.isGridLike, dimmedBackground: this.isContinuityMode, campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode, "data-id": recommendation.productId, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation }));
201
246
  }
202
247
  renderRecommendationGroup(elements) {
203
248
  return (index.h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));
@@ -206,12 +251,15 @@ const VviinnCarousel = class {
206
251
  return elements.map((el) => this.renderRecommendationGroup(el));
207
252
  }
208
253
  renderRecommendations() {
209
- return this.mode === "grid"
254
+ return this.isGridLike
210
255
  ? this.renderGrid()
211
256
  : this.renderRecommendationsElements();
212
257
  }
213
258
  renderRecommendationsElements() {
214
- return this.recommendations.map((r, i) => this.renderRecommendation(r, i));
259
+ const recommendations = this.isSetMode
260
+ ? this.crossSellingRecommendations
261
+ : this.recommendations;
262
+ return recommendations.map((r, i) => this.renderRecommendation(r, i));
215
263
  }
216
264
  renderGrid() {
217
265
  const recommendations = this.renderRecommendationsElements();
@@ -227,9 +275,12 @@ const VviinnCarousel = class {
227
275
  }, onClick: () => this.scroll(index$1) })));
228
276
  }
229
277
  render() {
230
- return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, index.h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, index.h(index$1.ChevronIcon, null)), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), index.h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, index.h(index$1.ChevronIcon, null))), this.showBullets() && (index.h("div", { class: "bullets" }, this.renderBullets()))));
278
+ return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, !this.isSetMode && (index.h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, index.h(index$1.ChevronIcon, null))), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), !this.isSetMode && (index.h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, index.h(index$1.ChevronIcon, null)))), this.showBullets() && (index.h("div", { class: "bullets" }, this.renderBullets()))));
231
279
  }
232
280
  get el() { return index.getElement(this); }
281
+ static get watchers() { return {
282
+ "updatingAllCards": ["updatingAllCardsWatcher"]
283
+ }; }
233
284
  };
234
285
  VviinnCarousel.style = vviinnCarouselCss;
235
286
 
@@ -418,7 +469,7 @@ const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
418
469
  const ResponsiveImage = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
419
470
  index.h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd })));
420
471
 
421
- const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%}.price-container{display:flex;flex-direction:column;margin-top:auto}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}img.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;margin-bottom:8px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}.basket-button{border:none;cursor:pointer;font-size:16px;padding:10px 12px;margin-top:8px}.basket-button.basket-button-grid{width:100%;background:none;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background:#f7f7f7}.basket-button-continuity:hover{background:#eaeaea}.basket-button-grid:hover{background:#f7f7f7}@media (max-width: 640px){.basket-button{padding:8px 10px}}:host(.dimmed) picture::before{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}";
472
+ const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100%}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}img.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}picture::before{content:\"\";opacity:0;width:100%;height:100%;box-sizing:border-box;display:block;top:0;left:0;position:absolute}.update-button{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;z-index:1;background:rgba(127, 127, 127, 0.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;color:white;cursor:pointer}.update-button::after{content:\"\";position:absolute;top:-4px;right:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}.update-button:hover{background:rgba(127, 127, 127, 0.5)}.update-button.hidden{display:none}.basket-button-container{margin-top:auto;width:100%}.basket-button{border:none;cursor:pointer;font-size:16px;padding:10px 12px}.basket-button.basket-button-grid{width:100%;background:none;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background:#f7f7f7}.basket-button-continuity:hover{background:#eaeaea}.basket-button-grid:hover{background:#f7f7f7}:host(.dimmed) picture::after{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}:host(.animated) picture::before{opacity:1;animation:pulse 1.2s infinite}:host(.animated) picture::after{content:\"\";position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-image:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E \")}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";
422
473
 
423
474
  const VviinnProductCard = class {
424
475
  constructor(hostRef) {
@@ -428,6 +479,8 @@ const VviinnProductCard = class {
428
479
  this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
429
480
  this.vviinnAddToBasket = index.createEvent(this, "vviinnAddToBasket", 7);
430
481
  this.vviinnAuxClick = index.createEvent(this, "vviinnAuxClick", 7);
482
+ this.vviinnCrossSellingClick = index.createEvent(this, "vviinnCrossSellingClick", 7);
483
+ this.vviinnUpdatingAllCardsFinished = index.createEvent(this, "vviinnUpdatingAllCardsFinished", 7);
431
484
  this.productData = null;
432
485
  this.intersectionCallback = (data) => {
433
486
  if (data.some((entry) => entry.isIntersecting)) {
@@ -453,12 +506,16 @@ const VviinnProductCard = class {
453
506
  this.dimmedBackground = false;
454
507
  this.mode = undefined;
455
508
  this.addToBasketShow = undefined;
509
+ this.updateButtonLocation = undefined;
456
510
  this.campaignTypeId = undefined;
457
511
  this.widgetElementId = undefined;
458
512
  this.buttonElementId = undefined;
459
513
  this.widgetVersion = undefined;
460
514
  this.index = 0;
515
+ this.updatingAllCards = undefined;
516
+ this.defaultAnimationInterval = undefined;
461
517
  this.imageLoaded = false;
518
+ this.isTransitioning = false;
462
519
  }
463
520
  connectedCallback() {
464
521
  this.productData = this.getProductData();
@@ -466,6 +523,27 @@ const VviinnProductCard = class {
466
523
  componentWillLoad() {
467
524
  customizedSlots.slotChangeListener(this, this.el);
468
525
  }
526
+ crossSellingClickListener({ detail }) {
527
+ const { animationInterval } = detail;
528
+ this.isTransitioning = true;
529
+ const animationTimer = setTimeout(() => {
530
+ this.isTransitioning = false;
531
+ clearTimeout(animationTimer);
532
+ }, animationInterval);
533
+ }
534
+ updatingAllCardsWatcher() {
535
+ if (!this.updatingAllCards)
536
+ return;
537
+ this.isTransitioning = true;
538
+ const animationTimer = setTimeout(() => {
539
+ this.vviinnUpdatingAllCardsFinished.emit();
540
+ this.isTransitioning = false;
541
+ clearTimeout(animationTimer);
542
+ }, this.defaultAnimationInterval);
543
+ }
544
+ productIdWatcher() {
545
+ this.productData = this.getProductData();
546
+ }
469
547
  getWidgetType() {
470
548
  return this.campaignTypeId === "VPR" || this.campaignTypeId === "VCS"
471
549
  ? "VPR"
@@ -518,20 +596,58 @@ const VviinnProductCard = class {
518
596
  };
519
597
  return this.responsive ? ResponsiveImage(props) : Image(props);
520
598
  }
599
+ generateRandomNumber(min, max) {
600
+ return Math.floor(Math.random() * (max - min + 1)) + min;
601
+ }
521
602
  render() {
522
603
  var _a, _b, _c;
523
- return (index.h(index.Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : imageSearch_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : imageSearch_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : imageSearch_store.state.locale }), this.addToBasketShow && (index.h("button", { class: {
604
+ return (index.h(index.Host, { part: "product-card", class: {
605
+ dimmed: this.dimmedBackground,
606
+ animated: this.isTransitioning,
607
+ }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button, update-button-item" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 20 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : imageSearch_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : imageSearch_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : imageSearch_store.state.locale }))), this.addToBasketShow && (index.h("div", { class: "basket-button-container" }, this.isTransitioning ? (index.h("vviinn-skeleton", { height: 40 })) : (index.h("button", { class: {
524
608
  "basket-button": true,
525
- "basket-button-grid": this.mode === "grid",
609
+ "basket-button-grid": this.mode === "grid" || this.mode === "set",
526
610
  "basket-button-continuity ": this.mode === "continuity",
527
611
  }, part: "basket-button", onClick: () => {
528
612
  this.vviinnAddToBasket.emit(this.productData);
529
- } }, index.h("slot", { name: "vviinn-basket-button-text" }, index.h("span", null, i18next.instance.t("basketButtonText")))))));
613
+ } }, index.h("slot", { name: "vviinn-basket-button-text" }, index.h("span", null, i18next.instance.t("basketButtonText"))))))), this.mode === "set" ? (index.h("button", { class: {
614
+ "update-button": true,
615
+ hidden: this.updateButtonLocation === "onTop",
616
+ }, part: "update-button-item", onClick: () => {
617
+ this.vviinnCrossSellingClick.emit({
618
+ animationInterval: this.generateRandomNumber(800, 1400),
619
+ productData: this.productData,
620
+ });
621
+ } }, index.h("slot", { name: "vviinn-update-icon-item" }, index.h(index$1.UpdateIcon, null)))) : null));
530
622
  }
531
623
  get el() { return index.getElement(this); }
624
+ static get watchers() { return {
625
+ "updatingAllCards": ["updatingAllCardsWatcher"],
626
+ "productId": ["productIdWatcher"]
627
+ }; }
532
628
  };
533
629
  VviinnProductCard.style = vviinnProductCardCss;
534
630
 
631
+ const vviinnSkeletonCss = ":host{display:block;width:100%;height:100%}.vviinn-skeleton{animation:pulse 1.2s infinite}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";
632
+
633
+ const VviinnSkeleton = class {
634
+ constructor(hostRef) {
635
+ index.registerInstance(this, hostRef);
636
+ this.height = undefined;
637
+ this.halfWidth = false;
638
+ }
639
+ render() {
640
+ return (index.h(index.Host, null, index.h("div", { class: {
641
+ "vviinn-skeleton": true,
642
+ }, style: {
643
+ height: `${this.height.toString()}px`,
644
+ width: this.halfWidth ? "50%" : "100%",
645
+ } })));
646
+ }
647
+ get el() { return index.getElement(this); }
648
+ };
649
+ VviinnSkeleton.style = vviinnSkeletonCss;
650
+
535
651
  function isFunction(value) {
536
652
  return typeof value === 'function';
537
653
  }
@@ -1217,7 +1333,7 @@ const resources = {
1217
1333
  },
1218
1334
  };
1219
1335
 
1220
- const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
1336
+ const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}.title-container{display:flex;justify-content:space-between;align-items:center}.update-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgb(244, 244, 244);border:none;color:white;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
1221
1337
 
1222
1338
  var __rest = (undefined && undefined.__rest) || function (s, e) {
1223
1339
  var t = {};
@@ -1273,6 +1389,7 @@ const VviinnVprWidget = class {
1273
1389
  this.excluded = "";
1274
1390
  this.productDetailNewTab = false;
1275
1391
  this.addToBasketShow = false;
1392
+ this.updateButtonLocation = "topAndItem";
1276
1393
  this.apiPath = "https://api.vviinn.com";
1277
1394
  this.useCarousel = true;
1278
1395
  this.showingInButton = false;
@@ -1282,6 +1399,7 @@ const VviinnVprWidget = class {
1282
1399
  this.recommendations = [];
1283
1400
  this.trackingDeactivated = false;
1284
1401
  this.hasErrorOnLoad = false;
1402
+ this.updatingAllCards = false;
1285
1403
  }
1286
1404
  getBasicEventData() {
1287
1405
  return {
@@ -1427,6 +1545,11 @@ const VviinnVprWidget = class {
1427
1545
  .trackEvent(addToBasketEvent)
1428
1546
  .then(this.setTrackingDeactivated);
1429
1547
  }
1548
+ updatingAllCardsFinishedListener() {
1549
+ if (!this.updatingAllCards)
1550
+ return;
1551
+ this.updatingAllCards = false;
1552
+ }
1430
1553
  trackWidgetEvent(action) {
1431
1554
  if (this.trackingDeactivated)
1432
1555
  return;
@@ -1511,14 +1634,14 @@ const VviinnVprWidget = class {
1511
1634
  return (index.h(index.Host, { class: {
1512
1635
  loaded: true,
1513
1636
  empty: this.recommendations.length == 0,
1514
- [this.mode]: true,
1515
- }, "aria-hidden": "false" }, this.addToBasketShow && index.h(customizedSlots.SlotSkeleton, null), index.h(index.Fragment, null, this.renderExternalCSS(), index.h("style", null, imageSearch_store.state.fallbackStyles), index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.recommendations.length > 0 &&
1637
+ [this.mode === "set" ? "grid" : this.mode]: true,
1638
+ }, "aria-hidden": "false" }, this.addToBasketShow && index.h(customizedSlots.SlotSkeleton, null), index.h(index.Fragment, null, this.renderExternalCSS(), index.h("style", null, imageSearch_store.state.fallbackStyles), index.h("div", { class: "title-container" }, index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.mode === "set" && this.updateButtonLocation !== "onItem" ? (index.h("button", { class: "update-button", part: "update-button-top", onClick: () => (this.updatingAllCards = true) }, index.h("slot", { name: "vviinn-update-icon-top" }, index.h(index$1.UpdateIcon, null)))) : null), this.recommendations.length > 0 &&
1516
1639
  (this.useCarousel ? this.renderCarousel() : this.renderResults()), this.recommendations.length === 0 && this.hasErrorOnLoad && (index.h("p", { class: "no-result-text" }, this.noResultText.length
1517
1640
  ? this.noResultText
1518
1641
  : i18next.instance.t("noResultText"))))));
1519
1642
  }
1520
1643
  renderRecommendation(recommendation, index$1) {
1521
- return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", addToBasketShow: this.addToBasketShow, mode: this.mode, dimmedBackground: this.useDimmedBackgroundInCard(), campaignTypeId: this.campaignType, index: index$1, widgetElementId: this.id, widgetVersion: _package.version }));
1644
+ return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid" || this.mode === "set", addToBasketShow: this.addToBasketShow, mode: this.mode, dimmedBackground: this.useDimmedBackgroundInCard(), campaignTypeId: this.campaignType, index: index$1, widgetElementId: this.id, widgetVersion: _package.version }));
1522
1645
  }
1523
1646
  useDimmedBackgroundInCard() {
1524
1647
  return this.mode === "continuity" || !this.useCarousel;
@@ -1527,7 +1650,7 @@ const VviinnVprWidget = class {
1527
1650
  return (index.h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
1528
1651
  }
1529
1652
  renderCarousel() {
1530
- return (index.h("vviinn-carousel", { mode: this.mode, campaignTypeId: this.campaignType, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations, widgetElementId: this.id, widgetVersion: _package.version, gridArrowsDynamic: this.gridArrowsDynamic, addToBasketShow: this.addToBasketShow }));
1653
+ return (index.h("vviinn-carousel", { mode: this.mode, campaignTypeId: this.campaignType, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations, widgetElementId: this.id, widgetVersion: _package.version, gridArrowsDynamic: this.gridArrowsDynamic, addToBasketShow: this.addToBasketShow, updatingAllCards: this.updatingAllCards, updateButtonLocation: this.updateButtonLocation }));
1531
1654
  }
1532
1655
  get el() { return index.getElement(this); }
1533
1656
  static get watchers() { return {
@@ -1543,4 +1666,5 @@ VviinnVprWidget.style = vviinnVprWidgetCss;
1543
1666
 
1544
1667
  exports.vviinn_carousel = VviinnCarousel;
1545
1668
  exports.vviinn_product_card = VviinnProductCard;
1669
+ exports.vviinn_skeleton = VviinnSkeleton;
1546
1670
  exports.vviinn_vpr_widget = VviinnVprWidget;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-5619b5ec.js');
6
- const index$1 = require('./index-fcf59d51.js');
6
+ const index$1 = require('./index-0547e502.js');
7
7
 
8
8
  const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:4;box-sizing:border-box;display:block;display:flex;height:100vh;left:0;position:fixed;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.open){background:rgba(0, 0, 0, 0.2)}:host(.bottom){flex-direction:column;justify-content:end}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}header{position:relative;text-align:center;padding:32px}header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);padding:8px}:host(.right) header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}main{padding:0 24px;min-height:100px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-grid){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:24px}:host(.right) vviinn-vpr-widget{overflow:auto}:host(.right) vviinn-vpr-widget::part(image){border:none}.title{font-style:normal;font-weight:500;font-size:28px;line-height:40px;text-align:center;color:#000000}vviinn-vpr-widget::part(title),vviinn-vpr-widget::part(brand),vviinn-vpr-widget::part(type){text-align:left}vviinn-vpr-widget::part(price-container){align-self:start}.close-sidebar{background:transparent;border:none;cursor:pointer;margin:0;padding:0;position:absolute;right:24px;top:24px}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
9
9
 
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-5619b5ec.js');
6
- const _package = require('./package-c346a8d8.js');
7
- const index$1 = require('./index-fcf59d51.js');
6
+ const _package = require('./package-bec51a19.js');
7
+ const index$1 = require('./index-0547e502.js');
8
8
 
9
9
  const vviinnVprButtonCss = ":host{display:block}";
10
10
 
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-5619b5ec.js');
6
- const _package = require('./package-c346a8d8.js');
7
- const index$1 = require('./index-fcf59d51.js');
6
+ const _package = require('./package-bec51a19.js');
7
+ const index$1 = require('./index-0547e502.js');
8
8
  const customizedSlots = require('./customized-slots-0a8d663c.js');
9
9
 
10
10
  const vviinnVpsButtonCss = ":host{display:block}";
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-5619b5ec.js');
6
6
  const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
7
7
  const i18next = require('./i18next-74ff3413.js');
8
- const _package = require('./package-c346a8d8.js');
8
+ const _package = require('./package-bec51a19.js');
9
9
  const customizedSlots = require('./customized-slots-0a8d663c.js');
10
10
  const index$1 = require('./index-7ff2ab5f.js');
11
11
 
@@ -20,7 +20,7 @@ const patchBrowser = () => {
20
20
  };
21
21
 
22
22
  patchBrowser().then(options => {
23
- return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"imageLoaded":[32]}]]],["search-filters_20.cjs",[[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-teaser"],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"slider":[32]}],[1,"vviinn-onboarding-card-1",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-2",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-3",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
23
+ return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_4.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"imageLoaded":[32],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_20.cjs",[[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-teaser"],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"slider":[32]}],[1,"vviinn-onboarding-card-1",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-2",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-3",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
24
24
  });
25
25
 
26
26
  exports.setNonce = index.setNonce;
@@ -2,6 +2,7 @@
2
2
  "entries": [
3
3
  "./components/image-search/search-filters/search-filters.js",
4
4
  "./components/vviinn-button/vviinn-button.js",
5
+ "./components/vviinn-vpr-widget/vviinn-vpr-vidget.js",
5
6
  "./components/vviinn-carousel/vviinn-carousel.js",
6
7
  "./components/vviinn-error/vviinn-error.js",
7
8
  "./components/vviinn-error/vviinn-empty-results/vviinn-empty-results.js",
@@ -22,12 +23,12 @@
22
23
  "./components/vviinn-preloader/vviinn-preloader.js",
23
24
  "./components/vviinn-privacy-badge/vviinn-privacy-badge.js",
24
25
  "./components/vviinn-product-card/vviinn-product-card.js",
26
+ "./components/vviinn-skeleton/vviinn-skeleton.js",
25
27
  "./components/vviinn-slider/vviinn-slider.js",
26
28
  "./components/vviinn-slider/vviinn-slide/vviinn-slide.js",
27
29
  "./components/vviinn-teaser/vviinn-teaser.js",
28
30
  "./components/vviinn-vpr-button/vviinn-vpr-button.js",
29
31
  "./components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js",
30
- "./components/vviinn-vpr-widget/vviinn-vpr-vidget.js",
31
32
  "./components/vviinn-vps-button/vviinn-vps-button.js",
32
33
  "./components/vviinn-vps-widget/vviinn-vps-widget.js"
33
34
  ],