vviinn-widgets 2.2.1 → 2.3.1

package/dist/esm/{vviinn-carousel_5.entry.js → vviinn-carousel_3.entry.js}

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3e85e294.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, e as state$1, T as TaskEither } from './imageSearch.store-4ca31230.js';
-import { C as ChevronIcon, a as CrossIcon, V as VisualSearchIcon } from './index-017f18de.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-d7c7df1c.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, e as state$1, T as TaskEither } from './imageSearch.store-f35e14f8.js';
+import { C as ChevronIcon } from './index-ac2e3b9d.js';
 import { p as pipe } from './Handler-639a4cb3.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.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)}}";
+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)}}";
 
 const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
 const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
@@ -52,7 +52,7 @@ let VviinnCarousel = class {
       content: true,
       [this.moveDirection]: true,
       [this.mode]: true,
-      "show-scrollbar": this.showScroll
+      "show-scrollbar": this.showScroll,
     };
   }
   handleResize() {
@@ -201,7 +201,7 @@ let VviinnCarousel = class {
       }, onClick: () => this.scroll(index) })));
   }
   render() {
-    return (h(Host, { class: this.getClassMap() }, h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, h("button", { class: "prev", onClick: () => this.showPrev() }, h(ChevronIcon, null)), h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), h("button", { class: "next", onClick: () => this.showNext() }, h(ChevronIcon, null))), this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
+    return (h(Host, { class: this.getClassMap() }, h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button" }, h(ChevronIcon, null)), h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" }, h(ChevronIcon, null))), this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
   }
   get el() { return getElement(this); }
 };
@@ -382,90 +382,6 @@ let VviinnProductCard = class {
 };
 VviinnProductCard.style = vviinnProductCardCss;
 
-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%)}}";
-
-let RecommendationsSidebar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.modalClosed = createEvent(this, "modalClosed", 7);
-    this.position = "bottom";
-    this.sourceImage = null;
-    this.widgetScrollbar = false;
-    this.state = "idle";
-  }
-  bodyClickListener(event) {
-    const { clientX, clientY } = event;
-    const sidebarRect = this.getSidebarRectangle();
-    if (!sidebarRect)
-      return;
-    const inLeftBound = clientX >= sidebarRect.left;
-    const inRightBound = clientX <= sidebarRect.right;
-    const inTopBound = clientY >= sidebarRect.top;
-    const inBottomBound = clientY <= sidebarRect.bottom;
-    const inBound = inLeftBound && inRightBound && inTopBound && inBottomBound;
-    if (!inBound) {
-      this.state = "closed";
-    }
-  }
-  getClassMap() {
-    return {
-      [this.position]: true,
-      [this.state]: true,
-    };
-  }
-  getSidebarRectangle() {
-    var _a;
-    return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-  }
-  render() {
-    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title: product-title", token: this.token, productId: this.productId, imageWidth: 300, blockTitle: "", mode: this.position === "bottom" ? "continuity" : "grid", useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar })))));
-  }
-  renderSourceImage() {
-    return (h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
-  }
-  isSourceImageValid() {
-    var _a;
-    return ((_a = this.sourceImage) === null || _a === void 0 ? void 0 : _a.length) > 0;
-  }
-  handleAnimationEnd({ animationName }) {
-    const isClosingAnimation = animationName.includes("slideOut");
-    if (!isClosingAnimation)
-      return;
-    this.modalClosed.emit();
-  }
-  get el() { return getElement(this); }
-};
-RecommendationsSidebar.style = recommendationsSidebarCss;
-
-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}";
-
-let VviinnVprButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.position = "bottom";
-    this.sourceImage = null;
-    this.sidebarTitle = "Visually similar products";
-    this.modalScrollbar = false;
-  }
-  render() {
-    return (h(Host, null, h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() }, h("slot", null, h(VisualSearchIcon, null)))));
-  }
-  handleClick() {
-    const sidebar = document.createElement("vviinn-recommendations-sidebar");
-    sidebar.sidebarTitle = this.sidebarTitle;
-    sidebar.productId = this.productId;
-    sidebar.token = this.token;
-    sidebar.position = this.position;
-    sidebar.sourceImage = this.sourceImage;
-    sidebar.widgetScrollbar = this.modalScrollbar;
-    sidebar.addEventListener("modalClosed", () => {
-      document.body.removeChild(sidebar);
-    });
-    document.body.append(sidebar);
-  }
-};
-VviinnVprButton.style = vviinnVprButtonCss;
-
 const createBearerString = (x) => `Bearer ${x}`;
 const createAuthedHeader = (x) => new Headers({
   Authorization: x,
@@ -1221,4 +1137,4 @@ let VviinnVprWidget = class {
 };
 VviinnVprWidget.style = vviinnVprWidgetCss;
 
-export { VviinnCarousel as vviinn_carousel, VviinnProductCard as vviinn_product_card, RecommendationsSidebar as vviinn_recommendations_sidebar, VviinnVprButton as vviinn_vpr_button, VviinnVprWidget as vviinn_vpr_widget };
+export { VviinnCarousel as vviinn_carousel, VviinnProductCard as vviinn_product_card, VviinnVprWidget as vviinn_vpr_widget };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3e85e294.js';
+import { r as registerInstance, h, H as Host } from './index-d7c7df1c.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-3e85e294.js';
-import { i as imageSearchState } from './imageSearch.store-4ca31230.js';
+import { r as registerInstance, h, H as Host } from './index-d7c7df1c.js';
+import { i as imageSearchState } from './imageSearch.store-f35e14f8.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

@@ -0,0 +1,59 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d7c7df1c.js';
+import { b as CrossIcon } from './index-ac2e3b9d.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%)}}";
+
+let RecommendationsSidebar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    this.position = "bottom";
+    this.sourceImage = null;
+    this.widgetScrollbar = false;
+    this.state = "idle";
+  }
+  bodyClickListener(event) {
+    const { clientX, clientY } = event;
+    const sidebarRect = this.getSidebarRectangle();
+    if (!sidebarRect)
+      return;
+    const inLeftBound = clientX >= sidebarRect.left;
+    const inRightBound = clientX <= sidebarRect.right;
+    const inTopBound = clientY >= sidebarRect.top;
+    const inBottomBound = clientY <= sidebarRect.bottom;
+    const inBound = inLeftBound && inRightBound && inTopBound && inBottomBound;
+    if (!inBound) {
+      this.state = "closed";
+    }
+  }
+  getClassMap() {
+    return {
+      [this.position]: true,
+      [this.state]: true,
+    };
+  }
+  getSidebarRectangle() {
+    var _a;
+    return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+  }
+  render() {
+    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title: product-title", token: this.token, productId: this.productId, imageWidth: 300, blockTitle: "", mode: this.position === "bottom" ? "continuity" : "grid", useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar })))));
+  }
+  renderSourceImage() {
+    return (h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
+  }
+  isSourceImageValid() {
+    var _a;
+    return ((_a = this.sourceImage) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  handleAnimationEnd({ animationName }) {
+    const isClosingAnimation = animationName.includes("slideOut");
+    if (!isClosingAnimation)
+      return;
+    this.modalClosed.emit();
+  }
+  get el() { return getElement(this); }
+};
+RecommendationsSidebar.style = recommendationsSidebarCss;
+
+export { RecommendationsSidebar as vviinn_recommendations_sidebar };

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

@@ -0,0 +1,40 @@
+import { r as registerInstance, h, H as Host } from './index-d7c7df1c.js';
+import { V as VisualSearchIcon } from './index-ac2e3b9d.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}";
+
+let VviinnVprButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.position = "bottom";
+    this.sourceImage = null;
+    this.sidebarTitle = "Visually similar products";
+    this.modalScrollbar = false;
+    this.sidebar = null;
+    this.sidebarCloseListener = () => {
+      document.body.removeChild(this.sidebar);
+    };
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() }, h("slot", null, h(VisualSearchIcon, null)))));
+  }
+  handleClick() {
+    const sidebar = document.createElement("vviinn-recommendations-sidebar");
+    sidebar.sidebarTitle = this.sidebarTitle;
+    sidebar.productId = this.productId;
+    sidebar.token = this.token;
+    sidebar.position = this.position;
+    sidebar.sourceImage = this.sourceImage;
+    sidebar.widgetScrollbar = this.modalScrollbar;
+    this.sidebar = sidebar;
+    sidebar.addEventListener("modalClosed", this.sidebarCloseListener);
+    document.body.append(this.sidebar);
+  }
+  disconnectedCallback() {
+    this.sidebar.removeEventListener("modalCLosed", this.sidebarCloseListener);
+    document.body.removeChild(this.sidebar);
+  }
+};
+VviinnVprButton.style = vviinnVprButtonCss;
+
+export { VviinnVprButton as vviinn_vpr_button };

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3e85e294.js';
-import { b as CameraIcon } from './index-017f18de.js';
-import { S as SlotSkeleton } from './customized-slots-a952fb80.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d7c7df1c.js';
+import { a as CameraIcon } from './index-ac2e3b9d.js';
+import { S as SlotSkeleton } from './customized-slots-65b2467d.js';
 
-const vviinnVpsButtonCss = "";
+const vviinnVpsButtonCss = ":host{cursor:pointer}";
 
 let VviinnVpsButton = class {
   constructor(hostRef) {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3e85e294.js';
-import { e as state, i as imageSearchState, O as Option } from './imageSearch.store-4ca31230.js';
-import { s as slotChangeListener } from './customized-slots-a952fb80.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-d7c7df1c.js';
+import { e as state, i as imageSearchState, O as Option } from './imageSearch.store-f35e14f8.js';
+import { s as slotChangeListener } from './customized-slots-65b2467d.js';
 import './Handler-639a4cb3.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}";

package/dist/esm/vviinn-widgets.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3e85e294.js';
-import { g as globalScripts } from './app-globals-b6113170.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d7c7df1c.js';
+import { g as globalScripts } from './app-globals-90d99f95.js';
 
 /*
  Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-carousel_5",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"]}],[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]],[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]]], options);
+  return bootstrapLazy([["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-carousel_3",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-recommendations-sidebar",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"]}]]]], options);
 });

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

@@ -1,6 +1,9 @@
 import { Recommendation } from "../../recommendation/recommendation";
 declare type MoveDirection = "left" | "right";
 export declare type CarouselMode = "grid" | "continuity";
+/**
+ * @part carousel-button
+ **/
 export declare class VviinnCarousel {
   el: HTMLElement;
   moveDirection: MoveDirection;

package/dist/types/components/vviinn-product-card/stories/args.d.ts

@@ -0,0 +1,73 @@
+export declare const argTypes: {
+  imageWidth: {
+    name: string;
+  };
+  imageBorder: {
+    name: string;
+  };
+  imageBorderColor: {
+    name: string;
+    control: {
+      type: string;
+    };
+  };
+  imageBackground: {
+    name: string;
+    description: string;
+  };
+  showBrand: {
+    name: string;
+    description: string;
+  };
+  titleLineCount: {
+    name: string;
+    options: number[];
+    control: {
+      type: string;
+      default: number;
+    };
+  };
+  locale: {
+    name: string;
+    options: string[];
+    control: {
+      type: string;
+      default: number;
+    };
+  };
+  currencyValue: {
+    name: string;
+    options: string[];
+    control: {
+      type: string;
+      default: number;
+    };
+  };
+  contentAlignment: {
+    name: string;
+    options: string[];
+    mapping: {
+      Left: number;
+      Centered: number;
+      Right: number;
+    };
+    control: {
+      type: string;
+      default: number;
+    };
+  };
+  primaryTextColor: {
+    name: string;
+    control: {
+      type: string;
+    };
+    description: string;
+  };
+  secondaryTextColor: {
+    name: string;
+    description: string;
+    control: {
+      type: string;
+    };
+  };
+};

package/dist/types/components/vviinn-product-card/stories/decorators.d.ts

@@ -0,0 +1 @@
+export declare const productDecorator: (story: () => any) => string;

package/dist/types/components/vviinn-product-card/stories/vviinn-product-card.stories.d.ts

@@ -0,0 +1,80 @@
+declare const _default: {
+  title: string;
+  component: string;
+  decorators: ((story: () => any) => string)[];
+  argTypes: {
+    imageWidth: {
+      name: string;
+    };
+    imageBorder: {
+      name: string;
+    };
+    imageBorderColor: {
+      name: string;
+      control: {
+        type: string;
+      };
+    };
+    imageBackground: {
+      name: string;
+      description: string;
+    };
+    showBrand: {
+      name: string;
+      description: string;
+    };
+    titleLineCount: {
+      name: string;
+      options: number[];
+      control: {
+        type: string;
+        default: number;
+      };
+    };
+    locale: {
+      name: string;
+      options: string[];
+      control: {
+        type: string;
+        default: number;
+      };
+    };
+    currencyValue: {
+      name: string;
+      options: string[];
+      control: {
+        type: string;
+        default: number;
+      };
+    };
+    contentAlignment: {
+      name: string;
+      options: string[];
+      mapping: {
+        Left: number;
+        Centered: number;
+        Right: number;
+      };
+      control: {
+        type: string;
+        default: number;
+      };
+    };
+    primaryTextColor: {
+      name: string;
+      control: {
+        type: string;
+      };
+      description: string;
+    };
+    secondaryTextColor: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Default: any;