vviinn-widgets 2.7.2 → 2.7.3

package/dist/esm/{index-2fdd499d.js → cropper-handler_30.entry.js}

@@ -1,10 +1,11 @@
-import { a as getRenderingRef, f as forceUpdate } from './index-51f71d18.js';
+import { r as registerInstance, h, H as Host, g as getRenderingRef, f as forceUpdate, c as createEvent, a as getElement } from './index-2d36a726.js';
+import { C as CheckIcon, a as ChevronIcon, O as OnboardingCard1Icon, b as OnboardingCard2Icon, c as OnboardingCard3Icon, A as ArrowIcon, d as CameraIcon } from './index-040cfca9.js';
 
 // -------------------------------------------------------------------------------------
 /**
  * @since 2.0.0
  */
-function identity(a) {
+function identity$1(a) {
     return a;
 }
 function flow(ab, bc, cd, de, ef, fg, gh, hi, ij) {
@@ -198,7 +199,7 @@ var struct = function (semigroups) { return ({
  * @category instances
  * @since 2.10.0
  */
-var first = function () { return ({ concat: identity }); };
+var first = function () { return ({ concat: identity$1 }); };
 /**
  * Always return the last argument.
  *
@@ -226,7 +227,7 @@ const semigroupDiff = {
   concat: (x, y) => x - y,
 };
 
-const fromRectangle$1 = ({ x, y }) => {
+const fromRectangle$2 = ({ x, y }) => {
   return {
     x,
     y,
@@ -280,27 +281,27 @@ const getCursorValue = (direction) => {
       return "pointer";
   }
 };
-const fromRectangle = (r) => [
+const fromRectangle$1 = (r) => [
   {
-    position: fromRectangle$1(r),
+    position: fromRectangle$2(r),
     direction: HandlerDirection.NorthWest,
   },
   {
-    position: pointSumSemigroup.concat(fromRectangle$1(r), {
+    position: pointSumSemigroup.concat(fromRectangle$2(r), {
       x: r.width,
       y: 0,
     }),
     direction: HandlerDirection.NorthEast,
   },
   {
-    position: pointSumSemigroup.concat(fromRectangle$1(r), {
+    position: pointSumSemigroup.concat(fromRectangle$2(r), {
       x: 0,
       y: r.height,
     }),
     direction: HandlerDirection.SouthWest,
   },
   {
-    position: pointSumSemigroup.concat(fromRectangle$1(r), {
+    position: pointSumSemigroup.concat(fromRectangle$2(r), {
       x: r.width,
       y: r.height,
     }),
@@ -308,6 +309,40 @@ const fromRectangle = (r) => [
   },
 ];
 
+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));
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function createCommonjsModule(fn, basedir, module) {
@@ -1255,7 +1290,7 @@ var concatAll = function (M) { return function (startWith) { return function (as
 exports.concatAll = concatAll;
 });
 
-var Eq = createCommonjsModule(function (module, exports) {
+var Eq$1 = createCommonjsModule(function (module, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.eqDate = exports.eqNumber = exports.eqString = exports.eqBoolean = exports.eq = exports.strictEqual = exports.getStructEq = exports.getTupleEq = exports.Contravariant = exports.getMonoid = exports.getSemigroup = exports.eqStrict = exports.URI = exports.contramap = exports.tuple = exports.struct = exports.fromEquals = void 0;
 
@@ -1445,7 +1480,7 @@ exports.eqDate = {
 };
 });
 
-var Ord = createCommonjsModule(function (module, exports) {
+var Ord$1 = createCommonjsModule(function (module, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ordDate = exports.ordNumber = exports.ordString = exports.ordBoolean = exports.ord = exports.getDualOrd = exports.getTupleOrd = exports.between = exports.clamp = exports.max = exports.min = exports.geq = exports.leq = exports.gt = exports.lt = exports.equals = exports.trivial = exports.Contravariant = exports.getMonoid = exports.getSemigroup = exports.URI = exports.contramap = exports.reverse = exports.tuple = exports.fromCompare = exports.equalsDefault = void 0;
 
@@ -1756,7 +1791,7 @@ function compare(first, second) {
     return first < second ? -1 : first > second ? 1 : 0;
 }
 var strictOrd = {
-    equals: Eq.eqStrict.equals,
+    equals: Eq$1.eqStrict.equals,
     compare: compare
 };
 /**
@@ -1863,7 +1898,7 @@ exports.semigroupProduct = exports.semigroupSum = exports.semigroupString = expo
 
 var _ = __importStar(internal);
 var M = __importStar(Magma);
-var Or = __importStar(Ord);
+var Or = __importStar(Ord$1);
 // -------------------------------------------------------------------------------------
 // constructors
 // -------------------------------------------------------------------------------------
@@ -3962,7 +3997,7 @@ var mapLeft$2 = function (f) { return function (fa) {
  */
 var FromEither$1 = {
     URI: URI$2,
-    fromEither: identity
+    fromEither: identity$1
 };
 // -------------------------------------------------------------------------------------
 // natural transformations
@@ -4191,7 +4226,7 @@ var match = matchW;
  * @category destructors
  * @since 2.0.0
  */
-var fold = match;
+var fold$1 = match;
 /**
  * Less strict version of [`getOrElse`](#getorelse).
  *
@@ -8019,7 +8054,7 @@ const createBearerHeaders = (token) => new Headers({
 const checkToken = (token) => pipe(token, existAndNotEmpty, Either.mapLeft(() => invalidTokenError));
 const processBearerToken = (token) => pipe(token, checkToken, Either.map(createBearerHeaders));
 
-const sequenceToEither = Apply$1.sequenceT(Either.Apply);
+const sequenceToEither$1 = Apply$1.sequenceT(Either.Apply);
 
 const imageFormFromFile = (file) => {
   const body = new FormData();
@@ -8040,8 +8075,8 @@ const detectedObjectEq = {
 };
 const searchSessionClient = (initialData, campaignId = none) => {
   const searchUrl = "search/session";
-  const requestUrl = _function.pipe(campaignId, fold(() => searchUrl, (campaignId) => `${searchUrl}?campaign-id=${campaignId}`));
-  return _function.pipe(sequenceToEither(getApiPath(), createInitPostRequest), fromEither, chainW(makeRequest(requestUrl, initialData)));
+  const requestUrl = _function.pipe(campaignId, fold$1(() => searchUrl, (campaignId) => `${searchUrl}?campaign-id=${campaignId}`));
+  return _function.pipe(sequenceToEither$1(getApiPath(), createInitPostRequest), fromEither, chainW(makeRequest(requestUrl, initialData)));
 };
 
 var ObjectMemberName;
@@ -8069,29 +8104,29 @@ const foldValueObject = (i) => {
 };
 
 const getLink = (item, path) => pipe(item.links, fromNullable, chain$3((linksObject) => fromNullable(linksObject[path])));
-const linkRequest = (link) => (data) => pipe(sequenceToEither(getApiPath(), createRequestFromMethod(link.method)), fromEither, chainW(makeRequest(link.href, data)));
+const linkRequest = (link) => (data) => pipe(sequenceToEither$1(getApiPath(), createRequestFromMethod(link.method)), fromEither, chainW(makeRequest(link.href, data)));
 
 const move = (origin, position) => {
-  const originPosition = fromRectangle$1(origin);
+  const originPosition = fromRectangle$2(origin);
   const newPosition = pointSumSemigroup.concat(originPosition, position);
   return Object.assign(Object.assign({}, newPosition), { width: origin.width, height: origin.height });
 };
 const transformNorthEast = (origin, handler) => {
-  const newPosition = pointSumSemigroup.concat(fromRectangle$1(origin), {
+  const newPosition = pointSumSemigroup.concat(fromRectangle$2(origin), {
     x: 0,
     y: handler.position.y,
   });
   return Object.assign(Object.assign({}, newPosition), { width: origin.width + handler.position.x, height: origin.height - handler.position.y });
 };
 const transformNorthWest = (origin, handler) => {
-  const newPosition = pointSumSemigroup.concat(fromRectangle$1(origin), handler.position);
+  const newPosition = pointSumSemigroup.concat(fromRectangle$2(origin), handler.position);
   return Object.assign(Object.assign({}, newPosition), { width: origin.width - handler.position.x, height: origin.height - handler.position.y });
 };
 const transformSouthEast = (origin, handler) => {
   return Object.assign(Object.assign({}, origin), { width: origin.width + handler.position.x, height: origin.height + handler.position.y });
 };
 const transformSouthWest = (origin, handler) => {
-  const newPosition = pointSumSemigroup.concat(fromRectangle$1(origin), {
+  const newPosition = pointSumSemigroup.concat(fromRectangle$2(origin), {
     x: handler.position.x,
     y: 0,
   });
@@ -8194,7 +8229,7 @@ const transformSendForm = (form, data) => [
     }),
   },
 ];
-const formRequest = (form, data = {}) => (payload) => _function.pipe(sequenceToEither(getApiPath(), _function.pipe(requestFromForm(form, data), mapLeft$2((error) => {
+const formRequest = (form, data = {}) => (payload) => _function.pipe(sequenceToEither$1(getApiPath(), _function.pipe(requestFromForm(form, data), mapLeft$2((error) => {
   return { kind: "app", inner: error };
 }))), fromEither, chainW((initialData) => {
   const apiPath = initialData[0];
@@ -8220,6 +8255,26 @@ const fromFile = async (f) => {
 const sequenceToOption = Apply$1.sequenceT(Option.Apply);
 const checkEmpryString = (x) => x.length > 0 ? Option.some(x) : Option.none;
 
+// -------------------------------------------------------------------------------------
+// -------------------------------------------------------------------------------------
+// instances
+// -------------------------------------------------------------------------------------
+/**
+ * @category instances
+ * @since 2.10.0
+ */
+var Eq = {
+    equals: function (first, second) { return first === second; }
+};
+/**
+ * @category instances
+ * @since 2.10.0
+ */
+var Ord = {
+    equals: Eq.equals,
+    compare: function (first, second) { return (first < second ? -1 : first > second ? 1 : 0); }
+};
+
 /**
  * Find the first element returned by an option based selector function
  *
@@ -8960,7 +9015,7 @@ exports.uniq = uniq;
  */
 var sortBy = function (ords) {
     if ((0, exports.isNonEmpty)(ords)) {
-        var M = (0, Ord.getMonoid)();
+        var M = (0, Ord$1.getMonoid)();
         return (0, exports.sort)(ords.reduce(M.concat, M.empty));
     }
     return _function.identity;
@@ -9574,7 +9629,7 @@ exports.getSemigroup = getSemigroup;
  * @since 2.5.0
  */
 var getEq = function (E) {
-    return (0, Eq.fromEquals)(function (xs, ys) { return xs.length === ys.length && xs.every(function (x, i) { return E.equals(x, ys[i]); }); });
+    return (0, Eq$1.fromEquals)(function (xs, ys) { return xs.length === ys.length && xs.every(function (x, i) { return E.equals(x, ys[i]); }); });
 };
 exports.getEq = getEq;
 /**
@@ -10175,7 +10230,7 @@ exports.uniq = uniq;
  */
 var sortBy = function (ords) {
     if ((0, exports.isNonEmpty)(ords)) {
-        var M = (0, Ord.getMonoid)();
+        var M = (0, Ord$1.getMonoid)();
         return (0, exports.sort)(ords.reduce(M.concat, M.empty));
     }
     return exports.copy;
@@ -12685,7 +12740,7 @@ exports.getMonoid = getMonoid;
  * @since 2.5.0
  */
 var getEq = function (E) {
-    return (0, Eq.fromEquals)(function (xs, ys) { return xs.length === ys.length && xs.every(function (x, i) { return E.equals(x, ys[i]); }); });
+    return (0, Eq$1.fromEquals)(function (xs, ys) { return xs.length === ys.length && xs.every(function (x, i) { return E.equals(x, ys[i]); }); });
 };
 exports.getEq = getEq;
 /**
@@ -12708,7 +12763,7 @@ exports.getEq = getEq;
  * @since 2.5.0
  */
 var getOrd = function (O) {
-    return (0, Ord.fromCompare)(function (a, b) {
+    return (0, Ord$1.fromCompare)(function (a, b) {
         var aLen = a.length;
         var bLen = b.length;
         var len = Math.min(aLen, bLen);
@@ -15918,7 +15973,7 @@ const makeHeight = (size) => {
     size,
   };
 };
-const ordBySize = Ord.contramap((s) => s.size)(number.Ord);
+const ordBySize = Ord$1.contramap((s) => s.size)(number.Ord);
 const ordByKind = {
   equals: (x, y) => x.kind === y.kind,
   compare: (x, y) => {
@@ -16068,7 +16123,7 @@ const makeRectangularSearchRequest = async () => {
 const uploadFile = (file) => {
   state.loading = true;
   const fileForm = imageFormFromFile(file);
-  const tokenWithFile = sequenceToEither(processBearerToken(state.token), right(fileForm));
+  const tokenWithFile = sequenceToEither$1(processBearerToken(state.token), right(fileForm));
   return pipe(tokenWithFile, map$4(([headers, body]) => {
     return {
       headers,
@@ -16098,7 +16153,7 @@ onChange("activeIonLink", async (newLink) => {
 });
 onChange("searchArea", (newSearchArea) => {
   pipe(newSearchArea, Option.map((area) => {
-    state.cropperHandlers = fromRectangle(area);
+    state.cropperHandlers = fromRectangle$1(area);
   }));
 });
 onChange("serverError", () => {
@@ -16113,128 +16168,1896 @@ const processSelectedFile = async (file) => {
   const fileResizer = resizeFileTo(RESIZED_IMAGE_WIDTH);
   const resizeFileTask = pipe(originFile, fromEither, chainTaskK(fileResizer));
   const session = await pipe(resizeFileTask, chain(uploadFile))();
-  pipe(sequenceToEither(session, originFile), map$4(([sessionObject, file]) => uploadHiresFile(sessionObject, file)));
+  pipe(sequenceToEither$1(session, originFile), map$4(([sessionObject, file]) => uploadHiresFile(sessionObject, file)));
   await pipe(resizeFileTask, chainTaskK(imageFromFileTask), map(setSelectedImage))();
   return session;
 };
 
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
-    // find the complete implementation of crypto (msCrypto) on IE11.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+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)}}";
 
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+let HighlightBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  getInsetValue() {
+    return pipe(sequenceToOption(imageSearchState.searchArea, imageSearchState.imageBounds), Option.map(([selection, image]) => getClipValue(selection, image)), Option.getOrElse(() => ""));
+  }
+  renderImage() {
+    return pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.imageBounds), Option.map(([url, bounds]) => (h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), Option.getOrElse(() => ""));
+  }
+  render() {
+    return h(Host, null, this.renderImage());
+  }
+};
+HighlightBox.style = highlightBoxCss;
+
+const findTarget = (ev) => {
+  return ev.target;
+};
+
+const imageCropperCss = ":host{display:block;height:100%;left:0;position:absolute;top:0;width:100%}:host(.hidden){visibility:hidden}.crop-area{border:1px solid white;box-sizing:border-box;position:absolute;touch-action:none;transition-property:border-color, opacity;transition-duration:.25s;transition-timing-function:ease-in-out;z-index:2;position:relative;will-change:transform}.crop-area.active{border-color:whitesmoke}.crop-area.disabled{opacity:0.25}";
+
+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;
+    this.bounds = undefined;
+  }
+  componentDidLoad() {
+    this.bounds = this.el.getBoundingClientRect();
+  }
+  handleHandlerMove(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const destination = fromMouseEvent(event);
+    const distance = pointDiffSemigroup.concat(destination, this.mouseStartPoint);
+    const transformedHandler = {
+      position: distance,
+      direction: this.handlerMoveDirection,
+    };
+    _function.pipe(imageSearchState.searchArea, Option.map((area) => {
+      const newSearchArea = transform(area, transformedHandler);
+      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();
+    const destination = fromMouseEvent(ev);
+    const distance = pointDiffSemigroup.concat(destination, this.mouseStartPoint);
+    _function.pipe(imageSearchState.searchArea, Option.map((searchArea) => {
+      const newSearchArea = move(searchArea, distance);
+      if (newSearchArea.x < 0 ||
+        newSearchArea.y < 0 ||
+        this.bounds.height - (newSearchArea.y + newSearchArea.height) < 0 ||
+        this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0)
+        return;
+      imageSearchState.detectedObject = undefined;
+      imageSearchState.searchArea = Option.some(newSearchArea);
+      this.mouseStartPoint = destination;
+    }));
+  }
+  handlePointerDown(event) {
+    event.stopPropagation();
+    this.mouseStartPoint = fromMouseEvent(event);
+    // should be htmlelement or handler
+    const target = findTarget(event);
+    if (target.localName === "cropper-handler") {
+      this.handlerMoveDirection = target.handler.direction;
+      this.pointerMoveListener = this.handleHandlerMove.bind(this);
+    }
+    else {
+      this.pointerMoveListener = this.handleCropperMove.bind(this);
+    }
+    this.pointerReleaseListener = this.handleSearchAreaRelease.bind(this);
+    this.el.addEventListener("pointermove", this.pointerMoveListener);
+    window.addEventListener("pointerup", this.pointerReleaseListener, {
+      once: true,
+    });
+  }
+  handleSearchAreaRelease() {
+    this.el.removeEventListener("pointermove", this.pointerMoveListener);
+    document.removeEventListener("pointerup", this.pointerReleaseListener);
+    this.mouseStartPoint = undefined;
+    makeRectangularSearchRequest();
+    this.cropperChanged.emit();
+  }
+  getStyleMap() {
+    return _function.pipe(imageSearchState.searchArea, Option.map((rectangle) => {
+      return {
+        width: `${rectangle.width}px`,
+        height: `${rectangle.height}px`,
+        transform: `translate3d(${rectangle.x}px, ${rectangle.y}px, 0)`,
+        cursor: this.handleMove ? "move" : "default",
+      };
+    }), Option.getOrElse(() => {
+      return {};
+    }));
+  }
+  render() {
+    return (h(Host, { exportparts: "handle, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize" }, h("div", { class: {
+        "crop-area": true,
+        active: this.handleMove,
+        disabled: this.disabled,
+      }, draggable: false, style: this.getStyleMap(), onContextMenu: () => false, onPointerDown: (ev) => this.handlePointerDown(ev) }, imageSearchState.cropperHandlers.map((handler) => (h("cropper-handler", { disabled: this.disabled, handler: handler, onPointerDown: (ev) => this.handlePointerDown(ev) }))))));
+  }
+  get el() { return getElement(this); }
+};
+ImageCropper.style = imageCropperCss;
+
+const searchFiltersCss = ":host{display:grid;grid-gap:1rem}.filters{display:flex;flex-direction:row;flex-wrap:wrap;gap:0.5rem}.filter{align-items:center;-webkit-animation-duration:0.25s;animation-duration:0.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:scalein;animation-name:scalein;border:1px solid lightgray;cursor:pointer;display:flex;flex-direction:row;grid-gap:8px;height:-webkit-max-content;height:-moz-max-content;height:max-content;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0.1rem;transform:scale(0);transition-property:background;transition-duration:0.25s;transition-timing-function:ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:6px 16px}.filter.active{border:1px solid black;padding:6px 8px}.filter:hover{border:1px solid gray}.show-more{display:flex}.show-more.hidden{display:none}.show-more::after{content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.2l-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E\");display:block;height:16px;margin-top:1px;margin-left:8px}.show-more.active::after{transform:rotateX(180deg)}@-webkit-keyframes scalein{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}@keyframes scalein{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}@media (max-width: 415px){.show-more::after{transform:rotate(-90deg)}.show-more.active::after{transform:rotate(90deg)}}@media (max-width: 800px){.filters{flex-wrap:nowrap;overflow-x:scroll;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;grid-gap:unset}.filter{scroll-snap-align:end;margin-right:0.5rem}}";
+
+const FILTERS_COUNT = 5;
+const ACTIVE_FILTER_CLASSNAME = ".filter.active";
+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;
+  }
+  handleFilterSelection(filter) {
+    return this.isFilterSelected(filter)
+      ? this.clearSelectedFilter()
+      : this.selectFilter(filter);
+  }
+  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);
+  }
+  toggleFilters() {
+    this.hideFilters = !this.hideFilters;
+  }
+  handleEnter(ev, f) {
+    if (ev.key !== "Enter")
+      return;
+    this.handleFilterSelection(f);
+  }
+  isFilterSelected(filterLink) {
+    return this.selectedCategoryId === getFilterId(filterLink);
+  }
+  render() {
+    return (h(Host, { exportparts: "filter, show-more-filters" }, h("div", { class: "filters" }, this.filter.filters
+      .filter((_, i) => (this.hideFilters ? i < FILTERS_COUNT : true))
+      .map((f, n) => (h("div", { role: "button", tabindex: "0", part: this.isFilterSelected(f) ? "filter active" : "filter", class: {
+        filter: true,
+        active: this.selectedCategoryId === getFilterId(f),
+      }, style: { "animation-delay": `${n * 10}ms` }, onPointerUp: (ev) => {
+        ev.stopPropagation();
+        this.handleFilterSelection(f);
+      }, onKeyPress: (ev) => this.handleEnter(ev, f) }, this.isFilterSelected(f) ? h(CheckIcon, null) : null, f.name))), h("div", { class: {
+        filter: true,
+        "show-more": true,
+        hidden: this.filter.filters.length <= FILTERS_COUNT,
+        active: !this.hideFilters,
+      }, role: "button", tabindex: "0", "aria-role": "button", onClick: () => this.toggleFilters(), onKeyPress: (ev) => {
+        if (ev.key === "Enter") {
+          this.toggleFilters();
+        }
+      }, part: "show-more-filters" }, this.hideFilters ? "Zeige mehr" : "Zeige weniger"))));
+  }
+  get el() { return getElement(this); }
+};
+SearchFilters.style = searchFiltersCss;
+
+const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#E0E0E0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) button{border-radius:2px}:host(.grid) button{border-radius:50%}button{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}button{fill:#525252}button.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
+
+const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
+const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
+const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
+const CONTENT_GROUP_CSS_CLASS = "items-group";
+let VviinnCarousel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.moveDirection = "right";
+    this.contentGroups = [];
+    this.activeContentGroup = 0;
+    this.mode = "continuity";
+    this.imageWidth = 140;
+    this.showScroll = true;
+    this.recommendations = [];
+    this.columns = 0;
+    this.resizeObserver = new ResizeObserver(() => this.handleResize());
+    this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
+  }
+  connectedCallback() {
+    this.setItemWidth();
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  componentDidLoad() {
+    this.setWidth();
+    this.processScrollbarWidth();
+    this.columns = this.getColumnsNumber();
+    const slot = this.el.querySelector(".content");
+    this.mutationObserver.observe(slot, { subtree: true, childList: true });
+    this.resizeObserver.observe(this.getHostParent());
+  }
+  getItemWidthFromDocument() {
+    return parseInt(getComputedStyle(document.body).getPropertyValue(CAROUSEL_IMAGE_WIDTH_CSS_VAR));
+  }
+  setItemWidth() {
+    const widthInDocument = this.getItemWidthFromDocument();
+    const itemWidth = isNaN(widthInDocument)
+      ? this.imageWidth
+      : widthInDocument;
+    this.el.style.setProperty(CAROUSEL_IMAGE_WIDTH_CSS_VAR, `${itemWidth}px`);
+  }
+  getContentClassMap() {
+    return {
+      content: true,
+      [this.moveDirection]: true,
+      [this.mode]: true,
+      "show-scrollbar": this.showScroll,
+    };
+  }
+  handleResize() {
+    this.setWidth();
+    this.processScrollbarWidth();
+    this.setItemWidth();
+    const newColumns = this.getColumnsNumber();
+    if (newColumns !== this.columns) {
+      this.columns = newColumns;
     }
   }
+  calculateMoveStep() {
+    const contentWidths = this.getContent().map((el) => el.getBoundingClientRect().width);
+    const sum = contentWidths.reduce((acc, val) => acc + val, 0);
+    return sum / contentWidths.length;
+  }
+  getHostParent() {
+    const parent = this.el.parentNode;
+    return parent.host.parentElement;
+  }
+  setWidth() {
+    const parent = this.getHostParent();
+    if (!parent)
+      return;
+    const parentStyles = getComputedStyle(parent);
+    const parentWidth = parent.getBoundingClientRect().width;
+    const width = parentWidth -
+      (parseInt(parentStyles["padding-right"]) +
+        parseInt(parentStyles["padding-left"]));
+    this.el.style.setProperty(CAROUSEL_WIDTH_CSS_VAR, `${width}px`);
+  }
+  getParent() {
+    const parentNode = this.el.parentNode;
+    const host = parentNode.host;
+    return host.parentElement;
+  }
+  cloneSlottedContent() {
+    this.setWidth();
+  }
+  getActiveGroupIndex() {
+    var _a, _b;
+    const contentNodeLeft = (_b = (_a = this.getContentNode()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left;
+    if (!contentNodeLeft)
+      return 0;
+    const groups = this.getContentGroups();
+    const groupsPositions = groups.map((g) => g.getBoundingClientRect().left);
+    const indexedPositions = groupsPositions
+      .map((value, index) => [value, index])
+      .filter((x) => x[0] >= 0);
+    return indexedPositions.length > 0 ? indexedPositions[0][1] : 0;
+  }
+  getContentNode() {
+    return this.el.querySelector(".content");
+  }
+  getContent() {
+    const children = this.getContentNode().children;
+    return Array.from(children).map((c) => c);
+  }
+  getColumnsNumber() {
+    const styleSheet = getComputedStyle(this.el);
+    const columnsInCss = styleSheet.getPropertyValue(COLUMNS_NUMBER_CSS_VAR);
+    return parseInt(columnsInCss);
+  }
+  getContentGroups() {
+    return Array.from(this.el.querySelectorAll(`.${CONTENT_GROUP_CSS_CLASS}`));
+  }
+  showNext() {
+    this.moveDirection = "right";
+    const contentContainer = this.getContentNode();
+    requestAnimationFrame(() => {
+      contentContainer.scrollTo({
+        top: 0,
+        left: contentContainer.scrollLeft + this.calculateMoveStep(),
+        behavior: "smooth",
+      });
+    });
+  }
+  showPrev() {
+    this.moveDirection = "left";
+    const contentContainer = this.getContentNode();
+    requestAnimationFrame(() => {
+      contentContainer.scrollTo({
+        top: 0,
+        left: contentContainer.scrollLeft - this.calculateMoveStep(),
+        behavior: "smooth",
+      });
+    });
+  }
+  scroll(index) {
+    const contentContainer = this.getContentNode();
+    requestAnimationFrame(() => {
+      contentContainer.scrollTo({
+        top: 0,
+        left: this.calculateMoveStep() * index,
+        behavior: "smooth",
+      });
+    });
+  }
+  processScrollbarWidth() {
+    const target = this.getContentNode();
+    const scrollRatio = (target.scrollLeft + target.clientWidth) / target.scrollWidth;
+    const scrolledWidth = target.clientWidth * scrollRatio;
+    this.el.style.setProperty("--vviinn-progressbar-width", `${scrolledWidth}px`);
+    this.activeContentGroup = this.getActiveGroupIndex();
+  }
+  showBullets() {
+    return this.mode === "grid" && this.showScroll;
+  }
+  showScrollbar() {
+    return this.mode === "continuity" && this.showScroll;
+  }
+  getClassMap() {
+    return {
+      [this.mode]: true,
+      "show-scrollbar": this.showScrollbar(),
+    };
+  }
+  renderRecommendation(recommendation, rank) {
+    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.mode === "continuity", index: rank }));
+  }
+  renderRecommendationGroup(elements) {
+    return h("div", { class: CONTENT_GROUP_CSS_CLASS }, elements);
+  }
+  renderRecommendationGroups(elements) {
+    return elements.map((el) => this.renderRecommendationGroup(el));
+  }
+  renderRecommendations() {
+    return this.mode === "grid"
+      ? this.renderGrid()
+      : this.renderRecommendationsElements();
+  }
+  renderRecommendationsElements() {
+    return this.recommendations.map((r, i) => this.renderRecommendation(r, i));
+  }
+  renderGrid() {
+    const recommendations = this.renderRecommendationsElements();
+    const grouppedContent = _Array.chunksOf(this.getColumnsNumber())(recommendations);
+    return this.renderRecommendationGroups(grouppedContent);
+  }
+  renderBullets() {
+    const numberOfBullets = Math.ceil(this.recommendations.length / this.getColumnsNumber());
+    const bulletsArray = Array.from(Array(numberOfBullets).keys());
+    return bulletsArray.map((index) => (h("div", { class: {
+        bullet: true,
+        active: this.activeContentGroup === index,
+      }, onClick: () => this.scroll(index) })));
+  }
+  render() {
+    return (h(Host, { class: this.getClassMap() }, h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button" }, h(ChevronIcon, null)), h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" }, h(ChevronIcon, null))), this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
+  }
+  get el() { return getElement(this); }
+};
+VviinnCarousel.style = vviinnCarouselCss;
 
-  return getRandomValues(rnds8);
-}
+const vviinnDetectedObjectCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--size:32px;--x-position:0;--y-position:0;background:rgba(22, 22, 22, 0.5);border-radius:50%;border:none;cursor:pointer;display:block;height:var(--size);position:absolute;transition:opacity 0.25s;width:var(--size);z-index:2;transform:translate(calc(var(--x-position) - (var(--size) * 0.5)), calc(var(--y-position) - (var(--size) * 0.5)));transition:background 0.1 ease-in-out}:host(:hover){background:rgba(22, 22, 22, 0.75)}:host(.active){background:var(--color-primary, var(--color-primary-system))!important;border:2px solid white}:host::after{--size:32px;border-radius:50%;content:\"\";cursor:pointer;display:block;height:calc(var(--size) * 0.25);transform:translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));width:calc(var(--size) * 0.25);background:white}";
 
-const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+let VviinnDetectedObject = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.detectedObjectClicked = createEvent(this, "detectedObjectClicked", 7);
+    this.position = ["0", "0"];
+  }
+  getObjectPosition() {
+    return _function.pipe(imageSearchState.imageBounds, Option.map((bounds) => {
+      const objectRectangle = fromAlt(foldValueObject(this.detectedObject).rectangle);
+      const { x, y } = _function.pipe(objectRectangle, scaleWithSized(bounds), center);
+      return [`${x}px`, `${y}px`];
+    }), Option.getOrElse(() => ["0", "0"]));
+  }
+  selectDetectedObject() {
+    _function.pipe(imageSearchState.imageBounds, Option.map((bounds) => {
+      const rectangle = foldValueObject(this.detectedObject).rectangle;
+      const transformedRect = fromAlt(rectangle);
+      const scaledRect = scaleWithSized(bounds)(transformedRect);
+      imageSearchState.detectedObject = this.detectedObject;
+      imageSearchState.searchArea = Option.some(scaledRect);
+    }));
+    makeRectangularSearchRequest();
+    this.detectedObjectClicked.emit();
+  }
+  isActive() {
+    if (!this.detectedObject)
+      return false;
+    if (!imageSearchState.detectedObject)
+      return false;
+    const thisObject = foldValueObject(this.detectedObject);
+    const savedObject = foldValueObject(imageSearchState.detectedObject);
+    return detectedObjectEq.equals(thisObject, savedObject);
+  }
+  render() {
+    return (h(Host, { class: {
+        active: this.isActive(),
+      }, onClick: () => this.selectDetectedObject(), style: {
+        "--x-position": this.getObjectPosition()[0],
+        "--y-position": this.getObjectPosition()[1],
+      } }));
+  }
+};
+VviinnDetectedObject.style = vviinnDetectedObjectCss;
 
-function validate(uuid) {
-  return typeof uuid === 'string' && REGEX.test(uuid);
-}
+const vviinnEmptyResultsCss = ":host{display:grid}vviinn-error{justify-items:center}";
 
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
+let VviinnEmptyResults = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.actionClick = createEvent(this, "actionClick", 7);
+  }
+  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."))));
+  }
+};
+VviinnEmptyResults.style = vviinnEmptyResultsCss;
 
-var byteToHex = [];
+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}";
 
-for (var i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).substr(1));
-}
+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;
 
-function stringify$1(arr) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
-  // of the following:
-  // - One or more input array values don't map to a hex octet (leading to
-  // "undefined" in the uuid)
-  // - Invalid input values for the RFC `version` or `variant` fields
+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}}";
 
-  if (!validate(uuid)) {
-    throw TypeError('Stringified UUID is invalid');
+let VviinnExampleImage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.exampleImageSelected = createEvent(this, "exampleImageSelected", 7);
+    this.exampleImageError = createEvent(this, "exampleImageError", 7);
+    this.src = "";
+    this.width = 0;
+    this.height = 0;
+    this.selected = false;
   }
+  async selectImage(_event) {
+    this.selected = true;
+    const file = await toFile(this.src);
+    const processResult = await processSelectedFile(file);
+    _function.pipe(processResult, Either.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
+    this.selected = false;
+  }
+  showPreloader() {
+    return ((imageSearchState.objectDetectionInProgress ||
+      imageSearchState.loading) &&
+      this.selected);
+  }
+  render() {
+    return (h(Host, null, this.showPreloader() ? (h("div", { class: "image-preloader" }, h("vviinn-preloader", null))) : null, h("img", { onClick: (ev) => this.selectImage(ev), src: this.src, width: this.width, height: this.height })));
+  }
+};
+VviinnExampleImage.style = vviinnExampleImageCss;
+
+const defaultSlotsNames = [
+  "vviinn-onboarding-title",
+  "vviinn-onboarding-card-1-icon",
+  "vviinn-onboarding-card-1-text",
+  "vviinn-onboarding-card-2-icon",
+  "vviinn-onboarding-card-2-text",
+  "vviinn-onboarding-card-3-icon",
+  "vviinn-onboarding-card-3-text",
+  "vviinn-example-images-title",
+  "vviinn-example-images-1",
+  "vviinn-example-images-2",
+  "vviinn-example-images-3",
+  "vviinn-example-images-4",
+  "vviinn-teaser-text",
+  "vviinn-image-upload-button-text",
+  "vviinn-privacy-badge-text"
+];
+const renderNamedSlot = (name) => h("slot", { name: name });
+const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);
+const getSlots = (element) => Array.from(element.shadowRoot.querySelectorAll("slot"));
+const getNameAttribute = (element) => element.getAttribute("name");
+const getSlotAttribute = (element) => element.getAttribute("slot");
+const elementContainSlot = (slot) => (container) => {
+  const name1 = getNameAttribute(slot);
+  const name2 = getSlotAttribute(container);
+  return name1 === name2;
+};
+const getContentToReplace = (targets) => (acc, content) => {
+  const replaceCandidate = targets.find(elementContainSlot(content));
+  if (replaceCandidate) {
+    acc.set(content, replaceCandidate);
+  }
+  return acc;
+};
+const replaceSlotContent = (content, target) => {
+  target.innerHTML = content.outerHTML;
+};
+const slotChangeListener = (component, element) => {
+  component.connectedCallback = function () {
+    document.addEventListener("globalSlotsChanged", ({ detail }) => {
+      const slotsToReplace = getSlots(element).reduce(getContentToReplace(detail), new Map());
+      slotsToReplace.forEach(replaceSlotContent);
+    }, true);
+  };
+  component.connectedCallback.call(component);
+};
 
-  return uuid;
-}
+const vviinnExampleImagesCss = "h3{font-size:22px;font-weight:600;line-height:32px;margin:0;margin-bottom:16px;text-align:center}.images{display:block;-moz-column-count:2;column-count:2;-moz-column-gap:16px;column-gap:16px}";
 
-function v4(options, buf, offset) {
-  options = options || {};
-  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+let VviinnExampleImages = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.imageSelected = createEvent(this, "imageSelected", 7);
+    this.imageSelectedError = createEvent(this, "imageSelectedError", 7);
+  }
+  handleImageSelection() {
+    this.imageSelected.emit();
+  }
+  handleImageSelectionError() {
+    this.imageSelectedError.emit();
+  }
+  componentWillLoad() {
+    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: 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); }
+};
+VviinnExampleImages.style = vviinnExampleImagesCss;
 
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+const vviinnImageSelectorCss = ":host{display:block}:host(::hover){background:whitesmoke}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}label{cursor:pointer;display:grid;padding:0.5rem;transition:background 0.1s ease-in-out}";
 
-  if (buf) {
-    offset = offset || 0;
+let VviinnImageSelector = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.imageSelected = createEvent(this, "imageSelected", 7);
+    this.imageSelectedError = createEvent(this, "imageSelectedError", 7);
+  }
+  async handleInputChange(event) {
+    const input = event.target;
+    const processingResult = await processSelectedFile(input.files[0]);
+    _function.pipe(processingResult, match$1(() => this.imageSelectedError.emit(), () => this.imageSelected.emit()));
+    input.value = null;
+  }
+  isLoading() {
+    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
+  }
+  render() {
+    return (h(Host, { exportparts: "button" }, this.isLoading() ? h("vviinn-preloader", null) : null, this.isLoading() ? null : (h("label", { htmlFor: "fileInput", part: "button" }, h("slot", { name: "upload-button-text" }, "Upload image"))), h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: "image/*", onChange: (event) => this.handleInputChange(event) })));
+  }
+};
+VviinnImageSelector.style = vviinnImageSelectorCss;
 
-    for (var i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
+const vviinnImageViewCss = ":host{display:grid;position:relative;justify-self:center}img{box-sizing:border-box;filter:brightness(60%);position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:-1}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:18px;padding:4px 6px;pointer-events:none;position:absolute;right:18px;z-index:4}vviinn-preloader{--preloader-size:12px}";
 
-    return buf;
+const getImageSizes = (i) => {
+  const dimensions = dimensionsFromImage(i);
+  const resize = scaleByLargestSide(288);
+  const newDimensions = resize(dimensions);
+  const sizes = newDimensions.map(d => d.size);
+  return [sizes[0], sizes[1]];
+};
+let VviinnImageView = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  handleInitialImageLoad(ev) {
+    const target = ev.target;
+    const imageBounds = fromImage(target);
+    const padding = 12;
+    const { x, y } = move(imageBounds, { x: padding, y: padding });
+    const searchArea = {
+      x,
+      y,
+      width: imageBounds.width - padding * 2,
+      height: imageBounds.height - padding * 2,
+    };
+    imageSearchState.imageBounds = Option.some(imageBounds);
+    imageSearchState.searchArea = Option.some(searchArea);
+  }
+  renderDetectedObject(object) {
+    return h("vviinn-detected-object", { detectedObject: object });
+  }
+  renderImage() {
+    return _function.pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.image), Option.map(([url, refImage]) => {
+      const [width, height] = getImageSizes(refImage);
+      const image = (h("img", { decoding: "async", width: width, height: height, src: url, onLoad: (el) => this.handleInitialImageLoad(el), draggable: false }));
+      return image;
+    }), Option.getOrElse(() => null));
+  }
+  renderCropper() {
+    return _function.pipe(imageSearchState.imageUrl, Option.map(() => h("image-cropper", null)), Option.getOrElse(() => null));
   }
+  render() {
+    return (h(Host, null, imageSearchState.loading ||
+      imageSearchState.objectDetectionInProgress ? (h("div", { class: "image-preloader" }, h("vviinn-preloader", null))) : null, h("highlight-box", null), this.renderImage(), this.renderCropper(), imageSearchState.detectedObjects.map((o) => this.renderDetectedObject(o))));
+  }
+};
+VviinnImageView.style = vviinnImageViewCss;
 
-  return stringify$1(rnds);
-}
+const vviinnModalCss = ":host{background:white;border-radius:4px;box-sizing:border-box;display:grid;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;max-width:960px}@media (max-width: 415px){:host{-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.closed){-webkit-animation-name:fade-out;animation-name:fade-out;-webkit-animation-fill-mode:none;animation-fill-mode:none}.body{overflow-y:auto}}@media (max-width: 640px) and (min-width: 415px){:host{max-width:80%}}.head{align-items:center;border-bottom:1px solid #F4F4F4;display:grid;grid-gap:16px;grid-template-columns:-webkit-min-content auto -webkit-min-content;grid-template-columns:min-content auto min-content;justify-items:center;padding:16px}.title{font-weight:600;font-size:18px;line-height:24px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:unset}@-webkit-keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
 
-/**
- * Check if we're required to add a port number.
- *
- * @see https://url.spec.whatwg.org/#default-port
- * @param {Number|String} port Port number we need to check
- * @param {String} protocol Protocol we need to check against.
- * @returns {Boolean} Is it a default port for the given protocol
- * @api private
- */
-var requiresPort = function required(port, protocol) {
-  protocol = protocol.split(':')[0];
-  port = +port;
+let VviinnModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    this.secondaryActionClicked = createEvent(this, "secondaryActionClicked", 7);
+    this.active = false;
+    this.slider = false;
+  }
+  close() {
+    this.active = false;
+    setTimeout(() => {
+      this.modalClosed.emit();
+    }, this.slider ? 500 : 0);
+  }
+  handleAnimationEnd(ev) {
+    if (ev.animationName !== "fade-in")
+      return;
+    this.slider = true;
+  }
+  render() {
+    return (h(Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, h("div", { class: "head" }, h("button", { part: "secondary-action", onClick: () => this.secondaryActionClicked.emit() }, 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" }, "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))));
+  }
+};
+VviinnModal.style = vviinnModalCss;
 
-  if (!port) return false;
+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;margin-bottom:16px;text-align:center}vviinn-slide{background:#f4f4f4;padding:24px}svg{padding:16px 0}.text{display:grid;grid-gap:8px}.text>h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}.text>p{color:#525252;font-size:14px;font-style:normal;font-weight:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}";
 
-  switch (protocol) {
-    case 'http':
-    case 'ws':
-    return port !== 80;
+let VviinnOnboarding = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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 getElement(this); }
+};
+VviinnOnboarding.style = vviinnOnboardingCss;
 
-    case 'https':
-    case 'wss':
-    return port !== 443;
+const onboardingCardCss$2 = ":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:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
 
-    case 'ftp':
-    return port !== 21;
+let VviinnOnboardingCard1 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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.")))));
+  }
+  get el() { return getElement(this); }
+};
+VviinnOnboardingCard1.style = onboardingCardCss$2;
 
-    case 'gopher':
-    return port !== 70;
+const onboardingCardCss$1 = ":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:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
 
-    case 'file':
-    return false;
+let VviinnOnboardingCard2 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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 getElement(this); }
+};
+VviinnOnboardingCard2.style = onboardingCardCss$1;
 
-  return port !== 0;
+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:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
+
+let VviinnOnboardingCard3 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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 getElement(this); }
 };
+VviinnOnboardingCard3.style = onboardingCardCss;
 
-var has = Object.prototype.hasOwnProperty
-  , undef;
+const vviinnOverlayCss = ":host{-webkit-animation:fade-in 0.5s ease-in-out;animation:fade-in 0.5s ease-in-out;background:rgba(0, 0, 0, 0.5);display:block;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:9999}@-webkit-keyframes fade-in{from{opacity:0.1}to{opacity:1}}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}";
 
-/**
- * Decode a URI encoded string.
- *
+let VviinnOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+VviinnOverlay.style = vviinnOverlayCss;
+
+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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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")))));
+  }
+};
+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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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 getElement(this); }
+};
+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$1.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$1 = (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 = 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: false,
+    };
+    return this.responsive
+      ? ResponsiveImage(props, () => this.kek())
+      : Image$1(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$1.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : state$1.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : state$1.locale })));
+  }
+  get el() { return getElement(this); }
+};
+VviinnProductCard.style = vviinnProductCardCss;
+
+const vviinnServerErrorCss = ":host{display:block}";
+
+let VviinnServerError = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"))));
+  }
+};
+VviinnServerError.style = vviinnServerErrorCss;
+
+const vviinnSlideCss = ":host{display:grid;justify-items:center}";
+
+let VviinnSlide = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+VviinnSlide.style = vviinnSlideCss;
+
+const getStyleMap = (data) => {
+  return {
+    "arrow-wrapper": true,
+    [data.kind]: true,
+    disabled: data.disabled,
+  };
+};
+const Arrow = ({ kind, tabindex, disabled, onClick, onKeyDown, }) => (h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown },
+  h(ArrowIcon, null)));
+
+const vviinnSliderCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), -webkit-min-content);grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#E0E0E0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#C6C6C6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#A8A8A8}.arrow-wrapper:hover>svg{fill:#8D8D8D}";
+
+let VviinnSlider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.elementsCount = 0;
+    this.internalPosition = 0;
+    this.swipeStartPosition = Option.none;
+    this.showBullets = true;
+    this.position = 0;
+    this.showArrows = false;
+  }
+  positionWatchHandler(newValue) {
+    this.internalPosition = newValue;
+    this.el.style.setProperty("--position", `${newValue}`);
+    this.setActiveCssClassToSlide(newValue);
+  }
+  connectedCallback() {
+    this.handleDomContentChanges();
+  }
+  handleDomContentChanges() {
+    const items = this.el.querySelectorAll("vviinn-slide");
+    this.elementsCount = items.length;
+    this.el.style.setProperty("--num-items", `${this.elementsCount}`);
+    this.setActiveCssClassToSlide(0);
+  }
+  setActiveCssClassToSlide(index) {
+    const items = this.el.querySelectorAll("vviinn-slide");
+    items.forEach((i) => i.classList.remove("active"));
+    items[index].classList.add("active");
+  }
+  goToSlide(index) {
+    this.internalPosition = index;
+    this.el.style.setProperty("--position", `${index}`);
+    this.setActiveCssClassToSlide(index);
+  }
+  renderBullets() {
+    return this.showBullets ? (h("div", { class: "controls" }, NonEmptyArray.range(0, this.elementsCount - 1).map((i) => (h("div", { class: {
+        bullet: true,
+        active: i == this.internalPosition % this.elementsCount,
+      }, onClick: () => this.goToSlide(i) }))))) : null;
+  }
+  nextSlide() {
+    this.internalPosition++;
+    this.renderSlidePosition();
+  }
+  prevSlide() {
+    const nextPostion = this.internalPosition - 1;
+    this.internalPosition =
+      nextPostion > -1 ? nextPostion : this.elementsCount - 1;
+    this.renderSlidePosition();
+  }
+  renderSlidePosition() {
+    requestAnimationFrame(() => {
+      this.el.style.setProperty("--position", `${this.internalPosition % this.elementsCount}`);
+    });
+  }
+  handleKeyDown(event) {
+    if (event.key !== "Space" && event.key !== "Enter")
+      return;
+    const target = event.target;
+    const direction = target.className.includes("prev") ? "prev" : "next";
+    switch (direction) {
+      case "prev":
+        this.prevSlide();
+        break;
+      case "next":
+        this.nextSlide();
+        break;
+    }
+  }
+  handleTouchStart(event) {
+    if (!this.showBullets)
+      return;
+    this.swipeStartPosition = _function.pipe(event.touches[0], Option.fromNullable, Option.map((t) => t.clientX));
+  }
+  handleTouchEnd(event) {
+    if (!this.showBullets)
+      return;
+    const swipeEndPosition = _function.pipe(event.changedTouches[0], Option.fromNullable, Option.map((t) => t.clientX));
+    _function.pipe(sequenceToOption(this.swipeStartPosition, swipeEndPosition), Option.map(([start, end]) => Ord.compare(start, end)), Option.map((swipeDirection) => {
+      switch (swipeDirection) {
+        case 1:
+          return this.nextSlide();
+        case -1:
+          return this.prevSlide();
+      }
+    }));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "items-wrapper" }, h("div", { class: "items", onTouchStart: (e) => this.handleTouchStart(e), onTouchEnd: (e) => this.handleTouchEnd(e) }, h("slot", null))), this.showArrows
+      ? [
+        h(Arrow, { kind: "prev", onClick: () => this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
+        h(Arrow, { kind: "next", onClick: () => this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
+      ]
+      : null, this.renderBullets()));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "position": ["positionWatchHandler"]
+  }; }
+};
+VviinnSlider.style = vviinnSliderCss;
+
+const vviinnTeaserCss = ":host{align-items:center;display:grid;justify-items:center;grid-gap:16px}.vviinn-teaser-text{font-size:28px;font-weight:600;line-height:40px;size:28px;text-align:center}";
+
+let VviinnTeaser = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    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")))));
+  }
+  get el() { return getElement(this); }
+};
+VviinnTeaser.style = vviinnTeaserCss;
+
+const createBearerString = (x) => `Bearer ${x}`;
+const createAuthedHeader = (x) => new Headers({
+  Authorization: x,
+});
+const createFetchAuthOptions = (x) => {
+  return {
+    headers: x,
+  };
+};
+const createBearAuthedHeader = _function.flow(createBearerString, createAuthedHeader, createFetchAuthOptions);
+
+const isVPR = (c) => c._tag === "VPR";
+function fold(onVPR, onVCS) {
+  return (c) => (isVPR(c) ? onVPR() : onVCS());
+}
+function fromString(s) {
+  return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
+}
+
+const sequenceToEither = sequenceT(Apply);
+const apiGet = (path, data = {}) => pipe(sequenceToEither(getApiPath(), createInitGetRequest), fromEither, chainW(makeRequest(path, data)));
+
+const getVPRRecommendations = (productId) => (campaigns) => (options) => {
+  const url = _function.pipe(campaigns, map$3(encodeURIComponent), match(() => `product/${productId}/similar-products`, (encodedCampaignsIds) => `product/${productId}/similar-products?campaigns=${encodedCampaignsIds}`));
+  return apiGet(url, options);
+};
+
+const getVCSRecommendations = (productId) => (campaigns) => (options) => {
+  const url = _function.pipe(campaigns, map$3(encodeURIComponent), match(() => `product/${productId}/cross-selling-products`, (encodedCampaignsIds) => `product/${productId}/cross-selling-products?campaigns=${encodedCampaignsIds}`));
+  return apiGet(url, options);
+};
+
+const getRecommendationsService = (campaignType) => _function.pipe(fromString(campaignType), fold(() => getVPRRecommendations, () => getVCSRecommendations));
+
+function isFunction(value) {
+    return typeof value === 'function';
+}
+
+function createErrorClass(createImpl) {
+    const _super = (instance) => {
+        Error.call(instance);
+        instance.stack = new Error().stack;
+    };
+    const ctorFunc = createImpl(_super);
+    ctorFunc.prototype = Object.create(Error.prototype);
+    ctorFunc.prototype.constructor = ctorFunc;
+    return ctorFunc;
+}
+
+const UnsubscriptionError = createErrorClass((_super) => function UnsubscriptionErrorImpl(errors) {
+    _super(this);
+    this.message = errors
+        ? `${errors.length} errors occurred during unsubscription:
+${errors.map((err, i) => `${i + 1}) ${err.toString()}`).join('\n  ')}`
+        : '';
+    this.name = 'UnsubscriptionError';
+    this.errors = errors;
+});
+
+function arrRemove(arr, item) {
+    if (arr) {
+        const index = arr.indexOf(item);
+        0 <= index && arr.splice(index, 1);
+    }
+}
+
+class Subscription {
+    constructor(initialTeardown) {
+        this.initialTeardown = initialTeardown;
+        this.closed = false;
+        this._parentage = null;
+        this._finalizers = null;
+    }
+    unsubscribe() {
+        let errors;
+        if (!this.closed) {
+            this.closed = true;
+            const { _parentage } = this;
+            if (_parentage) {
+                this._parentage = null;
+                if (Array.isArray(_parentage)) {
+                    for (const parent of _parentage) {
+                        parent.remove(this);
+                    }
+                }
+                else {
+                    _parentage.remove(this);
+                }
+            }
+            const { initialTeardown: initialFinalizer } = this;
+            if (isFunction(initialFinalizer)) {
+                try {
+                    initialFinalizer();
+                }
+                catch (e) {
+                    errors = e instanceof UnsubscriptionError ? e.errors : [e];
+                }
+            }
+            const { _finalizers } = this;
+            if (_finalizers) {
+                this._finalizers = null;
+                for (const finalizer of _finalizers) {
+                    try {
+                        execFinalizer(finalizer);
+                    }
+                    catch (err) {
+                        errors = errors !== null && errors !== void 0 ? errors : [];
+                        if (err instanceof UnsubscriptionError) {
+                            errors = [...errors, ...err.errors];
+                        }
+                        else {
+                            errors.push(err);
+                        }
+                    }
+                }
+            }
+            if (errors) {
+                throw new UnsubscriptionError(errors);
+            }
+        }
+    }
+    add(teardown) {
+        var _a;
+        if (teardown && teardown !== this) {
+            if (this.closed) {
+                execFinalizer(teardown);
+            }
+            else {
+                if (teardown instanceof Subscription) {
+                    if (teardown.closed || teardown._hasParent(this)) {
+                        return;
+                    }
+                    teardown._addParent(this);
+                }
+                (this._finalizers = (_a = this._finalizers) !== null && _a !== void 0 ? _a : []).push(teardown);
+            }
+        }
+    }
+    _hasParent(parent) {
+        const { _parentage } = this;
+        return _parentage === parent || (Array.isArray(_parentage) && _parentage.includes(parent));
+    }
+    _addParent(parent) {
+        const { _parentage } = this;
+        this._parentage = Array.isArray(_parentage) ? (_parentage.push(parent), _parentage) : _parentage ? [_parentage, parent] : parent;
+    }
+    _removeParent(parent) {
+        const { _parentage } = this;
+        if (_parentage === parent) {
+            this._parentage = null;
+        }
+        else if (Array.isArray(_parentage)) {
+            arrRemove(_parentage, parent);
+        }
+    }
+    remove(teardown) {
+        const { _finalizers } = this;
+        _finalizers && arrRemove(_finalizers, teardown);
+        if (teardown instanceof Subscription) {
+            teardown._removeParent(this);
+        }
+    }
+}
+Subscription.EMPTY = (() => {
+    const empty = new Subscription();
+    empty.closed = true;
+    return empty;
+})();
+const EMPTY_SUBSCRIPTION = Subscription.EMPTY;
+function isSubscription(value) {
+    return (value instanceof Subscription ||
+        (value && 'closed' in value && isFunction(value.remove) && isFunction(value.add) && isFunction(value.unsubscribe)));
+}
+function execFinalizer(finalizer) {
+    if (isFunction(finalizer)) {
+        finalizer();
+    }
+    else {
+        finalizer.unsubscribe();
+    }
+}
+
+const config = {
+    onUnhandledError: null,
+    onStoppedNotification: null,
+    Promise: undefined,
+    useDeprecatedSynchronousErrorHandling: false,
+    useDeprecatedNextContext: false,
+};
+
+const timeoutProvider = {
+    setTimeout(handler, timeout, ...args) {
+        const { delegate } = timeoutProvider;
+        if (delegate === null || delegate === void 0 ? void 0 : delegate.setTimeout) {
+            return delegate.setTimeout(handler, timeout, ...args);
+        }
+        return setTimeout(handler, timeout, ...args);
+    },
+    clearTimeout(handle) {
+        const { delegate } = timeoutProvider;
+        return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearTimeout) || clearTimeout)(handle);
+    },
+    delegate: undefined,
+};
+
+function reportUnhandledError(err) {
+    timeoutProvider.setTimeout(() => {
+        const { onUnhandledError } = config;
+        if (onUnhandledError) {
+            onUnhandledError(err);
+        }
+        else {
+            throw err;
+        }
+    });
+}
+
+function noop() { }
+
+const COMPLETE_NOTIFICATION = (() => createNotification('C', undefined, undefined))();
+function errorNotification(error) {
+    return createNotification('E', undefined, error);
+}
+function nextNotification(value) {
+    return createNotification('N', value, undefined);
+}
+function createNotification(kind, value, error) {
+    return {
+        kind,
+        value,
+        error,
+    };
+}
+
+function errorContext(cb) {
+    {
+        cb();
+    }
+}
+
+class Subscriber extends Subscription {
+    constructor(destination) {
+        super();
+        this.isStopped = false;
+        if (destination) {
+            this.destination = destination;
+            if (isSubscription(destination)) {
+                destination.add(this);
+            }
+        }
+        else {
+            this.destination = EMPTY_OBSERVER;
+        }
+    }
+    static create(next, error, complete) {
+        return new SafeSubscriber(next, error, complete);
+    }
+    next(value) {
+        if (this.isStopped) {
+            handleStoppedNotification(nextNotification(value), this);
+        }
+        else {
+            this._next(value);
+        }
+    }
+    error(err) {
+        if (this.isStopped) {
+            handleStoppedNotification(errorNotification(err), this);
+        }
+        else {
+            this.isStopped = true;
+            this._error(err);
+        }
+    }
+    complete() {
+        if (this.isStopped) {
+            handleStoppedNotification(COMPLETE_NOTIFICATION, this);
+        }
+        else {
+            this.isStopped = true;
+            this._complete();
+        }
+    }
+    unsubscribe() {
+        if (!this.closed) {
+            this.isStopped = true;
+            super.unsubscribe();
+            this.destination = null;
+        }
+    }
+    _next(value) {
+        this.destination.next(value);
+    }
+    _error(err) {
+        try {
+            this.destination.error(err);
+        }
+        finally {
+            this.unsubscribe();
+        }
+    }
+    _complete() {
+        try {
+            this.destination.complete();
+        }
+        finally {
+            this.unsubscribe();
+        }
+    }
+}
+const _bind = Function.prototype.bind;
+function bind(fn, thisArg) {
+    return _bind.call(fn, thisArg);
+}
+class ConsumerObserver {
+    constructor(partialObserver) {
+        this.partialObserver = partialObserver;
+    }
+    next(value) {
+        const { partialObserver } = this;
+        if (partialObserver.next) {
+            try {
+                partialObserver.next(value);
+            }
+            catch (error) {
+                handleUnhandledError(error);
+            }
+        }
+    }
+    error(err) {
+        const { partialObserver } = this;
+        if (partialObserver.error) {
+            try {
+                partialObserver.error(err);
+            }
+            catch (error) {
+                handleUnhandledError(error);
+            }
+        }
+        else {
+            handleUnhandledError(err);
+        }
+    }
+    complete() {
+        const { partialObserver } = this;
+        if (partialObserver.complete) {
+            try {
+                partialObserver.complete();
+            }
+            catch (error) {
+                handleUnhandledError(error);
+            }
+        }
+    }
+}
+class SafeSubscriber extends Subscriber {
+    constructor(observerOrNext, error, complete) {
+        super();
+        let partialObserver;
+        if (isFunction(observerOrNext) || !observerOrNext) {
+            partialObserver = {
+                next: observerOrNext !== null && observerOrNext !== void 0 ? observerOrNext : undefined,
+                error: error !== null && error !== void 0 ? error : undefined,
+                complete: complete !== null && complete !== void 0 ? complete : undefined,
+            };
+        }
+        else {
+            let context;
+            if (this && config.useDeprecatedNextContext) {
+                context = Object.create(observerOrNext);
+                context.unsubscribe = () => this.unsubscribe();
+                partialObserver = {
+                    next: observerOrNext.next && bind(observerOrNext.next, context),
+                    error: observerOrNext.error && bind(observerOrNext.error, context),
+                    complete: observerOrNext.complete && bind(observerOrNext.complete, context),
+                };
+            }
+            else {
+                partialObserver = observerOrNext;
+            }
+        }
+        this.destination = new ConsumerObserver(partialObserver);
+    }
+}
+function handleUnhandledError(error) {
+    {
+        reportUnhandledError(error);
+    }
+}
+function defaultErrorHandler(err) {
+    throw err;
+}
+function handleStoppedNotification(notification, subscriber) {
+    const { onStoppedNotification } = config;
+    onStoppedNotification && timeoutProvider.setTimeout(() => onStoppedNotification(notification, subscriber));
+}
+const EMPTY_OBSERVER = {
+    closed: true,
+    next: noop,
+    error: defaultErrorHandler,
+    complete: noop,
+};
+
+const observable = (() => (typeof Symbol === 'function' && Symbol.observable) || '@@observable')();
+
+function identity(x) {
+    return x;
+}
+
+function pipeFromArray(fns) {
+    if (fns.length === 0) {
+        return identity;
+    }
+    if (fns.length === 1) {
+        return fns[0];
+    }
+    return function piped(input) {
+        return fns.reduce((prev, fn) => fn(prev), input);
+    };
+}
+
+class Observable {
+    constructor(subscribe) {
+        if (subscribe) {
+            this._subscribe = subscribe;
+        }
+    }
+    lift(operator) {
+        const observable = new Observable();
+        observable.source = this;
+        observable.operator = operator;
+        return observable;
+    }
+    subscribe(observerOrNext, error, complete) {
+        const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
+        errorContext(() => {
+            const { operator, source } = this;
+            subscriber.add(operator
+                ?
+                    operator.call(subscriber, source)
+                : source
+                    ?
+                        this._subscribe(subscriber)
+                    :
+                        this._trySubscribe(subscriber));
+        });
+        return subscriber;
+    }
+    _trySubscribe(sink) {
+        try {
+            return this._subscribe(sink);
+        }
+        catch (err) {
+            sink.error(err);
+        }
+    }
+    forEach(next, promiseCtor) {
+        promiseCtor = getPromiseCtor(promiseCtor);
+        return new promiseCtor((resolve, reject) => {
+            const subscriber = new SafeSubscriber({
+                next: (value) => {
+                    try {
+                        next(value);
+                    }
+                    catch (err) {
+                        reject(err);
+                        subscriber.unsubscribe();
+                    }
+                },
+                error: reject,
+                complete: resolve,
+            });
+            this.subscribe(subscriber);
+        });
+    }
+    _subscribe(subscriber) {
+        var _a;
+        return (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber);
+    }
+    [observable]() {
+        return this;
+    }
+    pipe(...operations) {
+        return pipeFromArray(operations)(this);
+    }
+    toPromise(promiseCtor) {
+        promiseCtor = getPromiseCtor(promiseCtor);
+        return new promiseCtor((resolve, reject) => {
+            let value;
+            this.subscribe((x) => (value = x), (err) => reject(err), () => resolve(value));
+        });
+    }
+}
+Observable.create = (subscribe) => {
+    return new Observable(subscribe);
+};
+function getPromiseCtor(promiseCtor) {
+    var _a;
+    return (_a = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a !== void 0 ? _a : Promise;
+}
+function isObserver(value) {
+    return value && isFunction(value.next) && isFunction(value.error) && isFunction(value.complete);
+}
+function isSubscriber(value) {
+    return (value && value instanceof Subscriber) || (isObserver(value) && isSubscription(value));
+}
+
+const ObjectUnsubscribedError = createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
+    _super(this);
+    this.name = 'ObjectUnsubscribedError';
+    this.message = 'object unsubscribed';
+});
+
+class Subject extends Observable {
+    constructor() {
+        super();
+        this.closed = false;
+        this.currentObservers = null;
+        this.observers = [];
+        this.isStopped = false;
+        this.hasError = false;
+        this.thrownError = null;
+    }
+    lift(operator) {
+        const subject = new AnonymousSubject(this, this);
+        subject.operator = operator;
+        return subject;
+    }
+    _throwIfClosed() {
+        if (this.closed) {
+            throw new ObjectUnsubscribedError();
+        }
+    }
+    next(value) {
+        errorContext(() => {
+            this._throwIfClosed();
+            if (!this.isStopped) {
+                if (!this.currentObservers) {
+                    this.currentObservers = Array.from(this.observers);
+                }
+                for (const observer of this.currentObservers) {
+                    observer.next(value);
+                }
+            }
+        });
+    }
+    error(err) {
+        errorContext(() => {
+            this._throwIfClosed();
+            if (!this.isStopped) {
+                this.hasError = this.isStopped = true;
+                this.thrownError = err;
+                const { observers } = this;
+                while (observers.length) {
+                    observers.shift().error(err);
+                }
+            }
+        });
+    }
+    complete() {
+        errorContext(() => {
+            this._throwIfClosed();
+            if (!this.isStopped) {
+                this.isStopped = true;
+                const { observers } = this;
+                while (observers.length) {
+                    observers.shift().complete();
+                }
+            }
+        });
+    }
+    unsubscribe() {
+        this.isStopped = this.closed = true;
+        this.observers = this.currentObservers = null;
+    }
+    get observed() {
+        var _a;
+        return ((_a = this.observers) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }
+    _trySubscribe(subscriber) {
+        this._throwIfClosed();
+        return super._trySubscribe(subscriber);
+    }
+    _subscribe(subscriber) {
+        this._throwIfClosed();
+        this._checkFinalizedStatuses(subscriber);
+        return this._innerSubscribe(subscriber);
+    }
+    _innerSubscribe(subscriber) {
+        const { hasError, isStopped, observers } = this;
+        if (hasError || isStopped) {
+            return EMPTY_SUBSCRIPTION;
+        }
+        this.currentObservers = null;
+        observers.push(subscriber);
+        return new Subscription(() => {
+            this.currentObservers = null;
+            arrRemove(observers, subscriber);
+        });
+    }
+    _checkFinalizedStatuses(subscriber) {
+        const { hasError, thrownError, isStopped } = this;
+        if (hasError) {
+            subscriber.error(thrownError);
+        }
+        else if (isStopped) {
+            subscriber.complete();
+        }
+    }
+    asObservable() {
+        const observable = new Observable();
+        observable.source = this;
+        return observable;
+    }
+}
+Subject.create = (destination, source) => {
+    return new AnonymousSubject(destination, source);
+};
+class AnonymousSubject extends Subject {
+    constructor(destination, source) {
+        super();
+        this.destination = destination;
+        this.source = source;
+    }
+    next(value) {
+        var _a, _b;
+        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.next) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+    }
+    error(err) {
+        var _a, _b;
+        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, err);
+    }
+    complete() {
+        var _a, _b;
+        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.complete) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    _subscribe(subscriber) {
+        var _a, _b;
+        return (_b = (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
+    }
+}
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
+    // find the complete implementation of crypto (msCrypto) on IE11.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+
+function validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+var byteToHex = [];
+
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function stringify$1(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+
+  return uuid;
+}
+
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return stringify$1(rnds);
+}
+
+/**
+ * Check if we're required to add a port number.
+ *
+ * @see https://url.spec.whatwg.org/#default-port
+ * @param {Number|String} port Port number we need to check
+ * @param {String} protocol Protocol we need to check against.
+ * @returns {Boolean} Is it a default port for the given protocol
+ * @api private
+ */
+var requiresPort = function required(port, protocol) {
+  protocol = protocol.split(':')[0];
+  port = +port;
+
+  if (!port) return false;
+
+  switch (protocol) {
+    case 'http':
+    case 'ws':
+    return port !== 80;
+
+    case 'https':
+    case 'wss':
+    return port !== 443;
+
+    case 'ftp':
+    return port !== 21;
+
+    case 'gopher':
+    return port !== 70;
+
+    case 'file':
+    return false;
+  }
+
+  return port !== 0;
+};
+
+var has = Object.prototype.hasOwnProperty
+  , undef;
+
+/**
+ * Decode a URI encoded string.
+ *
  * @param {String} input The URI encoded string.
  * @returns {String|Null} The decoded string.
  * @api private
@@ -19339,4 +21162,356 @@ const createWidgetVpsEvent = createTrackingEvent(vpsWidget);
 const createSearchEvent = createTrackingEvent(searchEvent);
 const createFilterEvent = createTrackingEvent(filterEvent);
 
-export { createTrackingApi as A, createWidgetVpsEvent as B, isEmpty$1 as C, _Array as D, Either as E, chainW as F, makeRequest as G, fromEither as H, getApiPath as I, createInitGetRequest as J, sequenceT as K, Apply as L, map$3 as M, NonEmptyArray as N, Option as O, match as P, createProductViewVprEvent as Q, createProductClickVprEvent as R, Semigroup$1 as S, createWidgetVprEvent as T, TaskEither as U, checkEmpryString as V, _function as _, pointDiffSemigroup as a, makeRectangularSearchRequest as b, fromAlt as c, foldValueObject as d, scaleWithSized as e, fromMouseEvent as f, getCursorValue as g, center as h, imageSearchState as i, detectedObjectEq as j, toFile as k, processSelectedFile as l, move as m, match$1 as n, fromImage as o, pipe as p, dimensionsFromImage as q, scaleByLargestSide as r, sequenceToOption as s, transform as t, state$1 as u, createProductViewVpsEvent as v, createProductClickVpsEvent as w, createSearchEvent as x, createFilterEvent as y, v4 as z };
+const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #DDDDDD;width:100%}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
+
+let VviinnVprWidget = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.recommendationsLoaded = createEvent(this, "recommendationsLoaded", 7);
+    /** Title for recommendations widget */
+    this.blockTitle = "Recommended products";
+    /** Ratio of each recommended product image */
+    this.imageRatio = 1;
+    /** Width of each recommended product image */
+    this.imageWidth = 300;
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Use slider or grid view */
+    this.mode = "continuity";
+    /** Campaign type */
+    this.campaignType = "VPR";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    /** comma-separated list of campaign-ids */
+    this.campaigns = "";
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
+    /** @internal */
+    this.useCarousel = true;
+    this.showScroll = true;
+    this.cssUrl = null;
+    this.recommendations = [];
+    this.loaded = false;
+    this.productImageLoadedSubject = new Subject();
+  }
+  handleProductIdChange() {
+    this.getRecommendations();
+  }
+  handleCampaignTypeChange() {
+    this.getRecommendations();
+  }
+  handleCampaignsChange() {
+    this.getRecommendations();
+  }
+  handleApiPathChange(newPath) {
+    state$1.apiPath = newPath;
+    this.getRecommendations();
+  }
+  handleImageLoading({ detail }) {
+    this.productImageLoadedSubject.next(detail);
+  }
+  trackRecommendationView({ detail }) {
+    const recommendationViewEvent = createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationViewEvent);
+  }
+  trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductClickVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationClickEvent).finally(() => {
+      const product = this.recommendations.find((r) => r.productId === detail.product);
+      if (!product || !product.deeplink)
+        return;
+      window.location.href = product.deeplink;
+    });
+  }
+  connectedCallback() {
+    state$1.apiPath = this.apiPath;
+    state$1.currencySign = this.currencySign;
+    state$1.locale = this.locale;
+    this.uiSessionId = v4();
+    this.trackingApi = createTrackingApi(this.apiPath, this.token);
+    const widgetOpenEvent = createWidgetVprEvent({
+      action: "open",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  disconnectedCallback() {
+    const widgetCloseEvent = createWidgetVprEvent({
+      action: "close",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetCloseEvent);
+  }
+  async componentWillLoad() {
+    state$1.pricePrefix = this.pricePrefix;
+    state$1.currencySign = this.currencySign;
+    this.getRecommendations();
+  }
+  async getRecommendations() {
+    if (this.productId === undefined || this.token === undefined)
+      return;
+    const campaignType = this.campaignType.length > 0 ? this.campaignType : "VPR";
+    const headers = createBearAuthedHeader(this.token);
+    const request = _function.pipe(TaskEither.of(getRecommendationsService(campaignType)), TaskEither.ap(TaskEither.of(this.productId)), TaskEither.ap(TaskEither.of(checkEmpryString(this.campaigns))), TaskEither.ap(TaskEither.of(headers)), TaskEither.flatten);
+    const runRequest = await request();
+    _function.pipe(runRequest, Either.fold((error) => this.handleError(error), (data) => this.handleRecommendationsSucces(data)));
+  }
+  handleError(error) {
+    console.log("ERROR:", error);
+  }
+  handleRecommendationsSucces(data) {
+    var _a;
+    this.recommendations = (_a = data === null || data === void 0 ? void 0 : data.extended) !== null && _a !== void 0 ? _a : data;
+    imageSearchState.results = this.recommendations;
+    this.loaded = true;
+    this.productIds = this.recommendations.map((r) => r.productId);
+    this.productImageLoadedSubject.subscribe((id) => {
+      this.productIds = this.productIds.filter((x) => x !== id);
+      if (this.productIds.length === 0) {
+        this.recommendationsLoaded.emit();
+      }
+    });
+  }
+  isExternalCSS() {
+    return this.cssUrl && this.cssUrl.length > 0;
+  }
+  renderExternalCSS() {
+    return this.isExternalCSS() ? (h("link", { href: this.cssUrl, rel: "stylesheet" })) : ("");
+  }
+  render() {
+    return (h(Host, { class: {
+        loaded: this.loaded,
+        empty: this.recommendations.length == 0,
+        [this.mode]: true,
+      }, "aria-hidden": this.loaded ? "false" : "true" }, this.renderExternalCSS(), h("style", null, state$1.fallbackStyles), h("h2", { part: "recommendations-title" }, this.blockTitle), this.useCarousel ? this.renderCarousel() : this.renderResults()));
+  }
+  renderRecommendation(recommendation, index) {
+    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.useDimmedBackgroundInCard(), index: index }));
+  }
+  useDimmedBackgroundInCard() {
+    return this.mode === "continuity" || !this.useCarousel;
+  }
+  renderResults() {
+    return (h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
+  }
+  renderCarousel() {
+    return (h("vviinn-carousel", { mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations }));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "productId": ["handleProductIdChange"],
+    "campaignType": ["handleCampaignTypeChange"],
+    "campaigns": ["handleCampaignsChange"],
+    "apiPath": ["handleApiPathChange"]
+  }; }
+};
+VviinnVprWidget.style = vviinnVprWidgetCss;
+
+const vviinnVpsButtonCss = ":host{cursor:pointer}";
+
+let VviinnVpsButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlotsChanged = createEvent(this, "globalSlotsChanged", 7);
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    this.pressed = false;
+  }
+  handleModalClosed() {
+    this.pressed = false;
+  }
+  componentDidLoad() {
+    const slots = this.el.querySelectorAll("[slot]");
+    this.globalSlotsChanged.emit(Array.from(slots));
+  }
+  handleKeyDown(ev) {
+    if (ev.code !== "Enter" && ev.code !== "Space")
+      return;
+    this.pressed = true;
+  }
+  handleClick() {
+    this.pressed = true;
+  }
+  render() {
+    return (h(Host, { tabindex: "0", role: "button", pressed: this.pressed, onClick: () => this.handleClick(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", null, h(CameraIcon, null)), h(SlotSkeleton, null), h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, product-card, example-images", campaignId: this.campaignId })));
+  }
+  get el() { return getElement(this); }
+};
+VviinnVpsButton.style = vviinnVpsButtonCss;
+
+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}";
+
+const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
+const notEmptyString = (s) => !isEmpty$1(s);
+const notNan = (n) => !isNaN(n);
+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";
+      this.trackOpenEvent();
+    }
+    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 = createProductClickVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationClickEvent).finally(() => {
+      const product = imageSearchState.results.find((r) => r.productId === detail.product);
+      if (!product || !product.deeplink)
+        return;
+      window.location.href = product.deeplink;
+    });
+  }
+  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$1.apiPath = this.apiPath;
+    state$1.currencySign = this.currencySign;
+    state$1.locale = this.locale;
+    imageSearchState.token = this.token;
+    imageSearchState.campaignId = _function.pipe(this.campaignId, Option.fromNullable, Option.chain(Option.fromPredicate(notEmptyString)), Option.map(filterInt), Option.chain(Option.fromPredicate(notNan)), Option.map((s) => `${s}`));
+    this.uiSessionId = v4();
+    this.trackingApi = createTrackingApi(this.apiPath, this.token);
+  }
+  trackOpenEvent() {
+    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, example-images" }, 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", { part: "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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.actionClick = createEvent(this, "actionClick", 7);
+  }
+  render() {
+    return (h(Host, null, h("vviinn-error", null, h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"), h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."), h("button", { slot: "action", onClick: () => this.actionClick.emit() }, "Neues Bild hochladen"))));
+  }
+};
+VviinnWrongFormat.style = vviinnWrongFormatCss;
+
+export { CropperHandler as cropper_handler, HighlightBox as highlight_box, ImageCropper as image_cropper, SearchFilters as search_filters, VviinnCarousel as vviinn_carousel, 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, VviinnVprWidget as vviinn_vpr_widget, VviinnVpsButton as vviinn_vps_button, VviinnVpsWidget as vviinn_vps_widget, VviinnWrongFormat as vviinn_wrong_format };