vviinn-widgets 2.20.21 → 2.20.29

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a4becaff.js');
 const imageSearch_store = require('./imageSearch.store-967326bd.js');
 const Handler = require('./Handler-de64afa5.js');
+const i18next = require('./i18next-74ff3413.js');
 const customizedSlots = require('./customized-slots-aee3f39d.js');
 const Campaign = require('./Campaign-778b5b2c.js');
 const index$1 = require('./index-6cfe5293.js');
@@ -337,7 +338,7 @@ const VviinnEmptyResults = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.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" })), index.h("h4", { slot: "title" }, "Leider nichts gefunden"), index.h("span", { slot: "text" }, "Leider konnten wir keine passenden Produkte finden. Bitte versuche es mit einem anderen Bildausschnitt noch einmal."))));
+    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.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" })), index.h("h4", { slot: "title" }, i18next.instance.t("emptyResultsBlock.title")), index.h("span", { slot: "text" }, i18next.instance.t("emptyResultsBlock.text")))));
   }
 };
 VviinnEmptyResults.style = vviinnEmptyResultsCss;
@@ -386,6 +387,7 @@ const VviinnExampleImages = class {
     this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
     this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
     this.basicEventData = undefined;
+    this.exampleImagesTitle = undefined;
   }
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
@@ -396,7 +398,7 @@ const VviinnExampleImages = class {
     firstExampleImage.focus();
   }
   render() {
-    return (index.h(index.Host, { onFocus: () => this.delegateFocus() }, index.h("slot", { name: "vviinn-example-images-title" }, index.h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), index.h("div", { class: "images", ref: (el) => (this.imagesBlock = el) }, index.h("slot", { name: "vviinn-example-images-1" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-4" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=", basicEventData: this.basicEventData })))));
+    return (index.h(index.Host, { onFocus: () => this.delegateFocus() }, index.h("slot", { name: "vviinn-example-images-title" }, index.h("h3", null, this.exampleImagesTitle)), index.h("div", { class: "images", ref: (el) => (this.imagesBlock = el) }, index.h("slot", { name: "vviinn-example-images-1" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-4" }, index.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 index.getElement(this); }
 };
@@ -485,7 +487,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) {
@@ -518,8 +520,14 @@ const VviinnModal = class {
       return;
     this.slider = true;
   }
+  renderImage() {
+    return imageSearch_store._function.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.imageUrl, imageSearch_store.imageSearchState.image), imageSearch_store.Option.map(([url]) => {
+      const image = (index.h("img", { width: "32", height: "32", src: url, class: "title-image" }));
+      return image;
+    }), imageSearch_store.Option.getOrElse(() => null));
+  }
   render() {
-    return (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, !this.hideBackButton && (index.h("button", { part: "secondary-action", onClick: () => this.resetState() }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.25 12H3.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { class: "title", part: "title" }, index.h("slot", { name: "vviinn-image-search-modal-title" }, "Bildsuche")), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" })))), index.h("div", { class: "body" }, index.h("slot", null))));
+    return (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, !this.hideBackButton && (index.h("button", { part: "secondary-action", onClick: () => this.resetState() }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.25 12H3.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { class: "title", part: "title" }, this.renderImage(), index.h("slot", { name: "vviinn-image-search-modal-title" }, i18next.instance.t("imageSearchModalTitle"))), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" })))), index.h("div", { class: "body" }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
 };
@@ -535,7 +543,7 @@ const VviinnOnboarding = class {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-onboarding-title" }, index.h("h3", null, "So funktioniert es")), index.h("vviinn-slider", { showArrows: true }, index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-1", null)), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-2", null)), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-3", null)))));
+    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-onboarding-title" }, index.h("h3", null, i18next.instance.t("onboardingBlock.onboardingTitleText"))), index.h("vviinn-slider", { showArrows: true }, index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-1", { cardTitle: i18next.instance.t("onboardingBlock.onboardingCard1.title"), cardText: i18next.instance.t("onboardingBlock.onboardingCard1.text") })), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-2", { cardTitle: i18next.instance.t("onboardingBlock.onboardingCard2.title"), cardText: i18next.instance.t("onboardingBlock.onboardingCard2.text") })), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-3", { cardTitle: i18next.instance.t("onboardingBlock.onboardingCard3.title"), cardText: i18next.instance.t("onboardingBlock.onboardingCard3.text") })))));
   }
   get el() { return index.getElement(this); }
 };
@@ -546,12 +554,14 @@ const onboardingCardCss$2 = ":host{align-items:center;background:#f4f4f4;display
 const VviinnOnboardingCard1 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardText = undefined;
   }
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-1-icon" }, index.h(index$1.OnboardingCard1Icon, null)), index.h("slot", { name: "onboarding-card-1-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Starte die Bildsuche"), index.h("p", null, "Lade ein Bild aus Deiner Galerie hoch oder fotografiere ein Produkt mit Deiner Kamera.")))));
+    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-1-icon" }, index.h(index$1.OnboardingCard1Icon, null)), index.h("slot", { name: "onboarding-card-1-text" }, index.h("div", { class: "text" }, index.h("h4", null, this.cardTitle), index.h("p", null, this.cardText)))));
   }
   get el() { return index.getElement(this); }
 };
@@ -562,12 +572,14 @@ const onboardingCardCss$1 = ":host{align-items:center;background:#f4f4f4;display
 const VviinnOnboardingCard2 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardText = undefined;
   }
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-2-icon" }, index.h(index$1.OnboardingCard2Icon, null)), index.h("slot", { name: "onboarding-card-2-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Verfeiner Deine Suche"), index.h("p", null, "Du kannst den Bildrahmen selber festlegen und so die Produkte genau ausw\u00E4hlen.")))));
+    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-2-icon" }, index.h(index$1.OnboardingCard2Icon, null)), index.h("slot", { name: "onboarding-card-2-text" }, index.h("div", { class: "text" }, index.h("h4", null, this.cardTitle), index.h("p", null, this.cardText)))));
   }
   get el() { return index.getElement(this); }
 };
@@ -578,12 +590,14 @@ const onboardingCardCss = ":host{align-items:center;background:#f4f4f4;display:g
 const VviinnOnboardingCard3 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardText = undefined;
   }
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-3-icon" }, index.h(index$1.OnboardingCard3Icon, null)), index.h("slot", { name: "onboarding-card-3-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Ohne Hintergrund"), index.h("p", null, "Die besten Ergebnisse erh\u00E4ltst Du, wenn das gesuchte Objekt mit einfarbigem und hellem Hintergrund zu sehen ist.")))));
+    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-3-icon" }, index.h(index$1.OnboardingCard3Icon, null)), index.h("slot", { name: "onboarding-card-3-text" }, index.h("div", { class: "text" }, index.h("h4", null, this.cardTitle), index.h("p", null, this.cardText)))));
   }
   get el() { return index.getElement(this); }
 };
@@ -624,12 +638,13 @@ const vviinnPrivacyBadgeCss = ":host{display:block;background:#F4F4F4;padding:17
 const VviinnPrivacyBadge = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.privacyBadgeText = undefined;
   }
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null, index.h("div", { class: "content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), index.h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), index.h("slot", { name: "vviinn-privacy-badge-text" }, index.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 (index.h(index.Host, null, index.h("slot", null, index.h("div", { class: "content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), index.h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), index.h("slot", { name: "vviinn-privacy-badge-text" }, index.h("p", null, this.privacyBadgeText))))));
   }
   get el() { return index.getElement(this); }
 };
@@ -792,7 +807,7 @@ const VviinnTeaser = class {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, index.h("defs", null), index.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" }), index.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" })), index.h("span", { class: "vviinn-teaser-text" }, index.h("slot", { name: "vviinn-teaser-text" }, "Finde Produkte auf ", index.h("br", null), " einem Foto")))));
+    return (index.h(index.Host, null, index.h("slot", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, index.h("defs", null), index.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" }), index.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" })), index.h("span", { class: "vviinn-teaser-text" }, index.h("slot", { name: "vviinn-teaser-text" }, i18next.instance.t("teaserText_1"), index.h("br", null), i18next.instance.t("teaserText_2"))))));
   }
   get el() { return index.getElement(this); }
 };