vviinn-widgets 2.7.2 → 2.7.3

package/dist/cjs/{index-df6896e2.js → cropper-handler_30.cjs.entry.js}

@@ -1,12 +1,15 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 const index = require('./index-3c3ab815.js');
+const index$1 = require('./index-f66cd8d1.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) {
@@ -200,7 +203,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.
  *
@@ -228,7 +231,7 @@ const semigroupDiff = {
   concat: (x, y) => x - y,
 };
 
-const fromRectangle$1 = ({ x, y }) => {
+const fromRectangle$2 = ({ x, y }) => {
   return {
     x,
     y,
@@ -282,27 +285,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,
     }),
@@ -310,6 +313,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) {
+    index.registerInstance(this, hostRef);
+    this.disabled = false;
+  }
+  render() {
+    return (index.h(index.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) {
@@ -1257,7 +1294,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;
 
@@ -1447,7 +1484,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;
 
@@ -1758,7 +1795,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
 };
 /**
@@ -1865,7 +1902,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
 // -------------------------------------------------------------------------------------
@@ -3964,7 +4001,7 @@ var mapLeft$2 = function (f) { return function (fa) {
  */
 var FromEither$1 = {
     URI: URI$2,
-    fromEither: identity
+    fromEither: identity$1
 };
 // -------------------------------------------------------------------------------------
 // natural transformations
@@ -4193,7 +4230,7 @@ var match = matchW;
  * @category destructors
  * @since 2.0.0
  */
-var fold = match;
+var fold$1 = match;
 /**
  * Less strict version of [`getOrElse`](#getorelse).
  *
@@ -8021,7 +8058,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();
@@ -8042,8 +8079,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;
@@ -8071,29 +8108,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,
   });
@@ -8196,7 +8233,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];
@@ -8222,6 +8259,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
  *
@@ -8962,7 +9019,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;
@@ -9576,7 +9633,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;
 /**
@@ -10177,7 +10234,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;
@@ -12687,7 +12744,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;
 /**
@@ -12710,7 +12767,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);
@@ -15920,7 +15977,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) => {
@@ -16070,7 +16127,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,
@@ -16100,7 +16157,7 @@ onChange("activeIonLink", async (newLink) => {
 });
 onChange("searchArea", (newSearchArea) => {
   pipe(newSearchArea, Option.map((area) => {
-    state.cropperHandlers = fromRectangle(area);
+    state.cropperHandlers = fromRectangle$1(area);
   }));
 });
 onChange("serverError", () => {
@@ -16115,127 +16172,1895 @@ 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) {
+    index.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]) => (index.h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), Option.getOrElse(() => ""));
+  }
+  render() {
+    return index.h(index.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) {
+    index.registerInstance(this, hostRef);
+    this.cropperChanged = index.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 (index.h(index.Host, { exportparts: "handle, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize" }, index.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) => (index.h("cropper-handler", { disabled: this.disabled, handler: handler, onPointerDown: (ev) => this.handlePointerDown(ev) }))))));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
+    this.filterSelected = index.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 (index.h(index.Host, { exportparts: "filter, show-more-filters" }, index.h("div", { class: "filters" }, this.filter.filters
+      .filter((_, i) => (this.hideFilters ? i < FILTERS_COUNT : true))
+      .map((f, n) => (index.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) ? index.h(index$1.CheckIcon, null) : null, f.name))), index.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 index.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) {
+    index.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 (index.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 index.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$1) => (index.h("div", { class: {
+        bullet: true,
+        active: this.activeContentGroup === index$1,
+      }, onClick: () => this.scroll(index$1) })));
+  }
+  render() {
+    return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, index.h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button" }, index.h(index$1.ChevronIcon, null)), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), index.h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" }, index.h(index$1.ChevronIcon, null))), this.showBullets() ? (index.h("div", { class: "bullets" }, this.renderBullets())) : ("")));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
+    this.detectedObjectClicked = index.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 (index.h(index.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) {
+    index.registerInstance(this, hostRef);
+    this.actionClick = index.createEvent(this, "actionClick", 7);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }), index.h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })), index.h("h4", { slot: "title" }, "Leider nichts gefunden"), index.h("span", { slot: "text" }, "Leider konnten wir keine passenden Produkte finden. Bitte versuche es mit einem anderen Bildausschnitt noch einmal."))));
+  }
+};
+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) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "icon" }), index.h("slot", { name: "title" }), index.h("slot", { name: "text" }), index.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) {
+    index.registerInstance(this, hostRef);
+    this.exampleImageSelected = index.createEvent(this, "exampleImageSelected", 7);
+    this.exampleImageError = index.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 (index.h(index.Host, null, this.showPreloader() ? (index.h("div", { class: "image-preloader" }, index.h("vviinn-preloader", null))) : null, index.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) => index.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) {
+    index.registerInstance(this, hostRef);
+    this.imageSelected = index.createEvent(this, "imageSelected", 7);
+    this.imageSelectedError = index.createEvent(this, "imageSelectedError", 7);
+  }
+  handleImageSelection() {
+    this.imageSelected.emit();
+  }
+  handleImageSelectionError() {
+    this.imageSelectedError.emit();
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-example-images-title" }, index.h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), index.h("div", { class: "images" }, index.h("slot", { name: "vviinn-example-images-1" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-4" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
+    this.imageSelected = index.createEvent(this, "imageSelected", 7);
+    this.imageSelectedError = index.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 (index.h(index.Host, { exportparts: "button" }, this.isLoading() ? index.h("vviinn-preloader", null) : null, this.isLoading() ? null : (index.h("label", { htmlFor: "fileInput", part: "button" }, index.h("slot", { name: "upload-button-text" }, "Upload image"))), index.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) {
+    index.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 index.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 = (index.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(() => index.h("image-cropper", null)), Option.getOrElse(() => null));
+  }
+  render() {
+    return (index.h(index.Host, null, imageSearchState.loading ||
+      imageSearchState.objectDetectionInProgress ? (index.h("div", { class: "image-preloader" }, index.h("vviinn-preloader", null))) : null, index.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) {
+    index.registerInstance(this, hostRef);
+    this.modalClosed = index.createEvent(this, "modalClosed", 7);
+    this.secondaryActionClicked = index.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 (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, index.h("button", { part: "secondary-action", onClick: () => this.secondaryActionClicked.emit() }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.25 12H3.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("div", { class: "title", part: "title" }, "Bildsuche"), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#333333" })))), index.h("div", { class: "body" }, index.h("slot", null))));
+  }
+};
+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) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-onboarding-title" }, index.h("h3", null, "So funktioniert es")), index.h("vviinn-slider", { showArrows: true }, index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-1", null)), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-2", null)), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-3", null)))));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-1-icon" }, index.h(index$1.OnboardingCard1Icon, null)), index.h("slot", { name: "onboarding-card-1-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Starte die Bildsuche"), index.h("p", null, "Lade ein Bild aus Deiner Galerie hoch oder fotografiere ein Produkt mit Deiner Kamera.")))));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
   }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-2-icon" }, index.h(index$1.OnboardingCard2Icon, null)), index.h("slot", { name: "onboarding-card-2-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Verfeiner deine Suche"), index.h("p", null, "Du kannst den Bildrahmen selber festlegen und so die Produkte genau ausw\u00E4hlen.")))));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-3-icon" }, index.h(index$1.OnboardingCard3Icon, null)), index.h("slot", { name: "onboarding-card-3-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Ohne Hintergrund"), index.h("p", null, "Die besten Ergebnisse erh\u00E4ltst Du, wenn das gesuchte Objekt mit einfarbigem und hellem Hintergrund zu sehen ist.")))));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.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) {
+    index.registerInstance(this, hostRef);
+    this.secondaryActionClicked = index.createEvent(this, "secondaryActionClicked", 7);
+    this.modalClosed = index.createEvent(this, "modalClosed", 7);
+    this.active = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: { active: this.active } }, index.h("vviinn-overlay", null, index.h("vviinn-modal", { onSecondaryActionClicked: () => this.secondaryActionClicked.emit(), active: this.active }, index.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) {
+    index.registerInstance(this, hostRef);
+  }
+  isActive() {
+    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
+  }
+  render() {
+    return (index.h(index.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) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null, index.h("div", { class: "content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), index.h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), index.h("slot", { name: "vviinn-privacy-badge-text" }, index.h("p", null, "Wir gehen sorgf\u00E4ltig mit Deinen Daten um. Deine Bilder werden nur zum Zweck der Bildsuche gespeichert."))))));
+  }
+  get el() { return index.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 ? (index.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 (index.h("span", { class: "price-amount", part: "price-amount" }, fullPrice));
+};
+const Price = (props) => {
+  const priceEl = (index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale }));
+  return (index.h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
+    index.h("span", { class: "price-sale", part: "price-sale" },
+      index.h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale })),
+    index.h("span", { class: "price-outdated", part: "price-outdated" }, priceEl),
+  ]) : (index.h("span", { class: "price-regular", part: "price-regular" }, priceEl))));
+};
+const Image$1 = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
+  index.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) => (index.h("picture", null,
+  index.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) {
+    index.registerInstance(this, hostRef);
+    this.recommendationLoad = index.createEvent(this, "recommendationLoad", 7);
+    this.recommendationView = index.createEvent(this, "recommendationView", 7);
+    this.recommendationClick = index.createEvent(this, "recommendationClick", 7);
+    this.productImageLoaded = index.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 (index.h(index.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" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.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 index.getElement(this); }
+};
+VviinnProductCard.style = vviinnProductCardCss;
+
+const vviinnServerErrorCss = ":host{display:block}";
+
+let VviinnServerError = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.actionClick = index.createEvent(this, "actionClick", 7);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h("h4", { slot: "title" }, "Keine Verbindung"), index.h("span", { slot: "text" }, "Etwas hat leider nicht funktioniert. Bitte pr\u00FCfen Sie Ihre Internetverbindung und laden Sie das Bild noch einmal hoch."), index.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) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.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, }) => (index.h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown },
+  index.h(index$1.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) {
+    index.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 ? (index.h("div", { class: "controls" }, NonEmptyArray.range(0, this.elementsCount - 1).map((i) => (index.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 (index.h(index.Host, null, index.h("div", { class: "items-wrapper" }, index.h("div", { class: "items", onTouchStart: (e) => this.handleTouchStart(e), onTouchEnd: (e) => this.handleTouchEnd(e) }, index.h("slot", null))), this.showArrows
+      ? [
+        index.h(Arrow, { kind: "prev", onClick: () => this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
+        index.h(Arrow, { kind: "next", onClick: () => this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
+      ]
+      : null, this.renderBullets()));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), index.h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), index.h("span", { class: "vviinn-teaser-text" }, index.h("slot", { name: "vviinn-teaser-text" }, "Finde Produkte auf ", index.h("br", null), " einem Foto")))));
+  }
+  get el() { return index.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.
@@ -19341,52 +21166,385 @@ const createWidgetVpsEvent = createTrackingEvent(vpsWidget);
 const createSearchEvent = createTrackingEvent(searchEvent);
 const createFilterEvent = createTrackingEvent(filterEvent);
 
-exports.Apply = Apply;
-exports.Either = Either;
-exports.NonEmptyArray = NonEmptyArray;
-exports.Option = Option;
-exports.Semigroup = Semigroup$1;
-exports.TaskEither = TaskEither;
-exports._Array = _Array;
-exports._function = _function;
-exports.center = center;
-exports.chainW = chainW;
-exports.checkEmpryString = checkEmpryString;
-exports.createFilterEvent = createFilterEvent;
-exports.createInitGetRequest = createInitGetRequest;
-exports.createProductClickVprEvent = createProductClickVprEvent;
-exports.createProductClickVpsEvent = createProductClickVpsEvent;
-exports.createProductViewVprEvent = createProductViewVprEvent;
-exports.createProductViewVpsEvent = createProductViewVpsEvent;
-exports.createSearchEvent = createSearchEvent;
-exports.createTrackingApi = createTrackingApi;
-exports.createWidgetVprEvent = createWidgetVprEvent;
-exports.createWidgetVpsEvent = createWidgetVpsEvent;
-exports.detectedObjectEq = detectedObjectEq;
-exports.dimensionsFromImage = dimensionsFromImage;
-exports.foldValueObject = foldValueObject;
-exports.fromAlt = fromAlt;
-exports.fromEither = fromEither;
-exports.fromImage = fromImage;
-exports.fromMouseEvent = fromMouseEvent;
-exports.getApiPath = getApiPath;
-exports.getCursorValue = getCursorValue;
-exports.imageSearchState = imageSearchState;
-exports.isEmpty = isEmpty$1;
-exports.makeRectangularSearchRequest = makeRectangularSearchRequest;
-exports.makeRequest = makeRequest;
-exports.map = map$3;
-exports.match = match$1;
-exports.match$1 = match;
-exports.move = move;
-exports.pipe = pipe;
-exports.pointDiffSemigroup = pointDiffSemigroup;
-exports.processSelectedFile = processSelectedFile;
-exports.scaleByLargestSide = scaleByLargestSide;
-exports.scaleWithSized = scaleWithSized;
-exports.sequenceT = sequenceT;
-exports.sequenceToOption = sequenceToOption;
-exports.state = state$1;
-exports.toFile = toFile;
-exports.transform = transform;
-exports.v4 = v4;
+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) {
+    index.registerInstance(this, hostRef);
+    this.recommendationsLoaded = index.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() ? (index.h("link", { href: this.cssUrl, rel: "stylesheet" })) : ("");
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        loaded: this.loaded,
+        empty: this.recommendations.length == 0,
+        [this.mode]: true,
+      }, "aria-hidden": this.loaded ? "false" : "true" }, this.renderExternalCSS(), index.h("style", null, state$1.fallbackStyles), index.h("h2", { part: "recommendations-title" }, this.blockTitle), this.useCarousel ? this.renderCarousel() : this.renderResults()));
+  }
+  renderRecommendation(recommendation, index$1) {
+    return (index.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$1 }));
+  }
+  useDimmedBackgroundInCard() {
+    return this.mode === "continuity" || !this.useCarousel;
+  }
+  renderResults() {
+    return (index.h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
+  }
+  renderCarousel() {
+    return (index.h("vviinn-carousel", { mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations }));
+  }
+  get el() { return index.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) {
+    index.registerInstance(this, hostRef);
+    this.globalSlotsChanged = index.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 (index.h(index.Host, { tabindex: "0", role: "button", pressed: this.pressed, onClick: () => this.handleClick(), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("slot", null, index.h(index$1.CameraIcon, null)), index.h(SlotSkeleton, null), index.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 index.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) {
+    index.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 (index.h(index.Host, null, index.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" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
+        error: this.haveErrors(),
+        "start-page_block": true,
+      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, onActionClick: () => (imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection("upload"), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" }, index.h("span", { slot: "upload-button-text", class: "upload-button-content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, index.h("defs", null), index.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" }), index.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" })), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), index.h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), index.h("div", { id: "onboarding-block", class: "start-page_block" }, index.h("div", { class: "onboarding-wrapper" }, index.h("vviinn-onboarding", null), index.h("vviinn-example-images", { part: "example-images", onImageSelected: () => this.handleImageSelection("example"), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", null), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
+        "nothing-found": true,
+        hidden: imageSearchState.results.length > 0,
+      } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {
+        hidden: imageSearchState.results.length <= 0,
+        products: true,
+      } }, imageSearchState.results.map((p, i) => {
+      var _a;
+      return (index.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 index.getElement(this); }
+  static get watchers() { return {
+    "active": ["activeWatcher"]
+  }; }
+};
+VviinnVpsWidget.style = vviinnVpsWidgetCss;
+
+const vviinnWrongFormatCss = ":host{display:block}";
+
+let VviinnWrongFormat = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.actionClick = index.createEvent(this, "actionClick", 7);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"), index.h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."), index.h("button", { slot: "action", onClick: () => this.actionClick.emit() }, "Neues Bild hochladen"))));
+  }
+};
+VviinnWrongFormat.style = vviinnWrongFormatCss;
+
+exports.cropper_handler = CropperHandler;
+exports.highlight_box = HighlightBox;
+exports.image_cropper = ImageCropper;
+exports.search_filters = SearchFilters;
+exports.vviinn_carousel = VviinnCarousel;
+exports.vviinn_detected_object = VviinnDetectedObject;
+exports.vviinn_empty_results = VviinnEmptyResults;
+exports.vviinn_error = VviinnError;
+exports.vviinn_example_image = VviinnExampleImage;
+exports.vviinn_example_images = VviinnExampleImages;
+exports.vviinn_image_selector = VviinnImageSelector;
+exports.vviinn_image_view = VviinnImageView;
+exports.vviinn_modal = VviinnModal;
+exports.vviinn_onboarding = VviinnOnboarding;
+exports.vviinn_onboarding_card_1 = VviinnOnboardingCard1;
+exports.vviinn_onboarding_card_2 = VviinnOnboardingCard2;
+exports.vviinn_onboarding_card_3 = VviinnOnboardingCard3;
+exports.vviinn_overlay = VviinnOverlay;
+exports.vviinn_overlayed_modal = VviinnOverlayedModal;
+exports.vviinn_preloader = VviinnPreloader;
+exports.vviinn_privacy_badge = VviinnPrivacyBadge;
+exports.vviinn_product_card = VviinnProductCard;
+exports.vviinn_server_error = VviinnServerError;
+exports.vviinn_slide = VviinnSlide;
+exports.vviinn_slider = VviinnSlider;
+exports.vviinn_teaser = VviinnTeaser;
+exports.vviinn_vpr_widget = VviinnVprWidget;
+exports.vviinn_vps_button = VviinnVpsButton;
+exports.vviinn_vps_widget = VviinnVpsWidget;
+exports.vviinn_wrong_format = VviinnWrongFormat;