vviinn-widgets 2.18.21 → 2.19.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 (183) hide show
  1. package/dist/cjs/{index-cb410762.js → Campaign-a94a827a.js} +17 -1
  2. package/dist/cjs/cropper-handler_29.cjs.entry.js +1418 -0
  3. package/dist/cjs/{imageSearch.store-98824653.js → index-48c94264.js} +16016 -11171
  4. package/dist/cjs/{index-7f1325a7.js → index-a4becaff.js} +683 -303
  5. package/dist/cjs/loader.cjs.js +4 -3
  6. package/dist/cjs/{vviinn-carousel_3.cjs.entry.js → vviinn-carousel_2.cjs.entry.js} +150 -270
  7. package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js +14 -8
  8. package/dist/cjs/vviinn-vpr-button.cjs.entry.js +12 -14
  9. package/dist/cjs/vviinn-widgets.cjs.js +10 -3
  10. package/dist/collection/Image/sizing.spec.js +66 -0
  11. package/dist/collection/collection-manifest.json +2 -2
  12. package/dist/collection/components/image-search/image-view/highlight-box/highlight-box.css +2 -16
  13. package/dist/collection/components/image-search/image-view/highlight-box/highlight-box.js +11 -7
  14. package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.css +0 -1
  15. package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.js +40 -37
  16. package/dist/collection/components/image-search/image-view/image-cropper/image-cropper.js +73 -67
  17. package/dist/collection/components/image-search/search-filters/search-filters.css +4 -23
  18. package/dist/collection/components/image-search/search-filters/search-filters.js +97 -91
  19. package/dist/collection/components/vviinn-button/vviinn-button.js +34 -31
  20. package/dist/collection/components/vviinn-carousel/vviinn-carousel.css +1 -2
  21. package/dist/collection/components/vviinn-carousel/vviinn-carousel.js +161 -156
  22. package/dist/collection/components/vviinn-error/vviinn-empty-results/vviinn-empty-results.js +12 -14
  23. package/dist/collection/components/vviinn-error/vviinn-error.js +12 -12
  24. package/dist/collection/components/vviinn-error/vviinn-server-error/vviinn-server-error.js +35 -30
  25. package/dist/collection/components/vviinn-error/vviinn-wrong-format/vviinn-wrong-format.js +35 -30
  26. package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.js +129 -121
  27. package/dist/collection/components/vviinn-example-images/vviinn-example-images.js +75 -75
  28. package/dist/collection/components/vviinn-icons/index.js +10 -27
  29. package/dist/collection/components/vviinn-image-selector/vviinn-image-selector.js +120 -67
  30. package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js +81 -69
  31. package/dist/collection/components/vviinn-image-view/vviinn-image-view.css +0 -1
  32. package/dist/collection/components/vviinn-image-view/vviinn-image-view.js +27 -28
  33. package/dist/collection/components/vviinn-modal/vviinn-modal.css +7 -36
  34. package/dist/collection/components/vviinn-modal/vviinn-modal.js +115 -93
  35. package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-1/vviinn-onboarding-card-1.js +12 -14
  36. package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-2/vviinn-onboarding-card-2.js +12 -14
  37. package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-3/vviinn-onboarding-card-3.js +12 -14
  38. package/dist/collection/components/vviinn-onboarding/vviinn-onboarding.js +12 -17
  39. package/dist/collection/components/vviinn-overlay/vviinn-overlay.css +1 -12
  40. package/dist/collection/components/vviinn-overlay/vviinn-overlay.js +12 -9
  41. package/dist/collection/components/vviinn-overlayed-modal/vviinn-overlayed-modal.js +107 -78
  42. package/dist/collection/components/vviinn-preloader/vviinn-preloader.css +1 -11
  43. package/dist/collection/components/vviinn-preloader/vviinn-preloader.js +11 -7
  44. package/dist/collection/components/vviinn-privacy-badge/vviinn-privacy-badge.css +0 -1
  45. package/dist/collection/components/vviinn-privacy-badge/vviinn-privacy-badge.js +12 -16
  46. package/dist/collection/components/vviinn-product-card/render-helpers.js +6 -14
  47. package/dist/collection/components/vviinn-product-card/vviinn-product-card.js +425 -415
  48. package/dist/collection/components/vviinn-slider/arrow.js +1 -2
  49. package/dist/collection/components/vviinn-slider/vviinn-slide/vviinn-slide.js +12 -9
  50. package/dist/collection/components/vviinn-slider/vviinn-slider.css +0 -1
  51. package/dist/collection/components/vviinn-slider/vviinn-slider.js +87 -82
  52. package/dist/collection/components/vviinn-teaser/vviinn-teaser.js +12 -18
  53. package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.css +12 -64
  54. package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js +371 -360
  55. package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +448 -444
  56. package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-vidget.js +545 -542
  57. package/dist/collection/components/vviinn-vps-button/stories/vviinn-vps-button.stories.js +2 -0
  58. package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +368 -332
  59. package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.css +0 -5
  60. package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.e2e.js +26 -0
  61. package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +502 -425
  62. package/dist/collection/geometry/Clip.spec.js +16 -0
  63. package/dist/collection/geometry/Rectangle.spec.js +66 -0
  64. package/dist/collection/geometry/Sized.spec.js +16 -0
  65. package/dist/collection/interfaces/generated.js +0 -4
  66. package/dist/collection/network/ion/Form.spec.js +43 -0
  67. package/dist/esm/{index-b31d86ce.js → Campaign-4aa53f29.js} +15 -2
  68. package/dist/esm/cropper-handler_29.entry.js +1386 -0
  69. package/dist/esm/{index-590cb67e.js → index-48ef9564.js} +683 -304
  70. package/dist/esm/{imageSearch.store-9dde5360.js → index-976acf7e.js} +16124 -11292
  71. package/dist/esm/loader.js +4 -3
  72. package/dist/esm/polyfills/css-shim.js +1 -1
  73. package/dist/esm/{vviinn-carousel_3.entry.js → vviinn-carousel_2.entry.js} +106 -225
  74. package/dist/esm/vviinn-recommendations-sidebar.entry.js +13 -7
  75. package/dist/esm/vviinn-vpr-button.entry.js +11 -13
  76. package/dist/esm/vviinn-widgets.js +7 -3
  77. package/dist/loader/index.d.ts +9 -0
  78. package/dist/loader/package.json +1 -0
  79. package/dist/types/Image/sizing.d.ts +4 -4
  80. package/dist/types/campaign/Campaign.d.ts +5 -5
  81. package/dist/types/campaign/VCSCampaignResponse.d.ts +1 -1
  82. package/dist/types/components/vviinn-carousel/vviinn-carousel.d.ts +2 -2
  83. package/dist/types/components/vviinn-image-selector/vviinn-image-selector.d.ts +4 -0
  84. package/dist/types/components/vviinn-modal/vviinn-modal.d.ts +2 -0
  85. package/dist/types/components/vviinn-overlayed-modal/vviinn-overlayed-modal.d.ts +2 -0
  86. package/dist/types/components/vviinn-product-card/render-helpers.d.ts +3 -3
  87. package/dist/types/components/vviinn-slider/arrow.d.ts +2 -2
  88. package/dist/types/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.d.ts +2 -2
  89. package/dist/types/components/vviinn-vps-button/vviinn-vps-button.d.ts +9 -4
  90. package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts +8 -0
  91. package/dist/types/components.d.ts +154 -54
  92. package/dist/types/error.d.ts +1 -1
  93. package/dist/types/geometry/Point.d.ts +1 -1
  94. package/dist/types/geometry/Rectangle.d.ts +1 -1
  95. package/dist/types/geometry/Sized.d.ts +1 -1
  96. package/dist/types/interfaces/generated.d.ts +192 -371
  97. package/dist/types/network/ion/File.d.ts +2 -2
  98. package/dist/types/network/ion/Form.d.ts +5 -5
  99. package/dist/types/network/ion/Link.d.ts +1 -1
  100. package/dist/types/network/ion/ValueObject.d.ts +4 -4
  101. package/dist/types/network/utils.d.ts +3 -3
  102. package/dist/types/recommendation/events.d.ts +5 -5
  103. package/dist/types/recommendation/recommendation.d.ts +1 -1
  104. package/dist/types/searchSession/searchSession.d.ts +7 -7
  105. package/dist/types/slider/GridMode.d.ts +1 -1
  106. package/dist/types/stencil-public-runtime.d.ts +98 -23
  107. package/dist/types/store/imageSearch.store.d.ts +1 -1
  108. package/dist/types/tracking/models.d.ts +2 -2
  109. package/dist/types/utils/event/Events.d.ts +1 -1
  110. package/dist/vviinn-widgets/p-312b0eb7.entry.js +1 -0
  111. package/dist/vviinn-widgets/p-414b2291.js +1 -0
  112. package/dist/vviinn-widgets/p-5b50c7e5.entry.js +1 -0
  113. package/dist/vviinn-widgets/p-8deaa5da.entry.js +1 -0
  114. package/dist/vviinn-widgets/p-c6209bc1.entry.js +1 -0
  115. package/{www/build/p-2f9ee951.js → dist/vviinn-widgets/p-d08ce429.js} +1 -1
  116. package/dist/vviinn-widgets/p-fa17e81f.js +2 -0
  117. package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
  118. package/package.json +12 -12
  119. package/www/build/p-312b0eb7.entry.js +1 -0
  120. package/www/build/p-414b2291.js +1 -0
  121. package/www/build/p-5b50c7e5.entry.js +1 -0
  122. package/www/build/p-8deaa5da.entry.js +1 -0
  123. package/www/build/p-c6209bc1.entry.js +1 -0
  124. package/{dist/vviinn-widgets/p-2f9ee951.js → www/build/p-d08ce429.js} +1 -1
  125. package/www/build/p-d39b7d70.js +161 -0
  126. package/www/build/p-fa17e81f.js +2 -0
  127. package/www/build/vviinn-widgets.esm.js +1 -1
  128. package/www/index.html +2 -2
  129. package/dist/cjs/Campaign-13258569.js +0 -18
  130. package/dist/cjs/Handler-176539c8.js +0 -331
  131. package/dist/cjs/cropper-handler.cjs.entry.js +0 -27
  132. package/dist/cjs/customized-slots-6e56c354.js +0 -54
  133. package/dist/cjs/highlight-box_22.cjs.entry.js +0 -770
  134. package/dist/cjs/index-a99edb90.js +0 -3235
  135. package/dist/cjs/vviinn-button.cjs.entry.js +0 -21
  136. package/dist/cjs/vviinn-error.cjs.entry.js +0 -19
  137. package/dist/cjs/vviinn-preloader.cjs.entry.js +0 -26
  138. package/dist/cjs/vviinn-vps-button.cjs.entry.js +0 -65
  139. package/dist/cjs/vviinn-vps-widget.cjs.entry.js +0 -251
  140. package/dist/esm/Campaign-90ba7e06.js +0 -14
  141. package/dist/esm/Handler-f9b8735c.js +0 -309
  142. package/dist/esm/cropper-handler.entry.js +0 -23
  143. package/dist/esm/customized-slots-00afe247.js +0 -51
  144. package/dist/esm/highlight-box_22.entry.js +0 -745
  145. package/dist/esm/index-4d5b52ba.js +0 -3224
  146. package/dist/esm/vviinn-button.entry.js +0 -17
  147. package/dist/esm/vviinn-error.entry.js +0 -15
  148. package/dist/esm/vviinn-preloader.entry.js +0 -22
  149. package/dist/esm/vviinn-vps-button.entry.js +0 -61
  150. package/dist/esm/vviinn-vps-widget.entry.js +0 -247
  151. package/dist/vviinn-widgets/p-11f61564.js +0 -1
  152. package/dist/vviinn-widgets/p-12851e97.entry.js +0 -1
  153. package/dist/vviinn-widgets/p-18fd769b.js +0 -1
  154. package/dist/vviinn-widgets/p-339c6838.js +0 -1
  155. package/dist/vviinn-widgets/p-3b2c91c0.entry.js +0 -1
  156. package/dist/vviinn-widgets/p-45df9f28.entry.js +0 -1
  157. package/dist/vviinn-widgets/p-57ed5303.entry.js +0 -1
  158. package/dist/vviinn-widgets/p-69850e5b.js +0 -1
  159. package/dist/vviinn-widgets/p-7c2f762a.entry.js +0 -1
  160. package/dist/vviinn-widgets/p-7c3b7388.entry.js +0 -1
  161. package/dist/vviinn-widgets/p-85006f41.entry.js +0 -1
  162. package/dist/vviinn-widgets/p-8a3dd76d.entry.js +0 -1
  163. package/dist/vviinn-widgets/p-99e58be7.entry.js +0 -1
  164. package/dist/vviinn-widgets/p-a2b450b6.entry.js +0 -1
  165. package/dist/vviinn-widgets/p-bcc1ccf0.js +0 -1
  166. package/dist/vviinn-widgets/p-e6fee8d2.js +0 -1
  167. package/www/build/p-11f61564.js +0 -1
  168. package/www/build/p-12851e97.entry.js +0 -1
  169. package/www/build/p-18fd769b.js +0 -1
  170. package/www/build/p-339c6838.js +0 -1
  171. package/www/build/p-3b2c91c0.entry.js +0 -1
  172. package/www/build/p-45df9f28.entry.js +0 -1
  173. package/www/build/p-57ed5303.entry.js +0 -1
  174. package/www/build/p-69850e5b.js +0 -1
  175. package/www/build/p-7c2f762a.entry.js +0 -1
  176. package/www/build/p-7c3b7388.entry.js +0 -1
  177. package/www/build/p-85006f41.entry.js +0 -1
  178. package/www/build/p-8a3dd76d.entry.js +0 -1
  179. package/www/build/p-99e58be7.entry.js +0 -1
  180. package/www/build/p-9e2c131a.js +0 -125
  181. package/www/build/p-a2b450b6.entry.js +0 -1
  182. package/www/build/p-bcc1ccf0.js +0 -1
  183. package/www/build/p-e6fee8d2.js +0 -1
@@ -1,21 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-7f1325a7.js');
6
- const index$1 = require('./index-cb410762.js');
7
-
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
-
10
- let VviinnButton = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.addStyle = true;
14
- }
15
- render() {
16
- return (index.h(index.Host, { exportparts: "button" }, index.h("button", { class: this.addStyle ? "open-button" : "raw-open-button", part: "button" }, index.h("slot", null, index.h(index$1.VisualSearchIcon, null)))));
17
- }
18
- };
19
- VviinnButton.style = vviinnButtonCss;
20
-
21
- exports.vviinn_button = VviinnButton;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-7f1325a7.js');
6
-
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
-
9
- let VviinnError = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- }
13
- render() {
14
- return (index.h(index.Host, null, index.h("slot", { name: "icon" }), index.h("slot", { name: "title" }), index.h("slot", { name: "text" }), index.h("slot", { name: "action" })));
15
- }
16
- };
17
- VviinnError.style = vviinnErrorCss;
18
-
19
- exports.vviinn_error = VviinnError;
@@ -1,26 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-7f1325a7.js');
6
- const imageSearch_store = require('./imageSearch.store-98824653.js');
7
- require('./Handler-176539c8.js');
8
-
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)}}";
10
-
11
- let VviinnPreloader = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- }
15
- isActive() {
16
- return (imageSearch_store.imageSearchState.loading || imageSearch_store.imageSearchState.objectDetectionInProgress);
17
- }
18
- render() {
19
- return (index.h(index.Host, { class: {
20
- active: this.isActive(),
21
- } }));
22
- }
23
- };
24
- VviinnPreloader.style = vviinnPreloaderCss;
25
-
26
- exports.vviinn_preloader = VviinnPreloader;
@@ -1,65 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-7f1325a7.js');
6
- const index$1 = require('./index-cb410762.js');
7
- const customizedSlots = require('./customized-slots-6e56c354.js');
8
- const Campaign = require('./Campaign-13258569.js');
9
-
10
- const vviinnVpsButtonCss = ":host{display:block}";
11
-
12
- let VviinnVpsButton = class {
13
- constructor(hostRef) {
14
- index.registerInstance(this, hostRef);
15
- this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
16
- this.vviinnWidgetOpen = index.createEvent(this, "vviinnWidgetOpen", 7);
17
- this.vviinnWidgetLoad = index.createEvent(this, "vviinnWidgetLoad", 7);
18
- this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
19
- this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
20
- this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
21
- this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
22
- this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
23
- this.vviinnImageCrop = index.createEvent(this, "vviinnImageCrop", 7);
24
- this.vviinnSelectObject = index.createEvent(this, "vviinnSelectObject", 7);
25
- this.vviinnSelectFilter = index.createEvent(this, "vviinnSelectFilter", 7);
26
- this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
27
- /** Currency sign will shown after price */
28
- this.currencySign = "€";
29
- /** Locale for currency formatting */
30
- this.locale = "de-DE";
31
- /** Add style to the button */
32
- this.addStyle = false;
33
- this.pressed = false;
34
- }
35
- handleModalClosed() {
36
- this.pressed = false;
37
- }
38
- componentDidLoad() {
39
- const slots = this.el.querySelectorAll("[slot]");
40
- this.globalSlotsChanged.emit(Array.from(slots));
41
- }
42
- handleKeyDown(ev) {
43
- if (ev.code !== "Enter" && ev.code !== "Space")
44
- return;
45
- this.pressed = true;
46
- }
47
- handleClick() {
48
- this.pressed = true;
49
- }
50
- render() {
51
- return (index.h(index.Host, { tabindex: "0", role: "button", pressed: this.pressed, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("vviinn-button", { onClick: () => {
52
- this.handleClick();
53
- this.vviinnWidgetOpen.emit({
54
- widgetType: "VPS",
55
- campaignTypeId: "VPS",
56
- campaignTypeName: Campaign.campaignTypeNames["VPS"],
57
- widgetId: this.el.id,
58
- });
59
- }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { active: this.pressed, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId, showingInButton: true, buttonElementId: this.el.id })));
60
- }
61
- get el() { return index.getElement(this); }
62
- };
63
- VviinnVpsButton.style = vviinnVpsButtonCss;
64
-
65
- exports.vviinn_vps_button = VviinnVpsButton;
@@ -1,251 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-7f1325a7.js');
6
- const imageSearch_store = require('./imageSearch.store-98824653.js');
7
- const customizedSlots = require('./customized-slots-6e56c354.js');
8
- const index$1 = require('./index-a99edb90.js');
9
- const Campaign = require('./Campaign-13258569.js');
10
- require('./Handler-176539c8.js');
11
-
12
- 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}";
13
-
14
- var __rest = (undefined && undefined.__rest) || function (s, e) {
15
- var t = {};
16
- for (var p in s)
17
- if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
18
- t[p] = s[p];
19
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
20
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
21
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
22
- t[p[i]] = s[p[i]];
23
- }
24
- return t;
25
- };
26
- const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
27
- const notEmptyString = (s) => !imageSearch_store.isEmpty(s);
28
- const notNan = (n) => !isNaN(n);
29
- let VviinnVpsWidget = class {
30
- constructor(hostRef) {
31
- index.registerInstance(this, hostRef);
32
- this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
33
- this.vviinnWidgetLoad = index.createEvent(this, "vviinnWidgetLoad", 7);
34
- this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
35
- this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
36
- this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
37
- this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
38
- this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
39
- this.vviinnImageCrop = index.createEvent(this, "vviinnImageCrop", 7);
40
- this.vviinnSelectObject = index.createEvent(this, "vviinnSelectObject", 7);
41
- this.vviinnSelectFilter = index.createEvent(this, "vviinnSelectFilter", 7);
42
- this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
43
- /** @internal */
44
- this.apiPath = "https://api.vviinn.com";
45
- /** When true modal window with widget will be shown */
46
- this.active = false;
47
- /** Currency sign will shown after price */
48
- this.currencySign = "€";
49
- /** Locale for currency formatting */
50
- this.locale = "de-DE";
51
- /** Set true when showing the widget in button */
52
- this.showingInButton = false;
53
- this.slidePosition = 0;
54
- this.width = 0;
55
- this.wrongImageFormat = false;
56
- this.trackingDeactivated = false;
57
- this.imageSource = null;
58
- this.setTrackingDeactivated = (result) => {
59
- if (result.status === "rejected") {
60
- this.trackingDeactivated = true;
61
- }
62
- };
63
- this.getBasicEventData = () => {
64
- var _a;
65
- return {
66
- widgetType: "VPS",
67
- campaignTypeId: "VPS",
68
- campaignTypeName: Campaign.campaignTypeNames["VPS"],
69
- widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
70
- };
71
- };
72
- }
73
- componentDidLoad() {
74
- const slots = this.el.querySelectorAll("[slot]");
75
- this.globalSlotsChanged.emit(Array.from(slots));
76
- }
77
- activeWatcher(value) {
78
- if (value) {
79
- this.overflow = document.body.style.overflow;
80
- document.body.style.overflow = "hidden";
81
- this.trackOpenEvent();
82
- }
83
- else {
84
- document.body.style.overflow = this.overflow;
85
- }
86
- }
87
- trackProductView({ detail }) {
88
- if (this.trackingDeactivated)
89
- return;
90
- const { productRank, productId, productName, widgetType, widgetId, campaignTypeId, campaignTypeName } = detail, rest = __rest(detail, ["productRank", "productId", "productName", "widgetType", "widgetId", "campaignTypeId", "campaignTypeName"]);
91
- const productViewEvent = index$1.createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest));
92
- this.trackingApi
93
- .trackEvent(productViewEvent)
94
- .then(this.setTrackingDeactivated);
95
- }
96
- async trackProductClick({ detail }) {
97
- const { productRank, productId, productName, widgetType, widgetId, campaignTypeId, campaignTypeName } = detail, rest = __rest(detail, ["productRank", "productId", "productName", "widgetType", "widgetId", "campaignTypeId", "campaignTypeName"]);
98
- const productClickEvent = index$1.createProductClickVpsEvent(Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest));
99
- if (!this.trackingDeactivated) {
100
- await this.trackingApi
101
- .trackEvent(this.trackingDeactivated ? null : productClickEvent)
102
- .then(this.setTrackingDeactivated);
103
- }
104
- const product = imageSearch_store.imageSearchState.results.find((r) => r.productId === detail.productId);
105
- if (!product || !product.deeplink)
106
- return;
107
- window.location.href = product.deeplink;
108
- }
109
- trachSearchAreaChanges() {
110
- if (this.trackingDeactivated)
111
- return;
112
- const searchEvent = index$1.createSearchEvent({
113
- session_id: this.uiSessionId,
114
- source: this.imageSource,
115
- search_area: "manual-selection",
116
- });
117
- this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
118
- }
119
- trackDetectedObject() {
120
- if (this.trackingDeactivated)
121
- return;
122
- const searchEvent = index$1.createSearchEvent({
123
- session_id: this.uiSessionId,
124
- source: this.imageSource,
125
- search_area: "attention-point",
126
- });
127
- this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
128
- }
129
- trackFilter({ detail }) {
130
- if (this.trackingDeactivated)
131
- return;
132
- const searchEvent = index$1.createFilterEvent({
133
- session_id: this.uiSessionId,
134
- source: this.imageSource,
135
- kind: "category",
136
- action: detail.action,
137
- });
138
- this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
139
- }
140
- connectedCallback() {
141
- imageSearch_store.state.apiPath = this.apiPath;
142
- imageSearch_store.state.currencySign = this.currencySign;
143
- imageSearch_store.state.locale = this.locale;
144
- imageSearch_store.imageSearchState.token = this.token;
145
- imageSearch_store.imageSearchState.campaignId = imageSearch_store._function.pipe(this.campaignId, imageSearch_store.Option.fromNullable, imageSearch_store.Option.chain(imageSearch_store.Option.fromPredicate(notEmptyString)), imageSearch_store.Option.map(filterInt), imageSearch_store.Option.chain(imageSearch_store.Option.fromPredicate(notNan)), imageSearch_store.Option.map((s) => `${s}`));
146
- this.uiSessionId = index$1.v4();
147
- this.trackingApi = index$1.createTrackingApi(this.apiPath, this.token);
148
- this.id = this.el.id;
149
- }
150
- componentWillLoad() {
151
- var _a;
152
- customizedSlots.slotChangeListener(this, this.el);
153
- this.vviinnWidgetLoad.emit({
154
- widgetType: "VPS",
155
- campaignTypeId: "VPS",
156
- campaignTypeName: Campaign.campaignTypeNames["VPS"],
157
- widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
158
- });
159
- }
160
- trackOpenEvent() {
161
- if (this.trackingDeactivated)
162
- return;
163
- const widgetOpenEvent = index$1.createWidgetVpsEvent({
164
- action: "open",
165
- session_id: this.uiSessionId,
166
- });
167
- this.trackingApi
168
- .trackEvent(widgetOpenEvent)
169
- .then(this.setTrackingDeactivated);
170
- }
171
- handleImageSelection(source) {
172
- this.imageSource = source;
173
- this.slidePosition = 1;
174
- const root = this.el.shadowRoot.querySelector("vviinn-overlayed-modal");
175
- const overlay = root.shadowRoot.querySelector("vviinn-overlay");
176
- const modal = overlay.querySelector("vviinn-modal");
177
- const modalBody = modal.shadowRoot.querySelector(".body");
178
- modalBody.scrollTop = 0;
179
- this.trackInitialSearch();
180
- }
181
- trackInitialSearch() {
182
- if (this.trackingDeactivated)
183
- return;
184
- const searchEvent = index$1.createSearchEvent({
185
- session_id: this.uiSessionId,
186
- source: this.imageSource,
187
- search_area: "full",
188
- });
189
- this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
190
- }
191
- resetState() {
192
- this.resetScroll("onboarding-block");
193
- this.slidePosition = 0;
194
- imageSearch_store.imageSearchState.image = imageSearch_store.Option.none;
195
- imageSearch_store.imageSearchState.imageUrl = imageSearch_store.Option.none;
196
- imageSearch_store.imageSearchState.imageBounds = imageSearch_store.Option.none;
197
- imageSearch_store.imageSearchState.searchArea = imageSearch_store.Option.none;
198
- imageSearch_store.imageSearchState.results = [];
199
- imageSearch_store.imageSearchState.filters = [];
200
- imageSearch_store.imageSearchState.detectedObjects = [];
201
- imageSearch_store.imageSearchState.activeIonLink = undefined;
202
- imageSearch_store.imageSearchState.rectangleSearchForm = undefined;
203
- imageSearch_store.imageSearchState.loading = false;
204
- this.resetScroll("results-block");
205
- }
206
- haveErrors() {
207
- return this.wrongImageFormat || imageSearch_store.imageSearchState.serverError;
208
- }
209
- resetScroll(elementId, behavior = "auto") {
210
- const element = this.el.shadowRoot.getElementById(elementId);
211
- element.scroll({ top: 0, left: 0, behavior });
212
- }
213
- handleModalClose() {
214
- this.active = false;
215
- this.resetState();
216
- const elementsToReset = ["onboarding-block", "results-block"];
217
- elementsToReset.forEach((name) => this.resetScroll(name));
218
- if (this.trackingDeactivated)
219
- return;
220
- const widgetCloseEvent = index$1.createWidgetVpsEvent({
221
- action: "close",
222
- session_id: this.uiSessionId,
223
- });
224
- this.trackingApi
225
- .trackEvent(widgetCloseEvent)
226
- .then(this.setTrackingDeactivated);
227
- }
228
- render() {
229
- var _a;
230
- return (index.h(index.Host, null, !this.showingInButton && index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, exportparts: "secondary-action, title, close-button, example-images" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
231
- error: this.haveErrors(),
232
- "start-page_block": true,
233
- } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, handler: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onVviinnImageUpload: () => this.handleImageSelection("upload"), onVviinnNoResult: () => (this.wrongImageFormat = true), basicEventData: this.getBasicEventData(), part: "select-image_button" }, index.h("span", { slot: "upload-button-text", class: "upload-button-content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.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.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.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" }), index.h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M14.5 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" })), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), index.h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), index.h("div", { id: "onboarding-block", class: "start-page_block" }, index.h("div", { class: "onboarding-wrapper" }, index.h("vviinn-onboarding", null), index.h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
234
- "nothing-found": true,
235
- hidden: imageSearch_store.imageSearchState.results.length > 0,
236
- } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {
237
- hidden: imageSearch_store.imageSearchState.results.length <= 0,
238
- products: true,
239
- } }, imageSearch_store.imageSearchState.results.map((p, i) => {
240
- var _a;
241
- return (index.h("vviinn-product-card", { key: p.productId, hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card", campaignTypeId: "VPS", index: i, widgetElementId: this.id, buttonElementId: this.buttonElementId }));
242
- }))))))));
243
- }
244
- get el() { return index.getElement(this); }
245
- static get watchers() { return {
246
- "active": ["activeWatcher"]
247
- }; }
248
- };
249
- VviinnVpsWidget.style = vviinnVpsWidgetCss;
250
-
251
- exports.vviinn_vps_widget = VviinnVpsWidget;
@@ -1,14 +0,0 @@
1
- const campaignTypeNames = {
2
- VPR: "Similar Products",
3
- VPS: "Visual Search",
4
- VCS: "Products Cross-Selling",
5
- };
6
- const isVPR = (c) => c._tag === "VPR";
7
- function fold(onVPR, onVCS) {
8
- return (c) => (isVPR(c) ? onVPR() : onVCS());
9
- }
10
- function fromString(s) {
11
- return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
12
- }
13
-
14
- export { fold as a, campaignTypeNames as c, fromString as f };