vviinn-widgets 2.1.0 → 2.2.2

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: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
+        h("slot", { name: "vviinn-example-images-2" },
+          h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
+        h("slot", { name: "vviinn-example-images-3" },
+          h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
+        h("slot", { name: "vviinn-example-images-4" },
+          h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+  }
+  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-c9483145.js → collection/components/vviinn-icons/index.js}

@@ -1,29 +1,30 @@
-import { h } from './index-b6d739a9.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", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none" },
+export const CameraIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none" },
   h("defs", null),
   h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M9.771 3.89a.875.875 0 01.728-.39h7c.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.25A2.625 2.625 0 012.625 21V8.75A2.625 2.625 0 015.25 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.25a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }),
   h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M14 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" })));
-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", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+export const ChevronIcon = () => (h("svg", { width: "9", height: "16", fill: "none", 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", fill: "#525252" })));
-
-export { ArrowIcon as A, CameraIcon as C, OnboardingCard1Icon as O, ChevronIcon as a, CheckIcon as b, OnboardingCard2Icon as c, OnboardingCard3Icon as d };
+export const VisualSearchIcon = () => (h("svg", { width: "22", height: "22", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M18 0h-3v2h3c1.103 0 2 .897 2 2v3h2V4c0-2.206-1.794-4-4-4Zm2 18c0 1.103-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4v-3h-2v3ZM2 18v-3H0v3c0 2.206 1.794 4 4 4h3v-2H4c-1.103 0-2-.897-2-2ZM2 4c0-1.103.897-2 2-2h3V0H4C1.794 0 0 1.794 0 4v3h2V4Zm6 6.5C8 9.122 9.122 8 10.5 8S13 9.122 13 10.5 11.878 13 10.5 13A2.503 2.503 0 0 1 8 10.5Zm7.5 6.5a1.503 1.503 0 0 0 1.061-2.561l-2.012-2.011c.293-.6.448-1.26.451-1.928C15 8.019 12.981 6 10.5 6A4.505 4.505 0 0 0 6 10.5c0 2.481 2.019 4.5 4.5 4.5.693 0 1.341-.17 1.928-.451l2.011 2.012c.293.293.677.439 1.061.439Z" })));
+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" })));

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,83 @@
+import { Component, Host, h, State, Prop } 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();
+  }
+  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": {}
+  }; }
+}

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;
+}

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

@@ -0,0 +1,61 @@
+import { Component, Host, h } from "@stencil/core";
+import { imageSearchState } from "../../store/imageSearch.store";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import { sequenceToOption } from "../../utils/option/option";
+import { fromImage, move } from "../../geometry/Rectangle";
+import { dimensionsFromImage, scaleByLargestSide } from "../../Image/sizing";
+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]];
+};
+export class VviinnImageView {
+  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 = O.some(imageBounds);
+    imageSearchState.searchArea = O.some(searchArea);
+  }
+  renderDetectedObject(object) {
+    return h("vviinn-detected-object", { detectedObject: object });
+  }
+  renderImage() {
+    return pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.image), O.map(([url, refImage]) => {
+      const [width, height] = getImageSizes(refImage);
+      const image = (h("img", { decoding: "async", width: width, height: height, src: url, onLoad: (el) => this.handleInitialImageLoad(el), draggable: false }));
+      return image;
+    }), O.getOrElse(() => null));
+  }
+  renderCropper() {
+    return pipe(imageSearchState.imageUrl, O.map(() => h("image-cropper", null)), O.getOrElse(() => null));
+  }
+  render() {
+    return (h(Host, null,
+      imageSearchState.loading ||
+        imageSearchState.objectDetectionInProgress ? (h("div", { class: "image-preloader" },
+        h("vviinn-preloader", null))) : null,
+      h("highlight-box", null),
+      this.renderImage(),
+      this.renderCropper(),
+      imageSearchState.detectedObjects.map((o) => this.renderDetectedObject(o))));
+  }
+  static get is() { return "vviinn-image-view"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-image-view.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-image-view.css"]
+  }; }
+}

package/dist/collection/components/vviinn-modal/vviinn-modal.css

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

package/dist/collection/components/vviinn-modal/vviinn-modal.js

@@ -0,0 +1,98 @@
+import { Component, Host, h, State, Event, Prop } from "@stencil/core";
+export class VviinnModal {
+  constructor() {
+    this.active = false;
+    this.slider = false;
+  }
+  close() {
+    this.active = false;
+    setTimeout(() => {
+      this.modalClosed.emit();
+    }, this.slider ? 500 : 0);
+  }
+  handleAnimationEnd(ev) {
+    if (ev.animationName !== "fade-in")
+      return;
+    this.slider = true;
+  }
+  render() {
+    return (h(Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) },
+      h("div", { class: "head" },
+        h("button", { part: "secondary-action", onClick: () => this.secondaryActionClicked.emit() },
+          h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M20.25 12H3.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+            h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))),
+        h("div", { class: "title", part: "title" }, "Bildsuche"),
+        h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" },
+          h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#333333" })))),
+      h("div", { class: "body" },
+        h("slot", null))));
+  }
+  static get is() { return "vviinn-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-modal.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-modal.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "slider": {}
+  }; }
+  static get events() { return [{
+      "method": "modalClosed",
+      "name": "modalClosed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when close button clicked and close animation ends"
+      },
+      "complexType": {
+        "original": "AnimationEvent",
+        "resolved": "AnimationEvent",
+        "references": {
+          "AnimationEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "secondaryActionClicked",
+      "name": "secondaryActionClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when secondary action button clicked"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}