vviinn-widgets 2.1.0 → 2.2.2

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

package/dist/collection/components/vviinn-privacy-badge/vviinn-privacy-badge.css

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

package/dist/collection/components/vviinn-privacy-badge/vviinn-privacy-badge.js

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

package/dist/collection/components/vviinn-product-card/render-helpers.js

@@ -0,0 +1,32 @@
+import { pipe } from "fp-ts/lib/function";
+import * as E from "fp-ts/lib/Either";
+import { h } from "@stencil/core";
+const FIT_EXPR = /fit\/\d+\//;
+export const containsFit = (url) => {
+  return pipe(url.match(FIT_EXPR), E.fromNullable(url), E.map(() => url));
+};
+export const processWidth = (url, size) => {
+  return pipe(containsFit(url), E.map((url) => url.replace(FIT_EXPR, `fit/${size}/`)), E.getOrElse(() => url));
+};
+export const Linked = (props, child) => props.deeplink ? (h("a", { class: props.part, part: props.part, href: props.deeplink }, child)) : (child);
+const FormattedPrice = (props) => {
+  var _a;
+  const locale = props.locale;
+  const formattedPrice = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+  }).format(props.price);
+  const fullPrice = `${(_a = props.prefix) !== null && _a !== void 0 ? _a : ""} ${formattedPrice} ${props.currency}`;
+  return (h("span", { class: "price-amount", part: "price-amount" }, fullPrice));
+};
+export const Price = (props) => {
+  const priceEl = (h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale }));
+  return (h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
+    h("span", { class: "price-sale", part: "price-sale" },
+      h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale })),
+    h("span", { class: "price-outdated", part: "price-outdated" }, priceEl),
+  ]) : (h("span", { class: "price-regular", part: "price-regular" }, priceEl))));
+};
+export const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
+  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
+export const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null,
+  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));

package/dist/collection/components/vviinn-product-card/vviinn-product-card.css

@@ -0,0 +1,95 @@
+:host {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+}
+
+.price-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.price-sale,
+.price-regular {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 24px;
+  color: #161616;
+}
+
+.price-outdated {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 24px;
+  color: #757575;
+  text-decoration: line-through;
+}
+
+.product-type {
+  word-wrap: anywhere;
+}
+
+.image {
+  display: grid;
+  align-content: center;
+  -o-object-position: 50% 50%;
+     object-position: 50% 50%;
+  -o-object-fit: contain;
+     object-fit: contain;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+img.responsive {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+}
+
+.brand,
+.type {
+  display: none;
+}
+
+.title {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: #161616;
+  display: -webkit-box;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.deeplink {
+  text-decoration: none;
+}
+
+.image-link {
+  display: contents;
+}
+
+picture {
+  position: relative;
+  width: 100%;
+}
+
+:host(.dimmed) picture::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #f7f7f7;
+  display: block;
+  top: 0;
+  left: 0;
+  position: absolute;
+  mix-blend-mode: multiply;
+}