vviinn-widgets 2.22.2 → 2.24.0

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

@@ -213,6 +213,14 @@ const SearchFilters = class {
     this.selectedFilter = "";
     this.hideFilters = true;
   }
+  isCategoriesFilterType() {
+    return this.filterType === "categories";
+  }
+  getFilterKind() {
+    return this.isCategoriesFilterType()
+      ? "category"
+      : this.filterType;
+  }
   handleFilterSelection(filter) {
     return this.isFilterSelected(filter)
       ? this.clearSelectedFilter(filter)
@@ -221,12 +229,12 @@ const SearchFilters = class {
   selectFilter(selectedFilter) {
     imageSearch_store.imageSearchState.activeIonLink = selectedFilter;
     this.selectedFilter = parseFilters(selectedFilter, this.filterType);
-    this.vviinnSelectFilter.emit(Object.assign(Object.assign({}, this.basicEventData), { action: "select", filterName: selectedFilter.name }));
+    this.vviinnSelectFilter.emit(Object.assign(Object.assign({}, this.basicEventData), { action: "select", kind: this.getFilterKind() }));
   }
   clearSelectedFilter(selectedFilter) {
     imageSearch_store.imageSearchState.activeIonLink = selectedFilter.clear;
     this.selectedFilter = parseFilters(selectedFilter.clear, this.filterType);
-    this.vviinnSelectFilter.emit(Object.assign(Object.assign({}, this.basicEventData), { action: "deselect" }));
+    this.vviinnSelectFilter.emit(Object.assign(Object.assign({}, this.basicEventData), { action: "deselect", kind: this.getFilterKind() }));
   }
   toggleFilters() {
     this.hideFilters = !this.hideFilters;
@@ -237,7 +245,7 @@ const SearchFilters = class {
     this.handleFilterSelection(f);
   }
   isFilterSelected(filterLink) {
-    return this.filterType === "categories"
+    return this.isCategoriesFilterType()
       ? this.selectedFilter === parseFilters(filterLink, "categories")
       : this.selectedFilter === filterLink.name;
   }
@@ -247,8 +255,8 @@ const SearchFilters = class {
     const { name, filters } = this.filter;
     return (index.h(index.Host, { exportparts: "filter, show-more-filters" }, index.h("div", { class: {
         filters: true,
-        "no-scrollbar-mobile": this.filterType === "categories",
-        "no-scrollbar": this.filterType !== "categories",
+        "no-scrollbar-mobile": this.isCategoriesFilterType(),
+        "no-scrollbar": !this.isCategoriesFilterType(),
       } }, filters
       .filter((_, i) => (this.hideFilters ? i < FILTERS_COUNT : true))
       .map((filter, index$1) => {

package/dist/cjs/{index-0659dc39.js → index-fef7ae7e.js}

@@ -3274,8 +3274,9 @@ const createTrackingEvent = (widget) => (eventData) => {
   return Object.assign(Object.assign({}, eventData), widget);
 };
 
-const PRODUCT_CLICK_EVENT_TYPE = "product_click_event";
+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 FILTER_EVENT_TYPE = "filter_event";
 const SEARCH_EVENT_TYPE = "search_event";
 const WIDGET_EVENT_TYPE = "widget_event";
@@ -3285,6 +3286,18 @@ const filterEvent = {
   typ: FILTER_EVENT_TYPE,
 };
 
+const vprProductLoad = {
+  widget: "VPR",
+  typ: PRODUCT_LOAD_EVENT_TYPE,
+};
+const vpcProductLoad = {
+  widget: "VPC",
+  typ: PRODUCT_LOAD_EVENT_TYPE,
+};
+const vpsProductLoad = {
+  widget: "VPS",
+  typ: PRODUCT_LOAD_EVENT_TYPE,
+};
 const vprProductView = {
   widget: "VPR",
   typ: PRODUCT_VIEW_EVENT_TYPE,
@@ -3328,12 +3341,45 @@ const vpsWidget = {
   typ: WIDGET_EVENT_TYPE,
 };
 
+const createProductLoadVprEvent = createTrackingEvent(vprProductLoad);
 const createProductViewVprEvent = createTrackingEvent(vprProductView);
-const createProductViewVpsEvent = createTrackingEvent(vpsProductView);
-const createProductViewVpcEvent = createTrackingEvent(vpcProductView);
 const createProductClickVprEvent = createTrackingEvent(vprProductClick);
-const createProductClickVpsEvent = createTrackingEvent(vpsProductClick);
+const createProductLoadVpcEvent = createTrackingEvent(vpcProductLoad);
+const createProductViewVpcEvent = createTrackingEvent(vpcProductView);
 const createProductClickVpcEvent = createTrackingEvent(vpcProductClick);
+const createProductLoadVpsEvent = createTrackingEvent(vpsProductLoad);
+const createProductViewVpsEvent = createTrackingEvent(vpsProductView);
+const createProductClickVpsEvent = createTrackingEvent(vpsProductClick);
+const createProductVprEventByType = (type) => {
+  switch (type) {
+    case "load":
+      return createProductLoadVprEvent;
+    case "view":
+      return createProductViewVprEvent;
+    case "click":
+      return createProductClickVprEvent;
+  }
+};
+const createProductVpcEventByType = (type) => {
+  switch (type) {
+    case "load":
+      return createProductLoadVpcEvent;
+    case "view":
+      return createProductViewVpcEvent;
+    case "click":
+      return createProductClickVpcEvent;
+  }
+};
+const createProductVpsEventByType = (type) => {
+  switch (type) {
+    case "load":
+      return createProductLoadVpsEvent;
+    case "view":
+      return createProductViewVpsEvent;
+    case "click":
+      return createProductClickVpsEvent;
+  }
+};
 const createWidgetVprEvent = createTrackingEvent(vprWidget);
 const createWidgetVpsEvent = createTrackingEvent(vpsWidget);
 const createWidgetVpcEvent = createTrackingEvent(vpcWidget);
@@ -3341,12 +3387,9 @@ const createSearchEvent = createTrackingEvent(searchEvent);
 const createFilterEvent = createTrackingEvent(filterEvent);
 
 exports.createFilterEvent = createFilterEvent;
-exports.createProductClickVpcEvent = createProductClickVpcEvent;
-exports.createProductClickVprEvent = createProductClickVprEvent;
-exports.createProductClickVpsEvent = createProductClickVpsEvent;
-exports.createProductViewVpcEvent = createProductViewVpcEvent;
-exports.createProductViewVprEvent = createProductViewVprEvent;
-exports.createProductViewVpsEvent = createProductViewVpsEvent;
+exports.createProductVpcEventByType = createProductVpcEventByType;
+exports.createProductVprEventByType = createProductVprEventByType;
+exports.createProductVpsEventByType = createProductVpsEventByType;
 exports.createSearchEvent = createSearchEvent;
 exports.createTrackingApi = createTrackingApi;
 exports.createWidgetVpcEvent = createWidgetVpcEvent;

package/dist/cjs/loader.cjs.js

@@ -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"]}]]],["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"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"],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","handleProductLoading"],[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]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view",{"basicEventData":[16]}],[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[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,"image-cropper",{"disabled":[4],"basicEventData":[16],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"highlight-box"],[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"],"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,"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"],"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"]}]]],["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"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]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view",{"basicEventData":[16]}],[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[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,"image-cropper",{"disabled":[4],"basicEventData":[16],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"highlight-box"],[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"],"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"],"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);
   });
 };
 

package/dist/cjs/{package-8a334970.js → package-1157a5c0.js}

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

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

@@ -7,9 +7,9 @@ const imageSearch_store = require('./imageSearch.store-cc9b4a68.js');
 const index$1 = require('./index-6cfe5293.js');
 const Campaign = require('./Campaign-778b5b2c.js');
 const i18next = require('./i18next-74ff3413.js');
-const _package = require('./package-8a334970.js');
+const _package = require('./package-1157a5c0.js');
 const Handler = require('./Handler-de64afa5.js');
-const index$2 = require('./index-0659dc39.js');
+const index$2 = require('./index-fef7ae7e.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)}}";
 
@@ -1220,6 +1220,7 @@ const VviinnVprWidget = class {
     this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
     this.vviinnRecommendationsLoaded = index.createEvent(this, "vviinnRecommendationsLoaded", 7);
     this.vviinnWidgetOpen = index.createEvent(this, "vviinnWidgetOpen", 7);
+    this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
     this.productImageLoadedSubject = new Subject();
     this.resultViewed = false;
     this.setTrackingDeactivated = (result) => {
@@ -1250,6 +1251,8 @@ const VviinnVprWidget = class {
     this.useCarousel = true;
     this.showingInButton = false;
     this.buttonElementId = undefined;
+    this.closed = undefined;
+    this.opened = undefined;
     this.recommendations = [];
     this.trackingDeactivated = false;
     this.hasErrorOnLoad = false;
@@ -1284,42 +1287,68 @@ const VviinnVprWidget = class {
     imageSearch_store.state.apiPath = newPath;
     this.getRecommendations();
   }
-  handleProductLoading({ detail }) {
+  trackWidgetOpen() {
+    if (!this.opened)
+      return;
+    this.vviinnWidgetOpen.emit(this.getBasicEventData());
+    this.trackWidgetEvent("open");
+  }
+  trackWidgetClose() {
+    if (!this.closed)
+      return;
+    this.vviinnWidgetClose.emit(this.getBasicEventData());
+    this.trackWidgetEvent("close");
+  }
+  connectedCallback() {
+    var _a;
+    imageSearch_store.state.apiPath = this.apiPath;
+    imageSearch_store.state.currencySign = this.currencySign;
+    imageSearch_store.state.locale = this.locale;
+    this.id = (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.el.id;
+    this.uiSessionId = index$2.v4();
+    this.trackingApi = index$2.createTrackingApi(this.apiPath, this.token);
+    this.getRecommendations();
+    i18next.instance.init({
+      lng: this.locale,
+      fallbackLng: "de-DE",
+      resources,
+    });
+    this.vviinnWidgetLoad.emit(this.getBasicEventData());
+    this.trackWidgetEvent("load");
+  }
+  async componentWillLoad() {
+    imageSearch_store.state.pricePrefix = this.pricePrefix;
+    imageSearch_store.state.currencySign = this.currencySign;
+    if (this.excluded) {
+      this.excluded = imageSearch_store.parseExcluded(this.excluded);
+    }
+  }
+  trackProductLoad({ detail }) {
     this.productImageLoadedSubject.next(detail.productId);
+    const productLoadEvent = this.getProductTrackEvent(detail, "load");
+    if (!productLoadEvent)
+      return;
+    this.trackingApi
+      .trackEvent(productLoadEvent)
+      .then(this.setTrackingDeactivated);
   }
   trackProductView({ detail }) {
     if (!this.resultViewed) {
       this.resultViewed = true;
       this.vviinnResultView.emit(this.getBasicEventData());
     }
-    if (this.trackingDeactivated)
+    const productViewEvent = this.getProductTrackEvent(detail, "view");
+    if (!productViewEvent)
       return;
-    const { productRank, productId, productName, widgetType, widgetId, campaignTypeId, campaignTypeName } = detail, rest = __rest(detail, ["productRank", "productId", "productName", "widgetType", "widgetId", "campaignTypeId", "campaignTypeName"]);
-    const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
-    let productViewEvent;
-    if (campaignTypeId === "VCS") {
-      productViewEvent = index$2.createProductViewVpcEvent(eventBody);
-    }
-    else if (campaignTypeId === "VPR") {
-      productViewEvent = index$2.createProductViewVprEvent(eventBody);
-    }
     this.trackingApi
       .trackEvent(productViewEvent)
       .then(this.setTrackingDeactivated);
   }
   async trackProductClick({ detail }) {
-    const { productRank, productId, productName, widgetType, widgetId, campaignTypeId, campaignTypeName } = detail, rest = __rest(detail, ["productRank", "productId", "productName", "widgetType", "widgetId", "campaignTypeId", "campaignTypeName"]);
-    const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
-    let productClickEvent;
-    if (campaignTypeId === "VCS") {
-      productClickEvent = index$2.createProductClickVpcEvent(eventBody);
-    }
-    else if (campaignTypeId === "VPR") {
-      productClickEvent = index$2.createProductClickVprEvent(eventBody);
-    }
     const product = this.recommendations.find((r) => r.productId === detail.productId);
     if (!product || !product.deeplink)
       return;
+    const productClickEvent = this.getProductTrackEvent(detail, "click");
     if (!this.trackingDeactivated) {
       await this.trackingApi
         .trackEvent(productClickEvent)
@@ -1332,62 +1361,33 @@ const VviinnVprWidget = class {
       this.handleOpenLink(product.deeplink);
     }
   }
-  connectedCallback() {
-    var _a;
-    imageSearch_store.state.apiPath = this.apiPath;
-    imageSearch_store.state.currencySign = this.currencySign;
-    imageSearch_store.state.locale = this.locale;
-    this.id = (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.el.id;
-    this.uiSessionId = index$2.v4();
-    this.trackingApi = index$2.createTrackingApi(this.apiPath, this.token);
-    i18next.instance.init({
-      lng: this.locale,
-      fallbackLng: "de-DE",
-      resources,
-    });
-    if (this.trackingDeactivated || !this.showingInButton)
+  trackWidgetEvent(action) {
+    if (this.trackingDeactivated)
       return;
-    const eventBody = {
-      action: "open",
-      session_id: this.uiSessionId,
-    };
-    let widgetOpenEvent;
+    const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId"]);
+    let widgetEvent;
+    const eventBody = Object.assign({ action, session_id: this.uiSessionId }, rest);
     if (this.campaignType === "VCS") {
-      widgetOpenEvent = index$2.createWidgetVpcEvent(eventBody);
+      widgetEvent = index$2.createWidgetVpcEvent(eventBody);
     }
     else if (this.campaignType === "VPR") {
-      widgetOpenEvent = index$2.createWidgetVprEvent(eventBody);
+      widgetEvent = index$2.createWidgetVprEvent(eventBody);
     }
-    this.trackingApi
-      .trackEvent(widgetOpenEvent)
-      .then(this.setTrackingDeactivated);
+    this.trackingApi.trackEvent(widgetEvent).then(this.setTrackingDeactivated);
   }
-  disconnectedCallback() {
+  getProductTrackEvent(detail, eventType) {
     if (this.trackingDeactivated)
-      return;
-    const eventBody = {
-      action: "close",
-      session_id: this.uiSessionId,
-    };
-    let widgetCloseEvent;
-    if (this.campaignType === "VCS") {
-      widgetCloseEvent = index$2.createWidgetVpcEvent(eventBody);
-    }
-    else if (this.campaignType === "VPR") {
-      widgetCloseEvent = index$2.createWidgetVprEvent(eventBody);
+      return null;
+    const { productRank, productId, campaignTypeId } = detail, rest = __rest(detail, ["productRank", "productId", "campaignTypeId"]);
+    let productEvent;
+    const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
+    if (campaignTypeId === "VCS") {
+      productEvent = index$2.createProductVpcEventByType(eventType)(eventBody);
     }
-    this.trackingApi
-      .trackEvent(widgetCloseEvent)
-      .then(this.setTrackingDeactivated);
-  }
-  async componentWillLoad() {
-    imageSearch_store.state.pricePrefix = this.pricePrefix;
-    imageSearch_store.state.currencySign = this.currencySign;
-    if (this.excluded) {
-      this.excluded = imageSearch_store.parseExcluded(this.excluded);
+    else if (campaignTypeId === "VPR") {
+      productEvent = index$2.createProductVprEventByType(eventType)(eventBody);
     }
-    this.vviinnWidgetLoad.emit(this.getBasicEventData());
-    this.getRecommendations();
+    return productEvent;
   }
   async getRecommendations() {
     if (this.productId === undefined || this.token === undefined)
@@ -1446,9 +1446,6 @@ const VviinnVprWidget = class {
     return (index.h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
   }
   renderCarousel() {
-    if (this.showingInButton) {
-      this.vviinnWidgetOpen.emit(this.getBasicEventData());
-    }
     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 }));
   }
   get el() { return index.getElement(this); }
@@ -1456,7 +1453,9 @@ const VviinnVprWidget = class {
     "productId": ["handleProductIdChange"],
     "campaignType": ["handleCampaignTypeChange"],
     "campaigns": ["handleCampaignsChange"],
-    "apiPath": ["handleApiPathChange"]
+    "apiPath": ["handleApiPathChange"],
+    "opened": ["trackWidgetOpen"],
+    "closed": ["trackWidgetClose"]
   }; }
 };
 VviinnVprWidget.style = vviinnVprWidgetCss;

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a4becaff.js');
 const index$1 = require('./index-6cfe5293.js');
-const Campaign = require('./Campaign-778b5b2c.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}}";
 
@@ -61,7 +60,7 @@ const RecommendationsSidebar = class {
     return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
   }
   render() {
-    return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(index$1.CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-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 })))));
+    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" })))));
   }
   renderSourceImage() {
     return (index.h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
@@ -74,13 +73,6 @@ const RecommendationsSidebar = class {
     const isClosingAnimation = animationName.includes("slideOut");
     if (!isClosingAnimation)
       return;
-    this.vviinnWidgetClose.emit({
-      widgetType: "VPR",
-      campaignTypeId: this.campaignType,
-      campaignTypeName: Campaign.campaignTypeNames[this.campaignType],
-      widgetId: this.buttonElementId,
-      widgetVersion: this.widgetVersion,
-    });
   }
   get el() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a4becaff.js');
-const _package = require('./package-8a334970.js');
+const _package = require('./package-1157a5c0.js');
 const index$1 = require('./index-6cfe5293.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-a4becaff.js');
-const _package = require('./package-8a334970.js');
+const _package = require('./package-1157a5c0.js');
 const index$1 = require('./index-6cfe5293.js');
 const customizedSlots = require('./customized-slots-aee3f39d.js');
 const Campaign = require('./Campaign-778b5b2c.js');
@@ -63,7 +63,7 @@ const VviinnVpsButton = class {
   render() {
     return (index.h(index.Host, { tabindex: "0", role: "button" }, index.h("vviinn-button", { onClick: () => {
         this.handleClick();
-      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed, excluded: this.excluded, productDetailNewTab: this.productDetailNewTab })));
+      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed && this.mode === "modal", excluded: this.excluded, productDetailNewTab: this.productDetailNewTab })));
   }
   get el() { return index.getElement(this); }
 };