vviinn-widgets 2.50.2 → 2.50.4

package/dist/cjs/{customized-slots-71029d3f.js → customized-slots-39ba4e52.js}

@@ -15,9 +15,15 @@ function fromString(s) {
   return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
 }
 
-const defaultSlotsNames = [
+const vprSlotsNames = [
   "vviinn-recommendations-title",
   "vviinn-recommendations-subtitle",
+  "vviinn-basket-button-text",
+  "vviinn-basket-button-icon",
+  "vviinn-update-button-icon",
+  "vviinn-update-button-text",
+];
+const vpsSlotsNames = [
   "vviinn-teaser-text",
   "vviinn-image-upload-button-text",
   "vviinn-image-upload-icon",
@@ -28,13 +34,11 @@ const defaultSlotsNames = [
   "vviinn-text-search-icon",
   "vviinn-privacy-badge-text",
   "vviinn-image-search-modal-title",
-  "vviinn-basket-button-text",
-  "vviinn-basket-button-icon",
-  "vviinn-update-button-icon",
-  "vviinn-update-button-text",
 ];
 const renderNamedSlot = (name) => index.h("slot", { name: name });
-const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);
+const SlotSkeleton = (renderType) => {
+  return (renderType === "vps" ? vpsSlotsNames : vprSlotsNames).map(renderNamedSlot);
+};
 const getSlots = (element) => Array.from(element.shadowRoot.querySelectorAll("slot"));
 const getNameAttribute = (element) => element.getAttribute("name");
 const getSlotAttribute = (element) => element.getAttribute("slot");

package/dist/cjs/{package-4b356b6b.js → package-20cf59d0.js}

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

package/dist/cjs/{index-4445cb70.js → resources-d6fbe545.js}

@@ -3973,6 +3973,85 @@ const createFilterEvent = createTrackingEvent(filterEvent);
 const createAddToBasketVprEvent = createTrackingEvent(vprAddToBasket);
 const createAddToBasketVpcEvent = createTrackingEvent(vpcAddToBasket);
 
+const resources = {
+  de: {
+    translation: {
+      noResultText: "Keine Ergebnisse! Versuche es bitte später erneut.",
+      basketButtonText: "In den Warenkorb",
+      setMode: {
+        widgetTitle: "Kaufen Sie ein Set und erhalten Sie Rabatt",
+        widgetSubtitle: "Sparen Sie bis zu 15% beim Kauf von Produkten aus der Liste",
+        basketButtonText: "Als Set kaufen",
+        appliedDiscountText: "gespart",
+        updateButtonText: "Neues Set vorschlagen",
+      },
+      exampleImagesTitle: "Mit den Beispielbildern die Suche direkt ausprobieren",
+      imageUploadButtonText: "Bild hochladen",
+      cameraButtonTextStart: "Kamera starten",
+      cameraButtonTextStop: "Kamera stoppen",
+      privacyBadgeText: "Durch das Hochladen eines Bildes willigst Du in die Verarbeitung durch unseren Partner Vviinn ein. Das Bild wird nach einer Stunde Inaktivität gelöscht.",
+      teaserText: "Finde Produkte auf \n einem Foto",
+      imageSearchModalTitle: "Bildsuche",
+      textSearchPlaceholder: "mit Text suchen",
+      emptyResultsBlock: {
+        title: "Leider nichts gefunden",
+        button: "Neues Bild hochladen",
+      },
+      serverErrorBlock: {
+        title: "Keine Verbindung",
+        button: "Erneut versuchen",
+      },
+      wrongFormatBlock: {
+        title: "Dateityp wird nicht unterstützt",
+        text: "Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch.",
+        button: "Neues Bild hochladen",
+      },
+      wrongAspectRatioBlock: {
+        title: "Das Bild ist zu schmal",
+        button: "Neues Bild hochladen",
+      },
+    },
+  },
+  en: {
+    translation: {
+      noResultText: "No results! Please, try again later.",
+      basketButtonText: "Add to Basket",
+      setMode: {
+        widgetTitle: "Buy a set to get discount",
+        widgetSubtitle: "Save up to 15% for buying products from the list",
+        basketButtonText: "Buy as set",
+        appliedDiscountText: "saved",
+        updateButtonText: "Suggest New Set",
+      },
+      exampleImagesTitle: "Try out the search with the example images",
+      imageUploadButtonText: "Upload Photo",
+      cameraButtonTextStart: "Start Camera",
+      cameraButtonTextStop: "Stop Camera",
+      privacyBadgeText: "By uploading a picture you agree to the processing by our partner Vviinn. The image will be deleted after one hour of inactivity.",
+      teaserText: "Find Product by Photo",
+      imageSearchModalTitle: "Visual Search",
+      textSearchPlaceholder: "Search by text",
+      emptyResultsBlock: {
+        title: "Sorry, nothing found",
+        button: "Upload another image",
+      },
+      serverErrorBlock: {
+        title: "Something went wrong",
+        button: "Try again",
+      },
+      wrongFormatBlock: {
+        title: "Wrong file format",
+        text: "Please upload a .jpg, .png or .webp image file.",
+        button: "Upload another file",
+      },
+      wrongAspectRatioBlock: {
+        title: "The image is too narrow",
+        button: "Upload another image",
+      },
+    },
+  },
+};
+
 exports.createAddToBasketVpcEvent = createAddToBasketVpcEvent;
 exports.createAddToBasketVprEvent = createAddToBasketVprEvent;
 exports.createFilterEvent = createFilterEvent;
@@ -3987,4 +4066,5 @@ exports.createTrackingApi = createTrackingApi;
 exports.createWidgetVpcEvent = createWidgetVpcEvent;
 exports.createWidgetVprEvent = createWidgetVprEvent;
 exports.createWidgetVpsEvent = createWidgetVpsEvent;
+exports.resources = resources;
 exports.v4 = v4;

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

@@ -6,7 +6,7 @@ const index = require('./index-5619b5ec.js');
 const search_store = require('./search.store-7605f369.js');
 const i18next = require('./i18next-74ff3413.js');
 const PlusIcon = require('./PlusIcon-5e585127.js');
-const customizedSlots = require('./customized-slots-71029d3f.js');
+const customizedSlots = require('./customized-slots-39ba4e52.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/vviinn-carousel_4.cjs.entry.js

@@ -6,9 +6,9 @@ const index = require('./index-5619b5ec.js');
 const search_store = require('./search.store-7605f369.js');
 const i18next = require('./i18next-74ff3413.js');
 const PlusIcon = require('./PlusIcon-5e585127.js');
-const customizedSlots = require('./customized-slots-71029d3f.js');
-const _package = require('./package-4b356b6b.js');
-const index$1 = require('./index-4445cb70.js');
+const customizedSlots = require('./customized-slots-39ba4e52.js');
+const _package = require('./package-20cf59d0.js');
+const resources = require('./resources-d6fbe545.js');
 
 const BasketIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("path", { d: "M7.5 22C6.95 22 6.47917 21.8042 6.0875 21.4125C5.69583 21.0208 5.5 20.55 5.5 20C5.5 19.45 5.69583 18.9792 6.0875 18.5875C6.47917 18.1958 6.95 18 7.5 18C8.05 18 8.52083 18.1958 8.9125 18.5875C9.30417 18.9792 9.5 19.45 9.5 20C9.5 20.55 9.30417 21.0208 8.9125 21.4125C8.52083 21.8042 8.05 22 7.5 22ZM17.5 22C16.95 22 16.4792 21.8042 16.0875 21.4125C15.6958 21.0208 15.5 20.55 15.5 20C15.5 19.45 15.6958 18.9792 16.0875 18.5875C16.4792 18.1958 16.95 18 17.5 18C18.05 18 18.5208 18.1958 18.9125 18.5875C19.3042 18.9792 19.5 19.45 19.5 20C19.5 20.55 19.3042 21.0208 18.9125 21.4125C18.5208 21.8042 18.05 22 17.5 22ZM6.65 6L9.05 11H16.05L18.8 6H6.65ZM5.7 4H20.45C20.8333 4 21.125 4.17083 21.325 4.5125C21.525 4.85417 21.5333 5.2 21.35 5.55L17.8 11.95C17.6167 12.2833 17.3708 12.5417 17.0625 12.725C16.7542 12.9083 16.4167 13 16.05 13H8.6L7.5 15H18.5C18.7833 15 19.0208 15.0958 19.2125 15.2875C19.4042 15.4792 19.5 15.7167 19.5 16C19.5 16.2833 19.4042 16.5208 19.2125 16.7125C19.0208 16.9042 18.7833 17 18.5 17H7.5C6.75 17 6.18333 16.6708 5.8 16.0125C5.41667 15.3542 5.4 14.7 5.75 14.05L7.1 11.6L3.5 4H2.5C2.21667 4 1.97917 3.90417 1.7875 3.7125C1.59583 3.52083 1.5 3.28333 1.5 3C1.5 2.71667 1.59583 2.47917 1.7875 2.2875C1.97917 2.09583 2.21667 2 2.5 2H4.125C4.30833 2 4.48333 2.05 4.65 2.15C4.81667 2.25 4.94167 2.39167 5.025 2.575L5.7 4Z", fill: "#525252" })));
@@ -1372,35 +1372,6 @@ const getVCSRecommendations = (productId) => (color) => (excludedFilters) => (ca
 
 const getRecommendationsService = (campaignType) => search_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",
-      setMode: {
-        widgetTitle: "Kaufen Sie ein Set und erhalten Sie Rabatt",
-        widgetSubtitle: "Sparen Sie bis zu 15% beim Kauf von Produkten aus der Liste",
-        basketButtonText: "Als Set kaufen",
-        appliedDiscountText: "gespart",
-        updateButtonText: "Neues Set vorschlagen",
-      },
-    },
-  },
-  en: {
-    translation: {
-      noResultText: "No results! Please, try again later.",
-      basketButtonText: "Add to Basket",
-      setMode: {
-        widgetTitle: "Buy a set to get discount",
-        widgetSubtitle: "Save up to 15% for buying products from the list",
-        basketButtonText: "Buy as set",
-        appliedDiscountText: "saved",
-        updateButtonText: "Suggest New Set",
-      },
-    },
-  },
-};
-
 const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}:host(.set) vviinn-carousel{overflow-x:auto}:host(.set) vviinn-carousel{scrollbar-width:thin}.widget-header{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}.widget-header h3{margin-top:8px;margin-bottom:0;font-size:14px;font-weight:400;line-height:20px}.update-button{display:flex;align-items:center;justify-content:center;color:#525252;gap:8px;padding:8px 10px;background:rgb(244, 244, 244);border:none;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f;width:24px;height:24px}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
@@ -1534,8 +1505,8 @@ const VviinnVprWidget = class {
     search_store.state.currencySign = this.currencySign;
     search_store.state.locale = this.locale;
     this.id = (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.el.id;
-    this.uiSessionId = index$1.v4();
-    this.trackingApi = index$1.createTrackingApi(this.apiPath, this.token);
+    this.uiSessionId = resources.v4();
+    this.trackingApi = resources.createTrackingApi(this.apiPath, this.token);
     this.getRecommendations();
     this.vviinnWidgetLoad.emit(this.getBasicEventData());
     this.trackWidgetEvent("load");
@@ -1547,7 +1518,7 @@ const VviinnVprWidget = class {
     await i18next.instance.init({
       lng: this.locale,
       fallbackLng: "en",
-      resources,
+      resources: resources.resources,
     });
     if (this.excluded) {
       this.excluded = search_store.parseExcluded(this.excluded);
@@ -1611,10 +1582,10 @@ const VviinnVprWidget = class {
     let addToBasketEvent;
     const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
     if (this.campaignType === "VCS") {
-      addToBasketEvent = index$1.createAddToBasketVpcEvent(eventBody);
+      addToBasketEvent = resources.createAddToBasketVpcEvent(eventBody);
     }
     else if (this.campaignType === "VPR") {
-      addToBasketEvent = index$1.createAddToBasketVprEvent(eventBody);
+      addToBasketEvent = resources.createAddToBasketVprEvent(eventBody);
     }
     this.trackingApi
       .trackEvent(addToBasketEvent)
@@ -1632,10 +1603,10 @@ const VviinnVprWidget = class {
     let widgetEvent;
     const eventBody = Object.assign({ action, session_id: this.uiSessionId }, rest);
     if (this.campaignType === "VCS") {
-      widgetEvent = index$1.createWidgetVpcEvent(eventBody);
+      widgetEvent = resources.createWidgetVpcEvent(eventBody);
     }
     else if (this.campaignType === "VPR") {
-      widgetEvent = index$1.createWidgetVprEvent(eventBody);
+      widgetEvent = resources.createWidgetVprEvent(eventBody);
     }
     this.trackingApi.trackEvent(widgetEvent).then(this.setTrackingDeactivated);
   }
@@ -1646,10 +1617,10 @@ const VviinnVprWidget = class {
     let resultEvent;
     const eventBody = Object.assign({ session_id: this.uiSessionId }, rest);
     if (this.campaignType === "VCS") {
-      resultEvent = index$1.createResultVpcEventByType(type)(eventBody);
+      resultEvent = resources.createResultVpcEventByType(type)(eventBody);
     }
     else if (this.campaignType === "VPR") {
-      resultEvent = index$1.createResultVprEventByType(type)(eventBody);
+      resultEvent = resources.createResultVprEventByType(type)(eventBody);
     }
     this.trackingApi.trackEvent(resultEvent).then(this.setTrackingDeactivated);
   }
@@ -1660,10 +1631,10 @@ const VviinnVprWidget = class {
     let productEvent;
     const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
     if (campaignTypeId === "VCS") {
-      productEvent = index$1.createProductVpcEventByType(eventType)(eventBody);
+      productEvent = resources.createProductVpcEventByType(eventType)(eventBody);
     }
     else if (campaignTypeId === "VPR") {
-      productEvent = index$1.createProductVprEventByType(eventType)(eventBody);
+      productEvent = resources.createProductVprEventByType(eventType)(eventBody);
     }
     return productEvent;
   }
@@ -1710,7 +1681,7 @@ 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(customizedSlots.SlotSkeleton, null), index.h("style", null, search_store.state.fallbackStyles), index.h("div", { class: "widget-header" }, index.h("div", null, index.h("h2", { part: "recommendations-title" }, index.h("slot", { name: "vviinn-recommendations-title" }, this.isSetMode
+      }, "aria-hidden": "false" }, index.h(index.Fragment, null, this.renderExternalCSS(), customizedSlots.SlotSkeleton("vpr"), index.h("style", null, search_store.state.fallbackStyles), index.h("div", { class: "widget-header" }, index.h("div", null, index.h("h2", { part: "recommendations-title" }, index.h("slot", { name: "vviinn-recommendations-title" }, this.isSetMode
       ? i18next.instance.t("setMode.widgetTitle")
       : this.blockTitle)), this.isSetMode && (index.h("h3", { part: "recommendations-subtitle" }, index.h("slot", { name: "vviinn-recommendations-subtitle" }, i18next.instance.t("setMode.widgetSubtitle"))))), this.isSetMode && this.updateButtonLocation !== "onItem" ? (index.h("button", { class: "update-button", part: "update-button-top", onClick: () => (this.updatingAllCards = true) }, index.h("slot", { name: "vviinn-update-button-icon" }, index.h(UpdateIcon, null)), index.h("slot", { name: "vviinn-update-button-text" }, index.h("span", null, i18next.instance.t("setMode.updateButtonText"))))) : null), 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

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

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

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const _package = require('./package-4b356b6b.js');
-const customizedSlots = require('./customized-slots-71029d3f.js');
+const _package = require('./package-20cf59d0.js');
+const customizedSlots = require('./customized-slots-39ba4e52.js');
 const constants = require('./constants-7684cbfc.js');
 
 const CameraIcon = () => (index.h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -68,7 +68,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(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, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed &&
+      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(CameraIcon, null))), customizedSlots.SlotSkeleton("vps"), 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, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed &&
         (this.mode === "modal" || this.mode === "camera"), excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource, textSearchShow: this.textSearchShow })));
   }
   get el() { return index.getElement(this); }

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5619b5ec.js');
 const search_store = require('./search.store-7605f369.js');
 const i18next = require('./i18next-74ff3413.js');
-const _package = require('./package-4b356b6b.js');
-const customizedSlots = require('./customized-slots-71029d3f.js');
-const index$1 = require('./index-4445cb70.js');
+const _package = require('./package-20cf59d0.js');
+const customizedSlots = require('./customized-slots-39ba4e52.js');
+const resources = require('./resources-d6fbe545.js');
 const constants = require('./constants-7684cbfc.js');
 
 const CameraActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
@@ -16,67 +16,6 @@ const CameraActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/
 const UploadActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
   index.h("path", { d: "M4.5 21C4.1 21 3.75 20.85 3.45 20.55C3.15 20.25 3 19.9 3 19.5V4.5C3 4.1 3.15 3.75 3.45 3.45C3.75 3.15 4.1 3 4.5 3H19.5C19.9 3 20.25 3.15 20.55 3.45C20.85 3.75 21 4.1 21 4.5V19.5C21 19.9 20.85 20.25 20.55 20.55C20.25 20.85 19.9 21 19.5 21H4.5ZM6.65 17.075H17.375C17.525 17.075 17.6333 17.0083 17.7 16.875C17.7667 16.7417 17.7583 16.6083 17.675 16.475L14.75 12.575C14.6667 12.475 14.5667 12.425 14.45 12.425C14.3333 12.425 14.2333 12.475 14.15 12.575L11.15 16.45L9.125 13.675C9.04167 13.575 8.94167 13.525 8.825 13.525C8.70833 13.525 8.60833 13.575 8.525 13.675L6.375 16.475C6.275 16.6083 6.25833 16.7417 6.325 16.875C6.39167 17.0083 6.5 17.075 6.65 17.075Z", fill: "currentColor" })));
 
-const resources = {
-  de: {
-    translation: {
-      exampleImagesTitle: "Mit den Beispielbildern die Suche direkt ausprobieren",
-      imageUploadButtonText: "Bild hochladen",
-      cameraButtonTextStart: "Kamera starten",
-      cameraButtonTextStop: "Kamera stoppen",
-      privacyBadgeText: "Durch das Hochladen eines Bildes willigst Du in die Verarbeitung durch unseren Partner Vviinn ein. Das Bild wird nach einer Stunde Inaktivität gelöscht.",
-      teaserText: "Finde Produkte auf \n einem Foto",
-      imageSearchModalTitle: "Bildsuche",
-      textSearchPlaceholder: "mit Text suchen",
-      emptyResultsBlock: {
-        title: "Leider nichts gefunden",
-        button: "Neues Bild hochladen",
-      },
-      serverErrorBlock: {
-        title: "Keine Verbindung",
-        button: "Erneut versuchen",
-      },
-      wrongFormatBlock: {
-        title: "Dateityp wird nicht unterstützt",
-        text: "Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch.",
-        button: "Neues Bild hochladen",
-      },
-      wrongAspectRatioBlock: {
-        title: "Das Bild ist zu schmal",
-        button: "Neues Bild hochladen",
-      },
-    },
-  },
-  en: {
-    translation: {
-      exampleImagesTitle: "Try out the search with the example images",
-      imageUploadButtonText: "Upload Photo",
-      cameraButtonTextStart: "Start Camera",
-      cameraButtonTextStop: "Stop Camera",
-      privacyBadgeText: "By uploading a picture you agree to the processing by our partner Vviinn. The image will be deleted after one hour of inactivity.",
-      teaserText: "Find Product by Photo",
-      imageSearchModalTitle: "Visual Search",
-      textSearchPlaceholder: "Search by text",
-      emptyResultsBlock: {
-        title: "Sorry, nothing found",
-        button: "Upload another image",
-      },
-      serverErrorBlock: {
-        title: "Something went wrong",
-        button: "Try again",
-      },
-      wrongFormatBlock: {
-        title: "Wrong file format",
-        text: "Please upload a .jpg, .png or .webp image file.",
-        button: "Upload another file",
-      },
-      wrongAspectRatioBlock: {
-        title: "The image is too narrow",
-        button: "Upload another image",
-      },
-    },
-  },
-};
-
 const videoStreamSettings = {
   facingMode: "environment",
   width: { ideal: 1920 },
@@ -366,7 +305,7 @@ const VviinnVpsWidget = class {
     if (this.trackingDeactivated)
       return;
     const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId"]);
-    const searchEvent = index$1.createSearchEvent(Object.assign({ session_id: this.uiSessionId, source: this.imageSource, search_area: "manual-selection" }, rest));
+    const searchEvent = resources.createSearchEvent(Object.assign({ session_id: this.uiSessionId, source: this.imageSource, search_area: "manual-selection" }, rest));
     this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
   }
   trackDetectedObject() {
@@ -374,7 +313,7 @@ const VviinnVpsWidget = class {
     if (this.trackingDeactivated)
       return;
     const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId"]);
-    const searchEvent = index$1.createSearchEvent(Object.assign({ session_id: this.uiSessionId, source: this.imageSource, search_area: "attention-point" }, rest));
+    const searchEvent = resources.createSearchEvent(Object.assign({ session_id: this.uiSessionId, source: this.imageSource, search_area: "attention-point" }, rest));
     this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
   }
   trackFilter({ detail }) {
@@ -382,7 +321,7 @@ const VviinnVpsWidget = class {
     if (this.trackingDeactivated)
       return;
     const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId"]);
-    const searchEvent = index$1.createFilterEvent(Object.assign({ session_id: this.uiSessionId, source: this.imageSource, kind: detail.kind, action: detail.action }, rest));
+    const searchEvent = resources.createFilterEvent(Object.assign({ session_id: this.uiSessionId, source: this.imageSource, kind: detail.kind, action: detail.action }, rest));
     this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
   }
   async trackTextSearchFinished({ detail }) {
@@ -402,15 +341,15 @@ const VviinnVpsWidget = class {
     search_store.searchState.token = this.token;
     search_store.searchState.campaignId = this.campaignId;
     search_store.searchState.excluded = this.excluded;
-    this.uiSessionId = index$1.v4();
-    this.trackingApi = index$1.createTrackingApi(this.apiPath, this.token);
+    this.uiSessionId = resources.v4();
+    this.trackingApi = resources.createTrackingApi(this.apiPath, this.token);
     this.id = this.el.id;
   }
   async componentWillLoad() {
     await i18next.instance.init({
       lng: this.locale,
       fallbackLng: "en",
-      resources,
+      resources: resources.resources,
     });
     customizedSlots.slotChangeListener(this, this.el);
     this.vviinnWidgetLoad.emit(this.getBasicEventData());
@@ -421,7 +360,7 @@ const VviinnVpsWidget = class {
       return;
     const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId", "widgetType"]);
     const eventBody = Object.assign({ action, session_id: this.uiSessionId }, rest);
-    const widgetEvent = index$1.createWidgetVpsEvent(eventBody);
+    const widgetEvent = resources.createWidgetVpsEvent(eventBody);
     this.trackingApi.trackEvent(widgetEvent).then(this.setTrackingDeactivated);
   }
   getProductTrackEvent(detail, eventType) {
@@ -429,21 +368,21 @@ const VviinnVpsWidget = class {
       return null;
     const { productRank, productId, campaignTypeId, widgetType, clickEvent } = detail, rest = __rest(detail, ["productRank", "productId", "campaignTypeId", "widgetType", "clickEvent"]);
     const eventBody = Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest);
-    const productEvent = index$1.createProductVpsEventByType(eventType)(eventBody);
+    const productEvent = resources.createProductVpsEventByType(eventType)(eventBody);
     return productEvent;
   }
   trackResultEvent(type) {
     if (this.trackingDeactivated)
       return;
     const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId", "widgetType"]);
-    let resultEvent = index$1.createResultVpsEventByType(type)(Object.assign({ session_id: this.uiSessionId }, rest));
+    let resultEvent = resources.createResultVpsEventByType(type)(Object.assign({ session_id: this.uiSessionId }, rest));
     this.trackingApi.trackEvent(resultEvent).then(this.setTrackingDeactivated);
   }
   trackInitialSearch() {
     if (this.trackingDeactivated)
       return;
     const _a = this.getBasicEventData(), rest = __rest(_a, ["campaignTypeId", "widgetType"]);
-    const searchEvent = index$1.createSearchEvent(Object.assign({ session_id: this.uiSessionId, search_area: "full", source: "upload" }, rest));
+    const searchEvent = resources.createSearchEvent(Object.assign({ session_id: this.uiSessionId, search_area: "full", source: "upload" }, rest));
     this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);
   }
   handleImageSelection() {
@@ -527,7 +466,7 @@ const VviinnVpsWidget = class {
   }
   render() {
     var _a;
-    return (index.h(index.Host, { exportparts: "text-search-input" }, !this.showingInButton && index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
+    return (index.h(index.Host, { exportparts: "text-search-input" }, !this.showingInButton && customizedSlots.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
         (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,

package/dist/collection/components/customized-slots.js

@@ -1,7 +1,13 @@
 import { h } from "@stencil/core";
-const defaultSlotsNames = [
+const vprSlotsNames = [
   "vviinn-recommendations-title",
   "vviinn-recommendations-subtitle",
+  "vviinn-basket-button-text",
+  "vviinn-basket-button-icon",
+  "vviinn-update-button-icon",
+  "vviinn-update-button-text",
+];
+const vpsSlotsNames = [
   "vviinn-teaser-text",
   "vviinn-image-upload-button-text",
   "vviinn-image-upload-icon",
@@ -12,13 +18,11 @@ const defaultSlotsNames = [
   "vviinn-text-search-icon",
   "vviinn-privacy-badge-text",
   "vviinn-image-search-modal-title",
-  "vviinn-basket-button-text",
-  "vviinn-basket-button-icon",
-  "vviinn-update-button-icon",
-  "vviinn-update-button-text",
 ];
 const renderNamedSlot = (name) => h("slot", { name: name });
-export const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);
+export const SlotSkeleton = (renderType) => {
+  return (renderType === "vps" ? vpsSlotsNames : vprSlotsNames).map(renderNamedSlot);
+};
 const getSlots = (element) => Array.from(element.shadowRoot.querySelectorAll("slot"));
 const getNameAttribute = (element) => element.getAttribute("name");
 const getSlotAttribute = (element) => element.getAttribute("slot");

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

@@ -28,7 +28,7 @@ import { createTrackingApi } from "../../openApi";
 import { createWidgetVprEvent, createWidgetVpcEvent, createProductVpcEventByType, createProductVprEventByType, createAddToBasketVpcEvent, createAddToBasketVprEvent, createResultVpcEventByType, createResultVprEventByType, } from "../../tracking";
 import { checkEmpryString } from "../../utils/option/option";
 import { parseExcluded } from "../../utils/collections/collectionsUtils";
-import { resources } from "../../locale/resources-vpr";
+import { resources } from "../../locale";
 import { UpdateIcon } from "../vviinn-icons";
 /**
  * @part product-card - Product Card itself.
@@ -343,7 +343,7 @@ export class VviinnVprWidget {
         loaded: true,
         empty: this.recommendations.length == 0,
         [this.mode]: true,
-      }, "aria-hidden": "false" }, h(Fragment, null, this.renderExternalCSS(), h(SlotSkeleton, null), h("style", null, state.fallbackStyles), h("div", { class: "widget-header" }, h("div", null, h("h2", { part: "recommendations-title" }, h("slot", { name: "vviinn-recommendations-title" }, this.isSetMode
+      }, "aria-hidden": "false" }, h(Fragment, null, this.renderExternalCSS(), SlotSkeleton("vpr"), h("style", null, state.fallbackStyles), h("div", { class: "widget-header" }, h("div", null, h("h2", { part: "recommendations-title" }, h("slot", { name: "vviinn-recommendations-title" }, this.isSetMode
       ? i18next.t("setMode.widgetTitle")
       : this.blockTitle)), this.isSetMode && (h("h3", { part: "recommendations-subtitle" }, h("slot", { name: "vviinn-recommendations-subtitle" }, i18next.t("setMode.widgetSubtitle"))))), this.isSetMode && this.updateButtonLocation !== "onItem" ? (h("button", { class: "update-button", part: "update-button-top", onClick: () => (this.updatingAllCards = true) }, h("slot", { name: "vviinn-update-button-icon" }, h(UpdateIcon, null)), h("slot", { name: "vviinn-update-button-text" }, h("span", null, i18next.t("setMode.updateButtonText"))))) : null), this.recommendations.length > 0 &&
       (this.useCarousel ? this.renderCarousel() : this.renderResults()), this.recommendations.length === 0 && this.hasErrorOnLoad && (h("p", { class: "no-result-text" }, this.noResultText.length

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

@@ -69,7 +69,7 @@ export class VviinnVpsButton {
   render() {
     return (h(Host, { tabindex: "0", role: "button" }, h("vviinn-button", { onClick: () => {
         this.handleClick();
-      }, addStyle: this.addStyle, part: "vviinn-button" }, h("slot", null, h(CameraIcon, null))), h(SlotSkeleton, null), 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, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed &&
+      }, addStyle: this.addStyle, part: "vviinn-button" }, h("slot", null, h(CameraIcon, null))), SlotSkeleton("vps"), 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, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed &&
         (this.mode === "modal" || this.mode === "camera"), excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource, textSearchShow: this.textSearchShow })));
   }
   static get is() { return "vviinn-vps-button"; }

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

@@ -23,7 +23,7 @@ import { createWidgetVpsEvent, createFilterEvent, createSearchEvent, createProdu
 import { SlotSkeleton } from "../customized-slots";
 import { campaignTypeNames } from "../../campaign/Campaign";
 import { parseExcluded } from "../../utils/collections/collectionsUtils";
-import { resources } from "../../locale/resources-vps";
+import { resources } from "../../locale";
 import { CameraActionIcon, UploadActionIcon } from "../vviinn-icons";
 import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
 import { videoStreamSettings } from "../../video/settings";
@@ -467,7 +467,7 @@ export class VviinnVpsWidget {
   }
   render() {
     var _a;
-    return (h(Host, { exportparts: "text-search-input" }, !this.showingInButton && h(SlotSkeleton, null), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
+    return (h(Host, { exportparts: "text-search-input" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
         (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,

package/dist/collection/locale/index.js

@@ -1 +1,2 @@
-export {};
+export * from "./resources";
+export * from "./types";

package/dist/collection/locale/{resources-vps.js → resources.js}

@@ -1,6 +1,15 @@
 export const resources = {
   de: {
     translation: {
+      noResultText: "Keine Ergebnisse! Versuche es bitte später erneut.",
+      basketButtonText: "In den Warenkorb",
+      setMode: {
+        widgetTitle: "Kaufen Sie ein Set und erhalten Sie Rabatt",
+        widgetSubtitle: "Sparen Sie bis zu 15% beim Kauf von Produkten aus der Liste",
+        basketButtonText: "Als Set kaufen",
+        appliedDiscountText: "gespart",
+        updateButtonText: "Neues Set vorschlagen",
+      },
       exampleImagesTitle: "Mit den Beispielbildern die Suche direkt ausprobieren",
       imageUploadButtonText: "Bild hochladen",
       cameraButtonTextStart: "Kamera starten",
@@ -30,6 +39,15 @@ export const resources = {
   },
   en: {
     translation: {
+      noResultText: "No results! Please, try again later.",
+      basketButtonText: "Add to Basket",
+      setMode: {
+        widgetTitle: "Buy a set to get discount",
+        widgetSubtitle: "Save up to 15% for buying products from the list",
+        basketButtonText: "Buy as set",
+        appliedDiscountText: "saved",
+        updateButtonText: "Suggest New Set",
+      },
       exampleImagesTitle: "Try out the search with the example images",
       imageUploadButtonText: "Upload Photo",
       cameraButtonTextStart: "Start Camera",

package/dist/collection/locale/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/{customized-slots-706fbadd.js → customized-slots-f68b50fd.js}

@@ -13,9 +13,15 @@ function fromString(s) {
   return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
 }
 
-const defaultSlotsNames = [
+const vprSlotsNames = [
   "vviinn-recommendations-title",
   "vviinn-recommendations-subtitle",
+  "vviinn-basket-button-text",
+  "vviinn-basket-button-icon",
+  "vviinn-update-button-icon",
+  "vviinn-update-button-text",
+];
+const vpsSlotsNames = [
   "vviinn-teaser-text",
   "vviinn-image-upload-button-text",
   "vviinn-image-upload-icon",
@@ -26,13 +32,11 @@ const defaultSlotsNames = [
   "vviinn-text-search-icon",
   "vviinn-privacy-badge-text",
   "vviinn-image-search-modal-title",
-  "vviinn-basket-button-text",
-  "vviinn-basket-button-icon",
-  "vviinn-update-button-icon",
-  "vviinn-update-button-text",
 ];
 const renderNamedSlot = (name) => h("slot", { name: name });
-const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);
+const SlotSkeleton = (renderType) => {
+  return (renderType === "vps" ? vpsSlotsNames : vprSlotsNames).map(renderNamedSlot);
+};
 const getSlots = (element) => Array.from(element.shadowRoot.querySelectorAll("slot"));
 const getNameAttribute = (element) => element.getAttribute("name");
 const getSlotAttribute = (element) => element.getAttribute("slot");