vviinn-widgets 2.5.0 → 2.5.2

package/dist/collection/analytics/GtagAnalytics.js

@@ -0,0 +1,35 @@
+export class GtagAnalytics {
+  sendImpression(product) {
+    var _a, _b, _c;
+    gtag('event', 'view_item_list', {
+      items: [
+        {
+          id: product.productId,
+          name: product.title,
+          brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+          category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+          list_name: 'VI VPR View',
+          price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+        }
+      ]
+    });
+    return undefined;
+  }
+  sendClick(product) {
+    var _a, _b, _c;
+    gtag('event', 'select_content', {
+      content_type: 'product',
+      items: [
+        {
+          id: product.productId,
+          name: product.title,
+          brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
+          category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
+          list_name: 'VI VPR View',
+          price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
+        }
+      ]
+    });
+    return undefined;
+  }
+}

package/dist/collection/analytics/ProductAnalytics.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/campaign/Campaign.js

@@ -0,0 +1,8 @@
+export const isVPR = (c) => c._tag === "VPR";
+export const isVCS = (c) => c._tag === "VCS";
+export function fold(onVPR, onVCS) {
+  return (c) => (isVPR(c) ? onVPR() : onVCS());
+}
+export function fromString(s) {
+  return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
+}

package/dist/collection/campaign/CampaignService.js

@@ -0,0 +1,5 @@
+import * as C from "./Campaign";
+import { pipe } from "fp-ts/lib/function";
+import { getVPRRecommendations } from "./VPRCampaignService";
+import { getVCSRecommendations } from "./VCSCampaignService";
+export const getRecommendationsService = (campaignType) => pipe(C.fromString(campaignType), C.fold(() => getVPRRecommendations, () => getVCSRecommendations));

package/dist/collection/campaign/VCSCampaign.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/campaign/VCSCampaignResponse.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/campaign/VCSCampaignService.js

@@ -0,0 +1,5 @@
+import { apiGet } from "../network/apiClient";
+export const getVCSRecommendations = (productId) => (options) => {
+  const url = `product/${productId}/cross-selling-products`;
+  return apiGet(url, options);
+};

package/dist/collection/campaign/VPRCampaignResponse.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/campaign/VPRCampaignService.js

@@ -0,0 +1,5 @@
+import { apiGet } from "../network/apiClient";
+export const getVPRRecommendations = (productId) => (options) => {
+  const url = `product/${productId}/similar-products`;
+  return apiGet(url, options);
+};

package/dist/collection/collection-manifest.json

@@ -0,0 +1,43 @@
+{
+  "entries": [
+    "./components/vviinn-carousel/vviinn-carousel.js",
+    "./components/image-search/image-view/highlight-box/highlight-box.js",
+    "./components/image-search/image-view/image-cropper/image-cropper.js",
+    "./components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.js",
+    "./components/image-search/search-filters/search-filters.js",
+    "./components/vviinn-error/vviinn-error.js",
+    "./components/vviinn-error/vviinn-empty-results/vviinn-empty-results.js",
+    "./components/vviinn-error/vviinn-server-error/vviinn-server-error.js",
+    "./components/vviinn-error/vviinn-wrong-format/vviinn-wrong-format.js",
+    "./components/vviinn-example-images/vviinn-example-images.js",
+    "./components/vviinn-example-images/vviinn-example-image/vviinn-example-image.js",
+    "./components/vviinn-image-selector/vviinn-image-selector.js",
+    "./components/vviinn-image-view/vviinn-image-view.js",
+    "./components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js",
+    "./components/vviinn-modal/vviinn-modal.js",
+    "./components/vviinn-onboarding/vviinn-onboarding.js",
+    "./components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-1/vviinn-onboarding-card-1.js",
+    "./components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-2/vviinn-onboarding-card-2.js",
+    "./components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-3/vviinn-onboarding-card-3.js",
+    "./components/vviinn-overlay/vviinn-overlay.js",
+    "./components/vviinn-overlayed-modal/vviinn-overlayed-modal.js",
+    "./components/vviinn-preloader/vviinn-preloader.js",
+    "./components/vviinn-privacy-badge/vviinn-privacy-badge.js",
+    "./components/vviinn-product-card/vviinn-product-card.js",
+    "./components/vviinn-slider/vviinn-slider.js",
+    "./components/vviinn-slider/vviinn-slide/vviinn-slide.js",
+    "./components/vviinn-teaser/vviinn-teaser.js",
+    "./components/vviinn-vpr-button/vviinn-vpr-button.js",
+    "./components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js",
+    "./components/vviinn-vpr-widget/vviinn-vpr-vidget.js",
+    "./components/vviinn-vps-button/vviinn-vps-button.js",
+    "./components/vviinn-vps-widget/vviinn-vps-widget.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.9.0",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/customized-slots.js

@@ -0,0 +1,47 @@
+import { h } from "@stencil/core";
+const defaultSlotsNames = [
+  "vviinn-onboarding-title",
+  "vviinn-onboarding-card-1-icon",
+  "vviinn-onboarding-card-1-text",
+  "vviinn-onboarding-card-2-icon",
+  "vviinn-onboarding-card-2-text",
+  "vviinn-onboarding-card-3-icon",
+  "vviinn-onboarding-card-3-text",
+  "vviinn-example-images-title",
+  "vviinn-example-images-1",
+  "vviinn-example-images-2",
+  "vviinn-example-images-3",
+  "vviinn-example-images-4",
+  "vviinn-teaser-text",
+  "vviinn-image-upload-button-text",
+  "vviinn-privacy-badge-text"
+];
+const renderNamedSlot = (name) => h("slot", { name: name });
+export const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);
+const getSlots = (element) => Array.from(element.shadowRoot.querySelectorAll("slot"));
+const getNameAttribute = (element) => element.getAttribute("name");
+const getSlotAttribute = (element) => element.getAttribute("slot");
+const elementContainSlot = (slot) => (container) => {
+  const name1 = getNameAttribute(slot);
+  const name2 = getSlotAttribute(container);
+  return name1 === name2;
+};
+const getContentToReplace = (targets) => (acc, content) => {
+  const replaceCandidate = targets.find(elementContainSlot(content));
+  if (replaceCandidate) {
+    acc.set(content, replaceCandidate);
+  }
+  return acc;
+};
+const replaceSlotContent = (content, target) => {
+  target.innerHTML = content.outerHTML;
+};
+export const slotChangeListener = (component, element) => {
+  component.connectedCallback = function () {
+    document.addEventListener("globalSlotsChanged", ({ detail }) => {
+      const slotsToReplace = getSlots(element).reduce(getContentToReplace(detail), new Map());
+      slotsToReplace.forEach(replaceSlotContent);
+    }, true);
+  };
+  component.connectedCallback.call(component);
+};

package/dist/collection/components/image-search/image-view/highlight-box/highlight-box.css

@@ -0,0 +1,71 @@
+:host {
+  display: grid;
+  position: absolute;
+  box-sizing: border-box;
+  border: none;
+  width: 100%;
+  height: 100%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+
+  --size: 10px;
+  --x-position: 0;
+  --y-position: 0;
+}
+
+img {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.pointer {
+  position: absolute;
+  width: var(--size);
+  height: var(--size);
+  background: black;
+  border-radius: 50%;
+  z-index: 2;
+  cursor: pointer;
+  transform: translate(var(--x-position), var(--y-position)) scale(0);
+  -webkit-animation: 0.25s linear fadein;
+          animation: 0.25s linear fadein;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+.pointer::after {
+  content: "";
+  cursor: pointer;
+  border: 5px solid black;
+  border-radius: 50%;
+  width: var(--size);
+  height: var(--size);
+  display: block;
+  transform: translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));
+  padding: calc(var(--size) * 0.5);
+  opacity: .75;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    transform: translate(var(--x-position), var(--y-position)) scale(0);
+  }
+
+  to {
+    transform: translate(var(--x-position), var(--y-position)) scale(1);
+  }
+}
+
+@keyframes fadein {
+  from {
+    transform: translate(var(--x-position), var(--y-position)) scale(0);
+  }
+
+  to {
+    transform: translate(var(--x-position), var(--y-position)) scale(1);
+  }
+}

package/dist/collection/components/image-search/image-view/highlight-box/highlight-box.js

@@ -0,0 +1,25 @@
+import { Component, Host, h } from "@stencil/core";
+import { getClipValue } from "../../../../geometry/Clip";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/function";
+import { imageSearchState } from "../../../../store/imageSearch.store";
+import { sequenceToOption } from "../../../../utils/option/option";
+export class HighlightBox {
+  getInsetValue() {
+    return pipe(sequenceToOption(imageSearchState.searchArea, imageSearchState.imageBounds), O.map(([selection, image]) => getClipValue(selection, image)), O.getOrElse(() => ""));
+  }
+  renderImage() {
+    return pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.imageBounds), O.map(([url, bounds]) => (h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), O.getOrElse(() => ""));
+  }
+  render() {
+    return h(Host, null, this.renderImage());
+  }
+  static get is() { return "highlight-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["highlight-box.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["highlight-box.css"]
+  }; }
+}

package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.css

@@ -0,0 +1,49 @@
+:host {
+  --size: 20px;
+
+  background: transparent;
+  border: 4px solid white;
+  box-sizing: content-box;
+  display: block;
+  height: var(--size);
+  touch-action: none;
+  position: absolute;
+  width: var(--size);
+  z-index: 4;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+:host(.disabled) {
+  opacity: 0.25;
+}
+
+:host(.nw-resize) {
+  border-bottom: none;
+  border-right: none;
+  top: 0;
+  left: 0;
+}
+
+:host(.ne-resize) {
+  border-left: none;
+  border-bottom: none;
+  right: 0;
+  top: 0;
+}
+
+:host(.sw-resize) {
+  border-right: none;
+  border-top: none;
+  left: 0;
+  bottom: 0;
+}
+
+:host(.se-resize) {
+  border-left: none;
+  border-top: none;
+  bottom: 0;
+  right: 0;
+}

package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.js

@@ -0,0 +1,64 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+import { getCursorValue } from "../../../../../cropper/Handler";
+export class CropperHandler {
+  constructor() {
+    this.disabled = false;
+  }
+  render() {
+    return (h(Host, { part: `handle ${getCursorValue(this.handler.direction)}`, class: {
+        disabled: this.disabled,
+        [getCursorValue(this.handler.direction)]: true,
+      }, style: {
+        "--size": "20px",
+        cursor: getCursorValue(this.handler.direction),
+      }, draggable: false }));
+  }
+  static get is() { return "cropper-handler"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cropper-handler.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cropper-handler.css"]
+  }; }
+  static get properties() { return {
+    "handler": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Handler",
+        "resolved": "Handler",
+        "references": {
+          "Handler": {
+            "location": "import",
+            "path": "../../../../../cropper/Handler"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/image-search/image-view/image-cropper/image-cropper.css

@@ -0,0 +1,33 @@
+:host {
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+:host(.hidden) {
+  visibility: hidden;
+}
+
+.crop-area {
+  border: 1px solid white;
+  box-sizing: border-box;
+  position: absolute;
+  touch-action: none;
+  transition-property: border-color, opacity;
+  transition-duration: .25s;
+  transition-timing-function: ease-in-out;
+  z-index: 2;
+  position: relative;
+  will-change: transform;
+}
+
+.crop-area.active {
+  border-color: whitesmoke;
+}
+
+.crop-area.disabled {
+  opacity: 0.25;
+}

package/{www/build/image-cropper.entry.js → dist/collection/components/image-search/image-view/image-cropper/image-cropper.js}

@@ -1,21 +1,13 @@
-import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-c8128606.js';
-import { i as imageSearchState, t as transform, b as move, n as makeRectangularSearchRequest } from './imageSearch.store-3204bc99.js';
-import { O as fromMouseEvent, P as pointDiffSemigroup } from './Handler-47db9890.js';
-import { _ as _function } from './NonEmptyArray-65395d97.js';
-import { O as Option } from './number-a80a4b3c.js';
-import './Array-c4dc02db.js';
-
-const findTarget = (ev) => {
-  return ev.target;
-};
-
-const imageCropperCss = ":host{display:block;height:100%;left:0;position:absolute;top:0;width:100%}:host(.hidden){visibility:hidden}.crop-area{border:1px solid white;box-sizing:border-box;position:absolute;touch-action:none;transition-property:border-color, opacity;transition-duration:.25s;transition-timing-function:ease-in-out;z-index:2;position:relative;will-change:transform}.crop-area.active{border-color:whitesmoke}.crop-area.disabled{opacity:0.25}";
-
+import { Component, Host, h, State, Element, Prop, Event, } from "@stencil/core";
+import { move, transform } from "../../../../geometry/Rectangle";
+import { fromMouseEvent, pointDiffSemigroup, } from "../../../../geometry/Point";
+import { imageSearchState, makeRectangularSearchRequest, } from "../../../../store/imageSearch.store";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import { findTarget } from "../../../../dom";
 const MIN_SEARCHAREA_SIZE = 40;
-let ImageCropper = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cropperChanged = createEvent(this, "cropperChanged", 7);
+export class ImageCropper {
+  constructor() {
     this.disabled = false;
     this.handleMove = false;
     this.mouseStartPoint = undefined;
@@ -33,11 +25,11 @@ let ImageCropper = class {
       position: distance,
       direction: this.handlerMoveDirection,
     };
-    _function.pipe(imageSearchState.searchArea, Option.map((area) => {
+    pipe(imageSearchState.searchArea, O.map((area) => {
       const newSearchArea = transform(area, transformedHandler);
       if (this.outOfBounds(newSearchArea))
         return;
-      imageSearchState.searchArea = Option.some(newSearchArea);
+      imageSearchState.searchArea = O.some(newSearchArea);
       this.mouseStartPoint = destination;
       imageSearchState.detectedObject = undefined;
     }));
@@ -55,7 +47,7 @@ let ImageCropper = class {
     ev.stopPropagation();
     const destination = fromMouseEvent(ev);
     const distance = pointDiffSemigroup.concat(destination, this.mouseStartPoint);
-    _function.pipe(imageSearchState.searchArea, Option.map((searchArea) => {
+    pipe(imageSearchState.searchArea, O.map((searchArea) => {
       const newSearchArea = move(searchArea, distance);
       if (newSearchArea.x < 0 ||
         newSearchArea.y < 0 ||
@@ -63,7 +55,7 @@ let ImageCropper = class {
         this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0)
         return;
       imageSearchState.detectedObject = undefined;
-      imageSearchState.searchArea = Option.some(newSearchArea);
+      imageSearchState.searchArea = O.some(newSearchArea);
       this.mouseStartPoint = destination;
     }));
   }
@@ -93,26 +85,71 @@ let ImageCropper = class {
     this.cropperChanged.emit();
   }
   getStyleMap() {
-    return _function.pipe(imageSearchState.searchArea, Option.map((rectangle) => {
+    return pipe(imageSearchState.searchArea, O.map((rectangle) => {
       return {
         width: `${rectangle.width}px`,
         height: `${rectangle.height}px`,
         transform: `translate3d(${rectangle.x}px, ${rectangle.y}px, 0)`,
         cursor: this.handleMove ? "move" : "default",
       };
-    }), Option.getOrElse(() => {
+    }), O.getOrElse(() => {
       return {};
     }));
   }
   render() {
-    return (h(Host, { exportparts: "handle, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize" }, h("div", { class: {
-        "crop-area": true,
-        active: this.handleMove,
-        disabled: this.disabled,
-      }, draggable: false, style: this.getStyleMap(), onContextMenu: () => false, onPointerDown: (ev) => this.handlePointerDown(ev) }, imageSearchState.cropperHandlers.map((handler) => (h("cropper-handler", { disabled: this.disabled, handler: handler, onPointerDown: (ev) => this.handlePointerDown(ev) }))))));
+    return (h(Host, { exportparts: "handle, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize" },
+      h("div", { class: {
+          "crop-area": true,
+          active: this.handleMove,
+          disabled: this.disabled,
+        }, draggable: false, style: this.getStyleMap(), onContextMenu: () => false, onPointerDown: (ev) => this.handlePointerDown(ev) }, imageSearchState.cropperHandlers.map((handler) => (h("cropper-handler", { disabled: this.disabled, handler: handler, onPointerDown: (ev) => this.handlePointerDown(ev) }))))));
   }
-  get el() { return getElement(this); }
-};
-ImageCropper.style = imageCropperCss;
-
-export { ImageCropper as image_cropper };
+  static get is() { return "image-cropper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["image-cropper.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["image-cropper.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "handleMove": {}
+  }; }
+  static get events() { return [{
+      "method": "cropperChanged",
+      "name": "cropperChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}