vviinn-widgets 2.3.1 → 2.4.0

package/dist/cjs/loader.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-553c2b4f.js');
-const appGlobals = require('./app-globals-6b5da080.js');
+const index = require('./index-6771ae25.js');
+const appGlobals = require('./app-globals-2bcc74df.js');
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  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);
+  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","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[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"],"index":[2],"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]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]]]],["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);
   });
 };
 

package/dist/cjs/vviinn-carousel_3.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-553c2b4f.js');
-const imageSearch_store = require('./imageSearch.store-042e9f45.js');
-const index$1 = require('./index-5b9a60ac.js');
+const index = require('./index-6771ae25.js');
+const imageSearch_store = require('./imageSearch.store-cb2b2cc8.js');
+const index$1 = require('./index-44fc16ad.js');
 const Handler = require('./Handler-d1a8a86a.js');
+const index$2 = require('./index-e9439500.js');
 
 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)}}";
 
@@ -331,22 +332,31 @@ let VviinnProductCard = class {
     this.pricePrefix = undefined;
     this.responsive = false;
     this.dimmedBackground = false;
+    /** @internal */
+    this.index = 0;
     this.imageLoaded = false;
+    this.productData = null;
     this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this), { threshold: 1.0 });
   }
+  connectedCallback() {
+    this.productData = {
+      product: this.productId,
+      rank: this.index
+    };
+  }
   intersectionCallback(data) {
     if (data.some((entry) => entry.isIntersecting)) {
       imageSearch_store._function.pipe(getAnalyticsModule, imageSearch_store.Option.map((analytics) => analytics.sendImpression(this.getProduct())));
-      this.recommendationView.emit(this.productId);
+      this.recommendationView.emit(this.productData);
       this.intersectionObserver.disconnect();
     }
   }
   componentDidLoad() {
-    this.recommendationLoad.emit(this.productId);
+    this.recommendationLoad.emit(this.productData);
     this.intersectionObserver.observe(this.el);
     const links = this.el.shadowRoot.querySelectorAll("a");
     links.forEach((link) => link.addEventListener("mousedown", (event) => {
-      this.recommendationClick.emit(this.productId);
+      this.recommendationClick.emit(this.productData);
       if (window.ga) {
         event.preventDefault();
       }
@@ -1065,20 +1075,42 @@ let VviinnVprWidget = class {
     this.getRecommendations();
   }
   handleApiPathChange(newPath) {
-    imageSearch_store.state$1.apiPath = newPath;
+    imageSearch_store.state.apiPath = newPath;
     this.getRecommendations();
   }
-  lol({ detail }) {
+  handleImageLoading({ detail }) {
     this.productImageLoadedSubject.next(detail);
   }
+  trackRecommendationView({ detail }) {
+    const recommendationViewEvent = index$2.createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationViewEvent);
+  }
+  trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = index$2.createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationClickEvent);
+  }
   connectedCallback() {
-    imageSearch_store.state$1.apiPath = this.apiPath;
-    imageSearch_store.state$1.currencySign = this.currencySign;
-    imageSearch_store.state$1.locale = this.locale;
+    imageSearch_store.state.apiPath = this.apiPath;
+    imageSearch_store.state.currencySign = this.currencySign;
+    imageSearch_store.state.locale = this.locale;
+    this.uiSessionId = index$2.v4();
+    this.trackingApi = index$2.createTrackingApi(this.apiPath, this.token);
+    const widgetOpenEvent = index$2.createWidgetVprEvent({
+      action: "open",
+      sessionId: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  disconnectedCallback() {
+    const widgetCloseEvent = index$2.createWidgetVprEvent({
+      action: "close",
+      sessionId: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetCloseEvent);
   }
   async componentWillLoad() {
-    imageSearch_store.state$1.pricePrefix = this.pricePrefix;
-    imageSearch_store.state$1.currencySign = this.currencySign;
+    imageSearch_store.state.pricePrefix = this.pricePrefix;
+    imageSearch_store.state.currencySign = this.currencySign;
     this.getRecommendations();
   }
   async getRecommendations() {
@@ -1099,9 +1131,9 @@ let VviinnVprWidget = class {
     imageSearch_store.imageSearchState.results = this.recommendations;
     this.loaded = true;
     //this.recommendationsLoaded.emit();
-    this.productIds = this.recommendations.map(r => r.productId);
+    this.productIds = this.recommendations.map((r) => r.productId);
     this.productImageLoadedSubject.subscribe((id) => {
-      this.productIds = this.productIds.filter(x => x !== id);
+      this.productIds = this.productIds.filter((x) => x !== id);
       if (this.productIds.length === 0) {
         this.recommendationsLoaded.emit();
       }
@@ -1118,16 +1150,16 @@ let VviinnVprWidget = class {
         loaded: this.loaded,
         empty: this.recommendations.length == 0,
         [this.mode]: true,
-      }, "aria-hidden": this.loaded ? "false" : "true" }, this.renderExternalCSS(), index.h("style", null, imageSearch_store.state$1.fallbackStyles), index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.useCarousel ? this.renderCarousel() : this.renderResults()));
+      }, "aria-hidden": this.loaded ? "false" : "true" }, this.renderExternalCSS(), index.h("style", null, imageSearch_store.state.fallbackStyles), index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.useCarousel ? this.renderCarousel() : this.renderResults()));
   }
-  renderRecommendation(recommendation) {
-    return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.useDimmedBackgroundInCard() }));
+  renderRecommendation(recommendation, index$1) {
+    return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.useDimmedBackgroundInCard(), index: index$1 }));
   }
   useDimmedBackgroundInCard() {
     return this.mode === "continuity" || !this.useCarousel;
   }
   renderResults() {
-    return (index.h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r) => this.renderRecommendation(r))));
+    return (index.h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
   }
   renderCarousel() {
     return (index.h("vviinn-carousel", { mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations }));

package/dist/cjs/vviinn-error.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-553c2b4f.js');
+const index = require('./index-6771ae25.js');
 
 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}";
 

package/dist/cjs/vviinn-preloader.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-553c2b4f.js');
-const imageSearch_store = require('./imageSearch.store-042e9f45.js');
+const index = require('./index-6771ae25.js');
+const imageSearch_store = require('./imageSearch.store-cb2b2cc8.js');
 require('./Handler-d1a8a86a.js');
 
 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)}}";

package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-553c2b4f.js');
-const index$1 = require('./index-5b9a60ac.js');
+const index = require('./index-6771ae25.js');
+const index$1 = require('./index-44fc16ad.js');
 
 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%)}}";
 

package/dist/cjs/vviinn-vpr-button.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-553c2b4f.js');
-const index$1 = require('./index-5b9a60ac.js');
+const index = require('./index-6771ae25.js');
+const index$1 = require('./index-44fc16ad.js');
 
 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}";
 

package/dist/cjs/vviinn-vps-button.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-553c2b4f.js');
-const index$1 = require('./index-5b9a60ac.js');
-const customizedSlots = require('./customized-slots-8bc78ad4.js');
+const index = require('./index-6771ae25.js');
+const index$1 = require('./index-44fc16ad.js');
+const customizedSlots = require('./customized-slots-4202eaf5.js');
 
 const vviinnVpsButtonCss = ":host{cursor:pointer}";
 

package/dist/cjs/vviinn-vps-widget.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-553c2b4f.js');
-const imageSearch_store = require('./imageSearch.store-042e9f45.js');
-const customizedSlots = require('./customized-slots-8bc78ad4.js');
+const index = require('./index-6771ae25.js');
+const imageSearch_store = require('./imageSearch.store-cb2b2cc8.js');
+const customizedSlots = require('./customized-slots-4202eaf5.js');
+const index$1 = require('./index-e9439500.js');
 require('./Handler-d1a8a86a.js');
 
 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}";
@@ -12,6 +13,8 @@ const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary
 let VviinnVpsWidget = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
     /** When true modal window with widget will be shown */
     this.active = false;
     /** Currency sign will shown after price */
@@ -21,6 +24,7 @@ let VviinnVpsWidget = class {
     this.slidePosition = 0;
     this.width = 0;
     this.wrongImageFormat = false;
+    this.imageSource = null;
   }
   activeWatcher(value) {
     if (value) {
@@ -31,22 +35,79 @@ let VviinnVpsWidget = class {
       document.body.style.overflow = this.overflow;
     }
   }
+  trackRecommendationView({ detail }) {
+    const recommendationViewEvent = index$1.createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationViewEvent);
+  }
+  trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = index$1.createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationClickEvent);
+  }
+  trachSearchAreaChanges() {
+    const searchEvent = index$1.createSearchEvent({
+      sessionId: this.uiSessionId,
+      source: this.imageSource,
+      searchArea: "manual-selection",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  trackDetectedObject() {
+    const searchEvent = index$1.createSearchEvent({
+      sessionId: this.uiSessionId,
+      source: this.imageSource,
+      searchArea: "attention-point",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  trackFilter({ detail }) {
+    const searchEvent = index$1.createFilterEvent({
+      sessionId: this.uiSessionId,
+      source: this.imageSource,
+      kind: "category",
+      action: detail,
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
   }
   connectedCallback() {
-    imageSearch_store.state$1.apiPath = this.apiPath;
-    imageSearch_store.state$1.currencySign = this.currencySign;
-    imageSearch_store.state$1.locale = this.locale;
+    imageSearch_store.state.apiPath = this.apiPath;
+    imageSearch_store.state.currencySign = this.currencySign;
+    imageSearch_store.state.locale = this.locale;
     imageSearch_store.imageSearchState.token = this.token;
+    this.uiSessionId = index$1.v4();
+    this.trackingApi = index$1.createTrackingApi(this.apiPath, this.token);
+    const widgetOpenEvent = index$1.createWidgetVpsEvent({
+      action: "open",
+      sessionId: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  disconnectedCallback() {
+    const widgetOpenEvent = index$1.createWidgetVpsEvent({
+      action: "close",
+      sessionId: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
   }
-  handleImageSelection() {
+  handleImageSelection(source) {
+    this.imageSource = source;
     this.slidePosition = 1;
     const root = this.el.shadowRoot.querySelector("vviinn-overlayed-modal");
     const overlay = root.shadowRoot.querySelector("vviinn-overlay");
     const modal = overlay.querySelector("vviinn-modal");
     const modalBody = modal.shadowRoot.querySelector(".body");
     modalBody.scrollTop = 0;
+    this.trackInitialSearch();
+  }
+  trackInitialSearch() {
+    const searchEvent = index$1.createSearchEvent({
+      sessionId: this.uiSessionId,
+      source: this.imageSource,
+      searchArea: "full",
+    });
+    this.trackingApi.trackEvent(searchEvent);
   }
   resetState() {
     this.resetScroll("onboarding-block");
@@ -79,12 +140,15 @@ let VviinnVpsWidget = class {
     return (index.h(index.Host, null, index.h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, onSecondaryActionClicked: () => this.resetState(), onModalClosed: () => this.handleModalClose(), exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
         error: this.haveErrors(),
         "start-page_block": true,
-      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, onActionClick: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection(), onImageSelectedError: () => (this.wrongImageFormat = true), 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", { onImageSelected: () => this.handleImageSelection(), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", null), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: { "nothing-found": true, hidden: imageSearch_store.imageSearchState.results.length > 0 } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {
+      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, onActionClick: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection("upload"), onImageSelectedError: () => (this.wrongImageFormat = true), 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", { onImageSelected: () => this.handleImageSelection("example"), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", null), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
+        "nothing-found": true,
+        hidden: imageSearch_store.imageSearchState.results.length > 0,
+      } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {
         hidden: imageSearch_store.imageSearchState.results.length <= 0,
         products: true,
-      } }, imageSearch_store.imageSearchState.results.map((p) => {
+      } }, imageSearch_store.imageSearchState.results.map((p, i) => {
       var _a;
-      return (index.h("vviinn-product-card", { 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" }));
+      return (index.h("vviinn-product-card", { 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", index: i }));
     }))))))));
   }
   get el() { return index.getElement(this); }

package/dist/cjs/vviinn-widgets.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-553c2b4f.js');
-const appGlobals = require('./app-globals-6b5da080.js');
+const index = require('./index-6771ae25.js');
+const appGlobals = require('./app-globals-2bcc74df.js');
 
 /*
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -17,5 +17,5 @@ const patchBrowser = () => {
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  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);
+  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","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[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"],"index":[2],"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]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]]]],["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);
 });

package/dist/collection/components/image-search/image-view/image-cropper/image-cropper.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Element, Prop } from "@stencil/core";
+import { Component, Host, h, State, Element, Prop, Event, } from "@stencil/core";
 import { move, transform } from "../../../../geometry/Rectangle";
 import { fromMouseEvent, pointDiffSemigroup, } from "../../../../geometry/Point";
 import { imageSearchState, makeRectangularSearchRequest, } from "../../../../store/imageSearch.store";
@@ -27,18 +27,21 @@ export class ImageCropper {
     };
     pipe(imageSearchState.searchArea, O.map((area) => {
       const newSearchArea = transform(area, transformedHandler);
-      if (newSearchArea.width < MIN_SEARCHAREA_SIZE ||
-        newSearchArea.height < MIN_SEARCHAREA_SIZE ||
-        newSearchArea.x < 0 ||
-        newSearchArea.y < 0 ||
-        this.bounds.height - (newSearchArea.y + newSearchArea.height) < 0 ||
-        this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0)
+      if (this.outOfBounds(newSearchArea))
         return;
       imageSearchState.searchArea = O.some(newSearchArea);
       this.mouseStartPoint = destination;
       imageSearchState.detectedObject = undefined;
     }));
   }
+  outOfBounds(area) {
+    return (area.width < MIN_SEARCHAREA_SIZE ||
+      area.height < MIN_SEARCHAREA_SIZE ||
+      area.x < 0 ||
+      area.y < 0 ||
+      this.bounds.height - (area.y + area.height) < 0 ||
+      this.bounds.width - (area.x + area.width) < 0);
+  }
   handleCropperMove(ev) {
     ev.preventDefault();
     ev.stopPropagation();
@@ -79,6 +82,7 @@ export class ImageCropper {
     document.removeEventListener("pointerup", this.pointerReleaseListener);
     this.mouseStartPoint = undefined;
     makeRectangularSearchRequest();
+    this.cropperChanged.emit();
   }
   getStyleMap() {
     return pipe(imageSearchState.searchArea, O.map((rectangle) => {
@@ -131,5 +135,21 @@ export class ImageCropper {
   static get states() { return {
     "handleMove": {}
   }; }
+  static get events() { return [{
+      "method": "cropperChanged",
+      "name": "cropperChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/image-search/search-filters/search-filters.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, State, Element } from "@stencil/core";
+import { Component, Host, h, Prop, State, Element, Event } from "@stencil/core";
 import { imageSearchState } from "../../../store/imageSearch.store";
 import { CheckIcon } from "../../vviinn-icons";
 const FILTERS_COUNT = 5;
@@ -18,11 +18,13 @@ export class SearchFilters {
   selectFilter(filter) {
     this.selectedCategoryId = getFilterId(filter);
     imageSearchState.activeIonLink = filter;
+    this.filterSelected.emit("select");
   }
   clearSelectedFilter() {
     this.selectedCategoryId = null;
     imageSearchState.activeIonLink = undefined;
     this.findSelectedFilter().blur();
+    this.filterSelected.emit("deselect");
   }
   findSelectedFilter() {
     return this.el.shadowRoot.querySelector(ACTIVE_FILTER_CLASSNAME);
@@ -98,5 +100,26 @@ export class SearchFilters {
     "selectedCategoryId": {},
     "hideFilters": {}
   }; }
+  static get events() { return [{
+      "method": "filterSelected",
+      "name": "filterSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "FilterAction",
+        "resolved": "\"deselect\" | \"select\"",
+        "references": {
+          "FilterAction": {
+            "location": "import",
+            "path": "@vviinn/tracking-client-ts"
+          }
+        }
+      }
+    }]; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Prop } from "@stencil/core";
+import { Component, Host, h, State, Prop, Event } from "@stencil/core";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { foldValueObject } from "../../../network/ion/ValueObject";
@@ -25,6 +25,7 @@ export class VviinnDetectedObject {
       imageSearchState.searchArea = O.some(scaledRect);
     }));
     makeRectangularSearchRequest();
+    this.detectedObjectClicked.emit();
   }
   isActive() {
     if (!this.detectedObject)
@@ -80,4 +81,20 @@ export class VviinnDetectedObject {
   static get states() { return {
     "position": {}
   }; }
+  static get events() { return [{
+      "method": "detectedObjectClicked",
+      "name": "detectedObjectClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
 }