vviinn-widgets 2.2.1 → 2.3.1

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 (100) hide show
  1. package/dist/cjs/{app-globals-d0251be8.js → app-globals-6b5da080.js} +1 -1
  2. package/dist/cjs/cropper-handler.cjs.entry.js +1 -1
  3. package/dist/cjs/{customized-slots-14b77e4a.js → customized-slots-8bc78ad4.js} +1 -1
  4. package/dist/cjs/highlight-box_22.cjs.entry.js +4 -4
  5. package/dist/cjs/{imageSearch.store-d9ed1a5b.js → imageSearch.store-042e9f45.js} +1 -1
  6. package/dist/cjs/{index-141137b2.js → index-553c2b4f.js} +1 -1
  7. package/dist/cjs/{index-a5e15a0c.js → index-5b9a60ac.js} +7 -9
  8. package/dist/cjs/loader.cjs.js +3 -3
  9. package/dist/cjs/{vviinn-carousel_5.cjs.entry.js → vviinn-carousel_3.cjs.entry.js} +6 -92
  10. package/dist/cjs/vviinn-error.cjs.entry.js +1 -1
  11. package/dist/cjs/vviinn-preloader.cjs.entry.js +2 -2
  12. package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js +63 -0
  13. package/dist/cjs/vviinn-vpr-button.cjs.entry.js +44 -0
  14. package/dist/cjs/vviinn-vps-button.cjs.entry.js +4 -4
  15. package/dist/cjs/vviinn-vps-widget.cjs.entry.js +3 -3
  16. package/dist/cjs/vviinn-widgets.cjs.js +3 -3
  17. package/dist/collection/components/vviinn-carousel/vviinn-carousel.css +4 -0
  18. package/dist/collection/components/vviinn-carousel/vviinn-carousel.js +6 -3
  19. package/dist/collection/components/vviinn-icons/index.js +6 -8
  20. package/dist/collection/components/vviinn-product-card/stories/args.js +73 -0
  21. package/dist/collection/components/vviinn-product-card/stories/decorators.js +51 -0
  22. package/dist/collection/components/vviinn-product-card/stories/vviinn-product-card.stories.js +105 -0
  23. package/dist/collection/components/vviinn-vpr-button/stories/args.js +207 -0
  24. package/dist/collection/components/vviinn-vpr-button/stories/vviinn-vpr-button.stories.js +89 -0
  25. package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +11 -4
  26. package/dist/collection/components/vviinn-vpr-widget/stories/args.js +190 -0
  27. package/dist/collection/components/vviinn-vpr-widget/stories/decorators.js +29 -0
  28. package/dist/collection/components/vviinn-vpr-widget/stories/vviinn-vpr-widget.stories.js +212 -0
  29. package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-vidget.js +1 -0
  30. package/dist/collection/components/vviinn-vps-button/stories/vviinn-vps-button.stories.js +31 -0
  31. package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.css +3 -0
  32. package/dist/collection/components/vviinn-vps-widget/stories/vviinn-vps-widget.stories.js +33 -0
  33. package/dist/esm/{app-globals-b6113170.js → app-globals-90d99f95.js} +1 -1
  34. package/dist/esm/cropper-handler.entry.js +1 -1
  35. package/dist/esm/{customized-slots-a952fb80.js → customized-slots-65b2467d.js} +1 -1
  36. package/dist/esm/highlight-box_22.entry.js +4 -4
  37. package/dist/esm/{imageSearch.store-4ca31230.js → imageSearch.store-f35e14f8.js} +1 -1
  38. package/dist/esm/{index-017f18de.js → index-ac2e3b9d.js} +8 -10
  39. package/dist/esm/{index-3e85e294.js → index-d7c7df1c.js} +1 -1
  40. package/dist/esm/loader.js +3 -3
  41. package/dist/esm/{vviinn-carousel_5.entry.js → vviinn-carousel_3.entry.js} +7 -91
  42. package/dist/esm/vviinn-error.entry.js +1 -1
  43. package/dist/esm/vviinn-preloader.entry.js +2 -2
  44. package/dist/esm/vviinn-recommendations-sidebar.entry.js +59 -0
  45. package/dist/esm/vviinn-vpr-button.entry.js +40 -0
  46. package/dist/esm/vviinn-vps-button.entry.js +4 -4
  47. package/dist/esm/vviinn-vps-widget.entry.js +3 -3
  48. package/dist/esm/vviinn-widgets.js +3 -3
  49. package/dist/types/components/vviinn-carousel/vviinn-carousel.d.ts +3 -0
  50. package/dist/types/components/vviinn-product-card/stories/args.d.ts +73 -0
  51. package/dist/types/components/vviinn-product-card/stories/decorators.d.ts +1 -0
  52. package/dist/types/components/vviinn-product-card/stories/vviinn-product-card.stories.d.ts +80 -0
  53. package/dist/types/components/vviinn-vpr-button/stories/args.d.ts +207 -0
  54. package/dist/types/components/vviinn-vpr-button/stories/vviinn-vpr-button.stories.d.ts +214 -0
  55. package/dist/types/components/vviinn-vpr-button/vviinn-vpr-button.d.ts +3 -0
  56. package/dist/types/components/vviinn-vpr-widget/stories/args.d.ts +198 -0
  57. package/dist/types/components/vviinn-vpr-widget/stories/decorators.d.ts +2 -0
  58. package/dist/types/components/vviinn-vpr-widget/stories/vviinn-vpr-widget.stories.d.ts +141 -0
  59. package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-vidget.d.ts +1 -0
  60. package/dist/types/components/vviinn-vps-button/stories/vviinn-vps-button.stories.d.ts +12 -0
  61. package/dist/types/components/{vviinn-vpr-button/stories/kek.stories.d.ts → vviinn-vps-widget/stories/vviinn-vps-widget.stories.d.ts} +5 -2
  62. package/{www/build/p-68900093.entry.js → dist/vviinn-widgets/p-1c141479.entry.js} +1 -1
  63. package/dist/vviinn-widgets/{p-62a1b042.entry.js → p-320844ea.entry.js} +1 -1
  64. package/dist/vviinn-widgets/p-4530ca32.entry.js +1 -0
  65. package/dist/vviinn-widgets/p-55491d9b.js +1 -0
  66. package/dist/vviinn-widgets/p-6239a782.entry.js +1 -0
  67. package/dist/vviinn-widgets/{p-d7894eaf.js → p-679ea2ce.js} +1 -1
  68. package/dist/vviinn-widgets/{p-95e53d99.entry.js → p-757849fd.entry.js} +1 -1
  69. package/{www/build/p-3da18d7f.js → dist/vviinn-widgets/p-80f0d4e0.js} +1 -1
  70. package/dist/vviinn-widgets/{p-6c4c240d.entry.js → p-935b4f49.entry.js} +1 -1
  71. package/dist/vviinn-widgets/p-a5b69a48.entry.js +1 -0
  72. package/dist/vviinn-widgets/{p-0ed1ef7e.entry.js → p-b0243e84.entry.js} +1 -1
  73. package/dist/vviinn-widgets/{p-db0be4cd.js → p-b4b46a70.js} +1 -1
  74. package/dist/vviinn-widgets/{p-9fee20e7.entry.js → p-e362fa80.entry.js} +1 -1
  75. package/dist/vviinn-widgets/{p-16e49514.js → p-e882fbeb.js} +1 -1
  76. package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
  77. package/package.json +1 -1
  78. package/{dist/vviinn-widgets/p-68900093.entry.js → www/build/p-1c141479.entry.js} +1 -1
  79. package/www/build/{p-62a1b042.entry.js → p-320844ea.entry.js} +1 -1
  80. package/www/build/p-4379b1c2.js +1 -0
  81. package/www/build/p-4530ca32.entry.js +1 -0
  82. package/www/build/p-55491d9b.js +1 -0
  83. package/www/build/p-6239a782.entry.js +1 -0
  84. package/www/build/{p-d7894eaf.js → p-679ea2ce.js} +1 -1
  85. package/www/build/{p-95e53d99.entry.js → p-757849fd.entry.js} +1 -1
  86. package/{dist/vviinn-widgets/p-3da18d7f.js → www/build/p-80f0d4e0.js} +1 -1
  87. package/www/build/{p-6c4c240d.entry.js → p-935b4f49.entry.js} +1 -1
  88. package/www/build/p-a5b69a48.entry.js +1 -0
  89. package/www/build/{p-0ed1ef7e.entry.js → p-b0243e84.entry.js} +1 -1
  90. package/www/build/{p-db0be4cd.js → p-b4b46a70.js} +1 -1
  91. package/www/build/{p-9fee20e7.entry.js → p-e362fa80.entry.js} +1 -1
  92. package/www/build/{p-16e49514.js → p-e882fbeb.js} +1 -1
  93. package/www/build/vviinn-widgets.esm.js +1 -1
  94. package/www/index.html +4 -74
  95. package/dist/collection/components/vviinn-vpr-button/stories/kek.stories.js +0 -18
  96. package/dist/vviinn-widgets/p-eb15116d.entry.js +0 -1
  97. package/dist/vviinn-widgets/p-f00fddbb.js +0 -1
  98. package/www/build/p-1cc0cdfd.js +0 -1
  99. package/www/build/p-eb15116d.entry.js +0 -1
  100. package/www/build/p-f00fddbb.js +0 -1
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-141137b2.js');
3
+ const index = require('./index-553c2b4f.js');
4
4
 
5
5
  /*! *****************************************************************************
6
6
  Copyright (c) Microsoft Corporation.
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-141137b2.js');
5
+ const index = require('./index-553c2b4f.js');
6
6
  const Handler = require('./Handler-d1a8a86a.js');
7
7
 
8
8
  const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);touch-action:none;position:absolute;width:var(--size);z-index:4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.disabled){opacity:0.25}:host(.nw-resize){border-bottom:none;border-right:none;top:0;left:0}:host(.ne-resize){border-left:none;border-bottom:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;left:0;bottom:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-141137b2.js');
3
+ const index = require('./index-553c2b4f.js');
4
4
 
5
5
  const defaultSlotsNames = [
6
6
  "vviinn-onboarding-title",
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-141137b2.js');
6
- const imageSearch_store = require('./imageSearch.store-d9ed1a5b.js');
5
+ const index = require('./index-553c2b4f.js');
6
+ const imageSearch_store = require('./imageSearch.store-042e9f45.js');
7
7
  const Handler = require('./Handler-d1a8a86a.js');
8
- const index$1 = require('./index-a5e15a0c.js');
9
- const customizedSlots = require('./customized-slots-14b77e4a.js');
8
+ const index$1 = require('./index-5b9a60ac.js');
9
+ const customizedSlots = require('./customized-slots-8bc78ad4.js');
10
10
 
11
11
  // -------------------------------------------------------------------------------------
12
12
  // -------------------------------------------------------------------------------------
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-141137b2.js');
3
+ const index = require('./index-553c2b4f.js');
4
4
  const Handler = require('./Handler-d1a8a86a.js');
5
5
 
6
6
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -21,7 +21,7 @@ function _interopNamespace(e) {
21
21
  }
22
22
 
23
23
  const NAMESPACE = 'vviinn-widgets';
24
- const Env = /* vviinn-widgets */ {"packageVersion":"2.2.0","packageName":"vviinn-widgets","environment":"local"};
24
+ const Env = /* vviinn-widgets */ {"packageVersion":"2.3.0","packageName":"vviinn-widgets","environment":"local"};
25
25
 
26
26
  let scopeId;
27
27
  let hostTagName;
@@ -1,13 +1,11 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-141137b2.js');
3
+ const index = require('./index-553c2b4f.js');
4
4
 
5
5
  const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
6
6
  index.h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
7
- const CameraIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none" },
8
- index.h("defs", null),
9
- index.h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M9.771 3.89a.875.875 0 01.728-.39h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.25A2.625 2.625 0 012.625 21V8.75A2.625 2.625 0 015.25 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.25a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }),
10
- index.h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M14 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })));
7
+ const CameraIcon = () => (index.h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
8
+ index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
11
9
  const OnboardingCard1Icon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
12
10
  index.h("defs", null),
13
11
  index.h("path", { fill: "#393939", d: "M74.55 20a5.06 5.06 0 014.14 2l4.72 9.32.1.18.11.17A5.07 5.07 0 0087.93 34h13.87c5.07 0 9.2 3.59 9.2 8v50c0 4.41-4.13 8-9.2 8H18.2c-5.07 0-9.2-3.59-9.2-8V42c0-4.41 4.13-8 9.2-8h13.87a5.072 5.072 0 004.31-2.34l.11-.17.1-.18L41.31 22a5.06 5.06 0 014.14-2h29.1zm0-4h-29.1a9 9 0 00-7.6 4L33 29.5a1.13 1.13 0 01-1 .5H18.2C10.91 30 5 35.37 5 42v50c0 6.63 5.91 12 13.2 12h83.6c7.29 0 13.2-5.37 13.2-12V42c0-6.63-5.91-12-13.2-12H87.93a1.13 1.13 0 01-1-.5L82.15 20a9 9 0 00-7.6-4z" }),
@@ -23,10 +21,10 @@ const OnboardingCard3Icon = () => (index.h("svg", { xmlns: "http://www.w3.org/20
23
21
  index.h("path", { class: "colored", d: "M100 7.94H20a12 12 0 00-12 12v80a11.998 11.998 0 0012 12h80c3.183 0 6.235-1.264 8.485-3.515A11.996 11.996 0 00112 99.94v-80a11.998 11.998 0 00-12-12zm-8 69.24a1.69 1.69 0 01-.85 1.45l-30.31 17.1a1.77 1.77 0 01-1.67 0l-30.32-17.1a1.689 1.689 0 01-.85-1.45V42.82a1.66 1.66 0 01.85-1.45l30.32-17.21a1.71 1.71 0 011.67 0l30.31 17.21a1.67 1.67 0 01.85 1.45v34.36z" })));
24
22
  const CheckIcon = () => (index.h("svg", { width: "14", height: "11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
25
23
  index.h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
26
- const ChevronIcon = () => (index.h("svg", { width: "9", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
27
- index.h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z", fill: "#525252" })));
28
- const VisualSearchIcon = () => (index.h("svg", { width: "22", height: "22", xmlns: "http://www.w3.org/2000/svg" },
29
- index.h("path", { d: "M18 0h-3v2h3c1.103 0 2 .897 2 2v3h2V4c0-2.206-1.794-4-4-4Zm2 18c0 1.103-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4v-3h-2v3ZM2 18v-3H0v3c0 2.206 1.794 4 4 4h3v-2H4c-1.103 0-2-.897-2-2ZM2 4c0-1.103.897-2 2-2h3V0H4C1.794 0 0 1.794 0 4v3h2V4Zm6 6.5C8 9.122 9.122 8 10.5 8S13 9.122 13 10.5 11.878 13 10.5 13A2.503 2.503 0 0 1 8 10.5Zm7.5 6.5a1.503 1.503 0 0 0 1.061-2.561l-2.012-2.011c.293-.6.448-1.26.451-1.928C15 8.019 12.981 6 10.5 6A4.505 4.505 0 0 0 6 10.5c0 2.481 2.019 4.5 4.5 4.5.693 0 1.341-.17 1.928-.451l2.011 2.012c.293.293.677.439 1.061.439Z" })));
24
+ const ChevronIcon = () => (index.h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
25
+ index.h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
26
+ const VisualSearchIcon = () => (index.h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
27
+ 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" })));
30
28
  const CrossIcon = () => (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
31
29
  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" })));
32
30
 
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-141137b2.js');
6
- const appGlobals = require('./app-globals-d0251be8.js');
5
+ const index = require('./index-553c2b4f.js');
6
+ const appGlobals = require('./app-globals-6b5da080.js');
7
7
 
8
8
  /*
9
9
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ const defineCustomElements = (win, options) => {
16
16
  if (typeof window === 'undefined') return Promise.resolve();
17
17
  return patchEsm().then(() => {
18
18
  appGlobals.globalScripts();
19
- return index.bootstrapLazy([["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_5.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"]}],[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]],[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],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[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"],"imageLoaded":[32]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[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]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]]], options);
19
+ return index.bootstrapLazy([["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["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],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[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"],"imageLoaded":[32]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[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]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","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"],"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"]}]]]], options);
20
20
  });
21
21
  };
22
22
 
@@ -2,12 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-141137b2.js');
6
- const imageSearch_store = require('./imageSearch.store-d9ed1a5b.js');
7
- const index$1 = require('./index-a5e15a0c.js');
5
+ const index = require('./index-553c2b4f.js');
6
+ const imageSearch_store = require('./imageSearch.store-042e9f45.js');
7
+ const index$1 = require('./index-5b9a60ac.js');
8
8
  const Handler = require('./Handler-d1a8a86a.js');
9
9
 
10
- 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;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;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.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)}}";
10
+ 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;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;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.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)}}";
11
11
 
12
12
  const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
13
13
  const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
@@ -56,7 +56,7 @@ let VviinnCarousel = class {
56
56
  content: true,
57
57
  [this.moveDirection]: true,
58
58
  [this.mode]: true,
59
- "show-scrollbar": this.showScroll
59
+ "show-scrollbar": this.showScroll,
60
60
  };
61
61
  }
62
62
  handleResize() {
@@ -205,7 +205,7 @@ let VviinnCarousel = class {
205
205
  }, onClick: () => this.scroll(index$1) })));
206
206
  }
207
207
  render() {
208
- 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() }, 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() }, index.h(index$1.ChevronIcon, null))), this.showBullets() ? (index.h("div", { class: "bullets" }, this.renderBullets())) : ("")));
208
+ 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" }, 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" }, index.h(index$1.ChevronIcon, null))), this.showBullets() ? (index.h("div", { class: "bullets" }, this.renderBullets())) : ("")));
209
209
  }
210
210
  get el() { return index.getElement(this); }
211
211
  };
@@ -386,90 +386,6 @@ let VviinnProductCard = class {
386
386
  };
387
387
  VviinnProductCard.style = vviinnProductCardCss;
388
388
 
389
- const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:0;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}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}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{-webkit-animation-name:slideOutFromBottom;animation-name:slideOutFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{-webkit-animation-name:slideInFromBottom;animation-name:slideInFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{-webkit-animation-name:slideOutFromRight;animation-name:slideOutFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.open) .sidebar{-webkit-animation-name:slideInFromRight;animation-name:slideInFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;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}@-webkit-keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}";
390
-
391
- let RecommendationsSidebar = class {
392
- constructor(hostRef) {
393
- index.registerInstance(this, hostRef);
394
- this.modalClosed = index.createEvent(this, "modalClosed", 7);
395
- this.position = "bottom";
396
- this.sourceImage = null;
397
- this.widgetScrollbar = false;
398
- this.state = "idle";
399
- }
400
- bodyClickListener(event) {
401
- const { clientX, clientY } = event;
402
- const sidebarRect = this.getSidebarRectangle();
403
- if (!sidebarRect)
404
- return;
405
- const inLeftBound = clientX >= sidebarRect.left;
406
- const inRightBound = clientX <= sidebarRect.right;
407
- const inTopBound = clientY >= sidebarRect.top;
408
- const inBottomBound = clientY <= sidebarRect.bottom;
409
- const inBound = inLeftBound && inRightBound && inTopBound && inBottomBound;
410
- if (!inBound) {
411
- this.state = "closed";
412
- }
413
- }
414
- getClassMap() {
415
- return {
416
- [this.position]: true,
417
- [this.state]: true,
418
- };
419
- }
420
- getSidebarRectangle() {
421
- var _a;
422
- return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
423
- }
424
- render() {
425
- return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(index$1.CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title: product-title", token: this.token, productId: this.productId, imageWidth: 300, blockTitle: "", mode: this.position === "bottom" ? "continuity" : "grid", useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar })))));
426
- }
427
- renderSourceImage() {
428
- return (index.h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
429
- }
430
- isSourceImageValid() {
431
- var _a;
432
- return ((_a = this.sourceImage) === null || _a === void 0 ? void 0 : _a.length) > 0;
433
- }
434
- handleAnimationEnd({ animationName }) {
435
- const isClosingAnimation = animationName.includes("slideOut");
436
- if (!isClosingAnimation)
437
- return;
438
- this.modalClosed.emit();
439
- }
440
- get el() { return index.getElement(this); }
441
- };
442
- RecommendationsSidebar.style = recommendationsSidebarCss;
443
-
444
- const vviinnVprButtonCss = ":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}.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}";
445
-
446
- let VviinnVprButton = class {
447
- constructor(hostRef) {
448
- index.registerInstance(this, hostRef);
449
- this.position = "bottom";
450
- this.sourceImage = null;
451
- this.sidebarTitle = "Visually similar products";
452
- this.modalScrollbar = false;
453
- }
454
- render() {
455
- return (index.h(index.Host, null, index.h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() }, index.h("slot", null, index.h(index$1.VisualSearchIcon, null)))));
456
- }
457
- handleClick() {
458
- const sidebar = document.createElement("vviinn-recommendations-sidebar");
459
- sidebar.sidebarTitle = this.sidebarTitle;
460
- sidebar.productId = this.productId;
461
- sidebar.token = this.token;
462
- sidebar.position = this.position;
463
- sidebar.sourceImage = this.sourceImage;
464
- sidebar.widgetScrollbar = this.modalScrollbar;
465
- sidebar.addEventListener("modalClosed", () => {
466
- document.body.removeChild(sidebar);
467
- });
468
- document.body.append(sidebar);
469
- }
470
- };
471
- VviinnVprButton.style = vviinnVprButtonCss;
472
-
473
389
  const createBearerString = (x) => `Bearer ${x}`;
474
390
  const createAuthedHeader = (x) => new Headers({
475
391
  Authorization: x,
@@ -1227,6 +1143,4 @@ VviinnVprWidget.style = vviinnVprWidgetCss;
1227
1143
 
1228
1144
  exports.vviinn_carousel = VviinnCarousel;
1229
1145
  exports.vviinn_product_card = VviinnProductCard;
1230
- exports.vviinn_recommendations_sidebar = RecommendationsSidebar;
1231
- exports.vviinn_vpr_button = VviinnVprButton;
1232
1146
  exports.vviinn_vpr_widget = VviinnVprWidget;
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-141137b2.js');
5
+ const index = require('./index-553c2b4f.js');
6
6
 
7
7
  const vviinnErrorCss = ":host{background:#F4F4F4;border-radius:8px;display:grid;grid-gap:20px;padding:24px;text-align:center}::slotted(svg){display:grid;align-self:center}::slotted(h4){margin:unset;font-weight:600;font-size:18px;line-height:24px}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--color-primary, var(--color-primary-system));font-weight:600;font-size:16px;line-height:20px;cursor:pointer}";
8
8
 
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-141137b2.js');
6
- const imageSearch_store = require('./imageSearch.store-d9ed1a5b.js');
5
+ const index = require('./index-553c2b4f.js');
6
+ const imageSearch_store = require('./imageSearch.store-042e9f45.js');
7
7
  require('./Handler-d1a8a86a.js');
8
8
 
9
9
  const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;-webkit-animation:rotate 3s linear infinite;animation:rotate 3s linear infinite;border:var(--preloader-width) solid white;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@-webkit-keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
@@ -0,0 +1,63 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-553c2b4f.js');
6
+ const index$1 = require('./index-5b9a60ac.js');
7
+
8
+ const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:0;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}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}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{-webkit-animation-name:slideOutFromBottom;animation-name:slideOutFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{-webkit-animation-name:slideInFromBottom;animation-name:slideInFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{-webkit-animation-name:slideOutFromRight;animation-name:slideOutFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.open) .sidebar{-webkit-animation-name:slideInFromRight;animation-name:slideInFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;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}@-webkit-keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}";
9
+
10
+ let RecommendationsSidebar = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ this.modalClosed = index.createEvent(this, "modalClosed", 7);
14
+ this.position = "bottom";
15
+ this.sourceImage = null;
16
+ this.widgetScrollbar = false;
17
+ this.state = "idle";
18
+ }
19
+ bodyClickListener(event) {
20
+ const { clientX, clientY } = event;
21
+ const sidebarRect = this.getSidebarRectangle();
22
+ if (!sidebarRect)
23
+ return;
24
+ const inLeftBound = clientX >= sidebarRect.left;
25
+ const inRightBound = clientX <= sidebarRect.right;
26
+ const inTopBound = clientY >= sidebarRect.top;
27
+ const inBottomBound = clientY <= sidebarRect.bottom;
28
+ const inBound = inLeftBound && inRightBound && inTopBound && inBottomBound;
29
+ if (!inBound) {
30
+ this.state = "closed";
31
+ }
32
+ }
33
+ getClassMap() {
34
+ return {
35
+ [this.position]: true,
36
+ [this.state]: true,
37
+ };
38
+ }
39
+ getSidebarRectangle() {
40
+ var _a;
41
+ return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
42
+ }
43
+ render() {
44
+ return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(index$1.CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title: product-title", token: this.token, productId: this.productId, imageWidth: 300, blockTitle: "", mode: this.position === "bottom" ? "continuity" : "grid", useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar })))));
45
+ }
46
+ renderSourceImage() {
47
+ return (index.h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
48
+ }
49
+ isSourceImageValid() {
50
+ var _a;
51
+ return ((_a = this.sourceImage) === null || _a === void 0 ? void 0 : _a.length) > 0;
52
+ }
53
+ handleAnimationEnd({ animationName }) {
54
+ const isClosingAnimation = animationName.includes("slideOut");
55
+ if (!isClosingAnimation)
56
+ return;
57
+ this.modalClosed.emit();
58
+ }
59
+ get el() { return index.getElement(this); }
60
+ };
61
+ RecommendationsSidebar.style = recommendationsSidebarCss;
62
+
63
+ exports.vviinn_recommendations_sidebar = RecommendationsSidebar;
@@ -0,0 +1,44 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-553c2b4f.js');
6
+ const index$1 = require('./index-5b9a60ac.js');
7
+
8
+ const vviinnVprButtonCss = ":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}.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
+
10
+ let VviinnVprButton = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ this.position = "bottom";
14
+ this.sourceImage = null;
15
+ this.sidebarTitle = "Visually similar products";
16
+ this.modalScrollbar = false;
17
+ this.sidebar = null;
18
+ this.sidebarCloseListener = () => {
19
+ document.body.removeChild(this.sidebar);
20
+ };
21
+ }
22
+ render() {
23
+ return (index.h(index.Host, null, index.h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() }, index.h("slot", null, index.h(index$1.VisualSearchIcon, null)))));
24
+ }
25
+ handleClick() {
26
+ const sidebar = document.createElement("vviinn-recommendations-sidebar");
27
+ sidebar.sidebarTitle = this.sidebarTitle;
28
+ sidebar.productId = this.productId;
29
+ sidebar.token = this.token;
30
+ sidebar.position = this.position;
31
+ sidebar.sourceImage = this.sourceImage;
32
+ sidebar.widgetScrollbar = this.modalScrollbar;
33
+ this.sidebar = sidebar;
34
+ sidebar.addEventListener("modalClosed", this.sidebarCloseListener);
35
+ document.body.append(this.sidebar);
36
+ }
37
+ disconnectedCallback() {
38
+ this.sidebar.removeEventListener("modalCLosed", this.sidebarCloseListener);
39
+ document.body.removeChild(this.sidebar);
40
+ }
41
+ };
42
+ VviinnVprButton.style = vviinnVprButtonCss;
43
+
44
+ exports.vviinn_vpr_button = VviinnVprButton;
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-141137b2.js');
6
- const index$1 = require('./index-a5e15a0c.js');
7
- const customizedSlots = require('./customized-slots-14b77e4a.js');
5
+ const index = require('./index-553c2b4f.js');
6
+ const index$1 = require('./index-5b9a60ac.js');
7
+ const customizedSlots = require('./customized-slots-8bc78ad4.js');
8
8
 
9
- const vviinnVpsButtonCss = "";
9
+ const vviinnVpsButtonCss = ":host{cursor:pointer}";
10
10
 
11
11
  let VviinnVpsButton = class {
12
12
  constructor(hostRef) {
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-141137b2.js');
6
- const imageSearch_store = require('./imageSearch.store-d9ed1a5b.js');
7
- const customizedSlots = require('./customized-slots-14b77e4a.js');
5
+ const index = require('./index-553c2b4f.js');
6
+ const imageSearch_store = require('./imageSearch.store-042e9f45.js');
7
+ const customizedSlots = require('./customized-slots-8bc78ad4.js');
8
8
  require('./Handler-d1a8a86a.js');
9
9
 
10
10
  const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);min-height:580px}.start-page_block{align-content:start;border-right:1px solid #F4F4F4;display:grid;padding:48px}.start-page_block.error{align-content:center}#onboarding-block{border-right:unset;box-sizing:border-box;grid-gap:24px;overflow-y:auto;position:relative;width:100%}vviinn-teaser{margin-bottom:32px;margin-top:-24px}vviinn-image-selector{align-items:center;background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));border-radius:2px;color:white;display:grid;font-size:16px;font-weight:600;height:56px;justify-items:center;margin-bottom:16px;transition:background 0.1s ease-in-out}vviinn-image-selector:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}vviinn-image-selector:active{border-color:black}.upload-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;grid-gap:16px}.results-page{display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));justify-items:center;padding:24px;padding-right:0;position:absolute;width:calc(100% - 16px)}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{border-right:1px solid #F4F4F4;display:grid;grid-template-rows:-webkit-min-content 170px;grid-template-rows:min-content 170px;grid-gap:24px;min-width:100%}.onboarding-wrapper{position:absolute;width:100%;padding:48px;box-sizing:border-box;display:grid;grid-gap:64px;padding-bottom:24px}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#F4F4F4;border-radius:4px;border:1px solid #F4F4F4;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px}search-filters::part(show-more-filters){border:1px solid #f4f4f4;border-radius:4px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px;padding:6px 16px}search-filters::part(show-more-filters):hover{background:#EAEAEA}search-filters::part(filter):hover{background:#EAEAEA}search-filters::part(filter):focus{outline:none;border:1px solid var(--color-primary, var(--color-primary-system))}search-filters::part(filter active){background:rgba(15, 98, 254, 0.15);color:var(--color-primary, var(--color-primary-system))}.filters-wrapper{overflow:auto}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (max-width: 768px){.start-page_block{padding:24px}.onboarding-wrapper{padding:24px}}@media (max-width: 640px){.start-page{grid-template-rows:-webkit-min-content;grid-template-rows:min-content;grid-template-columns:unset;grid-gap:48px;padding:24px 0 48px 0}}@media (max-width: 640px) and (min-width: 415px){.onboarding-wrapper{position:unset}#onboarding-block{overflow:unset}.start-page.active{height:1px;overflow:auto}}@media (max-width: 415px){.results-page>*{box-sizing:border-box;padding:24px}vviinn-slide{padding-bottom:48px}.start-page_block:last-of-type{border-right:unset;overflow-y:unset;position:static;box-sizing:border-box;width:unset}.start-page_block{padding:0 24px}vviinn-teaser{margin-top:24px}.onboarding-wrapper{position:static;width:unset;padding:unset;box-sizing:border-box}.results-page{grid-template-columns:unset;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 320px){.products{grid-template-columns:unset}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}";
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-141137b2.js');
4
- const appGlobals = require('./app-globals-d0251be8.js');
3
+ const index = require('./index-553c2b4f.js');
4
+ const appGlobals = require('./app-globals-6b5da080.js');
5
5
 
6
6
  /*
7
7
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -17,5 +17,5 @@ const patchBrowser = () => {
17
17
 
18
18
  patchBrowser().then(options => {
19
19
  appGlobals.globalScripts();
20
- return index.bootstrapLazy([["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_5.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"]}],[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]],[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],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[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"],"imageLoaded":[32]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[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]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]]], options);
20
+ return index.bootstrapLazy([["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["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],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[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"],"imageLoaded":[32]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[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]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","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"],"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"]}]]]], options);
21
21
  });
@@ -97,6 +97,10 @@ button {
97
97
  margin: 0;
98
98
  }
99
99
 
100
+ button {
101
+ fill: #525252;
102
+ }
103
+
100
104
  button.prev svg {
101
105
  transform: rotate(180deg);
102
106
  margin-left: -5px;
@@ -5,6 +5,9 @@ const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
5
5
  const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
6
6
  const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
7
7
  const CONTENT_GROUP_CSS_CLASS = "items-group";
8
+ /**
9
+ * @part carousel-button
10
+ **/
8
11
  export class VviinnCarousel {
9
12
  constructor() {
10
13
  this.moveDirection = "right";
@@ -47,7 +50,7 @@ export class VviinnCarousel {
47
50
  content: true,
48
51
  [this.moveDirection]: true,
49
52
  [this.mode]: true,
50
- "show-scrollbar": this.showScroll
53
+ "show-scrollbar": this.showScroll,
51
54
  };
52
55
  }
53
56
  handleResize() {
@@ -198,10 +201,10 @@ export class VviinnCarousel {
198
201
  render() {
199
202
  return (h(Host, { class: this.getClassMap() },
200
203
  h("div", { class: Object.assign({ body: true }, this.getClassMap()) },
201
- h("button", { class: "prev", onClick: () => this.showPrev() },
204
+ h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button" },
202
205
  h(ChevronIcon, null)),
203
206
  h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()),
204
- h("button", { class: "next", onClick: () => this.showNext() },
207
+ h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" },
205
208
  h(ChevronIcon, null))),
206
209
  this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
207
210
  }
@@ -1,10 +1,8 @@
1
1
  import { h } from "@stencil/core";
2
2
  export const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
3
3
  h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
4
- export const CameraIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none" },
5
- h("defs", null),
6
- h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M9.771 3.89a.875.875 0 01.728-.39h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.25A2.625 2.625 0 012.625 21V8.75A2.625 2.625 0 015.25 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.25a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }),
7
- h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M14 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })));
4
+ export const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
5
+ h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
8
6
  export const OnboardingCard1Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
9
7
  h("defs", null),
10
8
  h("path", { fill: "#393939", d: "M74.55 20a5.06 5.06 0 014.14 2l4.72 9.32.1.18.11.17A5.07 5.07 0 0087.93 34h13.87c5.07 0 9.2 3.59 9.2 8v50c0 4.41-4.13 8-9.2 8H18.2c-5.07 0-9.2-3.59-9.2-8V42c0-4.41 4.13-8 9.2-8h13.87a5.072 5.072 0 004.31-2.34l.11-.17.1-.18L41.31 22a5.06 5.06 0 014.14-2h29.1zm0-4h-29.1a9 9 0 00-7.6 4L33 29.5a1.13 1.13 0 01-1 .5H18.2C10.91 30 5 35.37 5 42v50c0 6.63 5.91 12 13.2 12h83.6c7.29 0 13.2-5.37 13.2-12V42c0-6.63-5.91-12-13.2-12H87.93a1.13 1.13 0 01-1-.5L82.15 20a9 9 0 00-7.6-4z" }),
@@ -22,9 +20,9 @@ export const CheckIcon = () => (h("svg", { width: "14", height: "11", fill: "non
22
20
  h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
23
21
  export const LoaderIcon = () => (h("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 28" },
24
22
  h("path", { fill: "#fff", d: "M23,14a9,9,0,1,1-9-9V2A12,12,0,1,0,26,14Z" })));
25
- export const ChevronIcon = () => (h("svg", { width: "9", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
26
- h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z", fill: "#525252" })));
27
- export const VisualSearchIcon = () => (h("svg", { width: "22", height: "22", xmlns: "http://www.w3.org/2000/svg" },
28
- h("path", { d: "M18 0h-3v2h3c1.103 0 2 .897 2 2v3h2V4c0-2.206-1.794-4-4-4Zm2 18c0 1.103-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4v-3h-2v3ZM2 18v-3H0v3c0 2.206 1.794 4 4 4h3v-2H4c-1.103 0-2-.897-2-2ZM2 4c0-1.103.897-2 2-2h3V0H4C1.794 0 0 1.794 0 4v3h2V4Zm6 6.5C8 9.122 9.122 8 10.5 8S13 9.122 13 10.5 11.878 13 10.5 13A2.503 2.503 0 0 1 8 10.5Zm7.5 6.5a1.503 1.503 0 0 0 1.061-2.561l-2.012-2.011c.293-.6.448-1.26.451-1.928C15 8.019 12.981 6 10.5 6A4.505 4.505 0 0 0 6 10.5c0 2.481 2.019 4.5 4.5 4.5.693 0 1.341-.17 1.928-.451l2.011 2.012c.293.293.677.439 1.061.439Z" })));
23
+ export const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
24
+ h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
25
+ export const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
26
+ 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" })));
29
27
  export const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
30
28
  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" })));