vviinn-widgets 2.27.0 → 2.28.0

package/dist/cjs/{customized-slots-aee3f39d.js → customized-slots-0a8d663c.js}

@@ -1,6 +1,19 @@
 'use strict';
 
-const index = require('./index-a4becaff.js');
+const index = require('./index-5619b5ec.js');
+
+const campaignTypeNames = {
+  VPR: "Similar Products",
+  VPS: "Visual Search",
+  VCS: "Cross-Selling",
+};
+const isVPR = (c) => c._tag === "VPR";
+function fold(onVPR, onVCS) {
+  return (c) => (isVPR(c) ? onVPR() : onVCS());
+}
+function fromString(s) {
+  return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
+}
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",
@@ -19,6 +32,7 @@ const defaultSlotsNames = [
   "vviinn-image-upload-button-text",
   "vviinn-privacy-badge-text",
   "vviinn-image-search-modal-title",
+  "vviinn-basket-button-text",
 ];
 const renderNamedSlot = (name) => index.h("slot", { name: name });
 const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);
@@ -51,4 +65,7 @@ const slotChangeListener = (component, element) => {
 };
 
 exports.SlotSkeleton = SlotSkeleton;
+exports.campaignTypeNames = campaignTypeNames;
+exports.fold = fold;
+exports.fromString = fromString;
 exports.slotChangeListener = slotChangeListener;

package/dist/cjs/{imageSearch.store-070ddd94.js → imageSearch.store-dc4e98b3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a4becaff.js');
+const index = require('./index-5619b5ec.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/cjs/{index-a4becaff.js → index-5619b5ec.js}

@@ -1156,6 +1156,9 @@ const postUpdateComponent = (hostRef) => {
     const endPostUpdate = createTime('postUpdate', tagName);
     const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
         {

package/dist/cjs/{index-44211965.js → index-ea4811ba.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const imageSearch_store = require('./imageSearch.store-070ddd94.js');
+const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -3811,6 +3811,7 @@ const createTrackingEvent = (widget) => (eventData) => {
 const PRODUCT_LOAD_EVENT_TYPE = "product_load_event";
 const PRODUCT_VIEW_EVENT_TYPE = "product_view_event";
 const PRODUCT_CLICK_EVENT_TYPE = "product_click_event";
+const ADD_TO_BASKET_EVENT_TYPE = "add_to_basket_event";
 const FILTER_EVENT_TYPE = "filter_event";
 const SEARCH_EVENT_TYPE = "search_event";
 const WIDGET_EVENT_TYPE = "widget_event";
@@ -3856,6 +3857,14 @@ const vpsProductClick = {
   widget: "VPS",
   typ: PRODUCT_CLICK_EVENT_TYPE,
 };
+const vprAddToBasket = {
+  widget: "VPR",
+  typ: ADD_TO_BASKET_EVENT_TYPE,
+};
+const vpcAddToBasket = {
+  widget: "VPC",
+  typ: ADD_TO_BASKET_EVENT_TYPE,
+};
 
 const searchEvent = {
   widget: "VPS",
@@ -3884,6 +3893,8 @@ const createProductClickVpcEvent = createTrackingEvent(vpcProductClick);
 const createProductLoadVpsEvent = createTrackingEvent(vpsProductLoad);
 const createProductViewVpsEvent = createTrackingEvent(vpsProductView);
 const createProductClickVpsEvent = createTrackingEvent(vpsProductClick);
+const createAddToBasketVprEvent = createTrackingEvent(vprAddToBasket);
+const createAddToBasketVpcEvent = createTrackingEvent(vpcAddToBasket);
 const createProductVprEventByType = (type) => {
   switch (type) {
     case "load":
@@ -3920,6 +3931,8 @@ const createWidgetVpcEvent = createTrackingEvent(vpcWidget);
 const createSearchEvent = createTrackingEvent(searchEvent);
 const createFilterEvent = createTrackingEvent(filterEvent);
 
+exports.createAddToBasketVpcEvent = createAddToBasketVpcEvent;
+exports.createAddToBasketVprEvent = createAddToBasketVprEvent;
 exports.createFilterEvent = createFilterEvent;
 exports.createProductVpcEventByType = createProductVpcEventByType;
 exports.createProductVprEventByType = createProductVprEventByType;

package/dist/cjs/{index-6cfe5293.js → index-fcf59d51.js}

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

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
+const index = require('./index-5619b5ec.js');
 
 /*
  Stencil Client Patch Esm v3.3.1 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["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],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[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"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"imageLoaded":[32]}]]],["search-filters_20.cjs",[[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-teaser"],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"slider":[32]}],[1,"vviinn-onboarding-card-1",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-2",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-3",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[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],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","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"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"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"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"apiPath":[1,"api-path"]}]]]], options);
+  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["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],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAddToBasket","trackAddToBasket"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[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"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"imageLoaded":[32]}]]],["search-filters_20.cjs",[[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-teaser"],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"slider":[32]}],[1,"vviinn-onboarding-card-1",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-2",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-3",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[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],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","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"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"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"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
   });
 };
 

package/dist/cjs/{package-83bca9cc.js → package-2c1dfbe0.js}

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

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

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
-const imageSearch_store = require('./imageSearch.store-070ddd94.js');
+const index = require('./index-5619b5ec.js');
+const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
 const i18next = require('./i18next-74ff3413.js');
-const customizedSlots = require('./customized-slots-aee3f39d.js');
-const Campaign = require('./Campaign-778b5b2c.js');
-const index$1 = require('./index-6cfe5293.js');
+const customizedSlots = require('./customized-slots-0a8d663c.js');
+const index$1 = require('./index-fcf59d51.js');
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------
@@ -3703,7 +3702,7 @@ const VviinnModal = class {
       this.vviinnWidgetClose.emit({
         widgetType: "VPS",
         campaignTypeId: "VPS",
-        campaignTypeName: Campaign.campaignTypeNames["VPS"],
+        campaignTypeName: customizedSlots.campaignTypeNames["VPS"],
         widgetId: this.buttonElementId,
         widgetVersion: this.widgetVersion,
       });

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
-const index$1 = require('./index-6cfe5293.js');
+const index = require('./index-5619b5ec.js');
+const index$1 = require('./index-fcf59d51.js');
 
 const vviinnButtonCss = ":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}.raw-open-button{background:none;border:none;cursor:pointer}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#f4f4f4;outline:none}";
 

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
-const imageSearch_store = require('./imageSearch.store-070ddd94.js');
-const index$1 = require('./index-6cfe5293.js');
-const Campaign = require('./Campaign-778b5b2c.js');
+const index = require('./index-5619b5ec.js');
+const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
+const index$1 = require('./index-fcf59d51.js');
 const i18next = require('./i18next-74ff3413.js');
-const _package = require('./package-83bca9cc.js');
-const index$2 = require('./index-44211965.js');
+const customizedSlots = require('./customized-slots-0a8d663c.js');
+const _package = require('./package-2c1dfbe0.js');
+const index$2 = require('./index-ea4811ba.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;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:disabled{display:none}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)}}";
 
@@ -37,6 +37,7 @@ const VviinnCarousel = class {
     this.gridArrowsDynamic = undefined;
     this.recommendations = [];
     this.widgetVersion = undefined;
+    this.addToBasketShow = undefined;
   }
   componentWillLoad() {
     this.isRTL = document.dir === "rtl";
@@ -196,7 +197,7 @@ const VviinnCarousel = class {
     };
   }
   renderRecommendation(recommendation, rank) {
-    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: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.mode === "continuity", campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion }));
+    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: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.mode === "continuity", campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode }));
   }
   renderRecommendationGroup(elements) {
     return (index.h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));
@@ -417,7 +418,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, onLoad: onLoadEnd })));
 
-const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%}.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}img.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;margin-bottom:8px;overflow:hidden}.deeplink{text-decoration:none}.image-link{display:contents}picture{position:relative;width:100%}:host(.dimmed) picture::before{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}";
+const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%}.price-container{display:flex;flex-direction:column;margin-top:auto}.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}img.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;margin-bottom:8px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}.basket-button{border:none;cursor:pointer;font-size:16px;padding:10px 12px;margin-top:8px}.basket-button.basket-button-grid{width:100%;background:none;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background:#f7f7f7}.basket-button-continuity:hover{background:#eaeaea}.basket-button-grid:hover{background:#f7f7f7}@media (max-width: 640px){.basket-button{padding:8px 10px}}:host(.dimmed) picture::before{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}";
 
 const VviinnProductCard = class {
   constructor(hostRef) {
@@ -425,6 +426,7 @@ const VviinnProductCard = class {
     this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
     this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
     this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
+    this.vviinnAddToBasket = index.createEvent(this, "vviinnAddToBasket", 7);
     this.productData = null;
     this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this), { threshold: 1.0 });
     this.brand = undefined;
@@ -442,6 +444,8 @@ const VviinnProductCard = class {
     this.salePrice = undefined;
     this.responsive = false;
     this.dimmedBackground = false;
+    this.mode = undefined;
+    this.addToBasketShow = undefined;
     this.campaignTypeId = undefined;
     this.widgetElementId = undefined;
     this.buttonElementId = undefined;
@@ -452,6 +456,9 @@ const VviinnProductCard = class {
   connectedCallback() {
     this.productData = this.getProductData();
   }
+  componentWillLoad() {
+    customizedSlots.slotChangeListener(this, this.el);
+  }
   getWidgetType() {
     return this.campaignTypeId === "VPR" || this.campaignTypeId === "VCS"
       ? "VPR"
@@ -466,7 +473,7 @@ const VviinnProductCard = class {
       productType: this.productType,
       widgetType: this.getWidgetType(),
       campaignTypeId: this.campaignTypeId,
-      campaignTypeName: Campaign.campaignTypeNames[this.campaignTypeId],
+      campaignTypeName: customizedSlots.campaignTypeNames[this.campaignTypeId],
       widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId,
       widgetVersion: this.widgetVersion,
     };
@@ -504,7 +511,13 @@ const VviinnProductCard = class {
   }
   render() {
     var _a, _b, _c;
-    return (index.h(index.Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, 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" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), 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 : imageSearch_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : imageSearch_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : imageSearch_store.state.locale })));
+    return (index.h(index.Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, 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" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), 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 : imageSearch_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : imageSearch_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : imageSearch_store.state.locale }), this.addToBasketShow && (index.h("button", { class: {
+        "basket-button": true,
+        "basket-button-grid": this.mode === "grid",
+        "basket-button-continuity ": this.mode === "continuity",
+      }, part: "basket-button", onClick: () => {
+        this.vviinnAddToBasket.emit(this.productData);
+      } }, index.h("slot", { name: "vviinn-basket-button-text" }, index.h("span", null, i18next.instance.t("basketButtonText")))))));
   }
   get el() { return index.getElement(this); }
 };
@@ -1178,17 +1191,19 @@ const getVCSRecommendations = (productId) => (color) => (excludedFilters) => (ca
   return apiGet(url, options);
 };
 
-const getRecommendationsService = (campaignType) => imageSearch_store._function.pipe(Campaign.fromString(campaignType), Campaign.fold(() => getVPRRecommendations, () => getVCSRecommendations));
+const getRecommendationsService = (campaignType) => imageSearch_store._function.pipe(customizedSlots.fromString(campaignType), customizedSlots.fold(() => getVPRRecommendations, () => getVCSRecommendations));
 
 const resources = {
   de: {
     translation: {
       noResultText: "Keine Ergebnisse! Versuche es bitte später erneut.",
+      basketButtonText: "In den Warenkorb",
     },
   },
   en: {
     translation: {
       noResultText: "No results! Please, try again later.",
+      basketButtonText: "Add to Basket",
     },
   },
 };
@@ -1217,6 +1232,8 @@ const VviinnVprWidget = class {
     this.vviinnResultLoad = index.createEvent(this, "vviinnResultLoad", 7);
     this.vviinnResultView = index.createEvent(this, "vviinnResultView", 7);
     this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
+    this.vviinnAddToBasket = index.createEvent(this, "vviinnAddToBasket", 7);
+    this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
     this.vviinnRecommendationsLoaded = index.createEvent(this, "vviinnRecommendationsLoaded", 7);
     this.vviinnWidgetOpen = index.createEvent(this, "vviinnWidgetOpen", 7);
     this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
@@ -1246,6 +1263,7 @@ const VviinnVprWidget = class {
     this.cssUrl = null;
     this.excluded = "";
     this.productDetailNewTab = false;
+    this.addToBasketShow = false;
     this.apiPath = "https://api.vviinn.com";
     this.useCarousel = true;
     this.showingInButton = false;
@@ -1260,7 +1278,7 @@ const VviinnVprWidget = class {
     return {
       widgetType: "VPR",
       campaignTypeId: this.campaignType,
-      campaignTypeName: Campaign.campaignTypeNames[this.campaignType],
+      campaignTypeName: customizedSlots.campaignTypeNames[this.campaignType],
       widgetId: this.id,
       widgetVersion: _package.version,
     };
@@ -1298,6 +1316,12 @@ const VviinnVprWidget = class {
     this.vviinnWidgetClose.emit(this.getBasicEventData());
     this.trackWidgetEvent("close");
   }
+  componentDidRender() {
+    if (this.showingInButton && this.closed)
+      return;
+    const slots = this.el.querySelectorAll("[slot]");
+    this.globalSlotsChanged.emit(Array.from(slots));
+  }
   connectedCallback() {
     var _a;
     imageSearch_store.state.apiPath = this.apiPath;
@@ -1360,10 +1384,24 @@ const VviinnVprWidget = class {
       this.handleOpenLink(product.deeplink);
     }
   }
+  async trackAddToBasket({ detail }) {
+    const { productRank, productId, campaignTypeId, widgetType } = detail, rest = __rest(detail, ["productRank", "productId", "campaignTypeId", "widgetType"]);
+    let addToBasketEvent;
+    const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
+    if (this.campaignType === "VCS") {
+      addToBasketEvent = index$2.createAddToBasketVpcEvent(eventBody);
+    }
+    else if (this.campaignType === "VPR") {
+      addToBasketEvent = index$2.createAddToBasketVprEvent(eventBody);
+    }
+    this.trackingApi
+      .trackEvent(addToBasketEvent)
+      .then(this.setTrackingDeactivated);
+  }
   trackWidgetEvent(action) {
     if (this.trackingDeactivated)
       return;
-    const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId"]);
+    const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId", "widgetType"]);
     let widgetEvent;
     const eventBody = Object.assign({ action, session_id: this.uiSessionId }, rest);
     if (this.campaignType === "VCS") {
@@ -1377,7 +1415,7 @@ const VviinnVprWidget = class {
   getProductTrackEvent(detail, eventType) {
     if (this.trackingDeactivated)
       return null;
-    const { productRank, productId, campaignTypeId } = detail, rest = __rest(detail, ["productRank", "productId", "campaignTypeId"]);
+    const { productRank, productId, campaignTypeId, widgetType } = detail, rest = __rest(detail, ["productRank", "productId", "campaignTypeId", "widgetType"]);
     let productEvent;
     const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
     if (campaignTypeId === "VCS") {
@@ -1430,13 +1468,13 @@ const VviinnVprWidget = class {
         loaded: true,
         empty: this.recommendations.length == 0,
         [this.mode]: true,
-      }, "aria-hidden": "false" }, index.h(index.Fragment, null, this.renderExternalCSS(), index.h("style", null, imageSearch_store.state.fallbackStyles), index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.recommendations.length > 0 &&
+      }, "aria-hidden": "false" }, this.addToBasketShow && index.h(customizedSlots.SlotSkeleton, null), index.h(index.Fragment, null, this.renderExternalCSS(), index.h("style", null, imageSearch_store.state.fallbackStyles), index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.recommendations.length > 0 &&
       (this.useCarousel ? this.renderCarousel() : this.renderResults()), this.recommendations.length === 0 && this.hasErrorOnLoad && (index.h("p", { class: "no-result-text" }, this.noResultText.length
       ? this.noResultText
       : i18next.instance.t("noResultText"))))));
   }
   renderRecommendation(recommendation, index$1) {
-    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: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.useDimmedBackgroundInCard(), campaignTypeId: this.campaignType, index: index$1, widgetElementId: this.id, widgetVersion: _package.version }));
+    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: recommendation.price.sale, responsive: this.mode === "grid", addToBasketShow: this.addToBasketShow, mode: this.mode, dimmedBackground: this.useDimmedBackgroundInCard(), campaignTypeId: this.campaignType, index: index$1, widgetElementId: this.id, widgetVersion: _package.version }));
   }
   useDimmedBackgroundInCard() {
     return this.mode === "continuity" || !this.useCarousel;
@@ -1445,7 +1483,7 @@ const VviinnVprWidget = class {
     return (index.h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
   }
   renderCarousel() {
-    return (index.h("vviinn-carousel", { mode: this.mode, campaignTypeId: this.campaignType, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations, widgetElementId: this.id, widgetVersion: _package.version, gridArrowsDynamic: this.gridArrowsDynamic }));
+    return (index.h("vviinn-carousel", { mode: this.mode, campaignTypeId: this.campaignType, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations, widgetElementId: this.id, widgetVersion: _package.version, gridArrowsDynamic: this.gridArrowsDynamic, addToBasketShow: this.addToBasketShow }));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
+const index = require('./index-5619b5ec.js');
 
 const vviinnErrorCss = ":host{background:#F4F4F4;border-radius:8px;display:grid;grid-gap:20px;padding:24px;text-align:center}::slotted(svg){display:grid;align-self:center}::slotted(h4){margin:unset;font-weight:600;font-size:18px;line-height:24px}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--color-primary, var(--color-primary-system));font-weight:600;font-size:16px;line-height:20px;cursor:pointer}";
 

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
-const imageSearch_store = require('./imageSearch.store-070ddd94.js');
+const index = require('./index-5619b5ec.js');
+const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
 
 const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;animation:rotate 3s linear infinite;border:var(--preloader-width) solid white;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
-const index$1 = require('./index-6cfe5293.js');
+const index = require('./index-5619b5ec.js');
+const index$1 = require('./index-fcf59d51.js');
 
-const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:4;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;min-height:100px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:0.5s;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}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
+const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:4;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}:host [slot]{visibility:hidden;position:absolute}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;min-height:100px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:0.5s;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}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
 
 const RecommendationsSidebar = class {
   constructor(hostRef) {
@@ -29,6 +29,8 @@ const RecommendationsSidebar = class {
     this.gridArrowsDynamic = undefined;
     this.excluded = undefined;
     this.productDetailNewTab = undefined;
+    this.addToBasketShow = false;
+    this.buttonChildren = undefined;
     this.apiPath = "https://api.vviinn.com";
     this.buttonElementId = undefined;
     this.widgetVersion = undefined;
@@ -59,8 +61,17 @@ const RecommendationsSidebar = class {
     var _a;
     return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
   }
+  componentDidLoad() {
+    const widgetElement = this.el.shadowRoot.querySelector("vviinn-vpr-widget");
+    Array.from(this.buttonChildren).forEach((child) => {
+      const childClone = child.cloneNode(true);
+      if (child.hasAttribute("slot")) {
+        widgetElement.appendChild(childClone);
+      }
+    });
+  }
   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-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group", token: this.token, productId: this.productId, imageWidth: this.imageWidth, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, closed: this.state === "closed", opened: this.state === "open" })))));
+    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-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group", token: this.token, productId: this.productId, imageWidth: this.imageWidth, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow })))));
   }
   renderSourceImage() {
     return (index.h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
-const _package = require('./package-83bca9cc.js');
-const index$1 = require('./index-6cfe5293.js');
+const index = require('./index-5619b5ec.js');
+const _package = require('./package-2c1dfbe0.js');
+const index$1 = require('./index-fcf59d51.js');
 
 const vviinnVprButtonCss = ":host{display:block}";
 
@@ -20,6 +20,7 @@ const VviinnVprButton = class {
     this.vviinnResultLoad = index.createEvent(this, "vviinnResultLoad", 7);
     this.vviinnResultView = index.createEvent(this, "vviinnResultView", 7);
     this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
+    this.vviinnAddToBasket = index.createEvent(this, "vviinnAddToBasket", 7);
     this.sidebar = null;
     this.sidebarCloseListener = () => {
       document.body.removeChild(this.sidebar);
@@ -43,6 +44,7 @@ const VviinnVprButton = class {
     this.gridArrowsDynamic = false;
     this.excluded = "";
     this.productDetailNewTab = false;
+    this.addToBasketShow = false;
     this.apiPath = "https://api.vviinn.com";
   }
   render() {
@@ -74,6 +76,8 @@ const VviinnVprButton = class {
     sidebar.widgetVersion = _package.version;
     sidebar.showingInButton = true;
     sidebar.excluded = this.excluded;
+    sidebar.addToBasketShow = this.addToBasketShow;
+    sidebar.buttonChildren = this.el.children;
     this.sidebar = sidebar;
     sidebar.addEventListener("vviinnWidgetClose", this.sidebarCloseListener);
     document.body.append(this.sidebar);

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

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4becaff.js');
-const _package = require('./package-83bca9cc.js');
-const index$1 = require('./index-6cfe5293.js');
-const customizedSlots = require('./customized-slots-aee3f39d.js');
-const Campaign = require('./Campaign-778b5b2c.js');
+const index = require('./index-5619b5ec.js');
+const _package = require('./package-2c1dfbe0.js');
+const index$1 = require('./index-fcf59d51.js');
+const customizedSlots = require('./customized-slots-0a8d663c.js');
 
 const vviinnVpsButtonCss = ":host{display:block}";
 
@@ -31,7 +30,7 @@ const VviinnVpsButton = class {
       return {
         widgetType: "VPS",
         campaignTypeId: "VPS",
-        campaignTypeName: Campaign.campaignTypeNames["VPS"],
+        campaignTypeName: customizedSlots.campaignTypeNames["VPS"],
         widgetId: this.el.id,
         widgetVersion: _package.version,
       };