vviinn-widgets 2.7.2 → 2.8.0

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

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

@@ -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;
-}