vviinn-widgets 2.5.2 → 2.6.0

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

@@ -1,200 +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;
-    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/args.js

@@ -1,207 +0,0 @@
-export const argTypes = {
-  buttonSize: {
-    name: "Button size",
-    options: ["Default", "Small", "Large"],
-    mapping: {
-      Default: 40,
-      Small: 32,
-      Large: 48,
-    },
-    control: {
-      type: "select",
-      labels: {
-        Default: "Default (40px)",
-        Small: "Small (32px)",
-        Large: "Large (48px)",
-      },
-    },
-    defaultValue: "Default",
-  },
-  iconColor: {
-    name: "Icon color",
-    control: {
-      type: "color",
-    },
-    defaultValue: "#000000",
-  },
-  backgroundColor: {
-    name: "Background color",
-    control: {
-      type: "color",
-    },
-    defaultValue: "#ffffff",
-  },
-  backgroundOpacity: {
-    name: "Background opacity (%)",
-    control: {
-      type: "number",
-    },
-    defaultValue: 100,
-  },
-  radius: {
-    name: "Radius (px)",
-    control: {
-      type: "number",
-    },
-    defaultValue: 20,
-  },
-  border: {
-    name: "Border",
-    control: {
-      type: "boolean",
-    },
-    defaultValue: false,
-  },
-  borderColor: {
-    name: "Border color",
-    control: {
-      type: "color",
-    },
-    defaultValue: "#cccccc",
-  },
-  shadow: {
-    name: "Shadow",
-    control: {
-      type: "boolean",
-    },
-    defaultValue: true,
-  },
-  position: {
-    name: "Modal container appearance",
-    options: ["bottom", "right"],
-    control: {
-      type: "select",
-      labels: {
-        bottom: "From bottom",
-        right: "From right",
-      },
-    },
-    defaultValue: "bottom",
-  },
-  backdropOpacity: {
-    name: "Backdrop opacity (%)",
-    control: {
-      type: "number",
-    },
-    defaultValue: 50,
-  },
-  sidebarBorderRadius: {
-    name: "Modal container round corners (px)",
-    control: {
-      type: "number",
-    },
-    defaultValue: 16,
-  },
-  showSourceImage: {
-    name: "Modal container show source image",
-    control: {
-      type: "boolean",
-    },
-    defaultValue: true,
-  },
-  sourceImageSize: {
-    name: "Source image size",
-    options: ["Default", "Small", "Large"],
-    mapping: {
-      Default: 64,
-      Small: 48,
-      Large: 80,
-    },
-    control: {
-      type: "select",
-      labels: {
-        Default: "Default (64px)",
-        Small: "Small (48px)",
-        Large: "Large (80px)",
-      },
-    },
-    defaultValue: "Default",
-  },
-  sourceImageBorder: {
-    name: "Source image border",
-    control: {
-      type: "boolean",
-    },
-    defaultValue: false,
-  },
-  sourceImageBorderColor: {
-    name: "Source image border color",
-    control: {
-      type: "color",
-    },
-    defaultValue: "#cccccc",
-  },
-  sourceImageShadow: {
-    name: "Source image shadow",
-    control: {
-      type: "boolean",
-    },
-    defaultValue: true,
-  },
-  font: {
-    name: "Font family",
-    options: ["Inter", "System", "Arial"],
-    mapping: {
-      Inter: "'Inter', sans-serif",
-      System: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-      Arial: "Arial, sans-serif",
-    },
-    control: {
-      type: "select",
-      labels: {
-        Inter: "Inter",
-        System: "System stack",
-        Arial: "Arial (web safe)",
-      },
-    },
-    defaultValue: "Inter",
-  },
-  primaryTextColor: {
-    name: "Primary text color",
-    control: {
-      type: "color",
-    },
-    defaultValue: "#161616",
-  },
-  secondaryTextColor: {
-    name: "Secondary text color",
-    control: {
-      type: "color",
-    },
-    defaultValue: "#757575",
-  },
-  modalTitle: {
-    name: "Modal container title",
-    control: {
-      type: "boolean",
-    },
-    defaultValue: true,
-  },
-  sidebarTitle: {
-    name: "Modal container title name",
-    control: {
-      type: "text",
-    },
-    defaultValue: "Visually similar products",
-  },
-  modalTitleFontSize: {
-    name: "Modal container title font size (px)",
-    control: {
-      type: "number",
-    },
-    defaultValue: 28,
-  },
-  modalScrollbar: {
-    name: "Use default horizontal scrollbar in modal container",
-    control: {
-      type: "boolean",
-    },
-    defaultValue: false,
-  },
-  productId: {
-    name: "Product id",
-  },
-  token: {
-    name: "Token",
-  },
-};

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

@@ -1,89 +0,0 @@
-import { withDesign } from "storybook-addon-designs";
-import { argTypes } from "./args";
-const centerDecorator = (story) => `
-    <div style="display: grid;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                align-items: center;
-                justify-items: center;">
-      ${story()}
-    </div>
-  `;
-export default {
-  title: "Widgets/Visual Recommendations/Button",
-  component: "vviinn-vpr-button",
-  decorators: [withDesign, centerDecorator],
-  argTypes,
-};
-const Template = (args) => `<style>
-     body {
-       font-family: ${args.font};
-     }
-
-     vviinn-vpr-button::part(button) {
-       width: ${args.buttonSize}px;
-       height: ${args.buttonSize}px;
-       fill: ${args.iconColor};
-       background: ${args.backgroundColor};
-       opacity: ${args.backgroundOpacity}%;
-       border-radius: ${args.radius}px;
-       border: ${args.border ? "1px solid" : "none"};
-       border-color: ${args.borderColor};
-       ${args.shadow ? "" : "box-shadow: none;"}
-     }
-
-     vviinn-recommendations-sidebar::part(title) {
-       display: ${args.modalTitle ? "inline" : "none"};
-       font-size: ${args.modalTitleFontSize}px;
-     }
-
-     vviinn-recommendations-sidebar::part(product-title),
-     vviinn-recommendations-sidebar::part(brand),
-     vviinn-recommendations-sidebar::part(type),
-     vviinn-recommendations-sidebar::part(price-regular),
-     vviinn-recommendations-sidebar::part(price-sale) {
-       color: ${args.primaryTextColor};
-     }
-
-     vviinn-recommendations-sidebar::part(price-outdated) {
-       color: ${args.secondaryTextColor};
-     }
-
-     vviinn-recommendations-sidebar.open {
-       background: rgba(0, 0, 0, 0.1);
-     }
-
-     vviinn-recommendations-sidebar::part(body) {
-       border-radius: ${args.sidebarBorderRadius}px ${args.sidebarBorderRadius}px 0 0;
-     }
-
-     vviinn-recommendations-sidebar::part(source-image) {
-       width: ${args.sourceImageSize}px;
-       height: ${args.sourceImageSize}px;
-       border: ${args.sourceImageBorder ? "1px solid" : "none"};
-       border-color: ${args.sourceImageBorderColor};
-       ${args.sourceImageShadow ? "" : "box-shadow: none;"}
-     }
-   </style>
-   <vviinn-vpr-button token="${args.token}"
-                      product-id="${args.productId}"
-                      position="${args.position}"
-                      sidebar-title="${args.sidebarTitle}"
-                      modal-scrollbar="${args.modalScrollbar}"
-                      source-image="${args.showSourceImage
-  ? "https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg"
-  : ""}"></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",
-  },
-};

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

@@ -1,35 +0,0 @@
-:host {
-  display: block;
-}
-
-.open-button {
-  align-items: center;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 50%;
-  border: none;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
-  box-sizing: border-box;
-  cursor: pointer;
-  display: grid;
-  height: 40px;
-  justify-items: center;
-  padding: 0;
-  width: 40px;
-  transition: all 0.25s ease-in-out;
-}
-
-.open-button:hover {
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-.open-button:focus {
-  border: 2px solid rgba(15, 98, 254, 0.5);
-  outline: none;
-}
-
-.open-button:active {
-  background: #F4F4F4;
-  outline: none;
-}
-
-

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

@@ -1,156 +0,0 @@
-import { Component, Host, h, Prop } from "@stencil/core";
-import { VisualSearchIcon } from "../vviinn-icons";
-/**
- *
- * @part button - clickable button element
- */
-export class VviinnVprButton {
-  constructor() {
-    this.position = "bottom";
-    this.sourceImage = null;
-    this.sidebarTitle = "Visually similar products";
-    this.modalScrollbar = false;
-    this.sidebar = null;
-    this.sidebarCloseListener = () => {
-      document.body.removeChild(this.sidebar);
-    };
-  }
-  render() {
-    return (h(Host, null,
-      h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() },
-        h("slot", null,
-          h(VisualSearchIcon, null)))));
-  }
-  handleClick() {
-    const sidebar = document.createElement("vviinn-recommendations-sidebar");
-    sidebar.sidebarTitle = this.sidebarTitle;
-    sidebar.productId = this.productId;
-    sidebar.token = this.token;
-    sidebar.position = this.position;
-    sidebar.sourceImage = this.sourceImage;
-    sidebar.widgetScrollbar = this.modalScrollbar;
-    this.sidebar = sidebar;
-    sidebar.addEventListener("modalClosed", this.sidebarCloseListener);
-    document.body.append(this.sidebar);
-  }
-  disconnectedCallback() {
-    this.sidebar.removeEventListener("modalCLosed", this.sidebarCloseListener);
-    document.body.removeChild(this.sidebar);
-  }
-  static get is() { return "vviinn-vpr-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-vpr-button.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-vpr-button.css"]
-  }; }
-  static get properties() { return {
-    "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"
-    },
-    "sidebarTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sidebar-title",
-      "reflect": false,
-      "defaultValue": "\"Visually similar products\""
-    },
-    "modalScrollbar": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "modal-scrollbar",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-}