vviinn-widgets 2.4.3 → 2.4.4

package/dist/cjs/{app-globals-474864e0.js → app-globals-af9e1c96.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-61403ab1.js');
+const index = require('./index-07d3d672.js');
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-61403ab1.js');
+const index = require('./index-07d3d672.js');
 const Handler = require('./Handler-d1a8a86a.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/cjs/{customized-slots-0aa6c3d6.js → customized-slots-dc70586b.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-61403ab1.js');
+const index = require('./index-07d3d672.js');
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-61403ab1.js');
-const imageSearch_store = require('./imageSearch.store-076370bf.js');
+const index = require('./index-07d3d672.js');
+const imageSearch_store = require('./imageSearch.store-e11fb912.js');
 const Handler = require('./Handler-d1a8a86a.js');
-const index$1 = require('./index-a87f1a44.js');
-const customizedSlots = require('./customized-slots-0aa6c3d6.js');
+const index$1 = require('./index-7e558d0b.js');
+const customizedSlots = require('./customized-slots-dc70586b.js');
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------

package/dist/cjs/{imageSearch.store-076370bf.js → imageSearch.store-e11fb912.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-61403ab1.js');
+const index = require('./index-07d3d672.js');
 const Handler = require('./Handler-d1a8a86a.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

package/dist/cjs/{index-61403ab1.js → index-07d3d672.js}

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

package/dist/cjs/{index-34d20028.js → index-135d1612.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const imageSearch_store = require('./imageSearch.store-076370bf.js');
+const imageSearch_store = require('./imageSearch.store-e11fb912.js');
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -3172,6 +3172,7 @@ const createTrackingEvent = (widget) => (eventData) => {
   return Object.assign(Object.assign({}, eventData), widget);
 };
 
+const PRODUCT_CLICK_EVENT_TYPE = "product_click_event";
 const PRODUCT_VIEW_EVENT_TYPE = "product_view_event";
 const FILTER_EVENT_EVENT_TYPE = "filter_event";
 const SEARCH_EVENT_EVENT_TYPE = "search_event";
@@ -3190,6 +3191,14 @@ const vpsProductView = {
   widget: "VPS",
   typ: PRODUCT_VIEW_EVENT_TYPE,
 };
+const vprProductClick = {
+  widget: "VPR",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
+const vpsProductClick = {
+  widget: "VPS",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
 
 const searchEvent = {
   widget: "VPS",
@@ -3207,12 +3216,16 @@ const vpsWidget = {
 
 const createProductViewVprEvent = createTrackingEvent(vprProductView);
 const createProductViewVpsEvent = createTrackingEvent(vpsProductView);
+const createProductClickVprEvent = createTrackingEvent(vprProductClick);
+const createProductClickVpsEvent = createTrackingEvent(vpsProductClick);
 const createWidgetVprEvent = createTrackingEvent(vprWidget);
 const createWidgetVpsEvent = createTrackingEvent(vpsWidget);
 const createSearchEvent = createTrackingEvent(searchEvent);
 const createFilterEvent = createTrackingEvent(filterEvent);
 
 exports.createFilterEvent = createFilterEvent;
+exports.createProductClickVprEvent = createProductClickVprEvent;
+exports.createProductClickVpsEvent = createProductClickVpsEvent;
 exports.createProductViewVprEvent = createProductViewVprEvent;
 exports.createProductViewVpsEvent = createProductViewVpsEvent;
 exports.createSearchEvent = createSearchEvent;

package/dist/cjs/{index-a87f1a44.js → index-7e558d0b.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-61403ab1.js');
+const index = require('./index-07d3d672.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-61403ab1.js');
-const appGlobals = require('./app-globals-474864e0.js');
+const index = require('./index-07d3d672.js');
+const appGlobals = require('./app-globals-af9e1c96.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-61403ab1.js');
-const imageSearch_store = require('./imageSearch.store-076370bf.js');
-const index$1 = require('./index-a87f1a44.js');
+const index = require('./index-07d3d672.js');
+const imageSearch_store = require('./imageSearch.store-e11fb912.js');
+const index$1 = require('./index-7e558d0b.js');
 const Handler = require('./Handler-d1a8a86a.js');
-const index$2 = require('./index-34d20028.js');
+const index$2 = require('./index-135d1612.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)}}";
 
@@ -341,7 +341,7 @@ let VviinnProductCard = class {
   connectedCallback() {
     this.productData = {
       product: this.productId,
-      rank: this.index
+      rank: this.index,
     };
   }
   intersectionCallback(data) {
@@ -355,19 +355,11 @@ let VviinnProductCard = class {
     this.recommendationLoad.emit(this.productData);
     this.intersectionObserver.observe(this.el);
     const links = this.el.shadowRoot.querySelectorAll("a");
-    links.forEach((link) => link.addEventListener("mousedown", (event) => {
+    links.forEach((link) => link.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
       this.recommendationClick.emit(this.productData);
-      if (window.ga) {
-        event.preventDefault();
-      }
       imageSearch_store._function.pipe(getAnalyticsModule, imageSearch_store.Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
-      if (window.ga) {
-        ga("send", "event", "UX", "click", "Results", {
-          hitCallback: function () {
-            document.location.href = this.deeplink;
-          },
-        });
-      }
     }));
   }
   getProduct() {
@@ -1085,9 +1077,13 @@ let VviinnVprWidget = class {
     const recommendationViewEvent = index$2.createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationViewEvent);
   }
-  trackRecommendationClick({ detail }) {
-    const recommendationClickEvent = index$2.createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
-    this.trackingApi.trackEvent(recommendationClickEvent);
+  async trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = index$2.createProductClickVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    await this.trackingApi.trackEvent(recommendationClickEvent);
+    const product = this.recommendations.find((r) => r.productId === detail.product);
+    if (!product || !product.deeplink)
+      return;
+    window.location.href = product.deeplink;
   }
   connectedCallback() {
     imageSearch_store.state.apiPath = this.apiPath;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-61403ab1.js');
+const index = require('./index-07d3d672.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-61403ab1.js');
-const imageSearch_store = require('./imageSearch.store-076370bf.js');
+const index = require('./index-07d3d672.js');
+const imageSearch_store = require('./imageSearch.store-e11fb912.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-61403ab1.js');
-const index$1 = require('./index-a87f1a44.js');
+const index = require('./index-07d3d672.js');
+const index$1 = require('./index-7e558d0b.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-61403ab1.js');
-const index$1 = require('./index-a87f1a44.js');
+const index = require('./index-07d3d672.js');
+const index$1 = require('./index-7e558d0b.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-61403ab1.js');
-const index$1 = require('./index-a87f1a44.js');
-const customizedSlots = require('./customized-slots-0aa6c3d6.js');
+const index = require('./index-07d3d672.js');
+const index$1 = require('./index-7e558d0b.js');
+const customizedSlots = require('./customized-slots-dc70586b.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-61403ab1.js');
-const imageSearch_store = require('./imageSearch.store-076370bf.js');
-const customizedSlots = require('./customized-slots-0aa6c3d6.js');
-const index$1 = require('./index-34d20028.js');
+const index = require('./index-07d3d672.js');
+const imageSearch_store = require('./imageSearch.store-e11fb912.js');
+const customizedSlots = require('./customized-slots-dc70586b.js');
+const index$1 = require('./index-135d1612.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}";
@@ -40,9 +40,13 @@ let VviinnVpsWidget = class {
     const recommendationViewEvent = index$1.createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationViewEvent);
   }
-  trackRecommendationClick({ detail }) {
-    const recommendationClickEvent = index$1.createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
-    this.trackingApi.trackEvent(recommendationClickEvent);
+  async trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = index$1.createProductClickVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    await this.trackingApi.trackEvent(recommendationClickEvent);
+    const product = imageSearch_store.imageSearchState.results.find((r) => r.productId === detail.product);
+    if (!product || !product.deeplink)
+      return;
+    window.location.href = product.deeplink;
   }
   trachSearchAreaChanges() {
     const searchEvent = index$1.createSearchEvent({

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

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

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js

@@ -37,7 +37,7 @@ export class VviinnProductCard {
   connectedCallback() {
     this.productData = {
       product: this.productId,
-      rank: this.index
+      rank: this.index,
     };
   }
   intersectionCallback(data) {
@@ -51,19 +51,11 @@ export class VviinnProductCard {
     this.recommendationLoad.emit(this.productData);
     this.intersectionObserver.observe(this.el);
     const links = this.el.shadowRoot.querySelectorAll("a");
-    links.forEach((link) => link.addEventListener("mousedown", (event) => {
+    links.forEach((link) => link.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
       this.recommendationClick.emit(this.productData);
-      if (window.ga) {
-        event.preventDefault();
-      }
       pipe(getAnalyticsModule, O.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
-      if (window.ga) {
-        ga("send", "event", "UX", "click", "Results", {
-          hitCallback: function () {
-            document.location.href = this.deeplink;
-          },
-        });
-      }
     }));
   }
   getProduct() {

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

@@ -9,7 +9,7 @@ import { imageSearchState } from "../../store/imageSearch.store";
 import { Subject } from "rxjs";
 import { v4 as uuidv4 } from "uuid";
 import { createTrackingApi } from "../../openApi";
-import { createProductViewVprEvent, createWidgetVprEvent, } from "../../tracking";
+import { createProductClickVprEvent, createProductViewVprEvent, createWidgetVprEvent, } from "../../tracking";
 /**
  * @part product-card - product card itself
  * @part title - title inside product card
@@ -68,9 +68,13 @@ export class VviinnVprWidget {
     const recommendationViewEvent = createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationViewEvent);
   }
-  trackRecommendationClick({ detail }) {
-    const recommendationClickEvent = createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
-    this.trackingApi.trackEvent(recommendationClickEvent);
+  async trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductClickVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    await this.trackingApi.trackEvent(recommendationClickEvent);
+    const product = this.recommendations.find((r) => r.productId === detail.product);
+    if (!product || !product.deeplink)
+      return;
+    window.location.href = product.deeplink;
   }
   connectedCallback() {
     state.apiPath = this.apiPath;

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

@@ -5,7 +5,7 @@ import * as O from "fp-ts/lib/Option";
 import { slotChangeListener } from "../customized-slots";
 import { v4 as uuidv4 } from "uuid";
 import { createTrackingApi } from "../../openApi";
-import { createFilterEvent, createProductViewVpsEvent, createSearchEvent, createWidgetVpsEvent, } from "../../tracking";
+import { createFilterEvent, createProductClickVpsEvent, createProductViewVpsEvent, createSearchEvent, createWidgetVpsEvent, } from "../../tracking";
 /**
  * @prop --color-primary: color used for action button, slider bullets and selected detected object;
  *
@@ -58,9 +58,13 @@ export class VviinnVpsWidget {
     const recommendationViewEvent = createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationViewEvent);
   }
-  trackRecommendationClick({ detail }) {
-    const recommendationClickEvent = createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
-    this.trackingApi.trackEvent(recommendationClickEvent);
+  async trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductClickVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    await this.trackingApi.trackEvent(recommendationClickEvent);
+    const product = imageSearchState.results.find((r) => r.productId === detail.product);
+    if (!product || !product.deeplink)
+      return;
+    window.location.href = product.deeplink;
   }
   trachSearchAreaChanges() {
     const searchEvent = createSearchEvent({

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

@@ -1,4 +1,4 @@
-import { E as Env } from './index-56c062df.js';
+import { E as Env } from './index-4600de03.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-56c062df.js';
+import { r as registerInstance, h, H as Host } from './index-4600de03.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-863113e2.js → customized-slots-62974f69.js}

@@ -1,4 +1,4 @@
-import { h } from './index-56c062df.js';
+import { h } from './index-4600de03.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-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 { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-4600de03.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-5e2c3094.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-36978848.js';
-import { s as slotChangeListener } from './customized-slots-863113e2.js';
+import { c as CheckIcon, O as OnboardingCard1Icon, d as OnboardingCard2Icon, e as OnboardingCard3Icon, A as ArrowIcon } from './index-d0a661ce.js';
+import { s as slotChangeListener } from './customized-slots-62974f69.js';
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------

package/dist/esm/{imageSearch.store-b516d12e.js → imageSearch.store-5e2c3094.js}

@@ -1,4 +1,4 @@
-import { a as getRenderingRef, f as forceUpdate } from './index-56c062df.js';
+import { a as getRenderingRef, f as forceUpdate } from './index-4600de03.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 : {};

package/dist/esm/{index-2f8fb0fe.js → index-412e5674.js}

@@ -1,4 +1,4 @@
-import { e as commonjsGlobal, h as createCommonjsModule } from './imageSearch.store-b516d12e.js';
+import { e as commonjsGlobal, h as createCommonjsModule } from './imageSearch.store-5e2c3094.js';
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -3170,6 +3170,7 @@ const createTrackingEvent = (widget) => (eventData) => {
   return Object.assign(Object.assign({}, eventData), widget);
 };
 
+const PRODUCT_CLICK_EVENT_TYPE = "product_click_event";
 const PRODUCT_VIEW_EVENT_TYPE = "product_view_event";
 const FILTER_EVENT_EVENT_TYPE = "filter_event";
 const SEARCH_EVENT_EVENT_TYPE = "search_event";
@@ -3188,6 +3189,14 @@ const vpsProductView = {
   widget: "VPS",
   typ: PRODUCT_VIEW_EVENT_TYPE,
 };
+const vprProductClick = {
+  widget: "VPR",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
+const vpsProductClick = {
+  widget: "VPS",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
 
 const searchEvent = {
   widget: "VPS",
@@ -3205,9 +3214,11 @@ const vpsWidget = {
 
 const createProductViewVprEvent = createTrackingEvent(vprProductView);
 const createProductViewVpsEvent = createTrackingEvent(vpsProductView);
+const createProductClickVprEvent = createTrackingEvent(vprProductClick);
+const createProductClickVpsEvent = createTrackingEvent(vpsProductClick);
 const createWidgetVprEvent = createTrackingEvent(vprWidget);
 const createWidgetVpsEvent = createTrackingEvent(vpsWidget);
 const createSearchEvent = createTrackingEvent(searchEvent);
 const createFilterEvent = createTrackingEvent(filterEvent);
 
-export { createTrackingApi as a, createWidgetVprEvent as b, createProductViewVprEvent as c, createProductViewVpsEvent as d, createSearchEvent as e, createFilterEvent as f, createWidgetVpsEvent as g, v4 as v };
+export { createProductClickVprEvent as a, createTrackingApi as b, createProductViewVprEvent as c, createWidgetVprEvent as d, createProductViewVpsEvent as e, createProductClickVpsEvent as f, createSearchEvent as g, createFilterEvent as h, createWidgetVpsEvent as i, v4 as v };

package/dist/esm/{index-56c062df.js → index-4600de03.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'vviinn-widgets';
-const Env = /* vviinn-widgets */ {"packageVersion":"2.4.2","packageName":"vviinn-widgets","environment":"local"};
+const Env = /* vviinn-widgets */ {"packageVersion":"2.4.4","packageName":"vviinn-widgets","environment":"local"};
 
 let scopeId;
 let hostTagName;

package/dist/esm/{index-36978848.js → index-d0a661ce.js}

@@ -1,4 +1,4 @@
-import { h } from './index-56c062df.js';
+import { h } from './index-4600de03.js';
 
 const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-56c062df.js';
-import { g as globalScripts } from './app-globals-3888cd41.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-4600de03.js';
+import { g as globalScripts } from './app-globals-c988b07f.js';
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-56c062df.js';
-import { _ as _Array, O as Option, S as Semigroup, a as _function, E as Either, i as imageSearchState, s as state, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, b as createInitGetRequest, d as sequenceT, A as Apply, T as TaskEither } from './imageSearch.store-b516d12e.js';
-import { C as ChevronIcon } from './index-36978848.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-4600de03.js';
+import { _ as _Array, O as Option, S as Semigroup, a as _function, E as Either, i as imageSearchState, s as state, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, b as createInitGetRequest, d as sequenceT, A as Apply, T as TaskEither } from './imageSearch.store-5e2c3094.js';
+import { C as ChevronIcon } from './index-d0a661ce.js';
 import { p as pipe } from './Handler-639a4cb3.js';
-import { c as createProductViewVprEvent, v as v4, a as createTrackingApi, b as createWidgetVprEvent } from './index-2f8fb0fe.js';
+import { c as createProductViewVprEvent, a as createProductClickVprEvent, v as v4, b as createTrackingApi, d as createWidgetVprEvent } from './index-412e5674.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)}}";
 
@@ -337,7 +337,7 @@ let VviinnProductCard = class {
   connectedCallback() {
     this.productData = {
       product: this.productId,
-      rank: this.index
+      rank: this.index,
     };
   }
   intersectionCallback(data) {
@@ -351,19 +351,11 @@ let VviinnProductCard = class {
     this.recommendationLoad.emit(this.productData);
     this.intersectionObserver.observe(this.el);
     const links = this.el.shadowRoot.querySelectorAll("a");
-    links.forEach((link) => link.addEventListener("mousedown", (event) => {
+    links.forEach((link) => link.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
       this.recommendationClick.emit(this.productData);
-      if (window.ga) {
-        event.preventDefault();
-      }
       _function.pipe(getAnalyticsModule, Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
-      if (window.ga) {
-        ga("send", "event", "UX", "click", "Results", {
-          hitCallback: function () {
-            document.location.href = this.deeplink;
-          },
-        });
-      }
     }));
   }
   getProduct() {
@@ -1081,9 +1073,13 @@ let VviinnVprWidget = class {
     const recommendationViewEvent = createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
     this.trackingApi.trackEvent(recommendationViewEvent);
   }
-  trackRecommendationClick({ detail }) {
-    const recommendationClickEvent = createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
-    this.trackingApi.trackEvent(recommendationClickEvent);
+  async trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductClickVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    await this.trackingApi.trackEvent(recommendationClickEvent);
+    const product = this.recommendations.find((r) => r.productId === detail.product);
+    if (!product || !product.deeplink)
+      return;
+    window.location.href = product.deeplink;
   }
   connectedCallback() {
     state.apiPath = this.apiPath;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-56c062df.js';
+import { r as registerInstance, h, H as Host } from './index-4600de03.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/esm/vviinn-preloader.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-56c062df.js';
-import { i as imageSearchState } from './imageSearch.store-b516d12e.js';
+import { r as registerInstance, h, H as Host } from './index-4600de03.js';
+import { i as imageSearchState } from './imageSearch.store-5e2c3094.js';
 import './Handler-639a4cb3.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/esm/vviinn-recommendations-sidebar.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-56c062df.js';
-import { b as CrossIcon } from './index-36978848.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4600de03.js';
+import { b as CrossIcon } from './index-d0a661ce.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%)}}";