vviinn-widgets 2.5.2 → 2.6.0

package/dist/collection/components/vviinn-slider/arrow.js

@@ -1,11 +0,0 @@
-import { h } from "@stencil/core";
-import { ArrowIcon } from "../vviinn-icons";
-const getStyleMap = (data) => {
-  return {
-    "arrow-wrapper": true,
-    [data.kind]: true,
-    disabled: data.disabled,
-  };
-};
-export const Arrow = ({ kind, tabindex, disabled, onClick, onKeyDown, }) => (h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown },
-  h(ArrowIcon, null)));

package/dist/collection/components/vviinn-slider/vviinn-slide/vviinn-slide.css

@@ -1,4 +0,0 @@
-:host {
-  display: grid;
-  justify-items: center;
-}

package/dist/collection/components/vviinn-slider/vviinn-slide/vviinn-slide.js

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

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

@@ -1,109 +0,0 @@
-:host {
-  --color-primary-system: #0F62FE;
-  --color-primary-hover-system: #014CDA;
-  --color-icons-system: #2F8EDF;
-  --spacer: 8px;
-}
-
-
-:host {
-  --num-items: 0;
-  --position: 0;
-  display: grid;
-  grid-gap: 20px;
-  justify-items: center;
-  position: relative;
-}
-
-.items-wrapper {
-  overflow: hidden;
-  width: 100%;
-}
-
-.items {
-  box-sizing: border-box;
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: repeat(var(--num-items), 100%);
-  transform: translateX(calc(-100% * var(--position)));
-  transition: transform 0.33s ease-in-out;
-}
-
-.controls {
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(var(--num-items), -webkit-min-content);
-  grid-template-columns: repeat(var(--num-items), min-content);
-}
-
-.bullet {
-  background: #E0E0E0;
-  border-radius: 50%;
-  box-sizing: border-box;
-  cursor: pointer;
-  height: 8px;
-  width: 8px;
-  transition: background 0.1s ease-in-out;
-}
-
-.bullet:hover {
-  background: #C6C6C6;
-}
-
-.bullet.active {
-  background: var(--color-primary, var(--color-primary-system));
-}
-
-.bullet:active {
-  background: transparent;
-  border: 2px solid var(--color-primary, var(--color-primary-system));
-}
-
-.arrow-wrapper {
-  align-items: center;
-  background: white;
-  border: 2px solid white;
-  bottom: 0;
-  box-sizing: border-box;
-  display: grid;
-  height: calc(var(--spacer) * 6);
-  justify-items: center;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  transform: translate3d(0, -50%, 0);
-  transition: border 0.25ms ease-in-out;
-  width: calc(var(--spacer) * 4);
-}
-
-.arrow-wrapper:active {
-  border-color: var(--color-primary, var(--color-primary-system));
-  opacity: 0.75;
-}
-
-.arrow-wrapper:focus {
-  border-color: var(--color-primary, var(--color-primary-system));
-  opacity: 0.5;
-  outline: none;
-}
-
-.prev {
-  left: 0;
-}
-
-.next {
-  right: 0;
-}
-
-.next > svg {
-  transform: rotate3d(0, 1, 0, 180deg);
-}
-
-.arrow-wrapper > svg {
-  transition: fill 0.25ms ease-in-out;
-  fill: #A8A8A8;
-}
-
-.arrow-wrapper:hover > svg {
-  fill: #8D8D8D;
-}

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

@@ -1,181 +0,0 @@
-import { Component, Host, h, Element, State, Prop, Watch } from "@stencil/core";
-import { range } from "fp-ts/lib/NonEmptyArray";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as N from "fp-ts/number";
-import { sequenceToOption } from "../../utils/option/option";
-import { Arrow } from "./arrow";
-export class VviinnSlider {
-  constructor() {
-    this.elementsCount = 0;
-    this.internalPosition = 0;
-    this.swipeStartPosition = O.none;
-    this.showBullets = true;
-    this.position = 0;
-    this.showArrows = false;
-  }
-  positionWatchHandler(newValue) {
-    this.internalPosition = newValue;
-    this.el.style.setProperty("--position", `${newValue}`);
-    this.setActiveCssClassToSlide(newValue);
-  }
-  connectedCallback() {
-    this.handleDomContentChanges();
-  }
-  handleDomContentChanges() {
-    const items = this.el.querySelectorAll("vviinn-slide");
-    this.elementsCount = items.length;
-    this.el.style.setProperty("--num-items", `${this.elementsCount}`);
-    this.setActiveCssClassToSlide(0);
-  }
-  setActiveCssClassToSlide(index) {
-    const items = this.el.querySelectorAll("vviinn-slide");
-    items.forEach((i) => i.classList.remove("active"));
-    items[index].classList.add("active");
-  }
-  goToSlide(index) {
-    this.internalPosition = index;
-    this.el.style.setProperty("--position", `${index}`);
-    this.setActiveCssClassToSlide(index);
-  }
-  renderBullets() {
-    return this.showBullets ? (h("div", { class: "controls" }, range(0, this.elementsCount - 1).map((i) => (h("div", { class: {
-        bullet: true,
-        active: i == this.internalPosition % this.elementsCount,
-      }, onClick: () => this.goToSlide(i) }))))) : null;
-  }
-  nextSlide() {
-    this.internalPosition++;
-    this.renderSlidePosition();
-  }
-  prevSlide() {
-    const nextPostion = this.internalPosition - 1;
-    this.internalPosition =
-      nextPostion > -1 ? nextPostion : this.elementsCount - 1;
-    this.renderSlidePosition();
-  }
-  renderSlidePosition() {
-    requestAnimationFrame(() => {
-      this.el.style.setProperty("--position", `${this.internalPosition % this.elementsCount}`);
-    });
-  }
-  handleKeyDown(event) {
-    if (event.key !== "Space" && event.key !== "Enter")
-      return;
-    const target = event.target;
-    const direction = target.className.includes("prev") ? "prev" : "next";
-    switch (direction) {
-      case "prev":
-        this.prevSlide();
-        break;
-      case "next":
-        this.nextSlide();
-        break;
-    }
-  }
-  handleTouchStart(event) {
-    if (!this.showBullets)
-      return;
-    this.swipeStartPosition = pipe(event.touches[0], O.fromNullable, O.map((t) => t.clientX));
-  }
-  handleTouchEnd(event) {
-    if (!this.showBullets)
-      return;
-    const swipeEndPosition = pipe(event.changedTouches[0], O.fromNullable, O.map((t) => t.clientX));
-    pipe(sequenceToOption(this.swipeStartPosition, swipeEndPosition), O.map(([start, end]) => N.Ord.compare(start, end)), O.map((swipeDirection) => {
-      switch (swipeDirection) {
-        case 1:
-          return this.nextSlide();
-        case -1:
-          return this.prevSlide();
-      }
-    }));
-  }
-  render() {
-    return (h(Host, null,
-      h("div", { class: "items-wrapper" },
-        h("div", { class: "items", onTouchStart: (e) => this.handleTouchStart(e), onTouchEnd: (e) => this.handleTouchEnd(e) },
-          h("slot", null))),
-      this.showArrows
-        ? [
-          h(Arrow, { kind: "prev", onClick: () => this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
-          h(Arrow, { kind: "next", onClick: () => this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
-        ]
-        : null,
-      this.renderBullets()));
-  }
-  static get is() { return "vviinn-slider"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-slider.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-slider.css"]
-  }; }
-  static get properties() { return {
-    "showBullets": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-bullets",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "position": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "position",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "showArrows": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-arrows",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "elementsCount": {},
-    "internalPosition": {},
-    "swipeStartPosition": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "position",
-      "methodName": "positionWatchHandler"
-    }]; }
-}

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

@@ -1,14 +0,0 @@
-:host {
-  align-items: center;
-  display: grid;
-  justify-items: center;
-  grid-gap: 16px;
-}
-
-.vviinn-teaser-text {
-  font-size: 28px;
-  font-weight: 600;
-  line-height: 40px;
-  size: 28px;
-  text-align: center;
-}

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

@@ -1,29 +0,0 @@
-import { Component, Host, h, Element } from "@stencil/core";
-import { slotChangeListener } from "../customized-slots";
-export class VviinnTeaser {
-  componentWillLoad() {
-    slotChangeListener(this, this.el);
-  }
-  render() {
-    return (h(Host, null,
-      h("slot", null,
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" },
-          h("defs", null),
-          h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }),
-          h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })),
-        h("span", { class: "vviinn-teaser-text" },
-          h("slot", { name: "vviinn-teaser-text" },
-            "Finde Produkte auf ",
-            h("br", null),
-            " einem Foto")))));
-  }
-  static get is() { return "vviinn-teaser"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-teaser.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-teaser.css"]
-  }; }
-  static get elementRef() { return "el"; }
-}

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.css

@@ -1,238 +0,0 @@
-:host {
-  --vviinn-carousel-columns: 0;
-  box-sizing: border-box;
-  display: block;
-  display: flex;
-  height: 100vh;
-  left: 0;
-  position: fixed;
-  top: 0;
-  transition: background 0.1s ease-in-out;
-  width: 100vw;
-}
-
-:host(.open) {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-:host(.bottom) {
-  flex-direction: column;
-  justify-content: end;
-}
-
-:host(.right) {
-  flex-direction: row;
-  justify-content: flex-end;
-}
-
-header {
-  position: relative;
-  text-align: center;
-  padding: 32px;
-}
-
-header.contains-source-img {
-  display: grid;
-  justify-items: center;
-  grid-gap: 12px;
-}
-
-img.source-image {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
-  padding: 8px;
-}
-
-:host(.right) header {
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-main {
-  padding: 0 24px;
-}
-
-:host(.right) main {
-  overflow: auto;
-}
-
-.sidebar {
-  background: white;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-}
-
-:host(.bottom.idle) .sidebar,
-:host(.bottom.closed) .sidebar {
-  transform: translateY(100%);
-}
-
-:host(.bottom.closed) .sidebar {
-  -webkit-animation-name: slideOutFromBottom;
-          animation-name: slideOutFromBottom;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
-:host(.bottom.open) .sidebar {
-  -webkit-animation-name: slideInFromBottom;
-          animation-name: slideInFromBottom;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
-:host(.right.idle) .sidebar {
-  transform: translateX(100%);
-}
-
-:host(.right.closed) .sidebar {
-  -webkit-animation-name: slideOutFromRight;
-          animation-name: slideOutFromRight;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
-:host(.right.open) .sidebar {
-  -webkit-animation-name: slideInFromRight;
-          animation-name: slideInFromRight;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
-:host(.right) .sidebar {
-  max-width: 480px;
-}
-
-:host(.right) vviinn-vpr-widget::part(recommendations-grid) {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 24px;
-}
-
-:host(.right) vviinn-vpr-widget {
-  overflow: auto;
-}
-
-:host(.right) vviinn-vpr-widget::part(image) {
-  border: none;
-}
-
-.title {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 28px;
-  line-height: 40px;
-  text-align: center;
-  color: #000000;
-}
-
-vviinn-vpr-widget::part(title),
-vviinn-vpr-widget::part(brand),
-vviinn-vpr-widget::part(type) {
-  text-align: left;
-}
-
-vviinn-vpr-widget::part(price-container) {
-  align-self: start;
-}
-
-.close-sidebar {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  right: 24px;
-  top: 24px;
-}
-
-@-webkit-keyframes slideInFromBottom {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInFromBottom {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@-webkit-keyframes slideOutFromBottom {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(100%);
-  }
-}
-
-@keyframes slideOutFromBottom {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(100%);
-  }
-}
-
-@-webkit-keyframes slideInFromRight {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInFromRight {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-@-webkit-keyframes slideOutFromRight {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes slideOutFromRight {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
-}