vviinn-widgets 2.4.0 → 2.4.3

package/dist/cjs/{index-6771ae25.js → index-61403ab1.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'vviinn-widgets';
-const Env = /* vviinn-widgets */ {"packageVersion":"2.3.1","packageName":"vviinn-widgets","environment":"local"};
+const Env = /* vviinn-widgets */ {"packageVersion":"2.4.2","packageName":"vviinn-widgets","environment":"local"};
 
 let scopeId;
 let hostTagName;

package/dist/cjs/{index-44fc16ad.js → index-a87f1a44.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-6771ae25.js');
+const index = require('./index-61403ab1.js');
 
 const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));

package/dist/cjs/loader.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6771ae25.js');
-const appGlobals = require('./app-globals-2bcc74df.js');
+const index = require('./index-61403ab1.js');
+const appGlobals = require('./app-globals-474864e0.js');
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6771ae25.js');
-const imageSearch_store = require('./imageSearch.store-cb2b2cc8.js');
-const index$1 = require('./index-44fc16ad.js');
+const index = require('./index-61403ab1.js');
+const imageSearch_store = require('./imageSearch.store-076370bf.js');
+const index$1 = require('./index-a87f1a44.js');
 const Handler = require('./Handler-d1a8a86a.js');
-const index$2 = require('./index-e9439500.js');
+const index$2 = require('./index-34d20028.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)}}";
 
@@ -175,8 +175,8 @@ let VviinnCarousel = class {
       "show-scrollbar": this.showScrollbar(),
     };
   }
-  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.mode === "continuity" }));
+  renderRecommendation(recommendation, rank) {
+    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.mode === "continuity", index: rank }));
   }
   renderRecommendationGroup(elements) {
     return index.h("div", { class: CONTENT_GROUP_CSS_CLASS }, elements);
@@ -190,7 +190,7 @@ let VviinnCarousel = class {
       : this.renderRecommendationsElements();
   }
   renderRecommendationsElements() {
-    return this.recommendations.map((r) => this.renderRecommendation(r));
+    return this.recommendations.map((r, i) => this.renderRecommendation(r, i));
   }
   renderGrid() {
     const recommendations = this.renderRecommendationsElements();
@@ -1097,14 +1097,14 @@ let VviinnVprWidget = class {
     this.trackingApi = index$2.createTrackingApi(this.apiPath, this.token);
     const widgetOpenEvent = index$2.createWidgetVprEvent({
       action: "open",
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
     });
     this.trackingApi.trackEvent(widgetOpenEvent);
   }
   disconnectedCallback() {
     const widgetCloseEvent = index$2.createWidgetVprEvent({
       action: "close",
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
     });
     this.trackingApi.trackEvent(widgetCloseEvent);
   }
@@ -1130,7 +1130,6 @@ let VviinnVprWidget = class {
     this.recommendations = (_a = data === null || data === void 0 ? void 0 : data.extended) !== null && _a !== void 0 ? _a : data;
     imageSearch_store.imageSearchState.results = this.recommendations;
     this.loaded = true;
-    //this.recommendationsLoaded.emit();
     this.productIds = this.recommendations.map((r) => r.productId);
     this.productImageLoadedSubject.subscribe((id) => {
       this.productIds = this.productIds.filter((x) => x !== id);

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6771ae25.js');
+const index = require('./index-61403ab1.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-6771ae25.js');
-const imageSearch_store = require('./imageSearch.store-cb2b2cc8.js');
+const index = require('./index-61403ab1.js');
+const imageSearch_store = require('./imageSearch.store-076370bf.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-6771ae25.js');
-const index$1 = require('./index-44fc16ad.js');
+const index = require('./index-61403ab1.js');
+const index$1 = require('./index-a87f1a44.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-6771ae25.js');
-const index$1 = require('./index-44fc16ad.js');
+const index = require('./index-61403ab1.js');
+const index$1 = require('./index-a87f1a44.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-6771ae25.js');
-const index$1 = require('./index-44fc16ad.js');
-const customizedSlots = require('./customized-slots-4202eaf5.js');
+const index = require('./index-61403ab1.js');
+const index$1 = require('./index-a87f1a44.js');
+const customizedSlots = require('./customized-slots-0aa6c3d6.js');
 
 const vviinnVpsButtonCss = ":host{cursor:pointer}";
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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');
+const index = require('./index-61403ab1.js');
+const imageSearch_store = require('./imageSearch.store-076370bf.js');
+const customizedSlots = require('./customized-slots-0aa6c3d6.js');
+const index$1 = require('./index-34d20028.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}";
@@ -30,13 +30,14 @@ let VviinnVpsWidget = class {
     if (value) {
       this.overflow = document.body.style.overflow;
       document.body.style.overflow = "hidden";
+      this.trackOpenEvent();
     }
     else {
       document.body.style.overflow = this.overflow;
     }
   }
   trackRecommendationView({ detail }) {
-    const recommendationViewEvent = index$1.createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    const recommendationViewEvent = index$1.createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationViewEvent);
   }
   trackRecommendationClick({ detail }) {
@@ -45,23 +46,23 @@ let VviinnVpsWidget = class {
   }
   trachSearchAreaChanges() {
     const searchEvent = index$1.createSearchEvent({
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
       source: this.imageSource,
-      searchArea: "manual-selection",
+      search_area: "manual-selection",
     });
     this.trackingApi.trackEvent(searchEvent);
   }
   trackDetectedObject() {
     const searchEvent = index$1.createSearchEvent({
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
       source: this.imageSource,
-      searchArea: "attention-point",
+      search_area: "attention-point",
     });
     this.trackingApi.trackEvent(searchEvent);
   }
   trackFilter({ detail }) {
     const searchEvent = index$1.createFilterEvent({
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
       source: this.imageSource,
       kind: "category",
       action: detail,
@@ -77,17 +78,12 @@ let VviinnVpsWidget = class {
     imageSearch_store.state.locale = this.locale;
     imageSearch_store.imageSearchState.token = this.token;
     this.uiSessionId = index$1.v4();
+  }
+  trackOpenEvent() {
     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,
+      session_id: this.uiSessionId,
     });
     this.trackingApi.trackEvent(widgetOpenEvent);
   }
@@ -103,9 +99,9 @@ let VviinnVpsWidget = class {
   }
   trackInitialSearch() {
     const searchEvent = index$1.createSearchEvent({
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
       source: this.imageSource,
-      searchArea: "full",
+      search_area: "full",
     });
     this.trackingApi.trackEvent(searchEvent);
   }
@@ -135,6 +131,11 @@ let VviinnVpsWidget = class {
     this.resetState();
     const elementsToReset = ["onboarding-block", "results-block"];
     elementsToReset.forEach((name) => this.resetScroll(name));
+    const widgetOpenEvent = index$1.createWidgetVpsEvent({
+      action: "close",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
   }
   render() {
     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: {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-6771ae25.js');
-const appGlobals = require('./app-globals-2bcc74df.js');
+const index = require('./index-61403ab1.js');
+const appGlobals = require('./app-globals-474864e0.js');
 
 /*
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com

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

@@ -116,7 +116,7 @@ export class SearchFilters {
         "references": {
           "FilterAction": {
             "location": "import",
-            "path": "@vviinn/tracking-client-ts"
+            "path": "vviinn-tracking-client-ts"
           }
         }
       }

package/dist/collection/components/vviinn-carousel/vviinn-carousel.js

@@ -168,8 +168,8 @@ export class VviinnCarousel {
       "show-scrollbar": this.showScrollbar(),
     };
   }
-  renderRecommendation(recommendation) {
-    return (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.mode === "continuity" }));
+  renderRecommendation(recommendation, rank) {
+    return (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.mode === "continuity", index: rank }));
   }
   renderRecommendationGroup(elements) {
     return h("div", { class: CONTENT_GROUP_CSS_CLASS }, elements);
@@ -183,7 +183,7 @@ export class VviinnCarousel {
       : this.renderRecommendationsElements();
   }
   renderRecommendationsElements() {
-    return this.recommendations.map((r) => this.renderRecommendation(r));
+    return this.recommendations.map((r, i) => this.renderRecommendation(r, i));
   }
   renderGrid() {
     const recommendations = this.renderRecommendationsElements();

package/dist/collection/components/vviinn-example-images/vviinn-example-images.js

@@ -16,13 +16,13 @@ export class VviinnExampleImages {
         h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")),
       h("div", { class: "images" },
         h("slot", { name: "vviinn-example-images-1" },
-          h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
         h("slot", { name: "vviinn-example-images-2" },
-          h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
         h("slot", { name: "vviinn-example-images-3" },
-          h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
         h("slot", { name: "vviinn-example-images-4" },
-          h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
   }
   static get is() { return "vviinn-example-images"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-vidget.js

@@ -80,14 +80,14 @@ export class VviinnVprWidget {
     this.trackingApi = createTrackingApi(this.apiPath, this.token);
     const widgetOpenEvent = createWidgetVprEvent({
       action: "open",
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
     });
     this.trackingApi.trackEvent(widgetOpenEvent);
   }
   disconnectedCallback() {
     const widgetCloseEvent = createWidgetVprEvent({
       action: "close",
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
     });
     this.trackingApi.trackEvent(widgetCloseEvent);
   }
@@ -113,7 +113,6 @@ export class VviinnVprWidget {
     this.recommendations = (_a = data === null || data === void 0 ? void 0 : data.extended) !== null && _a !== void 0 ? _a : data;
     imageSearchState.results = this.recommendations;
     this.loaded = true;
-    //this.recommendationsLoaded.emit();
     this.productIds = this.recommendations.map((r) => r.productId);
     this.productImageLoadedSubject.subscribe((id) => {
       this.productIds = this.productIds.filter((x) => x !== id);

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js

@@ -48,13 +48,14 @@ export class VviinnVpsWidget {
     if (value) {
       this.overflow = document.body.style.overflow;
       document.body.style.overflow = "hidden";
+      this.trackOpenEvent();
     }
     else {
       document.body.style.overflow = this.overflow;
     }
   }
   trackRecommendationView({ detail }) {
-    const recommendationViewEvent = createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    const recommendationViewEvent = createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationViewEvent);
   }
   trackRecommendationClick({ detail }) {
@@ -63,23 +64,23 @@ export class VviinnVpsWidget {
   }
   trachSearchAreaChanges() {
     const searchEvent = createSearchEvent({
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
       source: this.imageSource,
-      searchArea: "manual-selection",
+      search_area: "manual-selection",
     });
     this.trackingApi.trackEvent(searchEvent);
   }
   trackDetectedObject() {
     const searchEvent = createSearchEvent({
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
       source: this.imageSource,
-      searchArea: "attention-point",
+      search_area: "attention-point",
     });
     this.trackingApi.trackEvent(searchEvent);
   }
   trackFilter({ detail }) {
     const searchEvent = createFilterEvent({
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
       source: this.imageSource,
       kind: "category",
       action: detail,
@@ -95,17 +96,12 @@ export class VviinnVpsWidget {
     state.locale = this.locale;
     imageSearchState.token = this.token;
     this.uiSessionId = uuidv4();
+  }
+  trackOpenEvent() {
     this.trackingApi = createTrackingApi(this.apiPath, this.token);
     const widgetOpenEvent = createWidgetVpsEvent({
       action: "open",
-      sessionId: this.uiSessionId,
-    });
-    this.trackingApi.trackEvent(widgetOpenEvent);
-  }
-  disconnectedCallback() {
-    const widgetOpenEvent = createWidgetVpsEvent({
-      action: "close",
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
     });
     this.trackingApi.trackEvent(widgetOpenEvent);
   }
@@ -121,9 +117,9 @@ export class VviinnVpsWidget {
   }
   trackInitialSearch() {
     const searchEvent = createSearchEvent({
-      sessionId: this.uiSessionId,
+      session_id: this.uiSessionId,
       source: this.imageSource,
-      searchArea: "full",
+      search_area: "full",
     });
     this.trackingApi.trackEvent(searchEvent);
   }
@@ -153,6 +149,11 @@ export class VviinnVpsWidget {
     this.resetState();
     const elementsToReset = ["onboarding-block", "results-block"];
     elementsToReset.forEach((name) => this.resetScroll(name));
+    const widgetOpenEvent = createWidgetVpsEvent({
+      action: "close",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
   }
   render() {
     return (h(Host, null,

package/dist/collection/openApi/index.js

@@ -1,4 +1,4 @@
-import { createConfiguration, DefaultApi, servers, } from "@vviinn/tracking-client-ts";
+import { createConfiguration, DefaultApi, servers, } from "vviinn-tracking-client-ts";
 const STAGE_SERVER_IDENTIFIER = "stage";
 export const getTrackingServerByApiPath = (apiPath) => isProductionPath(apiPath) ? servers[0] : servers[1];
 export const isProductionPath = (apiPath) => !apiPath.includes(STAGE_SERVER_IDENTIFIER);

package/dist/esm/{app-globals-550daa9b.js → app-globals-3888cd41.js}

@@ -1,4 +1,4 @@
-import { E as Env } from './index-c09e56b6.js';
+import { E as Env } from './index-56c062df.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

package/dist/esm/cropper-handler.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-c09e56b6.js';
+import { r as registerInstance, h, H as Host } from './index-56c062df.js';
 import { q as getCursorValue } from './Handler-639a4cb3.js';
 
 const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);touch-action:none;position:absolute;width:var(--size);z-index:4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.disabled){opacity:0.25}:host(.nw-resize){border-bottom:none;border-right:none;top:0;left:0}:host(.ne-resize){border-left:none;border-bottom:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;left:0;bottom:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";

package/dist/esm/{customized-slots-80625933.js → customized-slots-863113e2.js}

@@ -1,4 +1,4 @@
-import { h } from './index-c09e56b6.js';
+import { h } from './index-56c062df.js';
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",

package/dist/esm/highlight-box_22.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-c09e56b6.js';
-import { O as Option, j as sequenceToOption, i as imageSearchState, a as _function, t as transform, k as move, l as makeRectangularSearchRequest, n as fromAlt, o as foldValueObject, p as scaleWithSized, q as center, r as detectedObjectEq, u as toFile, v as processSelectedFile, E as Either, w as match, x as fromImage, y as dimensionsFromImage, z as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-1268786d.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-56c062df.js';
+import { O as Option, j as sequenceToOption, i as imageSearchState, a as _function, t as transform, k as move, l as makeRectangularSearchRequest, n as fromAlt, o as foldValueObject, p as scaleWithSized, q as center, r as detectedObjectEq, u as toFile, v as processSelectedFile, E as Either, w as match, x as fromImage, y as dimensionsFromImage, z as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-b516d12e.js';
 import { p as pipe, m as pointDiffSemigroup, o as fromMouseEvent } from './Handler-639a4cb3.js';
-import { c as CheckIcon, O as OnboardingCard1Icon, d as OnboardingCard2Icon, e as OnboardingCard3Icon, A as ArrowIcon } from './index-1cf740a8.js';
-import { s as slotChangeListener } from './customized-slots-80625933.js';
+import { c as CheckIcon, O as OnboardingCard1Icon, d as OnboardingCard2Icon, e as OnboardingCard3Icon, A as ArrowIcon } from './index-36978848.js';
+import { s as slotChangeListener } from './customized-slots-863113e2.js';
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------
@@ -341,7 +341,7 @@ let VviinnExampleImages = class {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images" }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+    return (h(Host, null, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images" }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/{imageSearch.store-1268786d.js → imageSearch.store-b516d12e.js}

@@ -1,4 +1,4 @@
-import { a as getRenderingRef, f as forceUpdate } from './index-c09e56b6.js';
+import { a as getRenderingRef, f as forceUpdate } from './index-56c062df.js';
 import { t as tuple, i as isNone$1, l as left$1, r as right$1, a as isLeft$1, b as identity, p as pipe, n as none$1, s as some$1, f as first, c as flow, d as struct, e as last, g as pointSumSemigroup, H as HandlerDirection, h as fromRectangle, j as isSome, k as fromRectangle$1 } from './Handler-639a4cb3.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};