vviinn-widgets 2.55.0 → 2.55.2

package/dist/cjs/{package-400fb761.js → package-74efd5f0.js}

@@ -1,5 +1,5 @@
 'use strict';
 
-const version = "2.55.0";
+const version = "2.55.2";
 
 exports.version = version;

package/dist/cjs/search-filters_17.cjs.entry.js

@@ -3864,7 +3864,7 @@ const VviinnImageView = class {
 };
 VviinnImageView.style = vviinnImageViewCss;
 
-const vviinnModalCss = ":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:64px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
+const vviinnModalCss = ":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:160px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
 
 const VviinnModal = class {
   constructor(hostRef) {
@@ -3931,7 +3931,7 @@ const VviinnOverlay = class {
 };
 VviinnOverlay.style = vviinnOverlayCss;
 
-const vviinnOverlayedModalCss = ":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center;cursor:default}vviinn-modal{margin-left:24px;margin-right:24px}@media (max-width: 768px){vviinn-modal{height:100vh;height:100svh;margin-top:64px;transform:translateY(100%);width:100vw;margin-left:0;margin-right:0}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";
+const vviinnOverlayedModalCss = ":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center;cursor:default}vviinn-modal{margin-left:24px;margin-right:24px}@media (max-width: 768px){vviinn-modal{height:100vh;margin-top:64px;transform:translateY(100%);width:100vw;margin-left:0;margin-right:0}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";
 
 const VviinnOverlayedModal = class {
   constructor(hostRef) {

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4474431a.js');
 const search_store = require('./search.store-3ea66a77.js');
+const customizedSlots = require('./customized-slots-8e27cac8.js');
 const i18next = require('./i18next-74ff3413.js');
 const PlusIcon = require('./PlusIcon-835a5dcc.js');
-const customizedSlots = require('./customized-slots-8e27cac8.js');
-const _package = require('./package-400fb761.js');
+const _package = require('./package-74efd5f0.js');
 const resources = require('./resources-ad941ad8.js');
 
 const BasketIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -124,6 +124,8 @@ const vviinnCarouselCss = ":host{--vviinn-carousel-columns-internal:var(--vviinn
 const VviinnCarousel = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
+    this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
     this.columns = 0;
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.defaultAnimationInterval = 2000;
@@ -138,8 +140,10 @@ const VviinnCarousel = class {
       const recommendationIndex = this.recommendations.indexOf(clickedProduct);
       const newCrossSellingRecommendations = this.crossSellingRecommendations;
       if (recommendationIndex + step < this.recommendations.length) {
-        newCrossSellingRecommendations[crossSellingIndex] =
-          this.recommendations[recommendationIndex + step];
+        const newRecommendation = this.recommendations[recommendationIndex + step];
+        newCrossSellingRecommendations[crossSellingIndex] = newRecommendation;
+        const productData = this.getProductData(newRecommendation, recommendationIndex + step);
+        this.vviinnProductLoad.emit(productData);
         this.crossSellingRecommendations = [...newCrossSellingRecommendations];
         let element = this.el.querySelector(`[data-id="${productId}"]`);
         const button = element.shadowRoot.querySelector(".update-button");
@@ -150,6 +154,7 @@ const VviinnCarousel = class {
           if (recommendationIndex + step * 2 <= this.recommendations.length - 1) {
             button === null || button === void 0 ? void 0 : button.classList.remove("hidden");
           }
+          this.vviinnProductView.emit(productData);
           clearTimeout(animationTimer);
         }, animationInterval);
       }
@@ -177,6 +182,19 @@ const VviinnCarousel = class {
     this.pricePrefix = "";
     this.locale = undefined;
   }
+  getProductData(recommendation, productRank) {
+    return {
+      productId: recommendation.productId,
+      productRank,
+      productName: recommendation.productTitle,
+      productType: recommendation.productType,
+      widgetType: "VPR",
+      campaignTypeId: this.campaignTypeId,
+      campaignTypeName: customizedSlots.campaignTypeNames[this.campaignTypeId],
+      widgetId: this.widgetElementId,
+      widgetVersion: this.widgetVersion,
+    };
+  }
   componentWillLoad() {
     this.isRTL = document.dir === "rtl";
   }
@@ -1406,7 +1424,7 @@ const VviinnVprWidget = class {
     this.currencySign = "€";
     this.pricePrefix = "";
     this.mode = "continuity";
-    this.campaignType = "VPR";
+    this.campaignType = this.mode === "set" ? "VCS" : "VPR";
     this.locale = "de-DE";
     this.campaigns = "";
     this.color = "";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4474431a.js');
-const _package = require('./package-400fb761.js');
+const _package = require('./package-74efd5f0.js');
 const VisualSearchIcon = require('./VisualSearchIcon-f435f5b0.js');
 
 const vviinnVprButtonCss = ":host{display:block}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4474431a.js');
-const _package = require('./package-400fb761.js');
+const _package = require('./package-74efd5f0.js');
 const customizedSlots = require('./customized-slots-8e27cac8.js');
 const constants = require('./constants-7684cbfc.js');
 

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-4474431a.js');
 const search_store = require('./search.store-3ea66a77.js');
 const i18next = require('./i18next-74ff3413.js');
-const _package = require('./package-400fb761.js');
+const _package = require('./package-74efd5f0.js');
 const customizedSlots = require('./customized-slots-8e27cac8.js');
 const resources = require('./resources-ad941ad8.js');
 const constants = require('./constants-7684cbfc.js');
@@ -34,7 +34,7 @@ const checkDeviceType = () => {
   return "desktop";
 };
 
-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);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:42px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}#start-page_block vviinn-text-search{margin-top:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{font-family:inherit;display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.source-wrapper{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.results-page .source-wrapper.text-search-wrapper{padding:24px 24px 0 24px}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.products.hidden{display:none}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:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.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%}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.source-wrapper{grid-template-rows:min-content auto;width:100%;padding:0}.source-wrapper.image-wrapper .filters-wrapper{padding-left:24px;min-width:100%}.image{margin-bottom:8px}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:24px}.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: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+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);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:40px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}#start-page_block vviinn-text-search{margin-top:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{font-family:inherit;display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.source-wrapper{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.results-page .source-wrapper.text-search-wrapper{padding:24px 24px 0 24px}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.products.hidden{display:none}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:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.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%}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.source-wrapper{grid-template-rows:min-content auto;width:100%;padding:0}.source-wrapper.image-wrapper .filters-wrapper{padding-left:24px;min-width:100%}.image{margin-bottom:8px}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px 20px}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:24px}.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: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};

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

@@ -189,7 +189,7 @@ export class SearchFilters {
         "mutable": false,
         "complexType": {
           "original": "ResponseFilterItem | null",
-          "resolved": "{ column: string; values: ({ value: string | number; label: string; } & { selected: boolean; } & { value: unknown; label: unknown; })[]; }",
+          "resolved": "{ column: string; label: string; values: ({ value: string | number; label: string; } & { selected: boolean; } & { value: unknown; label: unknown; })[]; }",
           "references": {
             "ResponseFilterItem": {
               "location": "import",

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { chunksOf } from "fp-ts/lib/Array";
 import { pipe } from "fp-ts/lib/function";
 import { ChevronIcon } from "../vviinn-icons";
+import { campaignTypeNames } from "../../campaign/Campaign";
 import { CAROUSEL_IMAGE_WIDTH_CSS_VAR, CAROUSEL_WIDTH_CSS_VAR, COLUMNS_NUMBER_CSS_VAR, CONTENT_GROUP_CSS_CLASS, SET_MODE_DISCOUNT_STEP, SET_MODE_IMAGE_WIDTH, SET_MODE_INITIAL_DISCOUNT, SET_MODE_MAX_DISCOUNT, } from "./constants";
 import { calculateDiscount } from "../../utils/number";
 import { searchState } from "../../store/search.store";
@@ -24,8 +25,10 @@ export class VviinnCarousel {
       const recommendationIndex = this.recommendations.indexOf(clickedProduct);
       const newCrossSellingRecommendations = this.crossSellingRecommendations;
       if (recommendationIndex + step < this.recommendations.length) {
-        newCrossSellingRecommendations[crossSellingIndex] =
-          this.recommendations[recommendationIndex + step];
+        const newRecommendation = this.recommendations[recommendationIndex + step];
+        newCrossSellingRecommendations[crossSellingIndex] = newRecommendation;
+        const productData = this.getProductData(newRecommendation, recommendationIndex + step);
+        this.vviinnProductLoad.emit(productData);
         this.crossSellingRecommendations = [...newCrossSellingRecommendations];
         let element = this.el.querySelector(`[data-id="${productId}"]`);
         const button = element.shadowRoot.querySelector(".update-button");
@@ -36,6 +39,7 @@ export class VviinnCarousel {
           if (recommendationIndex + step * 2 <= this.recommendations.length - 1) {
             button === null || button === void 0 ? void 0 : button.classList.remove("hidden");
           }
+          this.vviinnProductView.emit(productData);
           clearTimeout(animationTimer);
         }, animationInterval);
       }
@@ -63,6 +67,19 @@ export class VviinnCarousel {
     this.pricePrefix = "";
     this.locale = undefined;
   }
+  getProductData(recommendation, productRank) {
+    return {
+      productId: recommendation.productId,
+      productRank,
+      productName: recommendation.productTitle,
+      productType: recommendation.productType,
+      widgetType: "VPR",
+      campaignTypeId: this.campaignTypeId,
+      campaignTypeName: campaignTypeNames[this.campaignTypeId],
+      widgetId: this.widgetElementId,
+      widgetVersion: this.widgetVersion,
+    };
+  }
   componentWillLoad() {
     this.isRTL = document.dir === "rtl";
   }
@@ -595,6 +612,49 @@ export class VviinnCarousel {
       "setModeAppliedDiscounts": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "vviinnProductLoad",
+        "name": "vviinnProductLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fires ones when recommendation rendered on page"
+        },
+        "complexType": {
+          "original": "ProductCardEventData",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; productId: string; productRank: number; productName: string; productType: string; clickEvent?: MouseEvent; discount?: number; }",
+          "references": {
+            "ProductCardEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
+        }
+      }, {
+        "method": "vviinnProductView",
+        "name": "vviinnProductView",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fires ones when recommendation appears on the viewport"
+        },
+        "complexType": {
+          "original": "ProductCardEventData",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; productId: string; productRank: number; productName: string; productType: string; clickEvent?: MouseEvent; discount?: number; }",
+          "references": {
+            "ProductCardEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{

package/dist/collection/components/vviinn-modal/vviinn-modal.css

@@ -82,7 +82,7 @@ button:hover {
   }
 
   :host(:not(.first-screen)) .body {
-    padding-bottom: 64px;
+    padding-bottom: 160px;
   }
 
   .title {

package/dist/collection/components/vviinn-overlayed-modal/vviinn-overlayed-modal.css

@@ -21,7 +21,6 @@ vviinn-modal {
 @media (max-width: 768px) {
   vviinn-modal {
     height: 100vh;
-    height: 100svh;
     margin-top: 64px;
     transform: translateY(100%);
     width: 100vw;

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

@@ -81,7 +81,7 @@ export class VviinnVprWidget {
     this.currencySign = "€";
     this.pricePrefix = "";
     this.mode = "continuity";
-    this.campaignType = "VPR";
+    this.campaignType = this.mode === "set" ? "VCS" : "VPR";
     this.locale = "de-DE";
     this.campaigns = "";
     this.color = "";
@@ -559,7 +559,7 @@ export class VviinnVprWidget {
         },
         "attribute": "campaign-type",
         "reflect": false,
-        "defaultValue": "\"VPR\""
+        "defaultValue": "this.mode === \"set\" ? \"VCS\" : \"VPR\""
       },
       "locale": {
         "type": "string",

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

@@ -38,7 +38,7 @@ vviinn-overlayed-modal.first-screen::part(secondary-action) {
   overflow-y: auto;
   flex-direction: column;
   justify-content: center;
-  padding: 42px 62px;
+  padding: 40px 62px;
 }
 
 #start-page_block.error {
@@ -308,7 +308,7 @@ vviinn-preloader {
     overflow-y: unset;
     min-height: -moz-fit-content;
     min-height: fit-content;
-    padding: 24px 20px;
+    padding: 24px 20px 20px;
   }
 
   .products-wrapper {

package/dist/esm/{package-6df9129f.js → package-d3e52cfc.js}

@@ -1,3 +1,3 @@
-const version = "2.55.0";
+const version = "2.55.2";
 
 export { version as v };

package/dist/esm/search-filters_17.entry.js

@@ -3860,7 +3860,7 @@ const VviinnImageView = class {
 };
 VviinnImageView.style = vviinnImageViewCss;
 
-const vviinnModalCss = ":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:64px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
+const vviinnModalCss = ":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:160px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
 
 const VviinnModal = class {
   constructor(hostRef) {
@@ -3927,7 +3927,7 @@ const VviinnOverlay = class {
 };
 VviinnOverlay.style = vviinnOverlayCss;
 
-const vviinnOverlayedModalCss = ":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center;cursor:default}vviinn-modal{margin-left:24px;margin-right:24px}@media (max-width: 768px){vviinn-modal{height:100vh;height:100svh;margin-top:64px;transform:translateY(100%);width:100vw;margin-left:0;margin-right:0}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";
+const vviinnOverlayedModalCss = ":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center;cursor:default}vviinn-modal{margin-left:24px;margin-right:24px}@media (max-width: 768px){vviinn-modal{height:100vh;margin-top:64px;transform:translateY(100%);width:100vw;margin-left:0;margin-right:0}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";
 
 const VviinnOverlayedModal = class {
   constructor(hostRef) {

package/dist/esm/vviinn-carousel_4.entry.js

@@ -1,9 +1,9 @@
-import { h, r as registerInstance, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-abf408d8.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-abf408d8.js';
 import { h as has, t as tuple, s as searchState, _ as _function, a as _Array, O as Option, S as Semigroup, E as Either, p as pipe, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, b as createInitPostRequest, A as Apply, d as state, T as TaskEither } from './search.store-5c685b20.js';
+import { c as campaignTypeNames, s as slotChangeListener, f as fromString, a as fold, S as SlotSkeleton } from './customized-slots-f69bec7d.js';
 import { i as instance } from './i18next-387f2b0a.js';
 import { P as PlusIcon } from './PlusIcon-8f8206c3.js';
-import { s as slotChangeListener, c as campaignTypeNames, f as fromString, a as fold, S as SlotSkeleton } from './customized-slots-f69bec7d.js';
-import { v as version } from './package-6df9129f.js';
+import { v as version } from './package-d3e52cfc.js';
 import { v as v4, c as createTrackingApi, r as resources, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, i as createProductVprEventByType } from './resources-da0af18a.js';
 
 const BasketIcon = () => (h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -120,6 +120,8 @@ const vviinnCarouselCss = ":host{--vviinn-carousel-columns-internal:var(--vviinn
 const VviinnCarousel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.vviinnProductLoad = createEvent(this, "vviinnProductLoad", 7);
+    this.vviinnProductView = createEvent(this, "vviinnProductView", 7);
     this.columns = 0;
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.defaultAnimationInterval = 2000;
@@ -134,8 +136,10 @@ const VviinnCarousel = class {
       const recommendationIndex = this.recommendations.indexOf(clickedProduct);
       const newCrossSellingRecommendations = this.crossSellingRecommendations;
       if (recommendationIndex + step < this.recommendations.length) {
-        newCrossSellingRecommendations[crossSellingIndex] =
-          this.recommendations[recommendationIndex + step];
+        const newRecommendation = this.recommendations[recommendationIndex + step];
+        newCrossSellingRecommendations[crossSellingIndex] = newRecommendation;
+        const productData = this.getProductData(newRecommendation, recommendationIndex + step);
+        this.vviinnProductLoad.emit(productData);
         this.crossSellingRecommendations = [...newCrossSellingRecommendations];
         let element = this.el.querySelector(`[data-id="${productId}"]`);
         const button = element.shadowRoot.querySelector(".update-button");
@@ -146,6 +150,7 @@ const VviinnCarousel = class {
           if (recommendationIndex + step * 2 <= this.recommendations.length - 1) {
             button === null || button === void 0 ? void 0 : button.classList.remove("hidden");
           }
+          this.vviinnProductView.emit(productData);
           clearTimeout(animationTimer);
         }, animationInterval);
       }
@@ -173,6 +178,19 @@ const VviinnCarousel = class {
     this.pricePrefix = "";
     this.locale = undefined;
   }
+  getProductData(recommendation, productRank) {
+    return {
+      productId: recommendation.productId,
+      productRank,
+      productName: recommendation.productTitle,
+      productType: recommendation.productType,
+      widgetType: "VPR",
+      campaignTypeId: this.campaignTypeId,
+      campaignTypeName: campaignTypeNames[this.campaignTypeId],
+      widgetId: this.widgetElementId,
+      widgetVersion: this.widgetVersion,
+    };
+  }
   componentWillLoad() {
     this.isRTL = document.dir === "rtl";
   }
@@ -1402,7 +1420,7 @@ const VviinnVprWidget = class {
     this.currencySign = "€";
     this.pricePrefix = "";
     this.mode = "continuity";
-    this.campaignType = "VPR";
+    this.campaignType = this.mode === "set" ? "VCS" : "VPR";
     this.locale = "de-DE";
     this.campaigns = "";
     this.color = "";

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-abf408d8.js';
-import { v as version } from './package-6df9129f.js';
+import { v as version } from './package-d3e52cfc.js';
 import { V as VisualSearchIcon } from './VisualSearchIcon-b301a1d4.js';
 
 const vviinnVprButtonCss = ":host{display:block}";

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

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-abf408d8.js';
-import { v as version } from './package-6df9129f.js';
+import { v as version } from './package-d3e52cfc.js';
 import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-f69bec7d.js';
 import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
 

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

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as createEvent, F as Fragment, H as Host, g as getElement } from './index-abf408d8.js';
 import { s as searchState, j as processSelectedText, d as state, k as parseExcludedToParams, O as Option } from './search.store-5c685b20.js';
 import { i as instance } from './i18next-387f2b0a.js';
-import { v as version } from './package-6df9129f.js';
+import { v as version } from './package-d3e52cfc.js';
 import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton } from './customized-slots-f69bec7d.js';
 import { r as resources, j as createSearchEvent, k as createFilterEvent, v as v4, c as createTrackingApi, l as createWidgetVpsEvent, m as createProductVpsEventByType, n as createResultVpsEventByType } from './resources-da0af18a.js';
 import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
@@ -30,7 +30,7 @@ const checkDeviceType = () => {
   return "desktop";
 };
 
-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);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:42px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}#start-page_block vviinn-text-search{margin-top:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{font-family:inherit;display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.source-wrapper{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.results-page .source-wrapper.text-search-wrapper{padding:24px 24px 0 24px}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.products.hidden{display:none}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:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.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%}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.source-wrapper{grid-template-rows:min-content auto;width:100%;padding:0}.source-wrapper.image-wrapper .filters-wrapper{padding-left:24px;min-width:100%}.image{margin-bottom:8px}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:24px}.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: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+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);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:40px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}#start-page_block vviinn-text-search{margin-top:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{font-family:inherit;display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.source-wrapper{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.results-page .source-wrapper.text-search-wrapper{padding:24px 24px 0 24px}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.products.hidden{display:none}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:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.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%}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.source-wrapper{grid-template-rows:min-content auto;width:100%;padding:0}.source-wrapper.image-wrapper .filters-wrapper{padding-left:24px;min-width:100%}.image{margin-bottom:8px}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px 20px}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:24px}.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: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};

package/dist/types/campaign/CampaignService.d.ts

@@ -57,6 +57,7 @@ export declare const getRecommendationsService: (campaignType: C.CampaignName) =
   interactions?: {
     filters: ({
       column: string;
+      label: string;
       values: ({
         value: string | number;
         label: string;
@@ -68,6 +69,7 @@ export declare const getRecommendationsService: (campaignType: C.CampaignName) =
       })[];
     } | {
       column: string;
+      label: string;
       full: {
         start?: number;
         end?: number;
@@ -149,6 +151,7 @@ export declare const getRecommendationsService: (campaignType: C.CampaignName) =
   interactions?: {
     filters: ({
       column: string;
+      label: string;
       values: ({
         value: string | number;
         label: string;
@@ -160,6 +163,7 @@ export declare const getRecommendationsService: (campaignType: C.CampaignName) =
       })[];
     } | {
       column: string;
+      label: string;
       full: {
         start?: number;
         end?: number;

package/dist/types/campaign/VCSCampaignService.d.ts

@@ -39,6 +39,7 @@ export declare const getVCSRecommendations: (body: CrossSellingRequest) => (opti
   interactions?: {
     filters: ({
       column: string;
+      label: string;
       values: ({
         value: string | number;
         label: string;
@@ -50,6 +51,7 @@ export declare const getVCSRecommendations: (body: CrossSellingRequest) => (opti
       })[];
     } | {
       column: string;
+      label: string;
       full: {
         start?: number;
         end?: number;

package/dist/types/campaign/VPRCampaignService.d.ts

@@ -39,6 +39,7 @@ export declare const getVPRRecommendations: (body: SimilarProductsRequest) => (o
   interactions?: {
     filters: ({
       column: string;
+      label: string;
       values: ({
         value: string | number;
         label: string;
@@ -50,6 +51,7 @@ export declare const getVPRRecommendations: (body: SimilarProductsRequest) => (o
       })[];
     } | {
       column: string;
+      label: string;
       full: {
         start?: number;
         end?: number;

package/dist/types/components/vviinn-carousel/vviinn-carousel.d.ts

@@ -1,6 +1,7 @@
+import { EventEmitter } from "../../stencil-public-runtime";
 import { Recommendation } from "../../recommendation/recommendation";
 import { CampaignTypeId } from "../../campaign/Campaign";
-import { CrossSellingClickEvent, ProductCardEvent } from "../../recommendation/events";
+import { CrossSellingClickEvent, ProductCardEvent, ProductCardEventData } from "../../recommendation/events";
 import { UpdateButtonLocation } from "../vviinn-vpr-widget/vviinn-vpr-widget";
 import { Locale } from "../../locale";
 type MoveDirection = "left" | "right";
@@ -34,6 +35,10 @@ export declare class VviinnCarousel {
   currencySign: string;
   pricePrefix: string;
   locale: Locale;
+  /** Event fires ones when recommendation rendered on page */
+  vviinnProductLoad: EventEmitter<ProductCardEventData>;
+  /** Event fires ones when recommendation appears on the viewport */
+  vviinnProductView: EventEmitter<ProductCardEventData>;
   private columns;
   private resizeObserver;
   private isSetMode;
@@ -41,6 +46,7 @@ export declare class VviinnCarousel {
   private isContinuityMode;
   private defaultAnimationInterval;
   private sourceProduct?;
+  private getProductData;
   private mutationObserver;
   private handleWindowResize;
   private isLastGroup;

package/dist/types/components.d.ts

@@ -476,6 +476,10 @@ export interface SearchFiltersCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSearchFiltersElement;
 }
+export interface VviinnCarouselCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVviinnCarouselElement;
+}
 export interface VviinnDetectedObjectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVviinnDetectedObjectElement;
@@ -743,6 +747,14 @@ declare namespace LocalJSX {
         "imageWidth"?: number;
         "locale"?: Locale;
         "mode"?: CarouselMode;
+        /**
+          * Event fires ones when recommendation rendered on page
+         */
+        "onVviinnProductLoad"?: (event: VviinnCarouselCustomEvent<ProductCardEventData>) => void;
+        /**
+          * Event fires ones when recommendation appears on the viewport
+         */
+        "onVviinnProductView"?: (event: VviinnCarouselCustomEvent<ProductCardEventData>) => void;
         "pricePrefix"?: string;
         "recommendations"?: Recommendation[];
         "replaceSlotsContent"?: () => void;

package/dist/types/interfaces/generated.d.ts

@@ -427,11 +427,15 @@ export interface components {
     "response-categorical-filter-item": {
       /** @example product_type */
       column: string;
+      /** @example Product Type */
+      label: string;
       values: components["schemas"]["categorical-filter-value-item"][];
     };
     "response-interval-filter-item": {
       /** @example price */
       column: string;
+      /** @example Price */
+      label: string;
       full: components["schemas"]["interval"];
       suggestions: components["schemas"]["interval-filter-value-item"][];
     };