vviinn-widgets 2.20.21 → 2.20.29

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

@@ -11,19 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { Host, h, } from "@stencil/core";
-import { version } from "../../../package.json";
-import { state } from "../../store/store";
-import { imageSearchState } from "../../store/imageSearch.store";
 import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
 import { isEmpty } from "fp-ts/string";
-import { slotChangeListener } from "../customized-slots";
 import { v4 as uuidv4 } from "uuid";
+import i18next from "i18next";
+import { version } from "../../../package.json";
+import { imageSearchState } from "../../store/imageSearch.store";
+import { state } from "../../store/store";
+import { slotChangeListener } from "../customized-slots";
 import { createTrackingApi } from "../../openApi";
 import { createFilterEvent, createProductClickVpsEvent, createProductViewVpsEvent, createSearchEvent, createWidgetVpsEvent, } from "../../tracking";
-import { pipe } from "fp-ts/lib/function";
 import { SlotSkeleton } from "../customized-slots";
 import { campaignTypeNames } from "../../campaign/Campaign";
 import { parseExcluded } from "../../utils/collections/collectionsUtils";
+import { resources } from "../../locale/resources-vps";
 const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
 const notEmptyString = (s) => !isEmpty(s);
 const notNan = (n) => !isNaN(n);
@@ -204,6 +206,11 @@ export class VviinnVpsWidget {
     this.uiSessionId = uuidv4();
     this.trackingApi = createTrackingApi(this.apiPath, this.token);
     this.id = this.el.id;
+    i18next.init({
+      lng: this.locale,
+      fallbackLng: "de-DE",
+      resources,
+    });
   }
   componentWillLoad() {
     slotChangeListener(this, this.el);
@@ -290,7 +297,7 @@ export class VviinnVpsWidget {
         }
       }, onVviinnNoResult: () => (this.wrongImageFormat = true), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "select-image_button", startUpload: this.buttonPressed &&
         this.showingInButton &&
-        this.mode === "upload" }, h("span", { slot: "upload-button-text", class: "upload-button-content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, h("defs", null), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M14.5 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), h("div", { id: "onboarding-block", class: "start-page_block" }, h("div", { class: "onboarding-wrapper" }, h("vviinn-onboarding", null), h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), h("div", { id: "results-block", class: "products-wrapper" }, h("div", { class: {
+        this.mode === "upload" }, h("span", { slot: "upload-button-text", class: "upload-button-content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, h("defs", null), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M14.5 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, i18next.t("imageUploadButtonText"))))), h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() }, privacyBadgeText: i18next.t("privacyBadgeText") })), h("div", { id: "onboarding-block", class: "start-page_block" }, h("div", { class: "onboarding-wrapper" }, h("vviinn-onboarding", null), h("vviinn-example-images", { part: "example-images", exampleImagesTitle: i18next.t("exampleImagesTitle"), onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), h("div", { id: "results-block", class: "products-wrapper" }, h("div", { class: {
         "nothing-found": true,
         hidden: imageSearchState.results.length > 0,
       } }, h("vviinn-empty-results", null), h("vviinn-onboarding", null)), h("div", { class: {
@@ -372,15 +379,20 @@ export class VviinnVpsWidget {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "Locale",
+          "resolved": "\"de-DE\" | \"en-US\"",
+          "references": {
+            "Locale": {
+              "location": "import",
+              "path": "../../locale"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The locale for currency formatting"
+          "text": "The locale for currency formatting and text localization"
         },
         "attribute": "locale",
         "reflect": false,

package/dist/collection/locale/index.js

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

package/dist/collection/locale/resources-vpr.js

@@ -0,0 +1,12 @@
+export const resources = {
+  de: {
+    translation: {
+      noResultText: "Keine Ergebnisse! Versuche es bitte später erneut.",
+    },
+  },
+  en: {
+    translation: {
+      noResultText: "No results! Please, try again later.",
+    },
+  },
+};

package/dist/collection/locale/resources-vps.js

@@ -0,0 +1,60 @@
+export const resources = {
+  "de-DE": {
+    translation: {
+      exampleImagesTitle: "Mit den Beispielbildern die Suche direkt ausprobieren",
+      imageUploadButtonText: "Kamera oder Bild auswählen",
+      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_1: "Finde Produkte auf",
+      teaserText_2: "einem Foto",
+      imageSearchModalTitle: "Bildsuche",
+      onboardingBlock: {
+        onboardingTitleText: "So funktioniert es",
+        onboardingCard1: {
+          title: "Starte die Bildsuche",
+          text: "Lade ein Bild aus Deiner Galerie hoch oder fotografiere ein Produkt mit Deiner Kamera.",
+        },
+        onboardingCard2: {
+          title: "Verfeiner Deine Suche",
+          text: "Du kannst den Bildrahmen selber festlegen und so die Produkte genau auswählen.",
+        },
+        onboardingCard3: {
+          title: "Ohne Hintergrund",
+          text: "Die besten Ergebnisse erhältst Du, wenn das gesuchte Objekt mit einfarbigem und hellem Hintergrund zu sehen ist.",
+        },
+      },
+      emptyResultsBlock: {
+        title: "Leider nichts gefunden",
+        text: "Leider konnten wir keine passenden Produkte finden. Bitte versuche es mit einem anderen Bildausschnitt noch einmal.",
+      },
+    },
+  },
+  en: {
+    translation: {
+      exampleImagesTitle: "Try out the search with the example images",
+      imageUploadButtonText: "Select camera or image",
+      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_1: "Find products in a photo",
+      teaserText_2: "",
+      imageSearchModalTitle: "Visual Search",
+      onboardingBlock: {
+        onboardingTitleText: "This is how it works",
+        onboardingCard1: {
+          title: "Start the Visual Search",
+          text: "Upload a picture from your gallery or take a picture of a product with your camera.",
+        },
+        onboardingCard2: {
+          title: "Refine Your Search",
+          text: "You can set the frame yourself, so you can choose exactly what you want.",
+        },
+        onboardingCard3: {
+          title: "Without Background",
+          text: "For best results, display the object you are looking for against a monochrome, light background.",
+        },
+      },
+      emptyResultsBlock: {
+        title: "Sorry, nothing was found",
+        text: "Sorry, we could not find any matching products. Please try again by selecting a different area of the image.",
+      },
+    },
+  },
+};

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-48ef9564.js';
 import { O as Option, o as sequenceToOption, i as imageSearchState, a as _function, t as transform, q as move, r as makeRectangularSearchRequest, u as fromAlt, v as foldValueObject, w as scaleWithSized, x as center, y as detectedObjectEq, z as toFile, B as processSelectedFile, E as Either, C as match, D as fromImage, F as dimensionsFromImage, G as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-7c025e20.js';
 import { p as pipe, q as pointDiffSemigroup, u as fromMouseEvent } from './Handler-7bfee84f.js';
+import { i as instance } from './i18next-387f2b0a.js';
 import { s as slotChangeListener } from './customized-slots-b372eaed.js';
 import { c as campaignTypeNames } from './Campaign-1af6ed38.js';
 import { O as OnboardingCard1Icon, c as OnboardingCard2Icon, d as OnboardingCard3Icon, A as ArrowIcon } from './index-33bc6d2c.js';
@@ -333,7 +334,7 @@ const VviinnEmptyResults = class {
     registerInstance(this, hostRef);
   }
   render() {
-    return (h(Host, null, h("vviinn-error", null, h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }), h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })), h("h4", { slot: "title" }, "Leider nichts gefunden"), h("span", { slot: "text" }, "Leider konnten wir keine passenden Produkte finden. Bitte versuche es mit einem anderen Bildausschnitt noch einmal."))));
+    return (h(Host, null, h("vviinn-error", null, h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }), h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })), h("h4", { slot: "title" }, instance.t("emptyResultsBlock.title")), h("span", { slot: "text" }, instance.t("emptyResultsBlock.text")))));
   }
 };
 VviinnEmptyResults.style = vviinnEmptyResultsCss;
@@ -382,6 +383,7 @@ const VviinnExampleImages = class {
     this.vviinnImageUpload = createEvent(this, "vviinnImageUpload", 7);
     this.vviinnNoResult = createEvent(this, "vviinnNoResult", 7);
     this.basicEventData = undefined;
+    this.exampleImagesTitle = undefined;
   }
   componentWillLoad() {
     slotChangeListener(this, this.el);
@@ -392,7 +394,7 @@ const VviinnExampleImages = class {
     firstExampleImage.focus();
   }
   render() {
-    return (h(Host, { onFocus: () => this.delegateFocus() }, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images", ref: (el) => (this.imagesBlock = el) }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=", basicEventData: this.basicEventData })))));
+    return (h(Host, { onFocus: () => this.delegateFocus() }, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, this.exampleImagesTitle)), h("div", { class: "images", ref: (el) => (this.imagesBlock = el) }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=", basicEventData: this.basicEventData })))));
   }
   get el() { return getElement(this); }
 };
@@ -481,7 +483,7 @@ const VviinnImageView = class {
 };
 VviinnImageView.style = vviinnImageViewCss;
 
-const vviinnModalCss = ":host{background:white;border-radius:4px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto}@media (max-width: 640px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.body{overflow-y:auto}}.head{align-items:center;border-bottom:1px solid #f4f4f4;display:flex;padding:16px}.title{font-weight:600;font-size:18px;line-height:24px;margin:0 auto}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:unset}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
+const vviinnModalCss = ":host{background:white;border-radius:4px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto}@media (max-width: 640px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.body{overflow-y:auto}}.head{display:flex;align-items:center;border-bottom:1px solid #f4f4f4;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:4px;color:#c6c6c6}button:hover{color:#000}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
 
 const VviinnModal = class {
   constructor(hostRef) {
@@ -514,8 +516,14 @@ const VviinnModal = class {
       return;
     this.slider = true;
   }
+  renderImage() {
+    return _function.pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.image), Option.map(([url]) => {
+      const image = (h("img", { width: "32", height: "32", src: url, class: "title-image" }));
+      return image;
+    }), Option.getOrElse(() => null));
+  }
   render() {
-    return (h(Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, h("div", { class: "head" }, !this.hideBackButton && (h("button", { part: "secondary-action", onClick: () => this.resetState() }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M20.25 12H3.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { class: "title", part: "title" }, h("slot", { name: "vviinn-image-search-modal-title" }, "Bildsuche")), h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#333333" })))), h("div", { class: "body" }, h("slot", null))));
+    return (h(Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, h("div", { class: "head" }, !this.hideBackButton && (h("button", { part: "secondary-action", onClick: () => this.resetState() }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M20.25 12H3.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { class: "title", part: "title" }, this.renderImage(), h("slot", { name: "vviinn-image-search-modal-title" }, instance.t("imageSearchModalTitle"))), h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "currentColor" })))), h("div", { class: "body" }, h("slot", null))));
   }
   get el() { return getElement(this); }
 };
@@ -531,7 +539,7 @@ const VviinnOnboarding = class {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "vviinn-onboarding-title" }, h("h3", null, "So funktioniert es")), h("vviinn-slider", { showArrows: true }, h("vviinn-slide", null, h("vviinn-onboarding-card-1", null)), h("vviinn-slide", null, h("vviinn-onboarding-card-2", null)), h("vviinn-slide", null, h("vviinn-onboarding-card-3", null)))));
+    return (h(Host, null, h("slot", { name: "vviinn-onboarding-title" }, h("h3", null, instance.t("onboardingBlock.onboardingTitleText"))), h("vviinn-slider", { showArrows: true }, h("vviinn-slide", null, h("vviinn-onboarding-card-1", { cardTitle: instance.t("onboardingBlock.onboardingCard1.title"), cardText: instance.t("onboardingBlock.onboardingCard1.text") })), h("vviinn-slide", null, h("vviinn-onboarding-card-2", { cardTitle: instance.t("onboardingBlock.onboardingCard2.title"), cardText: instance.t("onboardingBlock.onboardingCard2.text") })), h("vviinn-slide", null, h("vviinn-onboarding-card-3", { cardTitle: instance.t("onboardingBlock.onboardingCard3.title"), cardText: instance.t("onboardingBlock.onboardingCard3.text") })))));
   }
   get el() { return getElement(this); }
 };
@@ -542,12 +550,14 @@ const onboardingCardCss$2 = ":host{align-items:center;background:#f4f4f4;display
 const VviinnOnboardingCard1 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardText = undefined;
   }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "onboarding-card-1-icon" }, h(OnboardingCard1Icon, null)), h("slot", { name: "onboarding-card-1-text" }, h("div", { class: "text" }, h("h4", null, "Starte die Bildsuche"), h("p", null, "Lade ein Bild aus Deiner Galerie hoch oder fotografiere ein Produkt mit Deiner Kamera.")))));
+    return (h(Host, null, h("slot", { name: "onboarding-card-1-icon" }, h(OnboardingCard1Icon, null)), h("slot", { name: "onboarding-card-1-text" }, h("div", { class: "text" }, h("h4", null, this.cardTitle), h("p", null, this.cardText)))));
   }
   get el() { return getElement(this); }
 };
@@ -558,12 +568,14 @@ const onboardingCardCss$1 = ":host{align-items:center;background:#f4f4f4;display
 const VviinnOnboardingCard2 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardText = undefined;
   }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "onboarding-card-2-icon" }, h(OnboardingCard2Icon, null)), h("slot", { name: "onboarding-card-2-text" }, h("div", { class: "text" }, h("h4", null, "Verfeiner Deine Suche"), h("p", null, "Du kannst den Bildrahmen selber festlegen und so die Produkte genau ausw\u00E4hlen.")))));
+    return (h(Host, null, h("slot", { name: "onboarding-card-2-icon" }, h(OnboardingCard2Icon, null)), h("slot", { name: "onboarding-card-2-text" }, h("div", { class: "text" }, h("h4", null, this.cardTitle), h("p", null, this.cardText)))));
   }
   get el() { return getElement(this); }
 };
@@ -574,12 +586,14 @@ const onboardingCardCss = ":host{align-items:center;background:#f4f4f4;display:g
 const VviinnOnboardingCard3 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardText = undefined;
   }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "onboarding-card-3-icon" }, h(OnboardingCard3Icon, null)), h("slot", { name: "onboarding-card-3-text" }, h("div", { class: "text" }, h("h4", null, "Ohne Hintergrund"), h("p", null, "Die besten Ergebnisse erh\u00E4ltst Du, wenn das gesuchte Objekt mit einfarbigem und hellem Hintergrund zu sehen ist.")))));
+    return (h(Host, null, h("slot", { name: "onboarding-card-3-icon" }, h(OnboardingCard3Icon, null)), h("slot", { name: "onboarding-card-3-text" }, h("div", { class: "text" }, h("h4", null, this.cardTitle), h("p", null, this.cardText)))));
   }
   get el() { return getElement(this); }
 };
@@ -620,12 +634,13 @@ const vviinnPrivacyBadgeCss = ":host{display:block;background:#F4F4F4;padding:17
 const VviinnPrivacyBadge = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.privacyBadgeText = undefined;
   }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", null, h("div", { class: "content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, h("defs", null), h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), h("slot", { name: "vviinn-privacy-badge-text" }, h("p", null, "Durch das Hochladen eines Bildes willigst Du in die Verarbeitung durch unseren Partner Vviinn ein. Das Bild wird nach einer Stunde Inaktivit\u00E4t gel\u00F6scht."))))));
+    return (h(Host, null, h("slot", null, h("div", { class: "content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, h("defs", null), h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), h("slot", { name: "vviinn-privacy-badge-text" }, h("p", null, this.privacyBadgeText))))));
   }
   get el() { return getElement(this); }
 };
@@ -788,7 +803,7 @@ const VviinnTeaser = class {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, h("defs", null), h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), h("span", { class: "vviinn-teaser-text" }, h("slot", { name: "vviinn-teaser-text" }, "Finde Produkte auf ", h("br", null), " einem Foto")))));
+    return (h(Host, null, h("slot", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, h("defs", null), h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), h("span", { class: "vviinn-teaser-text" }, h("slot", { name: "vviinn-teaser-text" }, instance.t("teaserText_1"), h("br", null), instance.t("teaserText_2"))))));
   }
   get el() { return getElement(this); }
 };