vviinn-widgets 2.5.0 → 2.5.2

package/dist/collection/components/vviinn-error/vviinn-wrong-format/vviinn-wrong-format.js

@@ -0,0 +1,34 @@
+import { Component, Host, h, Event } from "@stencil/core";
+export class VviinnWrongFormat {
+  render() {
+    return (h(Host, null,
+      h("vviinn-error", null,
+        h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"),
+        h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."),
+        h("button", { slot: "action", onClick: () => this.actionClick.emit() }, "Neues Bild hochladen"))));
+  }
+  static get is() { return "vviinn-wrong-format"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-wrong-format.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-wrong-format.css"]
+  }; }
+  static get events() { return [{
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.css

@@ -0,0 +1,34 @@
+: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;
+  }
+}
+

package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.js

@@ -0,0 +1,129 @@
+import { Component, Host, h, Prop, Event, State, } from "@stencil/core";
+import { pipe } from "fp-ts/lib/function";
+import { toFile } from "../../../Image/toFile";
+import { imageSearchState, processSelectedFile, } from "../../../store/imageSearch.store";
+import * as E from "fp-ts/lib/Either";
+export class VviinnExampleImage {
+  constructor() {
+    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);
+    pipe(processResult, E.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
+    this.selected = false;
+  }
+  showPreloader() {
+    return ((imageSearchState.objectDetectionInProgress ||
+      imageSearchState.loading) &&
+      this.selected);
+  }
+  render() {
+    return (h(Host, null,
+      this.showPreloader() ? (h("div", { class: "image-preloader" },
+        h("vviinn-preloader", null))) : null,
+      h("img", { onClick: (ev) => this.selectImage(ev), src: this.src, width: this.width, height: this.height })));
+  }
+  static get is() { return "vviinn-example-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-example-image.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-example-image.css"]
+  }; }
+  static get properties() { return {
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "src",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "selected": {}
+  }; }
+  static get events() { return [{
+      "method": "exampleImageSelected",
+      "name": "exampleImageSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "exampleImageError",
+      "name": "exampleImageError",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/vviinn-example-images/vviinn-example-images.css

@@ -0,0 +1,19 @@
+:host {
+}
+
+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;  
+}

package/dist/collection/components/vviinn-example-images/vviinn-example-images.js

@@ -0,0 +1,80 @@
+import { Component, Host, h, Event, Listen, Element } from "@stencil/core";
+import { slotChangeListener } from "../customized-slots";
+export class VviinnExampleImages {
+  handleImageSelection() {
+    this.imageSelected.emit();
+  }
+  handleImageSelectionError() {
+    this.imageSelectedError.emit();
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", { name: "vviinn-example-images-title" },
+        h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")),
+      h("div", { class: "images" },
+        h("slot", { name: "vviinn-example-images-1" },
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
+        h("slot", { name: "vviinn-example-images-2" },
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
+        h("slot", { name: "vviinn-example-images-3" },
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
+        h("slot", { name: "vviinn-example-images-4" },
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+  }
+  static get is() { return "vviinn-example-images"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-example-images.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-example-images.css"]
+  }; }
+  static get events() { return [{
+      "method": "imageSelected",
+      "name": "imageSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "imageSelectedError",
+      "name": "imageSelectedError",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "exampleImageSelected",
+      "method": "handleImageSelection",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "exampleImageError",
+      "method": "handleImageSelectionError",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/{vviinn-widgets/index-bbcd6be9.js → collection/components/vviinn-icons/index.js}

@@ -1,31 +1,28 @@
-import { h } from './index-c8128606.js';
-
-const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+import { h } from "@stencil/core";
+export const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
-const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+export const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
-const OnboardingCard1Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
+export const OnboardingCard1Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
   h("defs", null),
   h("path", { fill: "#393939", d: "M74.55 20a5.06 5.06 0 014.14 2l4.72 9.32.1.18.11.17A5.07 5.07 0 0087.93 34h13.87c5.07 0 9.2 3.59 9.2 8v50c0 4.41-4.13 8-9.2 8H18.2c-5.07 0-9.2-3.59-9.2-8V42c0-4.41 4.13-8 9.2-8h13.87a5.072 5.072 0 004.31-2.34l.11-.17.1-.18L41.31 22a5.06 5.06 0 014.14-2h29.1zm0-4h-29.1a9 9 0 00-7.6 4L33 29.5a1.13 1.13 0 01-1 .5H18.2C10.91 30 5 35.37 5 42v50c0 6.63 5.91 12 13.2 12h83.6c7.29 0 13.2-5.37 13.2-12V42c0-6.63-5.91-12-13.2-12H87.93a1.13 1.13 0 01-1-.5L82.15 20a9 9 0 00-7.6-4z" }),
   h("path", { fill: "#393939", d: "M96 46a4 4 0 110 8 4 4 0 010-8zm0-4a8 8 0 100 16.001A8 8 0 0096 42z" }),
   h("path", { class: "colored", d: "M60 42a24 24 0 100 48.001A24 24 0 0060 42zm12 26H62v10a2 2 0 01-4 0V68H48a2 2 0 010-4h10V54a2 2 0 014 0v10h10a2 2 0 110 4z" })));
-const OnboardingCard2Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
+export const OnboardingCard2Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
   h("defs", null),
   h("path", { fill: "#393939", d: "M110.35 96.52l-24.8-22.66a6.22 6.22 0 00-8.14-.27l-.09.07-10.57 8.93-18.33-17.88a6.001 6.001 0 00-8.51-.35L8.69 91.49a2 2 0 002.62 3l31.3-27.2a2 2 0 012.233-.359 2 2 0 01.637.479l.1.1 45 43.9a2.005 2.005 0 002.83-.03 2.003 2.003 0 00-.03-2.83L69.63 85.39l10.22-8.63a2.3 2.3 0 013 .07l24.77 22.65c.377.343.871.529 1.38.52a2 2 0 001.35-3.48zM75 31a10 10 0 110 20 10 10 0 010-20zm0-4a14 14 0 100 28 14 14 0 000-28z" }),
   h("path", { class: "colored", d: "M12 36H8V20A12 12 0 0120 8h16v4H20a8 8 0 00-8 8v16zM112 36h-4V20a8.001 8.001 0 00-8-8H84V8h16a11.998 11.998 0 0112 12v16zM36 112H20a11.998 11.998 0 01-12-12V84h4v16a8 8 0 008 8h16v4zM100 112H84v-4h16a8 8 0 008-8V84h4v16c0 3.183-1.264 6.235-3.515 8.485A11.996 11.996 0 01100 112z" })));
-const OnboardingCard3Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
+export const OnboardingCard3Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
   h("defs", null),
   h("path", { class: "colored", d: "M84.09 43.24a.53.53 0 00-.29-.48L60.28 29.4a.522.522 0 00-.27-.07.531.531 0 00-.28.07L36.2 42.76a.54.54 0 000 1l23.53 13.3a.54.54 0 00.55 0L83.8 43.72a.53.53 0 00.29-.48zM57.28 61.23L33.73 47.88a.569.569 0 00-.85.48V75a.54.54 0 00.29.48L56.72 88.8a.56.56 0 00.56 0 .53.53 0 00.28-.48V61.71a.56.56 0 00-.28-.48zM86.84 47.88a.63.63 0 00-.29-.08.55.55 0 00-.28.08L62.73 61.23a.56.56 0 00-.28.48v26.61a.53.53 0 00.28.48.56.56 0 00.56 0l23.54-13.29a.54.54 0 00.29-.48V48.36a.55.55 0 00-.28-.48z" }),
   h("path", { class: "colored", d: "M100 7.94H20a12 12 0 00-12 12v80a11.998 11.998 0 0012 12h80c3.183 0 6.235-1.264 8.485-3.515A11.996 11.996 0 00112 99.94v-80a11.998 11.998 0 00-12-12zm-8 69.24a1.69 1.69 0 01-.85 1.45l-30.31 17.1a1.77 1.77 0 01-1.67 0l-30.32-17.1a1.689 1.689 0 01-.85-1.45V42.82a1.66 1.66 0 01.85-1.45l30.32-17.21a1.71 1.71 0 011.67 0l30.31 17.21a1.67 1.67 0 01.85 1.45v34.36z" })));
-const CheckIcon = () => (h("svg", { width: "14", height: "11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+export const CheckIcon = () => (h("svg", { width: "14", height: "11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
-const LoaderIcon = () => (h("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 28" },
+export const LoaderIcon = () => (h("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 28" },
   h("path", { fill: "#fff", d: "M23,14a9,9,0,1,1-9-9V2A12,12,0,1,0,26,14Z" })));
-const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
+export const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
-const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+export const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z", fill: "#161616" })));
-const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+export const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
-
-export { ArrowIcon as A, CameraIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, CrossIcon as a, CheckIcon as b, ChevronIcon as c, OnboardingCard2Icon as d, OnboardingCard3Icon as e };

package/dist/collection/components/vviinn-image-selector/vviinn-image-selector.css

@@ -0,0 +1,25 @@
+: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;
+}

package/dist/collection/components/vviinn-image-selector/vviinn-image-selector.js

@@ -0,0 +1,64 @@
+import { Component, Host, h, Event } from "@stencil/core";
+import * as E from "fp-ts/Either";
+import { pipe } from "fp-ts/lib/function";
+import { imageSearchState, processSelectedFile, } from "../../store/imageSearch.store";
+/**
+ * @part button -  button look and feel
+ */
+export class VviinnImageSelector {
+  async handleInputChange(event) {
+    const input = event.target;
+    const processingResult = await processSelectedFile(input.files[0]);
+    pipe(processingResult, E.match(() => this.imageSelectedError.emit(), () => this.imageSelected.emit()));
+    input.value = null;
+  }
+  isLoading() {
+    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
+  }
+  render() {
+    return (h(Host, { exportparts: "button" },
+      this.isLoading() ? h("vviinn-preloader", null) : null,
+      this.isLoading() ? null : (h("label", { htmlFor: "fileInput", part: "button" },
+        h("slot", { name: "upload-button-text" }, "Upload image"))),
+      h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: "image/*", onChange: (event) => this.handleInputChange(event) })));
+  }
+  static get is() { return "vviinn-image-selector"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-image-selector.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-image-selector.css"]
+  }; }
+  static get events() { return [{
+      "method": "imageSelected",
+      "name": "imageSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fires when user select file"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "imageSelectedError",
+      "name": "imageSelectedError",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fires when user select file that no .jpg, .jpeg or png"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.css

@@ -0,0 +1,47 @@
+: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;
+}

package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js

@@ -0,0 +1,100 @@
+import { Component, Host, h, State, Prop, Event } from "@stencil/core";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import { foldValueObject } from "../../../network/ion/ValueObject";
+import { detectedObjectEq, } from "../../../searchSession/searchSession";
+import { fromAlt, scaleWithSized, center } from "../../../geometry/Rectangle";
+import { imageSearchState, makeRectangularSearchRequest, } from "../../../store/imageSearch.store";
+export class VviinnDetectedObject {
+  constructor() {
+    this.position = ["0", "0"];
+  }
+  getObjectPosition() {
+    return pipe(imageSearchState.imageBounds, O.map((bounds) => {
+      const objectRectangle = fromAlt(foldValueObject(this.detectedObject).rectangle);
+      const { x, y } = pipe(objectRectangle, scaleWithSized(bounds), center);
+      return [`${x}px`, `${y}px`];
+    }), O.getOrElse(() => ["0", "0"]));
+  }
+  selectDetectedObject() {
+    pipe(imageSearchState.imageBounds, O.map((bounds) => {
+      const rectangle = foldValueObject(this.detectedObject).rectangle;
+      const transformedRect = fromAlt(rectangle);
+      const scaledRect = scaleWithSized(bounds)(transformedRect);
+      imageSearchState.detectedObject = this.detectedObject;
+      imageSearchState.searchArea = O.some(scaledRect);
+    }));
+    makeRectangularSearchRequest();
+    this.detectedObjectClicked.emit();
+  }
+  isActive() {
+    if (!this.detectedObject)
+      return false;
+    if (!imageSearchState.detectedObject)
+      return false;
+    const thisObject = foldValueObject(this.detectedObject);
+    const savedObject = foldValueObject(imageSearchState.detectedObject);
+    return detectedObjectEq.equals(thisObject, savedObject);
+  }
+  render() {
+    return (h(Host, { class: {
+        active: this.isActive(),
+      }, onClick: () => this.selectDetectedObject(), style: {
+        "--x-position": this.getObjectPosition()[0],
+        "--y-position": this.getObjectPosition()[1],
+      } }));
+  }
+  static get is() { return "vviinn-detected-object"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-detected-object.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-detected-object.css"]
+  }; }
+  static get properties() { return {
+    "detectedObject": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ValueObject<DetectedObject>",
+        "resolved": "Valueable<DetectedObject> & Partial<MemberObject> & Partial<Linked>",
+        "references": {
+          "ValueObject": {
+            "location": "import",
+            "path": "../../../network/ion/ValueObject"
+          },
+          "DetectedObject": {
+            "location": "import",
+            "path": "../../../searchSession/searchSession"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "position": {}
+  }; }
+  static get events() { return [{
+      "method": "detectedObjectClicked",
+      "name": "detectedObjectClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/vviinn-image-view/vviinn-image-view.css

@@ -0,0 +1,31 @@
+: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;
+}