vviinn-widgets 2.5.2 → 2.6.0

package/www/build/vviinn-detected-object.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-89051fa8.js';
+import { _ as _function } from './NonEmptyArray-947ab7b3.js';
+import { O as Option } from './number-171db649.js';
+import { i as imageSearchState, r as fromAlt, u as foldValueObject, v as scaleWithSized, w as center, q as makeRectangularSearchRequest, x as detectedObjectEq } from './imageSearch.store-15bda6de.js';
+import './Handler-edcb46f4.js';
+import './Array-bdfc75db.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: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}";
+
+let VviinnDetectedObject = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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],
+      } }));
+  }
+};
+VviinnDetectedObject.style = vviinnDetectedObjectCss;
+
+export { VviinnDetectedObject as vviinn_detected_object };

package/www/build/vviinn-empty-results.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-89051fa8.js';
+
+const vviinnEmptyResultsCss = ":host{display:grid}vviinn-error{justify-items:center}";
+
+let VviinnEmptyResults = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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."))));
+  }
+};
+VviinnEmptyResults.style = vviinnEmptyResultsCss;
+
+export { VviinnEmptyResults as vviinn_empty_results };

package/{dist/cjs/vviinn-error.cjs.entry.js → www/build/vviinn-error.entry.js}

@@ -1,19 +1,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0f5516a6.js');
+import { r as registerInstance, h, e as Host } from './index-89051fa8.js';
 
 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);
+    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" })));
+    return (h(Host, null, h("slot", { name: "icon" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("slot", { name: "action" })));
   }
 };
 VviinnError.style = vviinnErrorCss;
 
-exports.vviinn_error = VviinnError;
+export { VviinnError as vviinn_error };

package/www/build/vviinn-example-image.entry.js

@@ -0,0 +1,38 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-89051fa8.js';
+import { _ as _function } from './NonEmptyArray-947ab7b3.js';
+import { y as toFile, p as processSelectedFile, E as Either, i as imageSearchState } from './imageSearch.store-15bda6de.js';
+import './number-171db649.js';
+import './Handler-edcb46f4.js';
+import './Array-bdfc75db.js';
+
+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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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(_event) {
+    this.selected = true;
+    const file = await toFile(this.src);
+    const processResult = await processSelectedFile(file);
+    _function.pipe(processResult, Either.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
+    this.selected = false;
+  }
+  showPreloader() {
+    return ((imageSearchState.objectDetectionInProgress ||
+      imageSearchState.loading) &&
+      this.selected);
+  }
+  render() {
+    return (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 })));
+  }
+};
+VviinnExampleImage.style = vviinnExampleImageCss;
+
+export { VviinnExampleImage as vviinn_example_image };

package/www/build/vviinn-example-images.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-89051fa8.js';
+import { s as slotChangeListener } from './customized-slots-fb9b3e5f.js';
+
+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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+VviinnExampleImages.style = vviinnExampleImagesCss;
+
+export { VviinnExampleImages as vviinn_example_images };

package/www/build/vviinn-image-selector.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-89051fa8.js';
+import { p as processSelectedFile, m as match, i as imageSearchState } from './imageSearch.store-15bda6de.js';
+import { _ as _function } from './NonEmptyArray-947ab7b3.js';
+import './number-171db649.js';
+import './Handler-edcb46f4.js';
+import './Array-bdfc75db.js';
+
+const vviinnImageSelectorCss = ":host{display:block}:host(::hover){background:whitesmoke}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}label{cursor:pointer;display:grid;padding:0.5rem;transition:background 0.1s ease-in-out}";
+
+let VviinnImageSelector = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.imageSelected = createEvent(this, "imageSelected", 7);
+    this.imageSelectedError = createEvent(this, "imageSelectedError", 7);
+  }
+  async handleInputChange(event) {
+    const input = event.target;
+    const processingResult = await processSelectedFile(input.files[0]);
+    _function.pipe(processingResult, 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) })));
+  }
+};
+VviinnImageSelector.style = vviinnImageSelectorCss;
+
+export { VviinnImageSelector as vviinn_image_selector };

package/www/build/vviinn-image-view.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, h, e as Host } from './index-89051fa8.js';
+import { d as dimensionsFromImage, a as scaleByLargestSide, f as fromImage, b as move, i as imageSearchState } from './imageSearch.store-15bda6de.js';
+import { _ as _function } from './NonEmptyArray-947ab7b3.js';
+import { O as Option, s as sequenceToOption } from './number-171db649.js';
+import './Handler-edcb46f4.js';
+import './Array-bdfc75db.js';
+
+const vviinnImageViewCss = ":host{display:grid;position:relative;justify-self:center}img{box-sizing:border-box;filter:brightness(60%);position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:-1}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:18px;padding:4px 6px;pointer-events:none;position:absolute;right:18px;z-index:4}vviinn-preloader{--preloader-size:12px}";
+
+const getImageSizes = (i) => {
+  const dimensions = dimensionsFromImage(i);
+  const resize = scaleByLargestSide(288);
+  const newDimensions = resize(dimensions);
+  const sizes = newDimensions.map(d => d.size);
+  return [sizes[0], sizes[1]];
+};
+let VviinnImageView = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  handleInitialImageLoad(ev) {
+    const target = ev.target;
+    const imageBounds = fromImage(target);
+    const padding = 12;
+    const { x, y } = move(imageBounds, { x: padding, y: padding });
+    const searchArea = {
+      x,
+      y,
+      width: imageBounds.width - padding * 2,
+      height: imageBounds.height - padding * 2,
+    };
+    imageSearchState.imageBounds = Option.some(imageBounds);
+    imageSearchState.searchArea = Option.some(searchArea);
+  }
+  renderDetectedObject(object) {
+    return 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))));
+  }
+};
+VviinnImageView.style = vviinnImageViewCss;
+
+export { VviinnImageView as vviinn_image_view };

package/www/build/vviinn-modal.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-89051fa8.js';
+
+const vviinnModalCss = ":host{background:white;border-radius:4px;box-sizing:border-box;display:grid;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;max-width:960px}@media (max-width: 415px){:host{-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.closed){-webkit-animation-name:fade-out;animation-name:fade-out;-webkit-animation-fill-mode:none;animation-fill-mode:none}.body{overflow-y:auto}}@media (max-width: 640px) and (min-width: 415px){:host{max-width:80%}}.head{align-items:center;border-bottom:1px solid #F4F4F4;display:grid;grid-gap:16px;grid-template-columns:-webkit-min-content auto -webkit-min-content;grid-template-columns:min-content auto min-content;justify-items:center;padding:16px}.title{font-weight:600;font-size:18px;line-height:24px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:unset}@-webkit-keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
+
+let VviinnModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))));
+  }
+};
+VviinnModal.style = vviinnModalCss;
+
+export { VviinnModal as vviinn_modal };

package/www/build/vviinn-onboarding-card-1.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-89051fa8.js';
+import { s as slotChangeListener } from './customized-slots-fb9b3e5f.js';
+import { O as OnboardingCard1Icon } from './index-533f9255.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:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
+
+let VviinnOnboardingCard1 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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 getElement(this); }
+};
+VviinnOnboardingCard1.style = onboardingCardCss;
+
+export { VviinnOnboardingCard1 as vviinn_onboarding_card_1 };

package/www/build/vviinn-onboarding-card-2.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-89051fa8.js';
+import { d as OnboardingCard2Icon } from './index-533f9255.js';
+import { s as slotChangeListener } from './customized-slots-fb9b3e5f.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:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
+
+let VviinnOnboardingCard2 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "onboarding-card-2-icon" }, h(OnboardingCard2Icon, null)), h("slot", { name: "onboarding-card-2-text" }, h("div", { class: "text" }, h("h4", null, "Verfeiner deine Suche"), h("p", null, "Du kannst den Bildrahmen selber festlegen und so die Produkte genau ausw\u00E4hlen.")))));
+  }
+  get el() { return getElement(this); }
+};
+VviinnOnboardingCard2.style = onboardingCardCss;
+
+export { VviinnOnboardingCard2 as vviinn_onboarding_card_2 };

package/www/build/vviinn-onboarding-card-3.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-89051fa8.js';
+import { e as OnboardingCard3Icon } from './index-533f9255.js';
+import { s as slotChangeListener } from './customized-slots-fb9b3e5f.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:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
+
+let VviinnOnboardingCard3 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "onboarding-card-3-icon" }, h(OnboardingCard3Icon, null)), h("slot", { name: "onboarding-card-3-text" }, h("div", { class: "text" }, h("h4", null, "Ohne Hintergrund"), h("p", null, "Die besten Ergebnisse erh\u00E4ltst Du, wenn das gesuchte Objekt mit einfarbigem und hellem Hintergrund zu sehen ist.")))));
+  }
+  get el() { return getElement(this); }
+};
+VviinnOnboardingCard3.style = onboardingCardCss;
+
+export { VviinnOnboardingCard3 as vviinn_onboarding_card_3 };

package/www/build/vviinn-onboarding.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-89051fa8.js';
+import { s as slotChangeListener } from './customized-slots-fb9b3e5f.js';
+
+const vviinnOnboardingCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}::host{display:block}h3{font-size:22px;font-weight:600;line-height:32px;margin:0;margin-bottom:16px;text-align:center}vviinn-slide{background:#f4f4f4;padding:24px}svg{padding:16px 0}.text{display:grid;grid-gap:8px}.text>h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}.text>p{color:#525252;font-size:14px;font-style:normal;font-weight:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}";
+
+let VviinnOnboarding = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "vviinn-onboarding-title" }, h("h3", null, "So funktioniert es")), h("vviinn-slider", { showArrows: true }, h("vviinn-slide", null, h("vviinn-onboarding-card-1", null)), h("vviinn-slide", null, h("vviinn-onboarding-card-2", null)), h("vviinn-slide", null, h("vviinn-onboarding-card-3", null)))));
+  }
+  get el() { return getElement(this); }
+};
+VviinnOnboarding.style = vviinnOnboardingCss;
+
+export { VviinnOnboarding as vviinn_onboarding };

package/www/build/vviinn-overlay.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, e as Host } from './index-89051fa8.js';
+
+const vviinnOverlayCss = ":host{-webkit-animation:fade-in 0.5s ease-in-out;animation:fade-in 0.5s ease-in-out;background:rgba(0, 0, 0, 0.5);display:block;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:9999}@-webkit-keyframes fade-in{from{opacity:0.1}to{opacity:1}}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}";
+
+let VviinnOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+VviinnOverlay.style = vviinnOverlayCss;
+
+export { VviinnOverlay as vviinn_overlay };

package/www/build/vviinn-overlayed-modal.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-89051fa8.js';
+
+const vviinnOverlayedModalCss = ":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center}@media (max-width: 415px){vviinn-modal{border-radius:4px 4px 0 0;height:100vh;margin-top:32px;transform:translateY(100%);width:100vw}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";
+
+let VviinnOverlayedModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.secondaryActionClicked = createEvent(this, "secondaryActionClicked", 7);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: { active: this.active } }, h("vviinn-overlay", null, h("vviinn-modal", { onSecondaryActionClicked: () => this.secondaryActionClicked.emit(), active: this.active }, h("slot", null, "CONTENT")))));
+  }
+};
+VviinnOverlayedModal.style = vviinnOverlayedModalCss;
+
+export { VviinnOverlayedModal as vviinn_overlayed_modal };

package/{dist/cjs/vviinn-preloader.cjs.entry.js → www/build/vviinn-preloader.entry.js}

@@ -1,26 +1,25 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0f5516a6.js');
-const imageSearch_store = require('./imageSearch.store-865c23f4.js');
-require('./Handler-176539c8.js');
+import { r as registerInstance, h, e as Host } from './index-89051fa8.js';
+import { i as imageSearchState } from './imageSearch.store-15bda6de.js';
+import './number-171db649.js';
+import './NonEmptyArray-947ab7b3.js';
+import './Handler-edcb46f4.js';
+import './Array-bdfc75db.js';
 
 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);
+    registerInstance(this, hostRef);
   }
   isActive() {
-    return (imageSearch_store.imageSearchState.loading || imageSearch_store.imageSearchState.objectDetectionInProgress);
+    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
   }
   render() {
-    return (index.h(index.Host, { class: {
+    return (h(Host, { class: {
         active: this.isActive(),
       } }));
   }
 };
 VviinnPreloader.style = vviinnPreloaderCss;
 
-exports.vviinn_preloader = VviinnPreloader;
+export { VviinnPreloader as vviinn_preloader };

package/www/build/vviinn-privacy-badge.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-89051fa8.js';
+import { s as slotChangeListener } from './customized-slots-fb9b3e5f.js';
+
+const vviinnPrivacyBadgeCss = ":host{display:block;background:#F4F4F4;padding:17px}.content{display:grid;grid-template-columns:-webkit-min-content auto;grid-template-columns:min-content auto;grid-gap:9px}.content p{color:#525252;font-size:12px;line-height:16px;margin:unset}";
+
+let VviinnPrivacyBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  render() {
+    return (h(Host, null, h("slot", null, h("div", { class: "content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, h("defs", null), h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), h("slot", { name: "vviinn-privacy-badge-text" }, h("p", null, "Wir gehen sorgf\u00E4ltig mit Deinen Daten um. Deine Bilder werden nur zum Zweck der Bildsuche gespeichert."))))));
+  }
+  get el() { return getElement(this); }
+};
+VviinnPrivacyBadge.style = vviinnPrivacyBadgeCss;
+
+export { VviinnPrivacyBadge as vviinn_privacy_badge };