vviinn-widgets 2.2.2 → 2.3.0

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-741a970d.js');
 const imageSearch_store = require('./imageSearch.store-128957a4.js');
 const Handler = require('./Handler-d1a8a86a.js');
-const index$1 = require('./index-c493804d.js');
+const index$1 = require('./index-363cfe0b.js');
 const customizedSlots = require('./customized-slots-5d904d8e.js');
 
 // -------------------------------------------------------------------------------------

package/dist/cjs/{index-c493804d.js → index-363cfe0b.js}

@@ -23,8 +23,8 @@ const OnboardingCard3Icon = () => (index.h("svg", { xmlns: "http://www.w3.org/20
   index.h("path", { class: "colored", d: "M100 7.94H20a12 12 0 00-12 12v80a11.998 11.998 0 0012 12h80c3.183 0 6.235-1.264 8.485-3.515A11.996 11.996 0 00112 99.94v-80a11.998 11.998 0 00-12-12zm-8 69.24a1.69 1.69 0 01-.85 1.45l-30.31 17.1a1.77 1.77 0 01-1.67 0l-30.32-17.1a1.689 1.689 0 01-.85-1.45V42.82a1.66 1.66 0 01.85-1.45l30.32-17.21a1.71 1.71 0 011.67 0l30.31 17.21a1.67 1.67 0 01.85 1.45v34.36z" })));
 const CheckIcon = () => (index.h("svg", { width: "14", height: "11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
-const ChevronIcon = () => (index.h("svg", { width: "9", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  index.h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z", fill: "#525252" })));
+const ChevronIcon = () => (index.h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
 const VisualSearchIcon = () => (index.h("svg", { width: "22", height: "22", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M18 0h-3v2h3c1.103 0 2 .897 2 2v3h2V4c0-2.206-1.794-4-4-4Zm2 18c0 1.103-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4v-3h-2v3ZM2 18v-3H0v3c0 2.206 1.794 4 4 4h3v-2H4c-1.103 0-2-.897-2-2ZM2 4c0-1.103.897-2 2-2h3V0H4C1.794 0 0 1.794 0 4v3h2V4Zm6 6.5C8 9.122 9.122 8 10.5 8S13 9.122 13 10.5 11.878 13 10.5 13A2.503 2.503 0 0 1 8 10.5Zm7.5 6.5a1.503 1.503 0 0 0 1.061-2.561l-2.012-2.011c.293-.6.448-1.26.451-1.928C15 8.019 12.981 6 10.5 6A4.505 4.505 0 0 0 6 10.5c0 2.481 2.019 4.5 4.5 4.5.693 0 1.341-.17 1.928-.451l2.011 2.012c.293.293.677.439 1.061.439Z" })));
 const CrossIcon = () => (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },

package/dist/cjs/loader.cjs.js

@@ -16,7 +16,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_5.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"]}],[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.cjs",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]]], options);
+  return index.bootstrapLazy([["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"imageLoaded":[32]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"]}]]]], options);
   });
 };
 

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-741a970d.js');
 const imageSearch_store = require('./imageSearch.store-128957a4.js');
-const index$1 = require('./index-c493804d.js');
+const index$1 = require('./index-363cfe0b.js');
 const Handler = require('./Handler-d1a8a86a.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";
@@ -56,7 +56,7 @@ let VviinnCarousel = class {
       content: true,
       [this.moveDirection]: true,
       [this.mode]: true,
-      "show-scrollbar": this.showScroll
+      "show-scrollbar": this.showScroll,
     };
   }
   handleResize() {
@@ -205,7 +205,7 @@ let VviinnCarousel = class {
       }, onClick: () => this.scroll(index$1) })));
   }
   render() {
-    return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, index.h("button", { class: "prev", onClick: () => this.showPrev() }, index.h(index$1.ChevronIcon, null)), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), index.h("button", { class: "next", onClick: () => this.showNext() }, index.h(index$1.ChevronIcon, null))), this.showBullets() ? (index.h("div", { class: "bullets" }, this.renderBullets())) : ("")));
+    return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, index.h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button" }, index.h(index$1.ChevronIcon, null)), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), index.h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" }, index.h(index$1.ChevronIcon, null))), this.showBullets() ? (index.h("div", { class: "bullets" }, this.renderBullets())) : ("")));
   }
   get el() { return index.getElement(this); }
 };
@@ -386,90 +386,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) {
-    index.registerInstance(this, hostRef);
-    this.modalClosed = index.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 (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(index$1.CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.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 (index.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 index.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) {
-    index.registerInstance(this, hostRef);
-    this.position = "bottom";
-    this.sourceImage = null;
-    this.sidebarTitle = "Visually similar products";
-    this.modalScrollbar = false;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() }, index.h("slot", null, index.h(index$1.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,
@@ -1227,6 +1143,4 @@ VviinnVprWidget.style = vviinnVprWidgetCss;
 
 exports.vviinn_carousel = VviinnCarousel;
 exports.vviinn_product_card = VviinnProductCard;
-exports.vviinn_recommendations_sidebar = RecommendationsSidebar;
-exports.vviinn_vpr_button = VviinnVprButton;
 exports.vviinn_vpr_widget = VviinnVprWidget;

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

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-741a970d.js');
+const index$1 = require('./index-363cfe0b.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) {
+    index.registerInstance(this, hostRef);
+    this.modalClosed = index.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 (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(index$1.CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.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 (index.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 index.getElement(this); }
+};
+RecommendationsSidebar.style = recommendationsSidebarCss;
+
+exports.vviinn_recommendations_sidebar = RecommendationsSidebar;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-741a970d.js');
+const index$1 = require('./index-363cfe0b.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) {
+    index.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 (index.h(index.Host, null, index.h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() }, index.h("slot", null, index.h(index$1.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;
+
+exports.vviinn_vpr_button = VviinnVprButton;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-741a970d.js');
-const index$1 = require('./index-c493804d.js');
+const index$1 = require('./index-363cfe0b.js');
 const customizedSlots = require('./customized-slots-5d904d8e.js');
 
 const vviinnVpsButtonCss = "";

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

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

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

@@ -97,6 +97,10 @@ button {
   margin: 0;
 }
 
+button {
+  fill: #525252;
+}
+
 button.prev svg {
   transform: rotate(180deg);
   margin-left: -5px;

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

@@ -5,6 +5,9 @@ const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
 const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
 const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
 const CONTENT_GROUP_CSS_CLASS = "items-group";
+/**
+ * @part carousel-button
+ **/
 export class VviinnCarousel {
   constructor() {
     this.moveDirection = "right";
@@ -47,7 +50,7 @@ export class VviinnCarousel {
       content: true,
       [this.moveDirection]: true,
       [this.mode]: true,
-      "show-scrollbar": this.showScroll
+      "show-scrollbar": this.showScroll,
     };
   }
   handleResize() {
@@ -198,10 +201,10 @@ export class VviinnCarousel {
   render() {
     return (h(Host, { class: this.getClassMap() },
       h("div", { class: Object.assign({ body: true }, this.getClassMap()) },
-        h("button", { class: "prev", onClick: () => this.showPrev() },
+        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() },
+        h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" },
           h(ChevronIcon, null))),
       this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
   }

package/dist/collection/components/vviinn-icons/index.js

@@ -22,8 +22,8 @@ export const CheckIcon = () => (h("svg", { width: "14", height: "11", fill: "non
   h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
 export const LoaderIcon = () => (h("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 28" },
   h("path", { fill: "#fff", d: "M23,14a9,9,0,1,1-9-9V2A12,12,0,1,0,26,14Z" })));
-export const ChevronIcon = () => (h("svg", { width: "9", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z", fill: "#525252" })));
+export const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
 export const VisualSearchIcon = () => (h("svg", { width: "22", height: "22", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M18 0h-3v2h3c1.103 0 2 .897 2 2v3h2V4c0-2.206-1.794-4-4-4Zm2 18c0 1.103-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4v-3h-2v3ZM2 18v-3H0v3c0 2.206 1.794 4 4 4h3v-2H4c-1.103 0-2-.897-2-2ZM2 4c0-1.103.897-2 2-2h3V0H4C1.794 0 0 1.794 0 4v3h2V4Zm6 6.5C8 9.122 9.122 8 10.5 8S13 9.122 13 10.5 11.878 13 10.5 13A2.503 2.503 0 0 1 8 10.5Zm7.5 6.5a1.503 1.503 0 0 0 1.061-2.561l-2.012-2.011c.293-.6.448-1.26.451-1.928C15 8.019 12.981 6 10.5 6A4.505 4.505 0 0 0 6 10.5c0 2.481 2.019 4.5 4.5 4.5.693 0 1.341-.17 1.928-.451l2.011 2.012c.293.293.677.439 1.061.439Z" })));
 export const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },

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

@@ -0,0 +1,73 @@
+export const argTypes = {
+  imageWidth: {
+    name: "Card width (px)",
+  },
+  imageBorder: {
+    name: "Image border",
+  },
+  imageBorderColor: {
+    name: "Image border color",
+    control: {
+      type: "color",
+    },
+  },
+  imageBackground: {
+    name: "Image background",
+    description: "Adding a light-gray filter on top of the image to distinguish it from the rest of the product card content.",
+  },
+  showBrand: {
+    name: "Show brand",
+    description: "Using the [title] attribute from product feed.",
+  },
+  titleLineCount: {
+    name: "Number of text lines for Product title",
+    options: [1, 2, 3],
+    control: {
+      type: "select",
+      default: 0,
+    },
+  },
+  locale: {
+    name: "Locale",
+    options: ["de-DE", "en-US"],
+    control: {
+      type: "select",
+      default: 0,
+    },
+  },
+  currencyValue: {
+    name: "Currency",
+    options: ["$", "€", "£", "¥", "₽"],
+    control: {
+      type: "select",
+      default: 0,
+    },
+  },
+  contentAlignment: {
+    name: "Content alignment",
+    options: ["Left", "Centered", "Right"],
+    mapping: {
+      Left: 0,
+      Centered: 1,
+      Right: 2,
+    },
+    control: {
+      type: "select",
+      default: 0,
+    },
+  },
+  primaryTextColor: {
+    name: "Primary text color",
+    control: {
+      type: "color",
+    },
+    description: "Used where the most user attention is needed: product brand, product title, and price.",
+  },
+  secondaryTextColor: {
+    name: "Secondary text color",
+    description: "Used in Old Price",
+    control: {
+      type: "color",
+    },
+  },
+};

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

@@ -0,0 +1,51 @@
+export const productDecorator = (story) => `
+<style>
+html, body, #root, #root-inner {
+  width: 100%;
+  height: 100%;
+}
+
+#root-inner {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.product-wrapper {
+  width: 240px;
+}
+
+vviinn-product-card {
+  align-items: start;
+}
+
+vviinn-product-card::part(image) {
+  border: 1px solid #DDDDDD;
+}
+
+vviinn-product-card::part(brand) {
+  display: flex;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+vviinn-product-card::part(brand),
+vviinn-product-card::part(title) {
+  text-align: left;
+}
+
+vviinn-product-card::part(title) {
+  order: 2;
+  max-width: unset;
+}
+
+vviinn-product-card::part(price-container) {
+  order: 3;
+}
+
+</style>
+<div class="product-wrapper">
+  ${story()}
+</div>
+`;

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

@@ -0,0 +1,105 @@
+import { argTypes } from "./args";
+import { productDecorator } from "./decorators";
+export default {
+  title: "Elements/Product Card",
+  component: "vviinn-product-card",
+  decorators: [
+    productDecorator
+  ],
+  argTypes
+};
+const showImageBorders = (x, color) => {
+  const borderRule = x ? `1px solid ${color}` : "none";
+  return `
+  vviinn-product-card::part(image) {
+    border: ${borderRule};
+  }
+`;
+};
+const setupBrandVisibility = (show) => `
+  vviinn-product-card::part(brand) {
+    display: ${show ? "flex" : "none"};
+  }
+`;
+const setupTitleLineCount = (count) => `
+  vviinn-product-card::part(title) {
+    -webkit-line-clamp: ${count};
+  }
+`;
+const allignementLeft = `
+  vviinn-product-card::part(title),
+  vviinn-product-card::part(brand),
+  vviinn-product-card::part(type),
+  vviinn-product-card::part(deeplink),
+  vviinn-product-card::part(price-container) {
+    align-self: start;
+    text-align: left;
+  }`;
+const allignementCenter = `
+  vviinn-product-card::part(title),
+  vviinn-product-card::part(brand),
+  vviinn-product-card::part(type),
+  vviinn-product-card::part(deeplink),
+  vviinn-product-card::part(price-container) {
+    align-self: center;
+    text-align: center;
+  }`;
+const allignementRight = `
+  vviinn-product-card::part(title),
+  vviinn-product-card::part(brand),
+  vviinn-product-card::part(type),
+  vviinn-product-card::part(deeplink),
+  vviinn-product-card::part(price-container) {
+    align-self: end;
+    text-align: right;
+  }`;
+const allignement = new Map([
+  [0, allignementLeft],
+  [1, allignementCenter],
+  [2, allignementRight],
+]);
+const Template = (args) => `
+  <style>
+    ${allignement.get(args.contentAlignment)}
+    ${showImageBorders(args.imageBorder, args.imageBorderColor)}
+    ${setupBrandVisibility(args.showBrand)}
+    ${setupTitleLineCount(args.titleLineCount)}
+
+    vviinn-product-card::part(title),
+    vviinn-product-card::part(brand),
+    vviinn-product-card::part(type),
+    vviinn-product-card::part(price-sale),
+    vviinn-product-card::part(price-regular) {
+      color: ${args.primaryTextColor};
+    }
+
+    vviinn-product-card::part(price-outdated) {
+      color: ${args.secondaryTextColor};
+    }
+  </style>
+  <vviinn-product-card
+    product-title="Couchtisch Rolf Benz 8770 Ronald Schmitt"
+    brand="Ronald Schmitt"
+    product-type="Couchtische"
+    price="3629"
+    sale-price="1653"
+    image="https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg"
+    image-width="${args.imageWidth}"
+    dimmed-background="${args.imageBackground}"
+    locale="${args.locale}"
+    currency="${args.currencyValue}"
+  ></vviinn-product-card>`;
+export const Default = Template.bind({});
+Default.args = {
+  imageWidth: 240,
+  contentAlignment: "Left",
+  imageBorder: true,
+  imageBorderColor: "#dddddd",
+  imageBackground: false,
+  primaryTextColor: "#161616",
+  secondaryTextColor: "#757575",
+  showBrand: false,
+  titleLineCount: 2,
+  locale: "en-US",
+  currencyValue: "€"
+};