vviinn-widgets 2.7.2 → 2.8.0

package/dist/components/vviinn-detected-object2.js

@@ -0,0 +1,67 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { _ as _function, O as Option } from './NonEmptyArray.js';
+import { i as imageSearchState, f as fromAlt, b as foldValueObject, c as scaleWithSized, d as center, a as makeRectangularSearchRequest, e as detectedObjectEq } from './imageSearch.store.js';
+
+const vviinnDetectedObjectCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--spacer:8px}:host{--size:32px;--x-position:0;--y-position:0;background:hsla(0,0%,9%,.5);border:none;border-radius:50%;cursor:pointer;display:block;height:var(--size);position:absolute;transform:translate(calc(var(--x-position) - var(--size)*.5),calc(var(--y-position) - var(--size)*.5));transition:opacity .25s;transition:background .1 ease-in-out;width:var(--size);z-index:1}:host(:hover){background:hsla(0,0%,9%,.75)}:host(.active){background:var(--color-primary,var(--color-primary-system))!important;border:2px solid #fff}:host:after{--size:32px;background:#fff;border-radius:50%;content:\"\";cursor:pointer;display:block;height:calc(var(--size)*.25);transform:translate(calc(-50% + var(--size)*.5),calc(-50% + var(--size)*.5));width:calc(var(--size)*.25)}";
+
+let VviinnDetectedObject = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.detectedObjectClicked = createEvent(this, "detectedObjectClicked", 7);
+    this.position = ["0", "0"];
+  }
+  getObjectPosition() {
+    return _function.pipe(imageSearchState.imageBounds, Option.map((bounds) => {
+      const objectRectangle = fromAlt(foldValueObject(this.detectedObject).rectangle);
+      const { x, y } = _function.pipe(objectRectangle, scaleWithSized(bounds), center);
+      return [`${x}px`, `${y}px`];
+    }), Option.getOrElse(() => ["0", "0"]));
+  }
+  selectDetectedObject() {
+    _function.pipe(imageSearchState.imageBounds, Option.map((bounds) => {
+      const rectangle = foldValueObject(this.detectedObject).rectangle;
+      const transformedRect = fromAlt(rectangle);
+      const scaledRect = scaleWithSized(bounds)(transformedRect);
+      imageSearchState.detectedObject = this.detectedObject;
+      imageSearchState.searchArea = Option.some(scaledRect);
+    }));
+    makeRectangularSearchRequest();
+    this.detectedObjectClicked.emit();
+  }
+  isActive() {
+    if (!this.detectedObject)
+      return false;
+    if (!imageSearchState.detectedObject)
+      return false;
+    const thisObject = foldValueObject(this.detectedObject);
+    const savedObject = foldValueObject(imageSearchState.detectedObject);
+    return detectedObjectEq.equals(thisObject, savedObject);
+  }
+  render() {
+    return (h(Host, { class: {
+        active: this.isActive(),
+      }, onClick: () => this.selectDetectedObject(), style: {
+        "--x-position": this.getObjectPosition()[0],
+        "--y-position": this.getObjectPosition()[1],
+      } }));
+  }
+  static get style() { return vviinnDetectedObjectCss; }
+};
+VviinnDetectedObject = /*@__PURE__*/ proxyCustomElement(VviinnDetectedObject, [1, "vviinn-detected-object", {
+    "detectedObject": [16],
+    "position": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["vviinn-detected-object"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-detected-object":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnDetectedObject);
+      }
+      break;
+  } });
+}
+
+export { VviinnDetectedObject as V, defineCustomElement as d };

package/dist/components/vviinn-empty-results.js

@@ -0,0 +1,6 @@
+import { V as VviinnEmptyResults$1, d as defineCustomElement$1 } from './vviinn-empty-results2.js';
+
+const VviinnEmptyResults = VviinnEmptyResults$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnEmptyResults, defineCustomElement };

package/dist/components/vviinn-empty-results2.js

@@ -0,0 +1,35 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './vviinn-error2.js';
+
+const vviinnEmptyResultsCss = ":host{display:grid}vviinn-error{justify-items:center}";
+
+let VviinnEmptyResults = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.actionClick = createEvent(this, "actionClick", 7);
+  }
+  render() {
+    return (h(Host, null, h("vviinn-error", null, h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }), h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })), h("h4", { slot: "title" }, "Leider nichts gefunden"), h("span", { slot: "text" }, "Leider konnten wir keine passenden Produkte finden. Bitte versuche es mit einem anderen Bildausschnitt noch einmal."))));
+  }
+  static get style() { return vviinnEmptyResultsCss; }
+};
+VviinnEmptyResults = /*@__PURE__*/ proxyCustomElement(VviinnEmptyResults, [1, "vviinn-empty-results"]);
+function defineCustomElement() {
+  const components = ["vviinn-empty-results", "vviinn-error"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-empty-results":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnEmptyResults);
+      }
+      break;
+    case "vviinn-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnEmptyResults as V, defineCustomElement as d };

package/dist/components/vviinn-error.js

@@ -0,0 +1,6 @@
+import { V as VviinnError$1, d as defineCustomElement$1 } from './vviinn-error2.js';
+
+const VviinnError = VviinnError$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnError, defineCustomElement };

package/dist/components/vviinn-error2.js

@@ -0,0 +1,28 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const vviinnErrorCss = ":host{grid-gap:20px;background:#f4f4f4;border-radius:8px;display:grid;padding:24px;text-align:center}::slotted(svg){align-self:center;display:grid}::slotted(h4){font-size:18px;font-weight:600;line-height:24px;margin:unset}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:var(--color-primary,var(--color-primary-system));cursor:pointer;font-size:16px;font-weight:600;line-height:20px}";
+
+let VviinnError = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "icon" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("slot", { name: "action" })));
+  }
+  static get style() { return vviinnErrorCss; }
+};
+VviinnError = /*@__PURE__*/ proxyCustomElement(VviinnError, [1, "vviinn-error"]);
+function defineCustomElement() {
+  const components = ["vviinn-error"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-error":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnError);
+      }
+      break;
+  } });
+}
+
+export { VviinnError as V, defineCustomElement as d };

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

@@ -0,0 +1,6 @@
+import { V as VviinnExampleImage$1, d as defineCustomElement$1 } from './vviinn-example-image2.js';
+
+const VviinnExampleImage = VviinnExampleImage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnExampleImage, defineCustomElement };

package/dist/components/vviinn-example-image2.js

@@ -0,0 +1,57 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as toFile, i as imageSearchState } from './imageSearch.store.js';
+import { d as defineCustomElement$1 } from './vviinn-preloader2.js';
+
+const vviinnExampleImageCss = ":host{display:block;margin-bottom:8px;position:relative}img{cursor:pointer;height:auto;width:100%}.image-preloader{background:rgba(0,0,0,.25);border-radius:4px;bottom:12px;display:none;padding:4px 6px;pointer-events:none;position:absolute;right:12px;z-index:1}vviinn-preloader{--preloader-size:12px}@media (max-width:640px){.image-preloader{display:block}}";
+
+let VviinnExampleImage = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.exampleImageSelected = createEvent(this, "exampleImageSelected", 7);
+    this.exampleImageError = createEvent(this, "exampleImageError", 7);
+    this.src = "";
+    this.width = 0;
+    this.height = 0;
+    this.selected = false;
+  }
+  async selectImage() {
+    this.selected = true;
+    const file = await toFile(this.src);
+    imageSearchState.imageSelectedObserver.next(file);
+    this.selected = false;
+  }
+  showPreloader() {
+    return ((imageSearchState.objectDetectionInProgress ||
+      imageSearchState.status === "pending") &&
+      this.selected);
+  }
+  render() {
+    return (h(Host, null, this.showPreloader() ? (h("div", { class: "image-preloader" }, h("vviinn-preloader", null))) : null, h("img", { onClick: () => this.selectImage(), src: this.src, width: this.width, height: this.height })));
+  }
+  static get style() { return vviinnExampleImageCss; }
+};
+VviinnExampleImage = /*@__PURE__*/ proxyCustomElement(VviinnExampleImage, [1, "vviinn-example-image", {
+    "src": [1],
+    "width": [2],
+    "height": [2],
+    "selected": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["vviinn-example-image", "vviinn-preloader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-example-image":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnExampleImage);
+      }
+      break;
+    case "vviinn-preloader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnExampleImage as V, defineCustomElement as d };

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

@@ -0,0 +1,6 @@
+import { V as VviinnExampleImages$1, d as defineCustomElement$1 } from './vviinn-example-images2.js';
+
+const VviinnExampleImages = VviinnExampleImages$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnExampleImages, defineCustomElement };

package/dist/components/vviinn-example-images2.js

@@ -0,0 +1,53 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { s as slotChangeListener } from './customized-slots.js';
+import { d as defineCustomElement$2 } from './vviinn-example-image2.js';
+import { d as defineCustomElement$1 } from './vviinn-preloader2.js';
+
+const vviinnExampleImagesCss = "h3{font-size:22px;font-weight:600;line-height:32px;margin:0 0 16px;text-align:center}.images{-moz-column-count:2;column-count:2;-moz-column-gap:16px;column-gap:16px;display:block}";
+
+let VviinnExampleImages = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.imageSelected = createEvent(this, "imageSelected", 7);
+    this.imageSelectedError = createEvent(this, "imageSelectedError", 7);
+  }
+  handleImageSelection() {
+    this.imageSelected.emit();
+  }
+  handleImageSelectionError() {
+    this.imageSelectedError.emit();
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images" }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+  }
+  get el() { return this; }
+  static get style() { return vviinnExampleImagesCss; }
+};
+VviinnExampleImages = /*@__PURE__*/ proxyCustomElement(VviinnExampleImages, [1, "vviinn-example-images", undefined, [[0, "exampleImageSelected", "handleImageSelection"], [0, "exampleImageError", "handleImageSelectionError"]]]);
+function defineCustomElement() {
+  const components = ["vviinn-example-images", "vviinn-example-image", "vviinn-preloader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-example-images":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnExampleImages);
+      }
+      break;
+    case "vviinn-example-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "vviinn-preloader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnExampleImages as V, defineCustomElement as d };

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

@@ -0,0 +1,6 @@
+import { V as VviinnImageSelector$1, d as defineCustomElement$1 } from './vviinn-image-selector2.js';
+
+const VviinnImageSelector = VviinnImageSelector$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnImageSelector, defineCustomElement };

package/dist/components/vviinn-image-selector2.js

@@ -0,0 +1,135 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { E as Either, h as matchW, j as imageSearcStateListener, i as imageSearchState } from './imageSearch.store.js';
+import { _ as _function, O as Option } from './NonEmptyArray.js';
+import { o as isSome, n as none } from './Handler.js';
+import { d as defineCustomElement$1 } from './vviinn-preloader2.js';
+
+/**
+ * Find the first element returned by an option based selector function
+ *
+ * @example
+ * import { findFirstMap } from 'fp-ts/ReadonlyArray'
+ * import { some, none } from 'fp-ts/Option'
+ *
+ * interface Person {
+ *   readonly name: string
+ *   readonly age?: number
+ * }
+ *
+ * const persons: ReadonlyArray<Person> = [{ name: 'John' }, { name: 'Mary', age: 45 }, { name: 'Joey', age: 28 }]
+ *
+ * // returns the name of the first person that has an age
+ * assert.deepStrictEqual(findFirstMap((p: Person) => (p.age === undefined ? none : some(p.name)))(persons), some('Mary'))
+ *
+ * @since 2.5.0
+ */
+var findFirstMap$1 = function (f) { return function (as) {
+    for (var i = 0; i < as.length; i++) {
+        var out = f(as[i]);
+        if (isSome(out)) {
+            return out;
+        }
+    }
+    return none;
+}; };
+
+/**
+ * Given a selector function which takes an element and returns an option,
+ * this function applies the selector to each element of the array and
+ * returns the first `Some` result. Otherwise it returns `None`.
+ *
+ * @example
+ * import { findFirstMap } from 'fp-ts/Array'
+ * import { some, none } from 'fp-ts/Option'
+ *
+ * interface Person {
+ *   readonly name: string;
+ *   readonly age: number;
+ * }
+ *
+ * const persons: Array<Person> = [
+ *   { name: "John", age: 16 },
+ *   { name: "Mary", age: 45 },
+ *   { name: "Joey", age: 28 },
+ * ];
+ *
+ * const nameOfPersonAbove18 = (p: Person) => (p.age <= 18 ? none : some(p.name));
+ * const nameOfPersonAbove70 = (p: Person) => (p.age <= 70 ? none : some(p.name));
+ * assert.deepStrictEqual(findFirstMap(nameOfPersonAbove18)(persons), some("Mary"));
+ * assert.deepStrictEqual(findFirstMap(nameOfPersonAbove70)(persons), none);
+ *
+ * @category destructors
+ * @since 2.0.0
+ */
+var findFirstMap = findFirstMap$1;
+
+const SUPPORTED_FILE_TYPES = ["jpg", "jpeg", "png", "webp"];
+const unsupportedFileTypeError = {
+  kind: "client",
+  inner: "File format not supported",
+};
+const checkImageType = (file) => {
+  const fileType = file.type.split("/")[1];
+  const supportedFileType = findFirstMap((supportedType) => supportedType === fileType ? Option.some(file) : Option.none)(SUPPORTED_FILE_TYPES);
+  return _function.pipe(supportedFileType, Either.fromOption(() => unsupportedFileTypeError));
+};
+
+const fileDoesntExistError = {
+  kind: "app",
+  inner: "File doesnt exist",
+};
+
+const checkFileWithExtention = (file) => _function.pipe(file, Option.fromNullable, Either.fromOption(() => fileDoesntExistError), Either.chain(checkImageType));
+
+const vviinnImageSelectorCss = ":host{display:block}:host(::hover){background:#f5f5f5}.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:.5rem;transition:background .1s ease-in-out}";
+
+let VviinnImageSelector = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.imageSelected = createEvent(this, "imageSelected", 7);
+    this.imageSelectedError = createEvent(this, "imageSelectedError", 7);
+  }
+  async handleInputChange(event) {
+    const input = event.target;
+    _function.pipe(checkFileWithExtention(input.files[0]), matchW(() => this.imageSelectedError.emit(), (file) => {
+      imageSearchState.imageSelectedObserver.next(file);
+    }));
+    input.value = null;
+  }
+  componentWillLoad() {
+    imageSearcStateListener("status", (status) => {
+      if (status !== "imageProcessed")
+        return;
+      this.imageSelected.emit();
+    });
+  }
+  isLoading() {
+    return (imageSearchState.status === "imageSelected" ||
+      imageSearchState.status === "pending" ||
+      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 style() { return vviinnImageSelectorCss; }
+};
+VviinnImageSelector = /*@__PURE__*/ proxyCustomElement(VviinnImageSelector, [1, "vviinn-image-selector"]);
+function defineCustomElement() {
+  const components = ["vviinn-image-selector", "vviinn-preloader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-image-selector":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnImageSelector);
+      }
+      break;
+    case "vviinn-preloader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnImageSelector as V, defineCustomElement as d };

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

@@ -0,0 +1,6 @@
+import { V as VviinnImageView$1, d as defineCustomElement$1 } from './vviinn-image-view2.js';
+
+const VviinnImageView = VviinnImageView$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnImageView, defineCustomElement };

package/dist/components/vviinn-image-view2.js

@@ -0,0 +1,95 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { m as move, i as imageSearchState, k as fromImage, l as dimensionsFromImage, n as scaleByLargestSide } from './imageSearch.store.js';
+import { O as Option, _ as _function, s as sequenceToOption } from './NonEmptyArray.js';
+import { d as defineCustomElement$5 } from './cropper-handler2.js';
+import { d as defineCustomElement$4 } from './highlight-box2.js';
+import { d as defineCustomElement$3 } from './image-cropper2.js';
+import { d as defineCustomElement$2 } from './vviinn-detected-object2.js';
+import { d as defineCustomElement$1 } from './vviinn-preloader2.js';
+
+const vviinnImageViewCss = ":host{display:grid;justify-self:center;position:relative}img{box-sizing:border-box;filter:brightness(60%);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:-1}.image-preloader{background:rgba(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}";
+
+const getImageSizes = (i) => {
+  const dimensions = dimensionsFromImage(i);
+  const resize = scaleByLargestSide(288);
+  const newDimensions = resize(dimensions);
+  const sizes = newDimensions.map(d => d.size);
+  return [sizes[0], sizes[1]];
+};
+let VviinnImageView = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  handleInitialImageLoad(ev) {
+    const target = ev.target;
+    const imageBounds = fromImage(target);
+    const padding = 12;
+    const { x, y } = move(imageBounds, { x: padding, y: padding });
+    const searchArea = {
+      x,
+      y,
+      width: imageBounds.width - padding * 2,
+      height: imageBounds.height - padding * 2,
+    };
+    imageSearchState.imageBounds = Option.some(imageBounds);
+    imageSearchState.searchArea = Option.some(searchArea);
+  }
+  renderDetectedObject(object) {
+    return h("vviinn-detected-object", { detectedObject: object });
+  }
+  renderImage() {
+    return _function.pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.image), Option.map(([url, refImage]) => {
+      const [width, height] = getImageSizes(refImage);
+      const image = (h("img", { decoding: "async", width: width, height: height, src: url, onLoad: (el) => this.handleInitialImageLoad(el), draggable: false }));
+      return image;
+    }), Option.getOrElse(() => null));
+  }
+  renderCropper() {
+    return _function.pipe(imageSearchState.imageUrl, Option.map(() => h("image-cropper", null)), Option.getOrElse(() => null));
+  }
+  render() {
+    return (h(Host, null, imageSearchState.loading ||
+      imageSearchState.objectDetectionInProgress ? (h("div", { class: "image-preloader" }, h("vviinn-preloader", null))) : null, h("highlight-box", null), this.renderImage(), this.renderCropper(), imageSearchState.detectedObjects.map((o) => this.renderDetectedObject(o))));
+  }
+  static get style() { return vviinnImageViewCss; }
+};
+VviinnImageView = /*@__PURE__*/ proxyCustomElement(VviinnImageView, [1, "vviinn-image-view"]);
+function defineCustomElement() {
+  const components = ["vviinn-image-view", "cropper-handler", "highlight-box", "image-cropper", "vviinn-detected-object", "vviinn-preloader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-image-view":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnImageView);
+      }
+      break;
+    case "cropper-handler":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "highlight-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "image-cropper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vviinn-detected-object":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "vviinn-preloader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { VviinnImageView as V, defineCustomElement as d };

package/dist/components/vviinn-modal.js

@@ -0,0 +1,6 @@
+import { V as VviinnModal$1, d as defineCustomElement$1 } from './vviinn-modal2.js';
+
+const VviinnModal = VviinnModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnModal, defineCustomElement };

package/dist/components/vviinn-modal2.js

@@ -0,0 +1,46 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const vviinnModalCss = ":host{background:#fff;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-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:a;animation-name:a}:host(.closed){-webkit-animation-fill-mode:none;animation-fill-mode:none;-webkit-animation-name:b;animation-name:b}.body{overflow-y:auto}}@media (max-width:640px) and (min-width:415px){:host{max-width:80%}}.head{grid-gap:16px;align-items:center;border-bottom:1px solid #f4f4f4;display:grid;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-size:18px;font-weight:600;line-height:24px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:unset}@-webkit-keyframes a{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes a{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes b{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes b{0%{transform:translateY(0)}to{transform:translateY(100%)}}";
+
+let VviinnModal = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    this.secondaryActionClicked = createEvent(this, "secondaryActionClicked", 7);
+    this.active = false;
+    this.slider = false;
+  }
+  close() {
+    this.active = false;
+    setTimeout(() => {
+      this.modalClosed.emit();
+    }, this.slider ? 500 : 0);
+  }
+  handleAnimationEnd(ev) {
+    if (ev.animationName !== "fade-in")
+      return;
+    this.slider = true;
+  }
+  render() {
+    return (h(Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, h("div", { class: "head" }, h("button", { part: "secondary-action", onClick: () => this.secondaryActionClicked.emit() }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M20.25 12H3.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "#161616", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { class: "title", part: "title" }, "Bildsuche"), h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#333333" })))), h("div", { class: "body" }, h("slot", null))));
+  }
+  static get style() { return vviinnModalCss; }
+};
+VviinnModal = /*@__PURE__*/ proxyCustomElement(VviinnModal, [1, "vviinn-modal", {
+    "active": [1540],
+    "slider": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["vviinn-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnModal);
+      }
+      break;
+  } });
+}
+
+export { VviinnModal as V, defineCustomElement as d };

package/dist/components/vviinn-onboarding-card-1.js

@@ -0,0 +1,6 @@
+import { V as VviinnOnboardingCard1$1, d as defineCustomElement$1 } from './vviinn-onboarding-card-12.js';
+
+const VviinnOnboardingCard1 = VviinnOnboardingCard1$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnOnboardingCard1, defineCustomElement };

package/dist/components/vviinn-onboarding-card-12.js

@@ -0,0 +1,34 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { s as slotChangeListener } from './customized-slots.js';
+import { O as OnboardingCard1Icon } from './index2.js';
+
+const onboardingCardCss = ":host{align-items:center;background:#f4f4f4;display:grid;grid-template-rows:repeat(2,1fr);justify-items:center;padding:24px;width:100%}h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}svg{padding:16px 0}p{color:#525252;font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons,var(--color-icons-system))}.text{grid-gap:8px;display:grid}";
+
+let VviinnOnboardingCard1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "onboarding-card-1-icon" }, h(OnboardingCard1Icon, null)), h("slot", { name: "onboarding-card-1-text" }, h("div", { class: "text" }, h("h4", null, "Starte die Bildsuche"), h("p", null, "Lade ein Bild aus Deiner Galerie hoch oder fotografiere ein Produkt mit Deiner Kamera.")))));
+  }
+  get el() { return this; }
+  static get style() { return onboardingCardCss; }
+};
+VviinnOnboardingCard1 = /*@__PURE__*/ proxyCustomElement(VviinnOnboardingCard1, [1, "vviinn-onboarding-card-1"]);
+function defineCustomElement() {
+  const components = ["vviinn-onboarding-card-1"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vviinn-onboarding-card-1":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VviinnOnboardingCard1);
+      }
+      break;
+  } });
+}
+
+export { VviinnOnboardingCard1 as V, defineCustomElement as d };

package/dist/components/vviinn-onboarding-card-2.js

@@ -0,0 +1,6 @@
+import { V as VviinnOnboardingCard2$1, d as defineCustomElement$1 } from './vviinn-onboarding-card-22.js';
+
+const VviinnOnboardingCard2 = VviinnOnboardingCard2$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VviinnOnboardingCard2, defineCustomElement };