vviinn-widgets 2.7.2 → 2.8.0

package/dist/components/vviinn-onboarding-card-22.js

@@ -0,0 +1,34 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { b as OnboardingCard2Icon } from './index2.js';
+import { s as slotChangeListener } from './customized-slots.js';
+
+const onboardingCardCss = ":host{align-items:center;background:#f4f4f4;display:grid;grid-template-rows:repeat(2,1fr);justify-items:center;padding:24px;width:100%}h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}svg{padding:16px 0}p{color:#525252;font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons,var(--color-icons-system))}.text{grid-gap:8px;display:grid}";
+
+let VviinnOnboardingCard2 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  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.")))));
+  }
+  get el() { return this; }
+  static get style() { return onboardingCardCss; }
+};
+VviinnOnboardingCard2 = /*@__PURE__*/ proxyCustomElement(VviinnOnboardingCard2, [1, "vviinn-onboarding-card-2"]);
+function defineCustomElement() {
+  const components = ["vviinn-onboarding-card-2"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-onboarding-card-2":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnOnboardingCard2);
+      }
+      break;
+  } });
+}
+
+export { VviinnOnboardingCard2 as V, defineCustomElement as d };

package/dist/components/vviinn-onboarding-card-3.js

@@ -0,0 +1,6 @@
+import { V as VviinnOnboardingCard3$1, d as defineCustomElement$1 } from './vviinn-onboarding-card-32.js';
+
+const VviinnOnboardingCard3 = VviinnOnboardingCard3$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnOnboardingCard3, defineCustomElement };

package/dist/components/vviinn-onboarding-card-32.js

@@ -0,0 +1,34 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as OnboardingCard3Icon } from './index2.js';
+import { s as slotChangeListener } from './customized-slots.js';
+
+const onboardingCardCss = ":host{align-items:center;background:#f4f4f4;display:grid;grid-template-rows:repeat(2,1fr);justify-items:center;padding:24px;width:100%}h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}svg{padding:16px 0}p{color:#525252;font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons,var(--color-icons-system))}.text{grid-gap:8px;display:grid}";
+
+let VviinnOnboardingCard3 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  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.")))));
+  }
+  get el() { return this; }
+  static get style() { return onboardingCardCss; }
+};
+VviinnOnboardingCard3 = /*@__PURE__*/ proxyCustomElement(VviinnOnboardingCard3, [1, "vviinn-onboarding-card-3"]);
+function defineCustomElement() {
+  const components = ["vviinn-onboarding-card-3"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-onboarding-card-3":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnOnboardingCard3);
+      }
+      break;
+  } });
+}
+
+export { VviinnOnboardingCard3 as V, defineCustomElement as d };

package/dist/components/vviinn-onboarding.js

@@ -0,0 +1,6 @@
+import { V as VviinnOnboarding$1, d as defineCustomElement$1 } from './vviinn-onboarding2.js';
+
+const VviinnOnboarding = VviinnOnboarding$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnOnboarding, defineCustomElement };

package/dist/components/vviinn-onboarding2.js

@@ -0,0 +1,63 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { s as slotChangeListener } from './customized-slots.js';
+import { d as defineCustomElement$5 } from './vviinn-onboarding-card-12.js';
+import { d as defineCustomElement$4 } from './vviinn-onboarding-card-22.js';
+import { d as defineCustomElement$3 } from './vviinn-onboarding-card-32.js';
+import { d as defineCustomElement$2 } from './vviinn-slide2.js';
+import { d as defineCustomElement$1 } from './vviinn-slider2.js';
+
+const vviinnOnboardingCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--spacer:8px}::host{display:block}h3{font-size:22px;font-weight:600;line-height:32px;margin:0 0 16px;text-align:center}vviinn-slide{background:#f4f4f4;padding:24px}svg{padding:16px 0}.text{grid-gap:8px;display:grid}.text>h4{color:#161616;font-size:18px;font-weight:600;line-height:24px}.text>h4,.text>p{margin:unset;text-align:center}.text>p{color:#525252;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.colored{fill:var(--color-icons,var(--color-icons-system))}";
+
+let VviinnOnboarding = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  componentWillLoad() {
+    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)))));
+  }
+  get el() { return this; }
+  static get style() { return vviinnOnboardingCss; }
+};
+VviinnOnboarding = /*@__PURE__*/ proxyCustomElement(VviinnOnboarding, [1, "vviinn-onboarding"]);
+function defineCustomElement() {
+  const components = ["vviinn-onboarding", "vviinn-onboarding-card-1", "vviinn-onboarding-card-2", "vviinn-onboarding-card-3", "vviinn-slide", "vviinn-slider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-onboarding":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnOnboarding);
+      }
+      break;
+    case "vviinn-onboarding-card-1":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "vviinn-onboarding-card-2":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "vviinn-onboarding-card-3":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vviinn-slide":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "vviinn-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnOnboarding as V, defineCustomElement as d };

package/dist/components/vviinn-overlay.js

@@ -0,0 +1,6 @@
+import { V as VviinnOverlay$1, d as defineCustomElement$1 } from './vviinn-overlay2.js';
+
+const VviinnOverlay = VviinnOverlay$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnOverlay, defineCustomElement };

package/dist/components/vviinn-overlay2.js

@@ -0,0 +1,28 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const vviinnOverlayCss = ":host{-webkit-animation:a .5s ease-in-out;animation:a .5s ease-in-out;background:rgba(0,0,0,.5);display:block;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:1}@-webkit-keyframes a{0%{opacity:.1}to{opacity:1}}@keyframes a{0%{opacity:.1}to{opacity:1}}";
+
+let VviinnOverlay = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return vviinnOverlayCss; }
+};
+VviinnOverlay = /*@__PURE__*/ proxyCustomElement(VviinnOverlay, [1, "vviinn-overlay"]);
+function defineCustomElement() {
+  const components = ["vviinn-overlay"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-overlay":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnOverlay);
+      }
+      break;
+  } });
+}
+
+export { VviinnOverlay as V, defineCustomElement as d };

package/dist/components/vviinn-overlayed-modal.js

@@ -0,0 +1,6 @@
+import { V as VviinnOverlayedModal$1, d as defineCustomElement$1 } from './vviinn-overlayed-modal2.js';
+
+const VviinnOverlayedModal = VviinnOverlayedModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnOverlayedModal, defineCustomElement };

package/dist/components/vviinn-overlayed-modal2.js

@@ -0,0 +1,45 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './vviinn-modal2.js';
+import { d as defineCustomElement$1 } from './vviinn-overlay2.js';
+
+const vviinnOverlayedModalCss = ":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center}@media (max-width:415px){vviinn-modal{border-radius:4px 4px 0 0;height:100vh;margin-top:32px;transform:translateY(100%);width:100vw}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";
+
+let VviinnOverlayedModal = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.secondaryActionClicked = createEvent(this, "secondaryActionClicked", 7);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: { active: this.active } }, h("vviinn-overlay", null, h("vviinn-modal", { onSecondaryActionClicked: () => this.secondaryActionClicked.emit(), active: this.active }, h("slot", null, "CONTENT")))));
+  }
+  static get style() { return vviinnOverlayedModalCss; }
+};
+VviinnOverlayedModal = /*@__PURE__*/ proxyCustomElement(VviinnOverlayedModal, [1, "vviinn-overlayed-modal", {
+    "active": [4]
+  }]);
+function defineCustomElement() {
+  const components = ["vviinn-overlayed-modal", "vviinn-modal", "vviinn-overlay"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-overlayed-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnOverlayedModal);
+      }
+      break;
+    case "vviinn-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "vviinn-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnOverlayedModal as V, defineCustomElement as d };

package/dist/components/vviinn-preloader.js

@@ -0,0 +1,6 @@
+import { V as VviinnPreloader$1, d as defineCustomElement$1 } from './vviinn-preloader2.js';
+
+const VviinnPreloader = VviinnPreloader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnPreloader, defineCustomElement };

package/dist/components/vviinn-preloader2.js

@@ -0,0 +1,34 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { i as imageSearchState } from './imageSearch.store.js';
+
+const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size)/6);-webkit-animation:c 3s linear infinite;animation:c 3s linear infinite;border:var(--preloader-width) solid #fff;border-radius:50%;border-top-color:transparent;box-sizing:border-box;display:none;height:var(--preloader-size);outline:0;transform-origin:center;width:var(--preloader-size)}:host(.active){display:flex}@-webkit-keyframes c{0%{transform:rotate(-1turn)}to{transform:rotate(1turn)}}@keyframes c{0%{transform:rotate(-1turn)}to{transform:rotate(1turn)}}";
+
+let VviinnPreloader = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  isActive() {
+    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
+  }
+  render() {
+    return (h(Host, { class: {
+        active: this.isActive(),
+      } }));
+  }
+  static get style() { return vviinnPreloaderCss; }
+};
+VviinnPreloader = /*@__PURE__*/ proxyCustomElement(VviinnPreloader, [1, "vviinn-preloader"]);
+function defineCustomElement() {
+  const components = ["vviinn-preloader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-preloader":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnPreloader);
+      }
+      break;
+  } });
+}
+
+export { VviinnPreloader as V, defineCustomElement as d };

package/dist/components/vviinn-privacy-badge.js

@@ -0,0 +1,6 @@
+import { V as VviinnPrivacyBadge$1, d as defineCustomElement$1 } from './vviinn-privacy-badge2.js';
+
+const VviinnPrivacyBadge = VviinnPrivacyBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnPrivacyBadge, defineCustomElement };

package/dist/components/vviinn-privacy-badge2.js

@@ -0,0 +1,33 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { s as slotChangeListener } from './customized-slots.js';
+
+const vviinnPrivacyBadgeCss = ":host{background:#f4f4f4;display:block;padding:17px}.content{grid-gap:9px;display:grid;grid-template-columns:-webkit-min-content auto;grid-template-columns:min-content auto}.content p{color:#525252;font-size:12px;line-height:16px;margin:unset}";
+
+let VviinnPrivacyBadge = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  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, "Wir gehen sorgf\u00E4ltig mit Deinen Daten um. Deine Bilder werden nur zum Zweck der Bildsuche gespeichert."))))));
+  }
+  get el() { return this; }
+  static get style() { return vviinnPrivacyBadgeCss; }
+};
+VviinnPrivacyBadge = /*@__PURE__*/ proxyCustomElement(VviinnPrivacyBadge, [1, "vviinn-privacy-badge"]);
+function defineCustomElement() {
+  const components = ["vviinn-privacy-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-privacy-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnPrivacyBadge);
+      }
+      break;
+  } });
+}
+
+export { VviinnPrivacyBadge as V, defineCustomElement as d };

package/dist/components/vviinn-product-card.js

@@ -0,0 +1,6 @@
+import { V as VviinnProductCard$1, d as defineCustomElement$1 } from './vviinn-product-card2.js';
+
+const VviinnProductCard = VviinnProductCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnProductCard, defineCustomElement };

package/dist/components/vviinn-product-card2.js

@@ -0,0 +1,216 @@
+import { h, attachShadow, createEvent, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { O as Option, f as Semigroup, _ as _function } from './NonEmptyArray.js';
+import { E as Either, i as imageSearchState, s as state } from './imageSearch.store.js';
+
+class GtagAnalytics {
+  sendImpression(product) {
+    var _a, _b, _c;
+    gtag('event', 'view_item_list', {
+      items: [
+        {
+          id: product.productId,
+          name: product.title,
+          brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+          category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+          list_name: 'VI VPR View',
+          price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+        }
+      ]
+    });
+    return undefined;
+  }
+  sendClick(product) {
+    var _a, _b, _c;
+    gtag('event', 'select_content', {
+      content_type: 'product',
+      items: [
+        {
+          id: product.productId,
+          name: product.title,
+          brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+          category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+          list_name: 'VI VPR View',
+          price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+        }
+      ]
+    });
+    return undefined;
+  }
+}
+
+class GAnalytics {
+  constructor() {
+    ga('require', 'ec');
+  }
+  convertProduct(product) {
+    var _a, _b, _c;
+    return {
+      id: product.productId,
+      name: product.title,
+      brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+      category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+      list: 'VI VPR View',
+      price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+    };
+  }
+  sendImpression(product) {
+    ga('ec:addImpression', this.convertProduct(product));
+    return undefined;
+  }
+  sendClick(product) {
+    var _a, _b, _c;
+    ga('ec:addProduct', {
+      id: product.productId,
+      name: product.title,
+      brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+      category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+      price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+    });
+    ga('ec:setAction', 'click', { list: 'VI VPR View' });
+    return undefined;
+  }
+}
+
+const getGtagAnalytics = () => _function.pipe(Option.fromNullable(window.gtag), Option.map(() => new GtagAnalytics()));
+const getCommonAnalytics = () => _function.pipe(Option.fromNullable(window.ga), Option.map(() => new GAnalytics()));
+const analyticsMonoid = Option.getMonoid(Semigroup.first());
+const getAnalyticsModule = analyticsMonoid.concat(getGtagAnalytics(), getCommonAnalytics());
+
+const FIT_EXPR = /fit\/\d+\//;
+const containsFit = (url) => {
+  return _function.pipe(url.match(FIT_EXPR), Either.fromNullable(url), Either.map(() => url));
+};
+const processWidth = (url, size) => {
+  return _function.pipe(containsFit(url), Either.map((url) => url.replace(FIT_EXPR, `fit/${size}/`)), Either.getOrElse(() => url));
+};
+const Linked = (props, child) => props.deeplink ? (h("a", { class: props.part, part: props.part, href: props.deeplink }, child)) : (child);
+const FormattedPrice = (props) => {
+  var _a;
+  const locale = props.locale;
+  const formattedPrice = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+  }).format(props.price);
+  const fullPrice = `${(_a = props.prefix) !== null && _a !== void 0 ? _a : ""} ${formattedPrice} ${props.currency}`;
+  return (h("span", { class: "price-amount", part: "price-amount" }, fullPrice));
+};
+const Price = (props) => {
+  const priceEl = (h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale }));
+  return (h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
+    h("span", { class: "price-sale", part: "price-sale" },
+      h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale })),
+    h("span", { class: "price-outdated", part: "price-outdated" }, priceEl),
+  ]) : (h("span", { class: "price-regular", part: "price-regular" }, priceEl))));
+};
+const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
+  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
+const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null,
+  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
+
+const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%}.price-container{display:flex;flex-direction:column}.price-regular,.price-sale{color:#161616}.price-outdated,.price-regular,.price-sale{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.price-outdated{color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{align-content:center;box-sizing:border-box;display:grid;-o-object-fit:contain;object-fit:contain;-o-object-position:50% 50%;object-position:50% 50%;text-align:center}img.responsive{aspect-ratio:1;height:auto;width:100%}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;margin-bottom:8px;overflow:hidden}.deeplink{text-decoration:none}.image-link{display:contents}picture{position:relative;width:100%}:host(.dimmed) picture:before{background:#f7f7f7;box-sizing:border-box;content:\"\";display:block;height:100%;left:0;mix-blend-mode:multiply;position:absolute;top:0;width:100%}";
+
+let VviinnProductCard = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.recommendationLoad = createEvent(this, "recommendationLoad", 7);
+    this.recommendationView = createEvent(this, "recommendationView", 7);
+    this.recommendationClick = createEvent(this, "recommendationClick", 7);
+    this.productImageLoaded = createEvent(this, "productImageLoaded", 7);
+    this.currency = undefined;
+    this.imageRatio = 1;
+    this.imageWidth = 200;
+    this.locale = undefined;
+    this.pricePrefix = undefined;
+    this.responsive = false;
+    this.dimmedBackground = false;
+    /** @internal */
+    this.index = 0;
+    this.imageLoaded = false;
+    this.productData = null;
+    this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this), { threshold: 1.0 });
+  }
+  connectedCallback() {
+    this.productData = this.getProductData();
+  }
+  getProductData() {
+    return {
+      product: this.productId,
+      rank: this.index,
+    };
+  }
+  intersectionCallback(data) {
+    if (data.some((entry) => entry.isIntersecting)) {
+      _function.pipe(getAnalyticsModule, Option.map((analytics) => analytics.sendImpression(this.getProduct())));
+      this.recommendationView.emit(this.productData);
+      this.intersectionObserver.disconnect();
+    }
+  }
+  componentDidLoad() {
+    this.recommendationLoad.emit(this.productData);
+    this.intersectionObserver.observe(this.el);
+    const links = this.el.shadowRoot.querySelectorAll("a");
+    links.forEach((link) => link.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.recommendationClick.emit(this.getProductData());
+      _function.pipe(getAnalyticsModule, Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
+    }));
+  }
+  getProduct() {
+    return imageSearchState.results.find((r) => r.productId === this.productId);
+  }
+  renderImage() {
+    const props = {
+      width: this.imageWidth,
+      height: this.imageWidth * this.imageRatio,
+      src: this.image,
+      title: this.productTitle,
+      lazy: true,
+    };
+    return this.responsive
+      ? ResponsiveImage(props, () => this.handleImageLoaded())
+      : Image(props, () => this.handleImageLoaded());
+  }
+  handleImageLoaded() {
+    this.imageLoaded = true;
+    this.productImageLoaded.emit(this.productId);
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), h("span", { class: "brand", part: "brand" }, this.brand), h("span", { class: "type", part: "type" }, this.productType), h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : state.locale })));
+  }
+  get el() { return this; }
+  static get style() { return vviinnProductCardCss; }
+};
+VviinnProductCard = /*@__PURE__*/ proxyCustomElement(VviinnProductCard, [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"],
+    "index": [2],
+    "imageLoaded": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["vviinn-product-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-product-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnProductCard);
+      }
+      break;
+  } });
+}
+
+export { VviinnProductCard as V, defineCustomElement as d };

package/dist/components/vviinn-recommendations-sidebar.js

@@ -0,0 +1,6 @@
+import { R as RecommendationsSidebar, d as defineCustomElement$1 } from './recommendations-sidebar.js';
+
+const VviinnRecommendationsSidebar = RecommendationsSidebar;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnRecommendationsSidebar, defineCustomElement };

package/dist/components/vviinn-server-error.js

@@ -0,0 +1,6 @@
+import { V as VviinnServerError$1, d as defineCustomElement$1 } from './vviinn-server-error2.js';
+
+const VviinnServerError = VviinnServerError$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnServerError, defineCustomElement };

package/dist/components/vviinn-server-error2.js

@@ -0,0 +1,35 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './vviinn-error2.js';
+
+const vviinnServerErrorCss = ":host{display:block}";
+
+let VviinnServerError = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.actionClick = createEvent(this, "actionClick", 7);
+  }
+  render() {
+    return (h(Host, null, h("vviinn-error", null, h("h4", { slot: "title" }, "Keine Verbindung"), h("span", { slot: "text" }, "Etwas hat leider nicht funktioniert. Bitte pr\u00FCfen Sie Ihre Internetverbindung und laden Sie das Bild noch einmal hoch."), h("button", { slot: "action", onClick: () => this.actionClick.emit() }, "Erneut versuchen"))));
+  }
+  static get style() { return vviinnServerErrorCss; }
+};
+VviinnServerError = /*@__PURE__*/ proxyCustomElement(VviinnServerError, [1, "vviinn-server-error"]);
+function defineCustomElement() {
+  const components = ["vviinn-server-error", "vviinn-error"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-server-error":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnServerError);
+      }
+      break;
+    case "vviinn-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnServerError as V, defineCustomElement as d };

package/dist/components/vviinn-slide.js

@@ -0,0 +1,6 @@
+import { V as VviinnSlide$1, d as defineCustomElement$1 } from './vviinn-slide2.js';
+
+const VviinnSlide = VviinnSlide$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnSlide, defineCustomElement };

package/dist/components/vviinn-slide2.js

@@ -0,0 +1,28 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const vviinnSlideCss = ":host{display:grid;justify-items:center}";
+
+let VviinnSlide = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return vviinnSlideCss; }
+};
+VviinnSlide = /*@__PURE__*/ proxyCustomElement(VviinnSlide, [1, "vviinn-slide"]);
+function defineCustomElement() {
+  const components = ["vviinn-slide"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-slide":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnSlide);
+      }
+      break;
+  } });
+}
+
+export { VviinnSlide as V, defineCustomElement as d };

package/dist/components/vviinn-slider.js

@@ -0,0 +1,6 @@
+import { V as VviinnSlider$1, d as defineCustomElement$1 } from './vviinn-slider2.js';
+
+const VviinnSlider = VviinnSlider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnSlider, defineCustomElement };