vviinn-widgets 2.5.2 → 2.6.0

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

@@ -1,98 +0,0 @@
-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

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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

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

@@ -1,28 +0,0 @@
-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

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

@@ -1,15 +0,0 @@
-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

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

@@ -1,71 +0,0 @@
-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

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

@@ -1,20 +0,0 @@
-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

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

@@ -1,27 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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/stories/args.js

@@ -1,73 +0,0 @@
-export const argTypes = {
-  imageWidth: {
-    name: "Card width (px)",
-  },
-  imageBorder: {
-    name: "Image border",
-  },
-  imageBorderColor: {
-    name: "Image border color",
-    control: {
-      type: "color",
-    },
-  },
-  imageBackground: {
-    name: "Image background",
-    description: "Adding a light-gray filter on top of the image to distinguish it from the rest of the product card content.",
-  },
-  showBrand: {
-    name: "Show brand",
-    description: "Using the [title] attribute from product feed.",
-  },
-  titleLineCount: {
-    name: "Number of text lines for Product title",
-    options: [1, 2, 3],
-    control: {
-      type: "select",
-      default: 0,
-    },
-  },
-  locale: {
-    name: "Locale",
-    options: ["de-DE", "en-US"],
-    control: {
-      type: "select",
-      default: 0,
-    },
-  },
-  currencyValue: {
-    name: "Currency",
-    options: ["$", "€", "£", "¥", "₽"],
-    control: {
-      type: "select",
-      default: 0,
-    },
-  },
-  contentAlignment: {
-    name: "Content alignment",
-    options: ["Left", "Centered", "Right"],
-    mapping: {
-      Left: 0,
-      Centered: 1,
-      Right: 2,
-    },
-    control: {
-      type: "select",
-      default: 0,
-    },
-  },
-  primaryTextColor: {
-    name: "Primary text color",
-    control: {
-      type: "color",
-    },
-    description: "Used where the most user attention is needed: product brand, product title, and price.",
-  },
-  secondaryTextColor: {
-    name: "Secondary text color",
-    description: "Used in Old Price",
-    control: {
-      type: "color",
-    },
-  },
-};