vviinn-widgets 2.0.0 → 2.2.1

package/dist/cjs/{cropper-handler_28.cjs.entry.js → highlight-box_22.cjs.entry.js}

@@ -2,44 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7adce49f.js');
-const imageSearch_store = require('./imageSearch.store-39fce56c.js');
-const _Array = require('./Array-cce2fde8.js');
-const index$1 = require('./index-8a276115.js');
-
-const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);touch-action:none;position:absolute;width:var(--size);z-index:4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.disabled){opacity:0.25}:host(.nw-resize){border-bottom:none;border-right:none;top:0;left:0}:host(.ne-resize){border-left:none;border-bottom:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;left:0;bottom:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";
-
-let CropperHandler = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.disabled = false;
-  }
-  render() {
-    return (index.h(index.Host, { part: `handle ${imageSearch_store.getCursorValue(this.handler.direction)}`, class: {
-        disabled: this.disabled,
-        [imageSearch_store.getCursorValue(this.handler.direction)]: true,
-      }, style: {
-        "--size": "20px",
-        cursor: imageSearch_store.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));
+const index = require('./index-141137b2.js');
+const imageSearch_store = require('./imageSearch.store-d9ed1a5b.js');
+const Handler = require('./Handler-d1a8a86a.js');
+const index$1 = require('./index-a5e15a0c.js');
+const customizedSlots = require('./customized-slots-14b77e4a.js');
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------
@@ -61,6 +28,21 @@ var Ord = {
     compare: function (first, second) { return (first < second ? -1 : first > second ? 1 : 0); }
 };
 
+const fromRectangle = (shape, target) => {
+  const top = `${shape.y}px`;
+  const left = `${shape.x}px`;
+  const right = `${target.width - (shape.x + shape.width)}px`;
+  const bottom = `${target.height - (shape.y + shape.height)}px`;
+  return {
+    top,
+    right,
+    bottom,
+    left,
+  };
+};
+const printClip = (clip) => `inset(${clip.top} ${clip.right} ${clip.bottom} ${clip.left})`;
+const getClipValue = (shape, target) => printClip(fromRectangle(shape, target));
+
 const highlightBoxCss = ":host{display:grid;position:absolute;box-sizing:border-box;border:none;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--size:10px;--x-position:0;--y-position:0}img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pointer{position:absolute;width:var(--size);height:var(--size);background:black;border-radius:50%;z-index:2;cursor:pointer;transform:translate(var(--x-position), var(--y-position)) scale(0);-webkit-animation:0.25s linear fadein;animation:0.25s linear fadein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.pointer::after{content:\"\";cursor:pointer;border:5px solid black;border-radius:50%;width:var(--size);height:var(--size);display:block;transform:translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));padding:calc(var(--size) * 0.5);opacity:.75}@-webkit-keyframes fadein{from{transform:translate(var(--x-position), var(--y-position)) scale(0)}to{transform:translate(var(--x-position), var(--y-position)) scale(1)}}@keyframes fadein{from{transform:translate(var(--x-position), var(--y-position)) scale(0)}to{transform:translate(var(--x-position), var(--y-position)) scale(1)}}";
 
 let HighlightBox = class {
@@ -68,10 +50,10 @@ let HighlightBox = class {
     index.registerInstance(this, hostRef);
   }
   getInsetValue() {
-    return imageSearch_store.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.searchArea, imageSearch_store.imageSearchState.imageBounds), imageSearch_store.Option.map(([selection, image]) => getClipValue(selection, image)), imageSearch_store.Option.getOrElse(() => ""));
+    return Handler.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.searchArea, imageSearch_store.imageSearchState.imageBounds), imageSearch_store.Option.map(([selection, image]) => getClipValue(selection, image)), imageSearch_store.Option.getOrElse(() => ""));
   }
   renderImage() {
-    return imageSearch_store.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.imageUrl, imageSearch_store.imageSearchState.imageBounds), imageSearch_store.Option.map(([url, bounds]) => (index.h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), imageSearch_store.Option.getOrElse(() => ""));
+    return Handler.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.imageUrl, imageSearch_store.imageSearchState.imageBounds), imageSearch_store.Option.map(([url, bounds]) => (index.h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), imageSearch_store.Option.getOrElse(() => ""));
   }
   render() {
     return index.h(index.Host, null, this.renderImage());
@@ -100,13 +82,13 @@ let ImageCropper = class {
   handleHandlerMove(event) {
     event.preventDefault();
     event.stopPropagation();
-    const destination = imageSearch_store.fromMouseEvent(event);
-    const distance = imageSearch_store.pointDiffSemigroup.concat(destination, this.mouseStartPoint);
+    const destination = Handler.fromMouseEvent(event);
+    const distance = Handler.pointDiffSemigroup.concat(destination, this.mouseStartPoint);
     const transformedHandler = {
       position: distance,
       direction: this.handlerMoveDirection,
     };
-    _Array._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((area) => {
+    imageSearch_store._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((area) => {
       const newSearchArea = imageSearch_store.transform(area, transformedHandler);
       if (newSearchArea.width < MIN_SEARCHAREA_SIZE ||
         newSearchArea.height < MIN_SEARCHAREA_SIZE ||
@@ -123,9 +105,9 @@ let ImageCropper = class {
   handleCropperMove(ev) {
     ev.preventDefault();
     ev.stopPropagation();
-    const destination = imageSearch_store.fromMouseEvent(ev);
-    const distance = imageSearch_store.pointDiffSemigroup.concat(destination, this.mouseStartPoint);
-    _Array._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((searchArea) => {
+    const destination = Handler.fromMouseEvent(ev);
+    const distance = Handler.pointDiffSemigroup.concat(destination, this.mouseStartPoint);
+    imageSearch_store._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((searchArea) => {
       const newSearchArea = imageSearch_store.move(searchArea, distance);
       if (newSearchArea.x < 0 ||
         newSearchArea.y < 0 ||
@@ -139,7 +121,7 @@ let ImageCropper = class {
   }
   handlePointerDown(event) {
     event.stopPropagation();
-    this.mouseStartPoint = imageSearch_store.fromMouseEvent(event);
+    this.mouseStartPoint = Handler.fromMouseEvent(event);
     // should be htmlelement or handler
     const target = findTarget(event);
     if (target.localName === "cropper-handler") {
@@ -162,7 +144,7 @@ let ImageCropper = class {
     imageSearch_store.makeRectangularSearchRequest();
   }
   getStyleMap() {
-    return _Array._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((rectangle) => {
+    return imageSearch_store._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((rectangle) => {
       return {
         width: `${rectangle.width}px`,
         height: `${rectangle.height}px`,
@@ -256,14 +238,14 @@ let VviinnDetectedObject = class {
     this.position = ["0", "0"];
   }
   getObjectPosition() {
-    return _Array._function.pipe(imageSearch_store.imageSearchState.imageBounds, imageSearch_store.Option.map((bounds) => {
+    return imageSearch_store._function.pipe(imageSearch_store.imageSearchState.imageBounds, imageSearch_store.Option.map((bounds) => {
       const objectRectangle = imageSearch_store.fromAlt(imageSearch_store.foldValueObject(this.detectedObject).rectangle);
-      const { x, y } = _Array._function.pipe(objectRectangle, imageSearch_store.scaleWithSized(bounds), imageSearch_store.center);
+      const { x, y } = imageSearch_store._function.pipe(objectRectangle, imageSearch_store.scaleWithSized(bounds), imageSearch_store.center);
       return [`${x}px`, `${y}px`];
     }), imageSearch_store.Option.getOrElse(() => ["0", "0"]));
   }
   selectDetectedObject() {
-    _Array._function.pipe(imageSearch_store.imageSearchState.imageBounds, imageSearch_store.Option.map((bounds) => {
+    imageSearch_store._function.pipe(imageSearch_store.imageSearchState.imageBounds, imageSearch_store.Option.map((bounds) => {
       const rectangle = imageSearch_store.foldValueObject(this.detectedObject).rectangle;
       const transformedRect = imageSearch_store.fromAlt(rectangle);
       const scaledRect = imageSearch_store.scaleWithSized(bounds)(transformedRect);
@@ -305,18 +287,6 @@ let VviinnEmptyResults = class {
 };
 VviinnEmptyResults.style = vviinnEmptyResultsCss;
 
-const vviinnErrorCss = ":host{background:#F4F4F4;border-radius:8px;display:grid;grid-gap:20px;padding:24px;text-align:center}::slotted(svg){display:grid;align-self:center}::slotted(h4){margin:unset;font-weight:600;font-size:18px;line-height:24px}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--color-primary, var(--color-primary-system));font-weight:600;font-size:16px;line-height:20px;cursor:pointer}";
-
-let VviinnError = class {
-  constructor(hostRef) {
-    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;
-
 const vviinnExampleImageCss = ":host{display:block;margin-bottom:8px;position:relative}img{width:100%;height:auto;cursor:pointer}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:12px;display:none;padding:4px 6px;pointer-events:none;position:absolute;right:12px;z-index:4}vviinn-preloader{--preloader-size:12px}@media (max-width: 640px){.image-preloader{display:block}}";
 
 let VviinnExampleImage = class {
@@ -333,7 +303,7 @@ let VviinnExampleImage = class {
     this.selected = true;
     const file = await imageSearch_store.toFile(this.src);
     const processResult = await imageSearch_store.processSelectedFile(file);
-    _Array._function.pipe(processResult, imageSearch_store.Either.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
+    imageSearch_store._function.pipe(processResult, imageSearch_store.Either.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
     this.selected = false;
   }
   showPreloader() {
@@ -347,53 +317,6 @@ let VviinnExampleImage = class {
 };
 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);
-};
-
 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}";
 
 let VviinnExampleImages = class {
@@ -409,7 +332,7 @@ let VviinnExampleImages = class {
     this.imageSelectedError.emit();
   }
   componentWillLoad() {
-    slotChangeListener(this, this.el);
+    customizedSlots.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: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), index.h("slot", { name: "vviinn-example-images-4" }, index.h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
@@ -429,7 +352,7 @@ let VviinnImageSelector = class {
   async handleInputChange(event) {
     const input = event.target;
     const processingResult = await imageSearch_store.processSelectedFile(input.files[0]);
-    _Array._function.pipe(processingResult, imageSearch_store.match(() => this.imageSelectedError.emit(), () => this.imageSelected.emit()));
+    imageSearch_store._function.pipe(processingResult, imageSearch_store.match(() => this.imageSelectedError.emit(), () => this.imageSelected.emit()));
     input.value = null;
   }
   isLoading() {
@@ -472,14 +395,14 @@ let VviinnImageView = class {
     return index.h("vviinn-detected-object", { detectedObject: object });
   }
   renderImage() {
-    return _Array._function.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.imageUrl, imageSearch_store.imageSearchState.image), imageSearch_store.Option.map(([url, refImage]) => {
+    return imageSearch_store._function.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.imageUrl, imageSearch_store.imageSearchState.image), imageSearch_store.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;
     }), imageSearch_store.Option.getOrElse(() => null));
   }
   renderCropper() {
-    return _Array._function.pipe(imageSearch_store.imageSearchState.imageUrl, imageSearch_store.Option.map(() => index.h("image-cropper", null)), imageSearch_store.Option.getOrElse(() => null));
+    return imageSearch_store._function.pipe(imageSearch_store.imageSearchState.imageUrl, imageSearch_store.Option.map(() => index.h("image-cropper", null)), imageSearch_store.Option.getOrElse(() => null));
   }
   render() {
     return (index.h(index.Host, null, imageSearch_store.imageSearchState.loading ||
@@ -522,7 +445,7 @@ let VviinnOnboarding = class {
     index.registerInstance(this, hostRef);
   }
   componentWillLoad() {
-    slotChangeListener(this, this.el);
+    customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
     return (index.h(index.Host, null, index.h("slot", { name: "vviinn-onboarding-title" }, index.h("h3", null, "So funktioniert es")), index.h("vviinn-slider", { showArrows: true }, index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-1", null)), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-2", null)), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-3", null)))));
@@ -538,7 +461,7 @@ let VviinnOnboardingCard1 = class {
     index.registerInstance(this, hostRef);
   }
   componentWillLoad() {
-    slotChangeListener(this, this.el);
+    customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
     return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-1-icon" }, index.h(index$1.OnboardingCard1Icon, null)), index.h("slot", { name: "onboarding-card-1-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Starte die Bildsuche"), index.h("p", null, "Lade ein Bild aus Deiner Galerie hoch oder fotografiere ein Produkt mit Deiner Kamera.")))));
@@ -554,7 +477,7 @@ let VviinnOnboardingCard2 = class {
     index.registerInstance(this, hostRef);
   }
   componentWillLoad() {
-    slotChangeListener(this, this.el);
+    customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
     return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-2-icon" }, index.h(index$1.OnboardingCard2Icon, null)), index.h("slot", { name: "onboarding-card-2-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Verfeiner deine Suche"), index.h("p", null, "Du kannst den Bildrahmen selber festlegen und so die Produkte genau ausw\u00E4hlen.")))));
@@ -570,7 +493,7 @@ let VviinnOnboardingCard3 = class {
     index.registerInstance(this, hostRef);
   }
   componentWillLoad() {
-    slotChangeListener(this, this.el);
+    customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
     return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-3-icon" }, index.h(index$1.OnboardingCard3Icon, null)), index.h("slot", { name: "onboarding-card-3-text" }, index.h("div", { class: "text" }, index.h("h4", null, "Ohne Hintergrund"), index.h("p", null, "Die besten Ergebnisse erh\u00E4ltst Du, wenn das gesuchte Objekt mit einfarbigem und hellem Hintergrund zu sehen ist.")))));
@@ -606,23 +529,6 @@ let VviinnOverlayedModal = class {
 };
 VviinnOverlayedModal.style = vviinnOverlayedModalCss;
 
-const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;-webkit-animation:rotate 3s linear infinite;animation:rotate 3s linear infinite;border:var(--preloader-width) solid white;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@-webkit-keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
-
-let VviinnPreloader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  isActive() {
-    return (imageSearch_store.imageSearchState.loading || imageSearch_store.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 {
@@ -630,7 +536,7 @@ let VviinnPrivacyBadge = class {
     index.registerInstance(this, hostRef);
   }
   componentWillLoad() {
-    slotChangeListener(this, this.el);
+    customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
     return (index.h(index.Host, null, index.h("slot", null, index.h("div", { class: "content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), index.h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), index.h("slot", { name: "vviinn-privacy-badge-text" }, index.h("p", null, "Wir gehen sorgf\u00E4ltig mit Deinen Daten um. Deine Bilder werden nur zum Zweck der Bildsuche gespeichert."))))));
@@ -639,174 +545,6 @@ let VviinnPrivacyBadge = class {
 };
 VviinnPrivacyBadge.style = vviinnPrivacyBadgeCss;
 
-class GtagAnalytics {
-  sendImpression(product) {
-    var _a, _b, _c;
-    gtag('event', 'view_item_list', {
-      items: [
-        {
-          id: product.productId,
-          name: product.title,
-          brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
-          category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
-          list_name: 'VI VPR View',
-          price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
-        }
-      ]
-    });
-    return undefined;
-  }
-  sendClick(product) {
-    var _a, _b, _c;
-    gtag('event', 'select_content', {
-      content_type: 'product',
-      items: [
-        {
-          id: product.productId,
-          name: product.title,
-          brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
-          category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
-          list_name: 'VI VPR View',
-          price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
-        }
-      ]
-    });
-    return undefined;
-  }
-}
-
-class GAnalytics {
-  constructor() {
-    ga('require', 'ec');
-  }
-  convertProduct(product) {
-    var _a, _b, _c;
-    return {
-      id: product.productId,
-      name: product.title,
-      brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
-      category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
-      list: 'VI VPR View',
-      price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
-    };
-  }
-  sendImpression(product) {
-    ga('ec:addImpression', this.convertProduct(product));
-    return undefined;
-  }
-  sendClick(product) {
-    var _a, _b, _c;
-    ga('ec:addProduct', {
-      id: product.productId,
-      name: product.title,
-      brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
-      category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
-      price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
-    });
-    ga('ec:setAction', 'click', { list: 'VI VPR View' });
-    return undefined;
-  }
-}
-
-const getGtagAnalytics = () => _Array._function.pipe(imageSearch_store.Option.fromNullable(window.gtag), imageSearch_store.Option.map(() => new GtagAnalytics()));
-const getCommonAnalytics = () => _Array._function.pipe(imageSearch_store.Option.fromNullable(window.ga), imageSearch_store.Option.map(() => new GAnalytics()));
-const analyticsMonoid = imageSearch_store.Option.getMonoid(_Array.Semigroup.first());
-const getAnalyticsModule = analyticsMonoid.concat(getGtagAnalytics(), getCommonAnalytics());
-
-const FIT_EXPR = /fit\/\d+\//;
-const containsFit = (url) => {
-  return _Array._function.pipe(url.match(FIT_EXPR), imageSearch_store.Either.fromNullable(url), imageSearch_store.Either.map(() => url));
-};
-const processWidth = (url, size) => {
-  return _Array._function.pipe(containsFit(url), imageSearch_store.Either.map((url) => url.replace(FIT_EXPR, `fit/${size}/`)), imageSearch_store.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 = (props) => (index.h("picture", null,
-  index.h("img", { loading: "lazy", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title })));
-const ResponsiveImage = (props) => (index.h("picture", null,
-  index.h("img", { loading: "lazy", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title })));
-
-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;max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content;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;max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content}.deeplink{text-decoration:none}picture{position:relative}: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.currency = undefined;
-    this.imageRatio = 1;
-    this.imageWidth = 200;
-    this.locale = undefined;
-    this.pricePrefix = undefined;
-    this.responsive = false;
-    this.dimmedBackground = false;
-    this.imageLoaded = false;
-    this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this), { threshold: 1.0 });
-  }
-  intersectionCallback(data) {
-    if (data.some((entry) => entry.isIntersecting)) {
-      _Array._function.pipe(getAnalyticsModule, imageSearch_store.Option.map((analytics) => analytics.sendImpression(this.getProduct())));
-      this.recommendationView.emit(this.productId);
-      this.intersectionObserver.disconnect();
-    }
-  }
-  componentDidLoad() {
-    this.recommendationLoad.emit(this.productId);
-    this.intersectionObserver.observe(this.el);
-    const links = this.el.shadowRoot.querySelectorAll("a");
-    links.forEach((link) => link.addEventListener("mousedown", (event) => {
-      this.recommendationClick.emit(this.productId);
-      if (window.ga) {
-        event.preventDefault();
-      }
-      _Array._function.pipe(getAnalyticsModule, imageSearch_store.Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
-      if (window.ga) {
-        ga("send", "event", "UX", "click", "Results", {
-          hitCallback: function () {
-            document.location.href = this.deeplink;
-          },
-        });
-      }
-    }));
-  }
-  getProduct() {
-    return imageSearch_store.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
-    };
-    return this.responsive ? ResponsiveImage(props) : Image(props);
-  }
-  render() {
-    var _a, _b, _c;
-    return (index.h(index.Host, { exportparts: "brand, currency, deeplink, image, type, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title", class: { dimmed: this.dimmedBackground } }, 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 : imageSearch_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : imageSearch_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : imageSearch_store.state.locale })));
-  }
-  get el() { return index.getElement(this); }
-};
-VviinnProductCard.style = vviinnProductCardCss;
-
 const vviinnServerErrorCss = ":host{display:block}";
 
 let VviinnServerError = class {
@@ -879,7 +617,7 @@ let VviinnSlider = class {
     this.setActiveCssClassToSlide(index);
   }
   renderBullets() {
-    return this.showBullets ? (index.h("div", { class: "controls" }, _Array.NonEmptyArray.range(0, this.elementsCount - 1).map((i) => (index.h("div", { class: {
+    return this.showBullets ? (index.h("div", { class: "controls" }, imageSearch_store.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;
@@ -916,13 +654,13 @@ let VviinnSlider = class {
   handleTouchStart(event) {
     if (!this.showBullets)
       return;
-    this.swipeStartPosition = _Array._function.pipe(event.touches[0], imageSearch_store.Option.fromNullable, imageSearch_store.Option.map((t) => t.clientX));
+    this.swipeStartPosition = imageSearch_store._function.pipe(event.touches[0], imageSearch_store.Option.fromNullable, imageSearch_store.Option.map((t) => t.clientX));
   }
   handleTouchEnd(event) {
     if (!this.showBullets)
       return;
-    const swipeEndPosition = _Array._function.pipe(event.changedTouches[0], imageSearch_store.Option.fromNullable, imageSearch_store.Option.map((t) => t.clientX));
-    _Array._function.pipe(imageSearch_store.sequenceToOption(this.swipeStartPosition, swipeEndPosition), imageSearch_store.Option.map(([start, end]) => Ord.compare(start, end)), imageSearch_store.Option.map((swipeDirection) => {
+    const swipeEndPosition = imageSearch_store._function.pipe(event.changedTouches[0], imageSearch_store.Option.fromNullable, imageSearch_store.Option.map((t) => t.clientX));
+    imageSearch_store._function.pipe(imageSearch_store.sequenceToOption(this.swipeStartPosition, swipeEndPosition), imageSearch_store.Option.map(([start, end]) => Ord.compare(start, end)), imageSearch_store.Option.map((swipeDirection) => {
       switch (swipeDirection) {
         case 1:
           return this.nextSlide();
@@ -953,7 +691,7 @@ let VviinnTeaser = class {
     index.registerInstance(this, hostRef);
   }
   componentWillLoad() {
-    slotChangeListener(this, this.el);
+    customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
     return (index.h(index.Host, null, index.h("slot", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), index.h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), index.h("span", { class: "vviinn-teaser-text" }, index.h("slot", { name: "vviinn-teaser-text" }, "Finde Produkte auf ", index.h("br", null), " einem Foto")))));
@@ -962,127 +700,6 @@ let VviinnTeaser = class {
 };
 VviinnTeaser.style = vviinnTeaserCss;
 
-const vviinnVpsButtonCss = "";
-
-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" })));
-  }
-  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}";
-
-let VviinnVpsWidget = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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;
-  }
-  activeWatcher(value) {
-    if (value) {
-      this.overflow = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-    }
-    else {
-      document.body.style.overflow = this.overflow;
-    }
-  }
-  componentWillLoad() {
-    slotChangeListener(this, this.el);
-  }
-  connectedCallback() {
-    imageSearch_store.state$1.apiPath = this.apiPath;
-    imageSearch_store.state$1.currencySign = this.currencySign;
-    imageSearch_store.state$1.locale = this.locale;
-    imageSearch_store.imageSearchState.token = this.token;
-  }
-  handleImageSelection() {
-    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;
-  }
-  resetState() {
-    this.resetScroll("onboarding-block");
-    this.slidePosition = 0;
-    imageSearch_store.imageSearchState.image = imageSearch_store.Option.none;
-    imageSearch_store.imageSearchState.imageUrl = imageSearch_store.Option.none;
-    imageSearch_store.imageSearchState.imageBounds = imageSearch_store.Option.none;
-    imageSearch_store.imageSearchState.searchArea = imageSearch_store.Option.none;
-    imageSearch_store.imageSearchState.results = [];
-    imageSearch_store.imageSearchState.filters = [];
-    imageSearch_store.imageSearchState.detectedObjects = [];
-    imageSearch_store.imageSearchState.activeIonLink = undefined;
-    imageSearch_store.imageSearchState.rectangleSearchForm = undefined;
-    this.resetScroll("results-block");
-  }
-  haveErrors() {
-    return this.wrongImageFormat || imageSearch_store.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));
-  }
-  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" }, 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: !imageSearch_store.imageSearchState.serverError }, onActionClick: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection(), 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", { onImageSelected: () => this.handleImageSelection(), 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" }, imageSearch_store.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: imageSearch_store.imageSearchState.results.length > 0 } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {
-        hidden: imageSearch_store.imageSearchState.results.length <= 0,
-        products: true,
-      } }, imageSearch_store.imageSearchState.results.map((p) => {
-      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" }));
-    }))))))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "active": ["activeWatcher"]
-  }; }
-};
-VviinnVpsWidget.style = vviinnVpsWidgetCss;
-
 const vviinnWrongFormatCss = ":host{display:block}";
 
 let VviinnWrongFormat = class {
@@ -1096,13 +713,11 @@ let VviinnWrongFormat = class {
 };
 VviinnWrongFormat.style = vviinnWrongFormatCss;
 
-exports.cropper_handler = CropperHandler;
 exports.highlight_box = HighlightBox;
 exports.image_cropper = ImageCropper;
 exports.search_filters = SearchFilters;
 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;
@@ -1114,13 +729,9 @@ 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_vps_button = VviinnVpsButton;
-exports.vviinn_vps_widget = VviinnVpsWidget;
 exports.vviinn_wrong_format = VviinnWrongFormat;