vviinn-widgets 2.1.0 → 2.2.2

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

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

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

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

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

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

@@ -0,0 +1,200 @@
+import { Component, Host, h, Prop, State, Listen, Element, Event, } from "@stencil/core";
+import { CrossIcon } from "../../vviinn-icons";
+export class RecommendationsSidebar {
+  constructor() {
+    this.position = "bottom";
+    this.sourceImage = null;
+    this.widgetScrollbar = false;
+    this.state = "idle";
+  }
+  bodyClickListener(event) {
+    const { clientX, clientY } = event;
+    const sidebarRect = this.getSidebarRectangle();
+    if (!sidebarRect)
+      return;
+    const inLeftBound = clientX >= sidebarRect.left;
+    const inRightBound = clientX <= sidebarRect.right;
+    const inTopBound = clientY >= sidebarRect.top;
+    const inBottomBound = clientY <= sidebarRect.bottom;
+    const inBound = inLeftBound && inRightBound && inTopBound && inBottomBound;
+    if (!inBound) {
+      this.state = "closed";
+    }
+  }
+  getClassMap() {
+    return {
+      [this.position]: true,
+      [this.state]: true,
+    };
+  }
+  getSidebarRectangle() {
+    var _a;
+    return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+  }
+  render() {
+    return (h(Host, { class: this.getClassMap() },
+      h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) },
+        h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" },
+          this.isSourceImageValid() ? this.renderSourceImage() : null,
+          h("span", { class: "title", part: "title" }, this.sidebarTitle),
+          h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") },
+            h(CrossIcon, null))),
+        h("main", { part: "sidebar-content" },
+          h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title: product-title", token: this.token, productId: this.productId, imageWidth: 300, blockTitle: "", mode: this.position === "bottom" ? "continuity" : "grid", useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar })))));
+  }
+  renderSourceImage() {
+    return (h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
+  }
+  isSourceImageValid() {
+    var _a;
+    return ((_a = this.sourceImage) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  handleAnimationEnd({ animationName }) {
+    const isClosingAnimation = animationName.includes("slideOut");
+    if (!isClosingAnimation)
+      return;
+    this.modalClosed.emit();
+  }
+  static get is() { return "vviinn-recommendations-sidebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["recommendations-sidebar.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["recommendations-sidebar.css"]
+  }; }
+  static get properties() { return {
+    "sidebarTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sidebar-title",
+      "reflect": false
+    },
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "token",
+      "reflect": false
+    },
+    "productId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-id",
+      "reflect": false
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"bottom\" | \"right\"",
+        "resolved": "\"bottom\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"bottom\""
+    },
+    "sourceImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "source-image",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "widgetScrollbar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "widget-scrollbar",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "state": {}
+  }; }
+  static get events() { return [{
+      "method": "modalClosed",
+      "name": "modalClosed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "bodyClickListener",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/vviinn-vpr-button/stories/kek.stories.js

@@ -0,0 +1,18 @@
+import { withDesign } from "storybook-addon-designs";
+export default {
+  title: "Widgets/Visual Recommendation Button",
+  component: "vviinn-vpr-button",
+  decorators: [withDesign],
+};
+const Template = (args) => `<vviinn-vpr-button token="${args.token}" product-id="${args.productId}"></vviinn-vpr-button>`;
+export const Default = Template.bind({});
+Default.args = {
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
+  productId: "4114460310",
+};
+Default.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/YR5ZK1s4z9ZRUXytB8uVuj/Widgets?node-id=591%3A3859",
+  },
+};