vviinn-widgets 2.48.0 → 2.48.1

package/dist/cjs/{package-60884765.js → package-504b33d0.js}

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

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

@@ -6,7 +6,7 @@ const index = require('./index-5619b5ec.js');
 const search_store = require('./search.store-0b319593.js');
 const i18next = require('./i18next-74ff3413.js');
 const customizedSlots = require('./customized-slots-1b59bd38.js');
-const _package = require('./package-60884765.js');
+const _package = require('./package-504b33d0.js');
 const index$1 = require('./index-279a6a0f.js');
 
 const BasketIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -25,6 +25,7 @@ const UpdateIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg",
 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 SET_MODE_IMAGE_WIDTH = "--vviinn-set-mode-image-width";
 const CONTENT_GROUP_CSS_CLASS = "items-group";
 const SET_MODE_INITIAL_DISCOUNT = 5;
 const SET_MODE_MAX_DISCOUNT = 15;
@@ -41,7 +42,7 @@ const generateRandomNumber = (min, max) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 };
 
-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}.body.set{justify-content:space-between;overflow-x:auto;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}.body.set .content{max-width:-moz-fit-content;max-width:fit-content;overflow:unset}.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;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.set{grid-gap:20px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.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}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}";
+const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4)}.body{display:flex;position:relative;flex-direction:column}.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;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) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.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}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}.body.set{max-width:100%;justify-content:space-between;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}.content.set{grid-gap:20px;height:-moz-fit-content;height:fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow:unset}";
 
 const VviinnCarousel = class {
   constructor(hostRef) {
@@ -50,6 +51,7 @@ const VviinnCarousel = class {
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.defaultAnimationInterval = 2000;
     this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
+    this.handleWindowResize = () => this.setImageWidthSetMode("100%");
     this.isLastGroup = () => this.activeContentGroup === this.getContentGroups().length - 1 &&
       this.isGridMode;
     this.isFirstGroup = () => this.activeContentGroup === 0 && this.isGridMode;
@@ -61,10 +63,12 @@ const VviinnCarousel = class {
       if (recommendationIndex + step < this.recommendations.length) {
         newCrossSellingRecommendations[crossSellingIndex] =
           this.recommendations[recommendationIndex + step];
+        this.crossSellingRecommendations = [...newCrossSellingRecommendations];
         let element = this.el.querySelector(`[data-id="${productId}"]`);
         const button = element.shadowRoot.querySelector(".update-button");
         button === null || button === void 0 ? void 0 : button.classList.add("hidden");
-        this.crossSellingRecommendations = [...newCrossSellingRecommendations];
+        const imageWidth = element.getBoundingClientRect().width;
+        this.setImageWidthSetMode(`${imageWidth}px`);
         const animationTimer = setTimeout(() => {
           if (recommendationIndex + step * 2 <= this.recommendations.length - 1) {
             button === null || button === void 0 ? void 0 : button.classList.remove("hidden");
@@ -102,6 +106,7 @@ const VviinnCarousel = class {
     this.isContinuityMode = this.mode === "continuity";
     const columnsNumber = this.getColumnsNumber();
     if (this.isSetMode) {
+      window.addEventListener("resize", this.handleWindowResize);
       this.sourceProduct = this.recommendations[0];
       this.recommendations = this.recommendations.slice(1);
     }
@@ -111,6 +116,7 @@ const VviinnCarousel = class {
   }
   disconnectedCallback() {
     this.resizeObserver.disconnect();
+    window.removeEventListener("resize", this.handleWindowResize);
   }
   componentDidLoad() {
     this.setWidth();
@@ -155,6 +161,9 @@ const VviinnCarousel = class {
       : widthInDocument;
     this.el.style.setProperty(CAROUSEL_IMAGE_WIDTH_CSS_VAR, `${itemWidth}px`);
   }
+  setImageWidthSetMode(width) {
+    this.el.style.setProperty(SET_MODE_IMAGE_WIDTH, width);
+  }
   getContentClassMap() {
     return {
       content: true,
@@ -292,7 +301,7 @@ const VviinnCarousel = class {
     const salePrice = this.isSetMode
       ? setModeDiscount
       : recommendation.price.sale;
-    return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: salePrice, responsive: this.isGridMode || this.isSetMode, dimmedBackground: this.isContinuityMode || this.isSetMode, campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode, "data-id": recommendation.productId, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount }));
+    return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: salePrice, responsive: this.isGridMode, dimmedBackground: this.isContinuityMode || this.isSetMode, campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode, "data-id": recommendation.productId, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount }));
   }
   renderRecommendationGroup(elements) {
     return (index.h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));
@@ -519,7 +528,7 @@ const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
 const ResponsiveImage = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
   index.h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd })));
 
-const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100%;--min-image-size-set-mode:155px}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}.image.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}picture::before{content:\"\";opacity:0;width:100%;height:100%;box-sizing:border-box;display:block;top:0;left:0;position:absolute}.update-button{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;z-index:1;background-color:rgba(127, 127, 127, 0.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;color:white;cursor:pointer}.update-button::after{content:\"\";position:absolute;top:-4px;right:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}.update-button:hover{background-color:rgba(127, 127, 127, 0.5)}.update-button.hidden{display:none}.basket-button{height:44px;font-size:16px;padding:10px 12px;box-sizing:border-box;border:none;cursor:pointer}.basket-button.basket-button-grid{width:100%;background-color:none;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background-color:#f7f7f7}.basket-button-continuity:hover{background-color:#eaeaea}.basket-button-grid:hover{background-color:#f7f7f7}:host(.dimmed) picture::after{content:\"\";width:100%;height:100%;box-sizing:border-box;background-color:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}:host(.set-mode){line-height:20px}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");background-color:transparent;position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px)}:host(.animated) .update-button{display:none}:host(.set-mode) .basket-button{display:flex;gap:8px;align-items:center;box-sizing:border-box;justify-content:center;border:none;background-color:#f4f4f4;font-weight:500;color:#525252}:host(.set-mode) .title{font-weight:400;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.set-mode){align-items:flex-start}:host(.set-mode) .image{border:none;min-width:var(--min-image-size-set-mode);min-height:var(--min-image-size-set-mode)}:host(.set-mode.product-card--source){position:relative;flex-grow:1}:host(.set-mode.product-card--source) .image{aspect-ratio:1;width:100%;height:100%}:host(.set-mode.product-card--source)::after{content:url(\"data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6667 17.3334H8.00002C7.62224 17.3334 7.30558 17.2056 7.05002 16.95C6.79446 16.6945 6.66669 16.3778 6.66669 16C6.66669 15.6222 6.79446 15.3056 7.05002 15.05C7.30558 14.7945 7.62224 14.6667 8.00002 14.6667H14.6667V8.00002C14.6667 7.62224 14.7945 7.30558 15.05 7.05002C15.3056 6.79446 15.6222 6.66669 16 6.66669C16.3778 6.66669 16.6945 6.79446 16.95 7.05002C17.2056 7.30558 17.3334 7.62224 17.3334 8.00002V14.6667H24C24.3778 14.6667 24.6945 14.7945 24.95 15.05C25.2056 15.3056 25.3334 15.6222 25.3334 16C25.3334 16.3778 25.2056 16.6945 24.95 16.95C24.6945 17.2056 24.3778 17.3334 24 17.3334H17.3334V24C17.3334 24.3778 17.2056 24.6945 16.95 24.95C16.6945 25.2056 16.3778 25.3334 16 25.3334C15.6222 25.3334 15.3056 25.2056 15.05 24.95C14.7945 24.6945 14.6667 24.3778 14.6667 24V17.3334Z' fill='%23A8A8A8'/%3E%3C/svg%3E\");background-color:white;position:absolute;padding:16px;top:calc(50% - 48px);right:-88px;outline:1px solid #f4f4f4;border-radius:50%;width:32px;height:32px}@media (max-width: 768px){:host(.set-mode.product-card--source)::after{padding:8px;right:-24px}}:host(.set-mode) .basket-button.applied-discount{background:transparent;border:1px solid #e0e0e0}:host(.set-mode) .price-container{flex-direction:row;gap:12px}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";
+const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100%;--min-image-size-set-mode:155px}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}.image.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}picture::before{content:\"\";opacity:0;width:100%;height:100%;box-sizing:border-box;display:block;top:0;left:0;position:absolute}.update-button{position:absolute;top:8px;right:8px;padding:6px;width:32px;height:32px;z-index:1;background-color:rgba(127, 127, 127, 0.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;color:white;cursor:pointer}.update-button svg{width:20px;height:20px}.update-button::after{content:\"\";position:absolute;top:-4px;right:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}.update-button:hover{background-color:rgba(127, 127, 127, 0.5)}.update-button.hidden{display:none}.basket-button{height:44px;font-size:16px;padding:10px 12px;box-sizing:border-box;border:none;cursor:pointer}.basket-button.basket-button-grid{width:100%;background-color:none;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background-color:#f7f7f7}.basket-button-continuity:hover{background-color:#eaeaea}.basket-button-grid:hover{background-color:#f7f7f7}:host(.dimmed) picture::after{content:\"\";width:100%;height:100%;box-sizing:border-box;background-color:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");background-color:transparent;position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px)}:host(.animated) .update-button{display:none}:host(.set-mode){line-height:20px;align-items:flex-start;height:auto}:host(.set-mode) .basket-button{display:flex;gap:8px;align-items:center;box-sizing:border-box;justify-content:center;border:none;background-color:#f4f4f4;font-weight:500;color:#525252}:host(.set-mode:not(.animated)) .basket-button{margin-top:auto}:host(.set-mode) .basket-button:hover{background-color:rgb(234, 234, 234)}:host(.set-mode) .title{font-weight:400}:host(.set-mode) .image{width:var(--vviinn-set-mode-image-width, 100%);height:auto;border:none;aspect-ratio:1;min-width:var(--min-image-size-set-mode);min-height:var(--min-image-size-set-mode)}:host(.set-mode.product-card--source){height:-moz-fit-content;height:fit-content;position:relative;flex-grow:1}:host(.set-mode.product-card--source) .image{aspect-ratio:1;width:100%;height:100%}:host(.set-mode.product-card--source)::after{content:url(\"data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6667 17.3334H8.00002C7.62224 17.3334 7.30558 17.2056 7.05002 16.95C6.79446 16.6945 6.66669 16.3778 6.66669 16C6.66669 15.6222 6.79446 15.3056 7.05002 15.05C7.30558 14.7945 7.62224 14.6667 8.00002 14.6667H14.6667V8.00002C14.6667 7.62224 14.7945 7.30558 15.05 7.05002C15.3056 6.79446 15.6222 6.66669 16 6.66669C16.3778 6.66669 16.6945 6.79446 16.95 7.05002C17.2056 7.30558 17.3334 7.62224 17.3334 8.00002V14.6667H24C24.3778 14.6667 24.6945 14.7945 24.95 15.05C25.2056 15.3056 25.3334 15.6222 25.3334 16C25.3334 16.3778 25.2056 16.6945 24.95 16.95C24.6945 17.2056 24.3778 17.3334 24 17.3334H17.3334V24C17.3334 24.3778 17.2056 24.6945 16.95 24.95C16.6945 25.2056 16.3778 25.3334 16 25.3334C15.6222 25.3334 15.3056 25.2056 15.05 24.95C14.7945 24.6945 14.6667 24.3778 14.6667 24V17.3334Z' fill='%23A8A8A8'/%3E%3C/svg%3E\");background-color:white;position:absolute;padding:16px;top:calc(50% - 48px);right:-88px;outline:1px solid #f4f4f4;border-radius:50%;width:32px;height:32px}@media (max-width: 768px){:host(.set-mode.product-card--source)::after{padding:8px;right:-24px}}:host(.set-mode) .basket-button.applied-discount{background:transparent;border:1px solid #e0e0e0}:host(.set-mode) .price-container{flex-direction:row;gap:12px}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}.discount-label{position:absolute;left:0;top:13px;line-height:20px;padding:2px 4px;border-radius:0px 4px 4px 0px;color:white;background-color:#ff3944;letter-spacing:0.5px}";
 
 const VviinnProductCard = class {
   constructor(hostRef) {
@@ -656,7 +665,7 @@ const VviinnProductCard = class {
         dimmed: this.dimmedBackground,
         animated: this.isTransitioning,
         "set-mode": this.isSetMode,
-      }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button, update-button-item" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 20 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : search_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : search_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : search_store.state.locale }))), (this.addToBasketShow || this.isSetMode) && (index.h(index.Fragment, null, this.isTransitioning ? (index.h("vviinn-skeleton", { height: 44 })) : (index.h("button", { class: {
+      }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button, update-button-item" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 20 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : search_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : search_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : search_store.state.locale }), this.isSetMode && !this.appliedDiscountPercentage && (index.h("div", { class: "discount-label" }, `-${this.currentDiscountPercentage}%`)))), (this.addToBasketShow || this.isSetMode) && (index.h(index.Fragment, null, this.isTransitioning ? (index.h("vviinn-skeleton", { height: 44 })) : (index.h("button", { class: {
         "basket-button": true,
         "basket-button-grid": this.isGridMode || this.isSetMode,
         "basket-button-continuity ": this.isContinuityMode,
@@ -683,7 +692,7 @@ const VviinnProductCard = class {
 };
 VviinnProductCard.style = vviinnProductCardCss;
 
-const vviinnSkeletonCss = ":host{display:block;width:100%;height:100%}.vviinn-skeleton{display:inline-block;animation:pulse 1.2s infinite;line-height:20px}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";
+const vviinnSkeletonCss = ":host{display:block;width:100%;height:100%;line-height:0}.vviinn-skeleton{display:inline-block;animation:pulse 1.2s infinite}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";
 
 const VviinnSkeleton = class {
   constructor(hostRef) {
@@ -1402,7 +1411,7 @@ const resources = {
   },
 };
 
-const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}.widget-header{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}.widget-header h3{margin-top:8px;margin-bottom:0;font-size:14px;font-weight:400;line-height:20px}.update-button{display:flex;align-items:center;justify-content:center;color:#525252;gap:8px;padding:8px 10px;background:rgb(244, 244, 244);border:none;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
+const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}:host(.set) vviinn-carousel{overflow-x:auto}:host(.set) vviinn-carousel::-webkit-scrollbar{display:none}.widget-header{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}.widget-header h3{margin-top:8px;margin-bottom:0;font-size:14px;font-weight:400;line-height:20px}.update-button{display:flex;align-items:center;justify-content:center;color:#525252;gap:8px;padding:8px 10px;background:rgb(244, 244, 244);border:none;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -1546,7 +1555,7 @@ const VviinnVprWidget = class {
   async componentWillLoad() {
     await i18next.instance.init({
       lng: this.locale,
-      fallbackLng: "de-DE",
+      fallbackLng: "en",
       resources,
     });
     if (this.excluded) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const _package = require('./package-60884765.js');
+const _package = require('./package-504b33d0.js');
 const VisualSearchIcon = require('./VisualSearchIcon-1180d079.js');
 
 const vviinnVprButtonCss = ":host{display:block}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const _package = require('./package-60884765.js');
+const _package = require('./package-504b33d0.js');
 const customizedSlots = require('./customized-slots-1b59bd38.js');
 const constants = require('./constants-7684cbfc.js');
 

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5619b5ec.js');
 const search_store = require('./search.store-0b319593.js');
 const i18next = require('./i18next-74ff3413.js');
-const _package = require('./package-60884765.js');
+const _package = require('./package-504b33d0.js');
 const customizedSlots = require('./customized-slots-1b59bd38.js');
 const index$1 = require('./index-279a6a0f.js');
 const constants = require('./constants-7684cbfc.js');
@@ -409,7 +409,7 @@ const VviinnVpsWidget = class {
   async componentWillLoad() {
     await i18next.instance.init({
       lng: this.locale,
-      fallbackLng: "de-DE",
+      fallbackLng: "en",
       resources,
     });
     customizedSlots.slotChangeListener(this, this.el);

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

@@ -1,6 +1,7 @@
 export const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
 export const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
 export const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
+export const SET_MODE_IMAGE_WIDTH = "--vviinn-set-mode-image-width";
 export const CONTENT_GROUP_CSS_CLASS = "items-group";
 export const SET_MODE_INITIAL_DISCOUNT = 5;
 export const SET_MODE_MAX_DISCOUNT = 15;

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

@@ -1,42 +1,14 @@
 :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;
 }
 
-.body.set {
-  justify-content: space-between;
-  overflow-x: auto;
-  margin-left: auto;
-  display: flex;
-  flex-direction: row;
-  gap: 112px;
-}
-
-.body.set::-webkit-scrollbar {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  .body.set {
-    gap: 40px;
-  }
-}
-
-.body.set .content {
-  max-width: -moz-fit-content;
-  max-width: fit-content;
-  overflow: unset;
-}
-
 .bullets {
   margin-top: 16px;
   display: flex;
@@ -77,10 +49,6 @@
   padding-bottom: 16px;
 }
 
-.content.set {
-  grid-gap: 20px;
-}
-
 .content.left > * {
   scroll-snap-align: start;
 }
@@ -152,3 +120,31 @@ vviinn-product-card::part(price-container) {
     grid-template-columns: repeat(2, 1fr);
   }
 }
+
+.body.set {
+  max-width: 100%;
+  justify-content: space-between;
+  margin-left: auto;
+  display: flex;
+  flex-direction: row;
+  gap: 112px;
+}
+
+.body.set::-webkit-scrollbar {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .body.set {
+    gap: 40px;
+  }
+}
+
+.content.set {
+  grid-gap: 20px;
+  height: -moz-fit-content;
+  height: fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  overflow: unset;
+}

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

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { chunksOf } from "fp-ts/lib/Array";
 import { ChevronIcon } from "../vviinn-icons";
-import { CAROUSEL_IMAGE_WIDTH_CSS_VAR, CAROUSEL_WIDTH_CSS_VAR, COLUMNS_NUMBER_CSS_VAR, CONTENT_GROUP_CSS_CLASS, SET_MODE_DISCOUNT_STEP, SET_MODE_INITIAL_DISCOUNT, SET_MODE_MAX_DISCOUNT, } from "./constants";
+import { CAROUSEL_IMAGE_WIDTH_CSS_VAR, CAROUSEL_WIDTH_CSS_VAR, COLUMNS_NUMBER_CSS_VAR, CONTENT_GROUP_CSS_CLASS, SET_MODE_DISCOUNT_STEP, SET_MODE_IMAGE_WIDTH, SET_MODE_INITIAL_DISCOUNT, SET_MODE_MAX_DISCOUNT, } from "./constants";
 import { calculateDiscount } from "../../utils/number";
 /**
  * @part carousel-button
@@ -12,6 +12,7 @@ export class VviinnCarousel {
     this.resizeObserver = new ResizeObserver(() => this.handleResize());
     this.defaultAnimationInterval = 2000;
     this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
+    this.handleWindowResize = () => this.setImageWidthSetMode("100%");
     this.isLastGroup = () => this.activeContentGroup === this.getContentGroups().length - 1 &&
       this.isGridMode;
     this.isFirstGroup = () => this.activeContentGroup === 0 && this.isGridMode;
@@ -23,10 +24,12 @@ export class VviinnCarousel {
       if (recommendationIndex + step < this.recommendations.length) {
         newCrossSellingRecommendations[crossSellingIndex] =
           this.recommendations[recommendationIndex + step];
+        this.crossSellingRecommendations = [...newCrossSellingRecommendations];
         let element = this.el.querySelector(`[data-id="${productId}"]`);
         const button = element.shadowRoot.querySelector(".update-button");
         button === null || button === void 0 ? void 0 : button.classList.add("hidden");
-        this.crossSellingRecommendations = [...newCrossSellingRecommendations];
+        const imageWidth = element.getBoundingClientRect().width;
+        this.setImageWidthSetMode(`${imageWidth}px`);
         const animationTimer = setTimeout(() => {
           if (recommendationIndex + step * 2 <= this.recommendations.length - 1) {
             button === null || button === void 0 ? void 0 : button.classList.remove("hidden");
@@ -64,6 +67,7 @@ export class VviinnCarousel {
     this.isContinuityMode = this.mode === "continuity";
     const columnsNumber = this.getColumnsNumber();
     if (this.isSetMode) {
+      window.addEventListener("resize", this.handleWindowResize);
       this.sourceProduct = this.recommendations[0];
       this.recommendations = this.recommendations.slice(1);
     }
@@ -73,6 +77,7 @@ export class VviinnCarousel {
   }
   disconnectedCallback() {
     this.resizeObserver.disconnect();
+    window.removeEventListener("resize", this.handleWindowResize);
   }
   componentDidLoad() {
     this.setWidth();
@@ -117,6 +122,9 @@ export class VviinnCarousel {
       : widthInDocument;
     this.el.style.setProperty(CAROUSEL_IMAGE_WIDTH_CSS_VAR, `${itemWidth}px`);
   }
+  setImageWidthSetMode(width) {
+    this.el.style.setProperty(SET_MODE_IMAGE_WIDTH, width);
+  }
   getContentClassMap() {
     return {
       content: true,
@@ -254,7 +262,7 @@ export class VviinnCarousel {
     const salePrice = this.isSetMode
       ? setModeDiscount
       : recommendation.price.sale;
-    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: salePrice, responsive: this.isGridMode || this.isSetMode, dimmedBackground: this.isContinuityMode || this.isSetMode, campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode, "data-id": recommendation.productId, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount }));
+    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: salePrice, responsive: this.isGridMode, dimmedBackground: this.isContinuityMode || this.isSetMode, campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode, "data-id": recommendation.productId, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount }));
   }
   renderRecommendationGroup(elements) {
     return (h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));

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

@@ -100,9 +100,7 @@ picture::before {
   position: absolute;
   top: 8px;
   right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  padding: 6px;
   width: 32px;
   height: 32px;
   z-index: 1;
@@ -114,6 +112,11 @@ picture::before {
   cursor: pointer;
 }
 
+.update-button svg {
+  width: 20px;
+  height: 20px;
+}
+
 .update-button::after {
   content: "";
   position: absolute;
@@ -172,10 +175,6 @@ picture::before {
   mix-blend-mode: multiply;
 }
 
-:host(.set-mode) {
-  line-height: 20px;
-}
-
 :host(.animated) picture::after {
   mix-blend-mode: normal;
 }
@@ -199,6 +198,12 @@ picture::before {
   display: none;
 }
 
+:host(.set-mode) {
+  line-height: 20px;
+  align-items: flex-start;
+  height: auto;
+}
+
 :host(.set-mode) .basket-button {
   display: flex;
   gap: 8px;
@@ -211,24 +216,30 @@ picture::before {
   color: #525252;
 }
 
-:host(.set-mode) .title {
-  font-weight: 400;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+:host(.set-mode:not(.animated)) .basket-button {
+  margin-top: auto;
 }
 
-:host(.set-mode) {
-  align-items: flex-start;
+:host(.set-mode) .basket-button:hover {
+  background-color: rgb(234, 234, 234);
+}
+
+:host(.set-mode) .title {
+  font-weight: 400;
 }
 
 :host(.set-mode) .image {
+  width: var(--vviinn-set-mode-image-width, 100%);
+  height: auto;
   border: none;
+  aspect-ratio: 1;
   min-width: var(--min-image-size-set-mode);
   min-height: var(--min-image-size-set-mode);
 }
 
 :host(.set-mode.product-card--source) {
+  height: -moz-fit-content;
+  height: fit-content;
   position: relative;
   flex-grow: 1;
 }
@@ -280,3 +291,15 @@ picture::before {
     background-color: rgba(244, 244, 244);
   }
 }
+
+.discount-label {
+  position: absolute;
+  left: 0;
+  top: 13px;
+  line-height: 20px;
+  padding: 2px 4px;
+  border-radius: 0px 4px 4px 0px;
+  color: white;
+  background-color: #ff3944;
+  letter-spacing: 0.5px;
+}

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

@@ -159,7 +159,7 @@ export class VviinnProductCard {
         dimmed: this.dimmedBackground,
         animated: this.isTransitioning,
         "set-mode": this.isSetMode,
-      }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button, update-button-item" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (h(Fragment, null, h("vviinn-skeleton", { height: 20 }), h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), h("span", { class: "brand", part: "brand" }, this.brand), h("span", { class: "type", part: "type" }, this.productType), h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : state.locale }))), (this.addToBasketShow || this.isSetMode) && (h(Fragment, null, this.isTransitioning ? (h("vviinn-skeleton", { height: 44 })) : (h("button", { class: {
+      }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button, update-button-item" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (h(Fragment, null, h("vviinn-skeleton", { height: 20 }), h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), h("span", { class: "brand", part: "brand" }, this.brand), h("span", { class: "type", part: "type" }, this.productType), h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : state.locale }), this.isSetMode && !this.appliedDiscountPercentage && (h("div", { class: "discount-label" }, `-${this.currentDiscountPercentage}%`)))), (this.addToBasketShow || this.isSetMode) && (h(Fragment, null, this.isTransitioning ? (h("vviinn-skeleton", { height: 44 })) : (h("button", { class: {
         "basket-button": true,
         "basket-button-grid": this.isGridMode || this.isSetMode,
         "basket-button-continuity ": this.isContinuityMode,

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

@@ -2,12 +2,12 @@
   display: block;
   width: 100%;
   height: 100%;
+  line-height: 0;
 }
 
 .vviinn-skeleton {
   display: inline-block;
   animation: pulse 1.2s infinite;
-  line-height: 20px;
 }
 
 @keyframes pulse {

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

@@ -18,6 +18,14 @@
   width: 100%;
 }
 
+:host(.set) vviinn-carousel {
+  overflow-x: auto;
+}
+
+:host(.set) vviinn-carousel::-webkit-scrollbar {
+  display: none;
+}
+
 .widget-header {
   display: flex;
   flex-wrap: wrap;

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

@@ -175,7 +175,7 @@ export class VviinnVprWidget {
   async componentWillLoad() {
     await i18next.init({
       lng: this.locale,
-      fallbackLng: "de-DE",
+      fallbackLng: "en",
       resources,
     });
     if (this.excluded) {

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

@@ -368,7 +368,7 @@ export class VviinnVpsWidget {
   async componentWillLoad() {
     await i18next.init({
       lng: this.locale,
-      fallbackLng: "de-DE",
+      fallbackLng: "en",
       resources,
     });
     slotChangeListener(this, this.el);

package/dist/esm/{package-f211a164.js → package-411cd846.js}

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