vviinn-widgets 2.5.0 → 2.5.2

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js

@@ -0,0 +1,462 @@
+import { Component, Host, h, Prop, Event, Element, State, } from "@stencil/core";
+import { pipe } from "fp-ts/lib/function";
+import { getAnalyticsModule } from "../../analytics/GeneralAnalytics";
+import { state } from "../../store/store";
+import * as O from "fp-ts/lib/Option";
+import { imageSearchState } from "../../store/imageSearch.store";
+import { Linked, Price, ResponsiveImage, Image, } from "./render-helpers";
+/**
+ * @part brand - product brand.
+ * @part currency - currency sign. Renders after price-amount.
+ * @part deeplink - anchor element for title. Rendered only if "deeplink" property filled.
+ * @part image - product image.
+ * @part image-link - anchor element for image. Rendered only if "deeplink" property filled.
+ * @part price-amount - numeric part of price.
+ * @part price-container - block contains all prices.
+ * @part price-outdated - renders inside price-container when "sale-price" property filled. Contains regular price.
+ * @part price-prefix - renders before price-amount. Can be set with "price-prefix" property or inherited from parent component.
+ * @part price-regular - renders inside price-container when "sale-price" property is empty.
+ * @part price-sale - renders inside price-container when "sale-price" property filled. Contains sale price.
+ * @part title - product title
+ */
+export class VviinnProductCard {
+  constructor() {
+    this.currency = undefined;
+    this.imageRatio = 1;
+    this.imageWidth = 200;
+    this.locale = undefined;
+    this.pricePrefix = undefined;
+    this.responsive = false;
+    this.dimmedBackground = false;
+    /** @internal */
+    this.index = 0;
+    this.imageLoaded = false;
+    this.productData = null;
+    this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this), { threshold: 1.0 });
+  }
+  connectedCallback() {
+    this.productData = {
+      product: this.productId,
+      rank: this.index,
+    };
+  }
+  intersectionCallback(data) {
+    if (data.some((entry) => entry.isIntersecting)) {
+      pipe(getAnalyticsModule, O.map((analytics) => analytics.sendImpression(this.getProduct())));
+      this.recommendationView.emit(this.productData);
+      this.intersectionObserver.disconnect();
+    }
+  }
+  componentDidLoad() {
+    this.recommendationLoad.emit(this.productData);
+    this.intersectionObserver.observe(this.el);
+    const links = this.el.shadowRoot.querySelectorAll("a");
+    links.forEach((link) => link.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.recommendationClick.emit(this.productData);
+      pipe(getAnalyticsModule, O.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
+    }));
+  }
+  getProduct() {
+    return imageSearchState.results.find((r) => r.productId === this.productId);
+  }
+  renderImage() {
+    const props = {
+      width: this.imageWidth,
+      height: this.imageWidth * this.imageRatio,
+      src: this.image,
+      title: this.productTitle,
+      lazy: false,
+    };
+    return this.responsive
+      ? ResponsiveImage(props, () => this.kek())
+      : Image(props, () => this.kek());
+  }
+  kek() {
+    this.productImageLoaded.emit(this.productId);
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title" },
+      h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()),
+      h(Linked, { deeplink: this.deeplink, part: "deeplink" },
+        h("span", { class: "title", part: "title" }, this.productTitle)),
+      h("span", { class: "brand", part: "brand" }, this.brand),
+      h("span", { class: "type", part: "type" }, this.productType),
+      h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : state.locale })));
+  }
+  static get is() { return "vviinn-product-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-product-card.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-product-card.css"]
+  }; }
+  static get properties() { return {
+    "brand": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "brand",
+      "reflect": false
+    },
+    "currency": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "currency",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "deeplink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "deeplink",
+      "reflect": false
+    },
+    "image": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "image",
+      "reflect": false
+    },
+    "imageRatio": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "image-ratio",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "imageWidth": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "image-width",
+      "reflect": false,
+      "defaultValue": "200"
+    },
+    "locale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "locale",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "price": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | undefined",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "price",
+      "reflect": false
+    },
+    "pricePrefix": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "price-prefix",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "productId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-id",
+      "reflect": false
+    },
+    "productTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-title",
+      "reflect": false
+    },
+    "productType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-type",
+      "reflect": false
+    },
+    "salePrice": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | undefined",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sale-price",
+      "reflect": false
+    },
+    "responsive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "responsive",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "dimmedBackground": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "dimmed-background",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "index": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "index",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "imageLoaded": {}
+  }; }
+  static get events() { return [{
+      "method": "recommendationLoad",
+      "name": "recommendationLoad",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fires ones when recommendation rendered on page"
+      },
+      "complexType": {
+        "original": "ProductCardEventData",
+        "resolved": "{ product: string; rank: number; }",
+        "references": {
+          "ProductCardEventData": {
+            "location": "import",
+            "path": "../../recommendation/events"
+          }
+        }
+      }
+    }, {
+      "method": "recommendationView",
+      "name": "recommendationView",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fires ones when recommendation appears on the viewport"
+      },
+      "complexType": {
+        "original": "ProductCardEventData",
+        "resolved": "{ product: string; rank: number; }",
+        "references": {
+          "ProductCardEventData": {
+            "location": "import",
+            "path": "../../recommendation/events"
+          }
+        }
+      }
+    }, {
+      "method": "recommendationClick",
+      "name": "recommendationClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fires ones when user click on deeplink"
+      },
+      "complexType": {
+        "original": "ProductCardEventData",
+        "resolved": "{ product: string; rank: number; }",
+        "references": {
+          "ProductCardEventData": {
+            "location": "import",
+            "path": "../../recommendation/events"
+          }
+        }
+      }
+    }, {
+      "method": "productImageLoaded",
+      "name": "productImageLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

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

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

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

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

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