vviinn-widgets 2.5.0 → 2.5.2

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": {}
+      }
+    }]; }
+}

package/dist/collection/components/vviinn-onboarding/onboarding-cards/onboarding-card.css

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

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

@@ -0,0 +1,26 @@
+import { Component, Host, h, Element } from '@stencil/core';
+import { slotChangeListener } from '../../../customized-slots';
+import { OnboardingCard1Icon } from '../../../vviinn-icons';
+export class VviinnOnboardingCard1 {
+  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.")))));
+  }
+  static get is() { return "vviinn-onboarding-card-1"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../onboarding-card.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../onboarding-card.css"]
+  }; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,26 @@
+import { Component, Host, h, Element } from '@stencil/core';
+import { OnboardingCard2Icon } from '../../../vviinn-icons';
+import { slotChangeListener } from '../../../customized-slots';
+export class VviinnOnboardingCard2 {
+  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.")))));
+  }
+  static get is() { return "vviinn-onboarding-card-2"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../onboarding-card.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../onboarding-card.css"]
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-3/vviinn-onboarding-card-3.js

@@ -0,0 +1,26 @@
+import { Component, Host, h, Element } from '@stencil/core';
+import { OnboardingCard3Icon } from '../../../vviinn-icons';
+import { slotChangeListener } from '../../../customized-slots';
+export class VviinnOnboardingCard3 {
+  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.")))));
+  }
+  static get is() { return "vviinn-onboarding-card-3"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../onboarding-card.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../onboarding-card.css"]
+  }; }
+  static get elementRef() { return "el"; }
+}

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

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

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

@@ -0,0 +1,28 @@
+import { Component, Host, h, Element } from "@stencil/core";
+import { slotChangeListener } from "../customized-slots";
+export class VviinnOnboarding {
+  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)))));
+  }
+  static get is() { return "vviinn-onboarding"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-onboarding.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-onboarding.css"]
+  }; }
+  static get elementRef() { return "el"; }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Component, Host, h } from '@stencil/core';
+export class VviinnOverlay {
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "vviinn-overlay"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-overlay.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-overlay.css"]
+  }; }
+}

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

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

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

@@ -0,0 +1,71 @@
+import { Component, Host, h, Prop, Event } from "@stencil/core";
+export class VviinnOverlayedModal {
+  constructor() {
+    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")))));
+  }
+  static get is() { return "vviinn-overlayed-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-overlayed-modal.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-overlayed-modal.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "secondaryActionClicked",
+      "name": "secondaryActionClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "modalClosed",
+      "name": "modalClosed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

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

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

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

@@ -0,0 +1,20 @@
+import { Component, Host, h } from "@stencil/core";
+import { imageSearchState } from "../../store/imageSearch.store";
+export class VviinnPreloader {
+  isActive() {
+    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
+  }
+  render() {
+    return (h(Host, { class: {
+        active: this.isActive(),
+      } }));
+  }
+  static get is() { return "vviinn-preloader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-preloader.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-preloader.css"]
+  }; }
+}