vviinn-widgets 2.7.2 → 2.8.0

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

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

@@ -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"; }
-}