vviinn-widgets 2.3.1 → 2.4.2

package/dist/collection/tracking/product.js

@@ -0,0 +1,18 @@
+import { PRODUCT_VIEW_EVENT_TYPE, PRODUCT_CLICK_EVENT_TYPE, } from "./models";
+const vprProductView = {
+  widget: "VPR",
+  typ: PRODUCT_VIEW_EVENT_TYPE,
+};
+const vpsProductView = {
+  widget: "VPS",
+  typ: PRODUCT_VIEW_EVENT_TYPE,
+};
+const vprProductClick = {
+  widget: "VPR",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
+const vpsProductClick = {
+  widget: "VPS",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
+export { vprProductClick, vprProductView, vpsProductClick, vpsProductView };

package/dist/collection/tracking/search.js

@@ -0,0 +1,5 @@
+import { SEARCH_EVENT_EVENT_TYPE } from "./models";
+export const searchEvent = {
+  widget: "VPS",
+  typ: SEARCH_EVENT_EVENT_TYPE,
+};

package/dist/collection/tracking/widget.js

@@ -0,0 +1,10 @@
+import { WIDGET_EVENT_EVENT_TYPE } from "./models";
+const vprWidget = {
+  widget: "VPR",
+  typ: WIDGET_EVENT_EVENT_TYPE,
+};
+const vpsWidget = {
+  widget: "VPS",
+  typ: WIDGET_EVENT_EVENT_TYPE,
+};
+export { vprWidget, vpsWidget };

package/dist/esm/{app-globals-90d99f95.js → app-globals-f91c6f94.js}

@@ -1,4 +1,4 @@
-import { E as Env } from './index-d7c7df1c.js';
+import { E as Env } from './index-d7147986.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

package/dist/esm/{highlight-box_22.entry.js → cropper-handler_27.entry.js}

@@ -1,8 +1,41 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-d7c7df1c.js';
-import { O as Option, h as sequenceToOption, i as imageSearchState, a as _function, t as transform, j as move, k as makeRectangularSearchRequest, l as fromAlt, n as foldValueObject, o as scaleWithSized, p as center, q as detectedObjectEq, r as toFile, u as processSelectedFile, E as Either, v as match, w as fromImage, x as dimensionsFromImage, y as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-f35e14f8.js';
-import { p as pipe, m as pointDiffSemigroup, o as fromMouseEvent } from './Handler-639a4cb3.js';
-import { c as CheckIcon, O as OnboardingCard1Icon, d as OnboardingCard2Icon, e as OnboardingCard3Icon, A as ArrowIcon } from './index-ac2e3b9d.js';
-import { s as slotChangeListener } from './customized-slots-65b2467d.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-d7147986.js';
+import { g as getCursorValue, p as pipe, O as Option, s as sequenceToOption, i as imageSearchState, a as pointDiffSemigroup, _ as _function, t as transform, m as move, f as fromMouseEvent, b as makeRectangularSearchRequest, c as fromAlt, d as foldValueObject, e as scaleWithSized, h as center, j as detectedObjectEq, k as toFile, l as processSelectedFile, E as Either, n as match, o as fromImage, q as dimensionsFromImage, r as scaleByLargestSide, S as Semigroup, u as state, N as NonEmptyArray, v as createProductViewVpsEvent, w as createSearchEvent, x as createFilterEvent, y as v4, z as createTrackingApi, A as createWidgetVpsEvent } from './index-840ec915.js';
+import { C as CheckIcon, O as OnboardingCard1Icon, a as OnboardingCard2Icon, b as OnboardingCard3Icon, A as ArrowIcon } from './index-00c7b7c2.js';
+import { s as slotChangeListener } from './customized-slots-7be7f3b8.js';
+
+const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);touch-action:none;position:absolute;width:var(--size);z-index:4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.disabled){opacity:0.25}:host(.nw-resize){border-bottom:none;border-right:none;top:0;left:0}:host(.ne-resize){border-left:none;border-bottom:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;left:0;bottom:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";
+
+let CropperHandler = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.disabled = false;
+  }
+  render() {
+    return (h(Host, { part: `handle ${getCursorValue(this.handler.direction)}`, class: {
+        disabled: this.disabled,
+        [getCursorValue(this.handler.direction)]: true,
+      }, style: {
+        "--size": "20px",
+        cursor: getCursorValue(this.handler.direction),
+      }, draggable: false }));
+  }
+};
+CropperHandler.style = cropperHandlerCss;
+
+const fromRectangle = (shape, target) => {
+  const top = `${shape.y}px`;
+  const left = `${shape.x}px`;
+  const right = `${target.width - (shape.x + shape.width)}px`;
+  const bottom = `${target.height - (shape.y + shape.height)}px`;
+  return {
+    top,
+    right,
+    bottom,
+    left,
+  };
+};
+const printClip = (clip) => `inset(${clip.top} ${clip.right} ${clip.bottom} ${clip.left})`;
+const getClipValue = (shape, target) => printClip(fromRectangle(shape, target));
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------
@@ -24,21 +57,6 @@ var Ord = {
     compare: function (first, second) { return (first < second ? -1 : first > second ? 1 : 0); }
 };
 
-const fromRectangle = (shape, target) => {
-  const top = `${shape.y}px`;
-  const left = `${shape.x}px`;
-  const right = `${target.width - (shape.x + shape.width)}px`;
-  const bottom = `${target.height - (shape.y + shape.height)}px`;
-  return {
-    top,
-    right,
-    bottom,
-    left,
-  };
-};
-const printClip = (clip) => `inset(${clip.top} ${clip.right} ${clip.bottom} ${clip.left})`;
-const getClipValue = (shape, target) => printClip(fromRectangle(shape, target));
-
 const highlightBoxCss = ":host{display:grid;position:absolute;box-sizing:border-box;border:none;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--size:10px;--x-position:0;--y-position:0}img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pointer{position:absolute;width:var(--size);height:var(--size);background:black;border-radius:50%;z-index:2;cursor:pointer;transform:translate(var(--x-position), var(--y-position)) scale(0);-webkit-animation:0.25s linear fadein;animation:0.25s linear fadein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.pointer::after{content:\"\";cursor:pointer;border:5px solid black;border-radius:50%;width:var(--size);height:var(--size);display:block;transform:translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));padding:calc(var(--size) * 0.5);opacity:.75}@-webkit-keyframes fadein{from{transform:translate(var(--x-position), var(--y-position)) scale(0)}to{transform:translate(var(--x-position), var(--y-position)) scale(1)}}@keyframes fadein{from{transform:translate(var(--x-position), var(--y-position)) scale(0)}to{transform:translate(var(--x-position), var(--y-position)) scale(1)}}";
 
 let HighlightBox = class {
@@ -67,6 +85,7 @@ const MIN_SEARCHAREA_SIZE = 40;
 let ImageCropper = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.cropperChanged = createEvent(this, "cropperChanged", 7);
     this.disabled = false;
     this.handleMove = false;
     this.mouseStartPoint = undefined;
@@ -86,18 +105,21 @@ let ImageCropper = class {
     };
     _function.pipe(imageSearchState.searchArea, Option.map((area) => {
       const newSearchArea = transform(area, transformedHandler);
-      if (newSearchArea.width < MIN_SEARCHAREA_SIZE ||
-        newSearchArea.height < MIN_SEARCHAREA_SIZE ||
-        newSearchArea.x < 0 ||
-        newSearchArea.y < 0 ||
-        this.bounds.height - (newSearchArea.y + newSearchArea.height) < 0 ||
-        this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0)
+      if (this.outOfBounds(newSearchArea))
         return;
       imageSearchState.searchArea = Option.some(newSearchArea);
       this.mouseStartPoint = destination;
       imageSearchState.detectedObject = undefined;
     }));
   }
+  outOfBounds(area) {
+    return (area.width < MIN_SEARCHAREA_SIZE ||
+      area.height < MIN_SEARCHAREA_SIZE ||
+      area.x < 0 ||
+      area.y < 0 ||
+      this.bounds.height - (area.y + area.height) < 0 ||
+      this.bounds.width - (area.x + area.width) < 0);
+  }
   handleCropperMove(ev) {
     ev.preventDefault();
     ev.stopPropagation();
@@ -138,6 +160,7 @@ let ImageCropper = class {
     document.removeEventListener("pointerup", this.pointerReleaseListener);
     this.mouseStartPoint = undefined;
     makeRectangularSearchRequest();
+    this.cropperChanged.emit();
   }
   getStyleMap() {
     return _function.pipe(imageSearchState.searchArea, Option.map((rectangle) => {
@@ -170,6 +193,7 @@ const getFilterId = (filter) => filter.href.split("/").reverse()[0];
 let SearchFilters = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.filterSelected = createEvent(this, "filterSelected", 7);
     this.filter = null;
     this.selectedCategoryId = null;
     this.hideFilters = true;
@@ -182,11 +206,13 @@ let SearchFilters = class {
   selectFilter(filter) {
     this.selectedCategoryId = getFilterId(filter);
     imageSearchState.activeIonLink = filter;
+    this.filterSelected.emit("select");
   }
   clearSelectedFilter() {
     this.selectedCategoryId = null;
     imageSearchState.activeIonLink = undefined;
     this.findSelectedFilter().blur();
+    this.filterSelected.emit("deselect");
   }
   findSelectedFilter() {
     return this.el.shadowRoot.querySelector(ACTIVE_FILTER_CLASSNAME);
@@ -231,6 +257,7 @@ const vviinnDetectedObjectCss = ":host{--color-primary-system:#0F62FE;--color-pr
 let VviinnDetectedObject = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.detectedObjectClicked = createEvent(this, "detectedObjectClicked", 7);
     this.position = ["0", "0"];
   }
   getObjectPosition() {
@@ -249,6 +276,7 @@ let VviinnDetectedObject = class {
       imageSearchState.searchArea = Option.some(scaledRect);
     }));
     makeRectangularSearchRequest();
+    this.detectedObjectClicked.emit();
   }
   isActive() {
     if (!this.detectedObject)
@@ -283,6 +311,18 @@ let VviinnEmptyResults = class {
 };
 VviinnEmptyResults.style = vviinnEmptyResultsCss;
 
+const vviinnErrorCss = ":host{background:#F4F4F4;border-radius:8px;display:grid;grid-gap:20px;padding:24px;text-align:center}::slotted(svg){display:grid;align-self:center}::slotted(h4){margin:unset;font-weight:600;font-size:18px;line-height:24px}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--color-primary, var(--color-primary-system));font-weight:600;font-size:16px;line-height:20px;cursor:pointer}";
+
+let VviinnError = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "icon" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("slot", { name: "action" })));
+  }
+};
+VviinnError.style = vviinnErrorCss;
+
 const vviinnExampleImageCss = ":host{display:block;margin-bottom:8px;position:relative}img{width:100%;height:auto;cursor:pointer}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:12px;display:none;padding:4px 6px;pointer-events:none;position:absolute;right:12px;z-index:4}vviinn-preloader{--preloader-size:12px}@media (max-width: 640px){.image-preloader{display:block}}";
 
 let VviinnExampleImage = class {
@@ -331,7 +371,7 @@ let VviinnExampleImages = class {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images" }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+    return (h(Host, null, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images" }, 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=" })), 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=" })), 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=" })), 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=" })))));
   }
   get el() { return getElement(this); }
 };
@@ -525,6 +565,23 @@ let VviinnOverlayedModal = class {
 };
 VviinnOverlayedModal.style = vviinnOverlayedModalCss;
 
+const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;-webkit-animation:rotate 3s linear infinite;animation:rotate 3s linear infinite;border:var(--preloader-width) solid white;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@-webkit-keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
+
+let VviinnPreloader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  isActive() {
+    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
+  }
+  render() {
+    return (h(Host, { class: {
+        active: this.isActive(),
+      } }));
+  }
+};
+VviinnPreloader.style = vviinnPreloaderCss;
+
 const vviinnPrivacyBadgeCss = ":host{display:block;background:#F4F4F4;padding:17px}.content{display:grid;grid-template-columns:-webkit-min-content auto;grid-template-columns:min-content auto;grid-gap:9px}.content p{color:#525252;font-size:12px;line-height:16px;margin:unset}";
 
 let VviinnPrivacyBadge = class {
@@ -541,6 +598,190 @@ let VviinnPrivacyBadge = class {
 };
 VviinnPrivacyBadge.style = vviinnPrivacyBadgeCss;
 
+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-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}img.responsive{width:100%;height:auto;aspect-ratio:1}.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{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}";
+
+let VviinnProductCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 = {
+      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("mousedown", (event) => {
+      this.recommendationClick.emit(this.productData);
+      if (window.ga) {
+        event.preventDefault();
+      }
+      _function.pipe(getAnalyticsModule, Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
+      if (window.ga) {
+        ga("send", "event", "UX", "click", "Results", {
+          hitCallback: function () {
+            document.location.href = this.deeplink;
+          },
+        });
+      }
+    }));
+  }
+  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: false,
+    };
+    return this.responsive
+      ? ResponsiveImage(props, () => this.kek())
+      : Image(props, () => this.kek());
+  }
+  kek() {
+    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 getElement(this); }
+};
+VviinnProductCard.style = vviinnProductCardCss;
+
 const vviinnServerErrorCss = ":host{display:block}";
 
 let VviinnServerError = class {
@@ -696,6 +937,154 @@ let VviinnTeaser = class {
 };
 VviinnTeaser.style = vviinnTeaserCss;
 
+const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);min-height:580px}.start-page_block{align-content:start;border-right:1px solid #F4F4F4;display:grid;padding:48px}.start-page_block.error{align-content:center}#onboarding-block{border-right:unset;box-sizing:border-box;grid-gap:24px;overflow-y:auto;position:relative;width:100%}vviinn-teaser{margin-bottom:32px;margin-top:-24px}vviinn-image-selector{align-items:center;background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));border-radius:2px;color:white;display:grid;font-size:16px;font-weight:600;height:56px;justify-items:center;margin-bottom:16px;transition:background 0.1s ease-in-out}vviinn-image-selector:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}vviinn-image-selector:active{border-color:black}.upload-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;grid-gap:16px}.results-page{display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));justify-items:center;padding:24px;padding-right:0;position:absolute;width:calc(100% - 16px)}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{border-right:1px solid #F4F4F4;display:grid;grid-template-rows:-webkit-min-content 170px;grid-template-rows:min-content 170px;grid-gap:24px;min-width:100%}.onboarding-wrapper{position:absolute;width:100%;padding:48px;box-sizing:border-box;display:grid;grid-gap:64px;padding-bottom:24px}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#F4F4F4;border-radius:4px;border:1px solid #F4F4F4;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px}search-filters::part(show-more-filters){border:1px solid #f4f4f4;border-radius:4px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px;padding:6px 16px}search-filters::part(show-more-filters):hover{background:#EAEAEA}search-filters::part(filter):hover{background:#EAEAEA}search-filters::part(filter):focus{outline:none;border:1px solid var(--color-primary, var(--color-primary-system))}search-filters::part(filter active){background:rgba(15, 98, 254, 0.15);color:var(--color-primary, var(--color-primary-system))}.filters-wrapper{overflow:auto}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (max-width: 768px){.start-page_block{padding:24px}.onboarding-wrapper{padding:24px}}@media (max-width: 640px){.start-page{grid-template-rows:-webkit-min-content;grid-template-rows:min-content;grid-template-columns:unset;grid-gap:48px;padding:24px 0 48px 0}}@media (max-width: 640px) and (min-width: 415px){.onboarding-wrapper{position:unset}#onboarding-block{overflow:unset}.start-page.active{height:1px;overflow:auto}}@media (max-width: 415px){.results-page>*{box-sizing:border-box;padding:24px}vviinn-slide{padding-bottom:48px}.start-page_block:last-of-type{border-right:unset;overflow-y:unset;position:static;box-sizing:border-box;width:unset}.start-page_block{padding:0 24px}vviinn-teaser{margin-top:24px}.onboarding-wrapper{position:static;width:unset;padding:unset;box-sizing:border-box}.results-page{grid-template-columns:unset;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 320px){.products{grid-template-columns:unset}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}";
+
+let VviinnVpsWidget = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
+    /** When true modal window with widget will be shown */
+    this.active = false;
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    this.slidePosition = 0;
+    this.width = 0;
+    this.wrongImageFormat = false;
+    this.imageSource = null;
+  }
+  activeWatcher(value) {
+    if (value) {
+      this.overflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    else {
+      document.body.style.overflow = this.overflow;
+    }
+  }
+  trackRecommendationView({ detail }) {
+    const recommendationViewEvent = createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationViewEvent);
+  }
+  trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationClickEvent);
+  }
+  trachSearchAreaChanges() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "manual-selection",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  trackDetectedObject() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "attention-point",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  trackFilter({ detail }) {
+    const searchEvent = createFilterEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      kind: "category",
+      action: detail,
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  connectedCallback() {
+    state.apiPath = this.apiPath;
+    state.currencySign = this.currencySign;
+    state.locale = this.locale;
+    imageSearchState.token = this.token;
+    this.uiSessionId = v4();
+    this.trackingApi = createTrackingApi(this.apiPath, this.token);
+    const widgetOpenEvent = createWidgetVpsEvent({
+      action: "open",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  handleImageSelection(source) {
+    this.imageSource = source;
+    this.slidePosition = 1;
+    const root = this.el.shadowRoot.querySelector("vviinn-overlayed-modal");
+    const overlay = root.shadowRoot.querySelector("vviinn-overlay");
+    const modal = overlay.querySelector("vviinn-modal");
+    const modalBody = modal.shadowRoot.querySelector(".body");
+    modalBody.scrollTop = 0;
+    this.trackInitialSearch();
+  }
+  trackInitialSearch() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "full",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  resetState() {
+    this.resetScroll("onboarding-block");
+    this.slidePosition = 0;
+    imageSearchState.image = Option.none;
+    imageSearchState.imageUrl = Option.none;
+    imageSearchState.imageBounds = Option.none;
+    imageSearchState.searchArea = Option.none;
+    imageSearchState.results = [];
+    imageSearchState.filters = [];
+    imageSearchState.detectedObjects = [];
+    imageSearchState.activeIonLink = undefined;
+    imageSearchState.rectangleSearchForm = undefined;
+    this.resetScroll("results-block");
+  }
+  haveErrors() {
+    return this.wrongImageFormat || imageSearchState.serverError;
+  }
+  resetScroll(elementId, behavior = "auto") {
+    const element = this.el.shadowRoot.getElementById(elementId);
+    element.scroll({ top: 0, left: 0, behavior });
+  }
+  handleModalClose() {
+    this.active = false;
+    this.resetState();
+    const elementsToReset = ["onboarding-block", "results-block"];
+    elementsToReset.forEach((name) => this.resetScroll(name));
+    const widgetOpenEvent = createWidgetVpsEvent({
+      action: "close",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  render() {
+    return (h(Host, null, h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, onSecondaryActionClicked: () => this.resetState(), onModalClosed: () => this.handleModalClose(), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: { "start-page": true } }, h("div", { class: {
+        error: this.haveErrors(),
+        "start-page_block": true,
+      } }, h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, onActionClick: () => (imageSearchState.serverError = false) }), h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection("upload"), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" }, 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", { onImageSelected: () => this.handleImageSelection("example"), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", null), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter })))))), 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: {
+        hidden: imageSearchState.results.length <= 0,
+        products: true,
+      } }, imageSearchState.results.map((p, i) => {
+      var _a;
+      return (h("vviinn-product-card", { hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card", index: i }));
+    }))))))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["activeWatcher"]
+  }; }
+};
+VviinnVpsWidget.style = vviinnVpsWidgetCss;
+
 const vviinnWrongFormatCss = ":host{display:block}";
 
 let VviinnWrongFormat = class {
@@ -709,4 +1098,4 @@ let VviinnWrongFormat = class {
 };
 VviinnWrongFormat.style = vviinnWrongFormatCss;
 
-export { HighlightBox as highlight_box, ImageCropper as image_cropper, SearchFilters as search_filters, VviinnDetectedObject as vviinn_detected_object, VviinnEmptyResults as vviinn_empty_results, VviinnExampleImage as vviinn_example_image, VviinnExampleImages as vviinn_example_images, VviinnImageSelector as vviinn_image_selector, VviinnImageView as vviinn_image_view, VviinnModal as vviinn_modal, VviinnOnboarding as vviinn_onboarding, VviinnOnboardingCard1 as vviinn_onboarding_card_1, VviinnOnboardingCard2 as vviinn_onboarding_card_2, VviinnOnboardingCard3 as vviinn_onboarding_card_3, VviinnOverlay as vviinn_overlay, VviinnOverlayedModal as vviinn_overlayed_modal, VviinnPrivacyBadge as vviinn_privacy_badge, VviinnServerError as vviinn_server_error, VviinnSlide as vviinn_slide, VviinnSlider as vviinn_slider, VviinnTeaser as vviinn_teaser, VviinnWrongFormat as vviinn_wrong_format };
+export { CropperHandler as cropper_handler, HighlightBox as highlight_box, ImageCropper as image_cropper, SearchFilters as search_filters, VviinnDetectedObject as vviinn_detected_object, VviinnEmptyResults as vviinn_empty_results, VviinnError as vviinn_error, VviinnExampleImage as vviinn_example_image, VviinnExampleImages as vviinn_example_images, VviinnImageSelector as vviinn_image_selector, VviinnImageView as vviinn_image_view, VviinnModal as vviinn_modal, VviinnOnboarding as vviinn_onboarding, VviinnOnboardingCard1 as vviinn_onboarding_card_1, VviinnOnboardingCard2 as vviinn_onboarding_card_2, VviinnOnboardingCard3 as vviinn_onboarding_card_3, VviinnOverlay as vviinn_overlay, VviinnOverlayedModal as vviinn_overlayed_modal, VviinnPreloader as vviinn_preloader, VviinnPrivacyBadge as vviinn_privacy_badge, VviinnProductCard as vviinn_product_card, VviinnServerError as vviinn_server_error, VviinnSlide as vviinn_slide, VviinnSlider as vviinn_slider, VviinnTeaser as vviinn_teaser, VviinnVpsWidget as vviinn_vps_widget, VviinnWrongFormat as vviinn_wrong_format };

package/dist/esm/{customized-slots-65b2467d.js → customized-slots-7be7f3b8.js}

@@ -1,4 +1,4 @@
-import { h } from './index-d7c7df1c.js';
+import { h } from './index-d7147986.js';
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",

package/dist/esm/{index-ac2e3b9d.js → index-00c7b7c2.js}

@@ -1,4 +1,4 @@
-import { h } from './index-d7c7df1c.js';
+import { h } from './index-d7147986.js';
 
 const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
@@ -26,4 +26,4 @@ const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "non
 const CrossIcon = () => (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: "#161616" })));
 
-export { ArrowIcon as A, ChevronIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, CameraIcon as a, CrossIcon as b, CheckIcon as c, OnboardingCard2Icon as d, OnboardingCard3Icon as e };
+export { ArrowIcon as A, CheckIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, OnboardingCard2Icon as a, OnboardingCard3Icon as b, CameraIcon as c, CrossIcon as d, ChevronIcon as e };