vviinn-widgets 2.7.2 → 2.8.0

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%);
-  }
-}

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

@@ -1,220 +0,0 @@
-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;
-    /** comma-separated list of campaign-ids */
-    this.campaigns = "";
-    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, campaigns: this.campaigns })))));
-  }
-  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"
-    },
-    "campaigns": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "comma-separated list of campaign-ids"
-      },
-      "attribute": "campaigns",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-  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
-    }]; }
-}