vviinn-widgets 2.0.0 → 2.2.1

package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-vidget.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, State, Element, Watch, } from "@stencil/core";
+import { Component, Host, h, Prop, State, Element, Watch, Event, Listen } from "@stencil/core";
 import { pipe } from "fp-ts/lib/function";
 import * as TE from "fp-ts/lib/TaskEither";
 import * as E from "fp-ts/lib/Either";
@@ -6,6 +6,21 @@ import { createBearAuthedHeader } from "./token-helpers";
 import state from "../../store/store";
 import { getRecommendationsService } from "../../campaign/CampaignService";
 import { imageSearchState } from "../../store/imageSearch.store";
+import { Subject } from "rxjs";
+/**
+ * @part product-card - product card itself
+ * @part title - title inside product card
+ * @part brand - brand inside product card
+ * @part currency - brand inside product card
+ * @part image - product card image
+ * @part image-link - anchor element around product image
+ * @part price-amount - span element around every prices
+ * @part price-container - block of prices
+ * @part price-outdated - block for outdated price. rendered when product contains sale price
+ * @part price-prefix - block rendered before each price element (for ex. "from")
+ * @part price-regular - block for price if no sale price presented
+ * @part price-sale -  block for sale price. rendered only if sale price presented
+ */
 export class VviinnVprWidget {
   constructor() {
     /** Title for recommendations widget */
@@ -17,18 +32,34 @@ export class VviinnVprWidget {
     /** Currency sign will shown after price */
     this.currencySign = "€";
     /** Use slider or grid view */
-    this.mode = "modern";
+    this.mode = "continuity";
     /** Campaign type */
     this.campaignType = "VPR";
     /** Locale for currency formatting */
     this.locale = "de-DE";
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
+    /** @internal */
+    this.useCarousel = true;
     this.showScroll = true;
+    this.cssUrl = null;
     this.recommendations = [];
     this.loaded = false;
+    this.productImageLoadedSubject = new Subject();
   }
   handleProductIdChange() {
     this.getRecommendations();
   }
+  handleCampaignTypeChange() {
+    this.getRecommendations();
+  }
+  handleApiPathChange(newPath) {
+    state.apiPath = newPath;
+    this.getRecommendations();
+  }
+  lol({ detail }) {
+    this.productImageLoadedSubject.next(detail);
+  }
   connectedCallback() {
     state.apiPath = this.apiPath;
     state.currencySign = this.currencySign;
@@ -42,8 +73,9 @@ export class VviinnVprWidget {
   async getRecommendations() {
     if (this.productId === undefined || this.token === undefined)
       return;
+    const campaignType = this.campaignType.length > 0 ? this.campaignType : "VPR";
     const headers = createBearAuthedHeader(this.token);
-    const request = pipe(TE.of(getRecommendationsService(this.campaignType)), TE.ap(TE.of(this.productId)), TE.ap(TE.of(headers)), TE.flatten);
+    const request = pipe(TE.of(getRecommendationsService(campaignType)), TE.ap(TE.of(this.productId)), TE.ap(TE.of(headers)), TE.flatten);
     const runRequest = await request();
     pipe(runRequest, E.fold((error) => this.handleError(error), (data) => this.handleRecommendationsSucces(data)));
   }
@@ -55,12 +87,43 @@ export class VviinnVprWidget {
     this.recommendations = (_a = data === null || data === void 0 ? void 0 : data.extended) !== null && _a !== void 0 ? _a : data;
     imageSearchState.results = this.recommendations;
     this.loaded = true;
+    //this.recommendationsLoaded.emit();
+    this.productIds = this.recommendations.map(r => r.productId);
+    this.productImageLoadedSubject.subscribe((id) => {
+      this.productIds = this.productIds.filter(x => x !== id);
+      if (this.productIds.length === 0) {
+        this.recommendationsLoaded.emit();
+      }
+    });
+  }
+  isExternalCSS() {
+    return this.cssUrl && this.cssUrl.length > 0;
+  }
+  renderExternalCSS() {
+    return this.isExternalCSS() ? (h("link", { href: this.cssUrl, rel: "stylesheet" })) : ("");
   }
   render() {
-    return (h(Host, { class: { loaded: this.loaded, empty: this.recommendations.length == 0, [this.mode]: true }, "aria-hidden": this.loaded ? "false" : "true" },
+    return (h(Host, { class: {
+        loaded: this.loaded,
+        empty: this.recommendations.length == 0,
+        [this.mode]: true,
+      }, "aria-hidden": this.loaded ? "false" : "true" },
+      this.renderExternalCSS(),
       h("style", null, state.fallbackStyles),
       h("h2", { part: "recommendations-title" }, this.blockTitle),
-      h("vviinn-carousel", { exportparts: "brand, currency, deeplink, image, type, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, title: product-title", mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll }, this.recommendations.map((r) => (h("vviinn-product-card", { productId: r.productId, productTitle: r.title, image: r.image.thumbnail, brand: r.brand, imageWidth: this.imageWidth, imageRatio: this.imageRatio, price: r.price.actual, salePrice: r.price.sale, responsive: this.mode === "classic", dimmedBackground: this.mode === "modern", exportparts: "title" }))))));
+      this.useCarousel ? this.renderCarousel() : this.renderResults()));
+  }
+  renderRecommendation(recommendation) {
+    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.useDimmedBackgroundInCard() }));
+  }
+  useDimmedBackgroundInCard() {
+    return this.mode === "continuity" || !this.useCarousel;
+  }
+  renderResults() {
+    return (h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r) => this.renderRecommendation(r))));
+  }
+  renderCarousel() {
+    return (h("vviinn-carousel", { mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations }));
   }
   static get is() { return "vviinn-vpr-widget"; }
   static get encapsulation() { return "shadow"; }
@@ -89,23 +152,6 @@ export class VviinnVprWidget {
       "reflect": false,
       "defaultValue": "\"Recommended products\""
     },
-    "columns": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Number of columns for recommendations"
-      },
-      "attribute": "columns",
-      "reflect": false
-    },
     "imageRatio": {
       "type": "number",
       "mutable": false,
@@ -215,9 +261,14 @@ export class VviinnVprWidget {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"classic\" | \"modern\"",
-        "resolved": "\"classic\" | \"modern\"",
-        "references": {}
+        "original": "CarouselMode",
+        "resolved": "\"continuity\" | \"grid\"",
+        "references": {
+          "CarouselMode": {
+            "location": "import",
+            "path": "../vviinn-carousel/vviinn-carousel"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -227,14 +278,14 @@ export class VviinnVprWidget {
       },
       "attribute": "mode",
       "reflect": false,
-      "defaultValue": "\"modern\""
+      "defaultValue": "\"continuity\""
     },
     "campaignType": {
       "type": "string",
       "mutable": false,
       "complexType": {
         "original": "CampaignName",
-        "resolved": "\"VPR\" | \"VSC\"",
+        "resolved": "\"VCS\" | \"VPR\"",
         "references": {
           "CampaignName": {
             "location": "import",
@@ -288,7 +339,29 @@ export class VviinnVprWidget {
         "text": ""
       },
       "attribute": "api-path",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"https://api.vviinn.com\""
+    },
+    "useCarousel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "use-carousel",
+      "reflect": false,
+      "defaultValue": "true"
     },
     "showScroll": {
       "type": "boolean",
@@ -307,15 +380,62 @@ export class VviinnVprWidget {
       "attribute": "show-scroll",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "cssUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "css-url",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get states() { return {
     "recommendations": {},
     "loaded": {}
   }; }
+  static get events() { return [{
+      "method": "recommendationsLoaded",
+      "name": "recommendationsLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "productId",
       "methodName": "handleProductIdChange"
+    }, {
+      "propName": "campaignType",
+      "methodName": "handleCampaignTypeChange"
+    }, {
+      "propName": "apiPath",
+      "methodName": "handleApiPathChange"
+    }]; }
+  static get listeners() { return [{
+      "name": "productImageLoaded",
+      "method": "lol",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -9,8 +9,13 @@
   visibility: hidden;
 }
 
-:host(.classic) vviinn-product-card::part(image) {
+:host(.grid) vviinn-product-card::part(image) {
   border: 1px solid #DDDDDD;
+  width: 100%;
+}
+
+h2 {
+  margin: 0;
 }
 
 vviinn-product-card::part(price-container) {
@@ -33,19 +38,37 @@ vviinn-product-card::part(price-container) {
   width: 0;
 }
 
-:host(.classic) vviinn-product-card::part(title),
-:host(.classic) vviinn-product-card::part(brand),
-:host(.classic) vviinn-product-card::part(type) {
+h2 {
+  margin: 0;
+}
+
+:host(.grid) h2 {
+  justify-content: center;
+}
+
+:host(.grid) vviinn-product-card::part(image) {
+  min-width: 100%;
+}
+
+:host(.grid) vviinn-product-card::part(image-link) {
+  width: 100%;
+}
+
+:host(.grid) vviinn-product-card::part(title),
+:host(.grid) vviinn-product-card::part(brand),
+:host(.grid) vviinn-product-card::part(type) {
   text-align: center;
 }
 
-:host(.classic) vviinn-product-card::part(price-container) {
+:host(.grid) vviinn-product-card::part(price-container) {
   align-self: center;
 }
 
-:host(.modern) vviinn-product-card::part(title),
-:host(.modern) vviinn-product-card::part(brand),
-:host(.modern) vviinn-product-card::part(type) {
+:host(.continuity) vviinn-product-card::part(title),
+:host(.continuity) vviinn-product-card::part(brand),
+:host(.continuity) vviinn-product-card::part(type),
+:host(.continuity) vviinn-product-card::part(deeplink) {
   text-align: left;
   max-width: unset;
+  align-self: start;
 }

package/dist/esm/Handler-639a4cb3.js

@@ -0,0 +1,308 @@
+// -------------------------------------------------------------------------------------
+/**
+ * @since 2.0.0
+ */
+function identity(a) {
+    return a;
+}
+function flow(ab, bc, cd, de, ef, fg, gh, hi, ij) {
+    switch (arguments.length) {
+        case 1:
+            return ab;
+        case 2:
+            return function () {
+                return bc(ab.apply(this, arguments));
+            };
+        case 3:
+            return function () {
+                return cd(bc(ab.apply(this, arguments)));
+            };
+        case 4:
+            return function () {
+                return de(cd(bc(ab.apply(this, arguments))));
+            };
+        case 5:
+            return function () {
+                return ef(de(cd(bc(ab.apply(this, arguments)))));
+            };
+        case 6:
+            return function () {
+                return fg(ef(de(cd(bc(ab.apply(this, arguments))))));
+            };
+        case 7:
+            return function () {
+                return gh(fg(ef(de(cd(bc(ab.apply(this, arguments)))))));
+            };
+        case 8:
+            return function () {
+                return hi(gh(fg(ef(de(cd(bc(ab.apply(this, arguments))))))));
+            };
+        case 9:
+            return function () {
+                return ij(hi(gh(fg(ef(de(cd(bc(ab.apply(this, arguments)))))))));
+            };
+    }
+    return;
+}
+/**
+ * @since 2.0.0
+ */
+function tuple() {
+    var t = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        t[_i] = arguments[_i];
+    }
+    return t;
+}
+function pipe(a, ab, bc, cd, de, ef, fg, gh, hi) {
+    switch (arguments.length) {
+        case 1:
+            return a;
+        case 2:
+            return ab(a);
+        case 3:
+            return bc(ab(a));
+        case 4:
+            return cd(bc(ab(a)));
+        case 5:
+            return de(cd(bc(ab(a))));
+        case 6:
+            return ef(de(cd(bc(ab(a)))));
+        case 7:
+            return fg(ef(de(cd(bc(ab(a))))));
+        case 8:
+            return gh(fg(ef(de(cd(bc(ab(a)))))));
+        case 9:
+            return hi(gh(fg(ef(de(cd(bc(ab(a))))))));
+        default:
+            var ret = arguments[0];
+            for (var i = 1; i < arguments.length; i++) {
+                ret = arguments[i](ret);
+            }
+            return ret;
+    }
+}
+
+// -------------------------------------------------------------------------------------
+// Option
+// -------------------------------------------------------------------------------------
+/** @internal */
+var isNone = function (fa) { return fa._tag === 'None'; };
+/** @internal */
+var isSome = function (fa) { return fa._tag === 'Some'; };
+/** @internal */
+var none = { _tag: 'None' };
+/** @internal */
+var some = function (a) { return ({ _tag: 'Some', value: a }); };
+// -------------------------------------------------------------------------------------
+// Either
+// -------------------------------------------------------------------------------------
+/** @internal */
+var isLeft = function (ma) { return ma._tag === 'Left'; };
+/** @internal */
+var left = function (e) { return ({ _tag: 'Left', left: e }); };
+/** @internal */
+var right = function (a) { return ({ _tag: 'Right', right: a }); };
+// -------------------------------------------------------------------------------------
+// Record
+// -------------------------------------------------------------------------------------
+/** @internal */
+var has = Object.prototype.hasOwnProperty;
+
+/**
+ * If a type `A` can form a `Semigroup` it has an **associative** binary operation.
+ *
+ * ```ts
+ * interface Semigroup<A> {
+ *   readonly concat: (x: A, y: A) => A
+ * }
+ * ```
+ *
+ * Associativity means the following equality must hold for any choice of `x`, `y`, and `z`.
+ *
+ * ```ts
+ * concat(x, concat(y, z)) = concat(concat(x, y), z)
+ * ```
+ *
+ * A common example of a semigroup is the type `string` with the operation `+`.
+ *
+ * ```ts
+ * import { Semigroup } from 'fp-ts/Semigroup'
+ *
+ * const semigroupString: Semigroup<string> = {
+ *   concat: (x, y) => x + y
+ * }
+ *
+ * const x = 'x'
+ * const y = 'y'
+ * const z = 'z'
+ *
+ * semigroupString.concat(x, y) // 'xy'
+ *
+ * semigroupString.concat(x, semigroupString.concat(y, z)) // 'xyz'
+ *
+ * semigroupString.concat(semigroupString.concat(x, y), z) // 'xyz'
+ * ```
+ *
+ * *Adapted from https://typelevel.org/cats*
+ *
+ * @since 2.0.0
+ */
+/**
+ * Given a struct of semigroups returns a semigroup for the struct.
+ *
+ * @example
+ * import { struct } from 'fp-ts/Semigroup'
+ * import * as N from 'fp-ts/number'
+ *
+ * interface Point {
+ *   readonly x: number
+ *   readonly y: number
+ * }
+ *
+ * const S = struct<Point>({
+ *   x: N.SemigroupSum,
+ *   y: N.SemigroupSum
+ * })
+ *
+ * assert.deepStrictEqual(S.concat({ x: 1, y: 2 }, { x: 3, y: 4 }), { x: 4, y: 6 })
+ *
+ * @category combinators
+ * @since 2.10.0
+ */
+var struct = function (semigroups) { return ({
+    concat: function (first, second) {
+        var r = {};
+        for (var k in semigroups) {
+            if (has.call(semigroups, k)) {
+                r[k] = semigroups[k].concat(first[k], second[k]);
+            }
+        }
+        return r;
+    }
+}); };
+// -------------------------------------------------------------------------------------
+// instances
+// -------------------------------------------------------------------------------------
+/**
+ * Always return the first argument.
+ *
+ * @example
+ * import * as S from 'fp-ts/Semigroup'
+ *
+ * assert.deepStrictEqual(S.first<number>().concat(1, 2), 1)
+ *
+ * @category instances
+ * @since 2.10.0
+ */
+var first = function () { return ({ concat: identity }); };
+/**
+ * Always return the last argument.
+ *
+ * @example
+ * import * as S from 'fp-ts/Semigroup'
+ *
+ * assert.deepStrictEqual(S.last<number>().concat(1, 2), 2)
+ *
+ * @category instances
+ * @since 2.10.0
+ */
+var last = function () { return ({ concat: function (_, y) { return y; } }); };
+/**
+ * Use [`SemigroupSum`](./number.ts.html#SemigroupSum) instead.
+ *
+ * @category instances
+ * @since 2.0.0
+ * @deprecated
+ */
+var semigroupSum = {
+    concat: function (x, y) { return x + y; }
+};
+
+const semigroupDiff = {
+  concat: (x, y) => x - y,
+};
+
+const fromRectangle$1 = ({ x, y }) => {
+  return {
+    x,
+    y,
+  };
+};
+const fromMouseEvent = ({ clientX, clientY }) => {
+  return {
+    x: clientX,
+    y: clientY,
+  };
+};
+const pointDiffSemigroup = struct({
+  x: semigroupDiff,
+  y: semigroupDiff,
+});
+const pointSumSemigroup = struct({
+  x: semigroupSum,
+  y: semigroupSum,
+});
+
+var HandlerDirection;
+(function (HandlerDirection) {
+  HandlerDirection[HandlerDirection["East"] = 0] = "East";
+  HandlerDirection[HandlerDirection["North"] = 1] = "North";
+  HandlerDirection[HandlerDirection["NorthEast"] = 2] = "NorthEast";
+  HandlerDirection[HandlerDirection["NorthWest"] = 3] = "NorthWest";
+  HandlerDirection[HandlerDirection["South"] = 4] = "South";
+  HandlerDirection[HandlerDirection["SouthEast"] = 5] = "SouthEast";
+  HandlerDirection[HandlerDirection["SouthWest"] = 6] = "SouthWest";
+  HandlerDirection[HandlerDirection["West"] = 7] = "West";
+})(HandlerDirection || (HandlerDirection = {}));
+const getCursorValue = (direction) => {
+  switch (direction) {
+    case HandlerDirection.East:
+      return "e-resize";
+    case HandlerDirection.North:
+      return "n-resize";
+    case HandlerDirection.NorthEast:
+      return "ne-resize";
+    case HandlerDirection.NorthWest:
+      return "nw-resize";
+    case HandlerDirection.South:
+      return "s-resize";
+    case HandlerDirection.SouthEast:
+      return "se-resize";
+    case HandlerDirection.SouthWest:
+      return "sw-resize";
+    case HandlerDirection.West:
+      return "w-resize";
+    default:
+      return "pointer";
+  }
+};
+const fromRectangle = (r) => [
+  {
+    position: fromRectangle$1(r),
+    direction: HandlerDirection.NorthWest,
+  },
+  {
+    position: pointSumSemigroup.concat(fromRectangle$1(r), {
+      x: r.width,
+      y: 0,
+    }),
+    direction: HandlerDirection.NorthEast,
+  },
+  {
+    position: pointSumSemigroup.concat(fromRectangle$1(r), {
+      x: 0,
+      y: r.height,
+    }),
+    direction: HandlerDirection.SouthWest,
+  },
+  {
+    position: pointSumSemigroup.concat(fromRectangle$1(r), {
+      x: r.width,
+      y: r.height,
+    }),
+    direction: HandlerDirection.SouthEast,
+  },
+];
+
+export { HandlerDirection as H, isLeft as a, identity as b, flow as c, struct as d, last as e, first as f, pointSumSemigroup as g, fromRectangle$1 as h, isNone as i, isSome as j, fromRectangle as k, left as l, pointDiffSemigroup as m, none as n, fromMouseEvent as o, pipe as p, getCursorValue as q, right as r, some as s, tuple as t };

package/dist/esm/{app-globals-0a626970.js → app-globals-b6113170.js}

@@ -1,4 +1,4 @@
-import { E as Env } from './index-0ccfcee5.js';
+import { E as Env } from './index-3e85e294.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

package/dist/esm/cropper-handler.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h, H as Host } from './index-3e85e294.js';
+import { q as getCursorValue } from './Handler-639a4cb3.js';
+
+const cropperHandlerCss = ":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}";
+
+let CropperHandler = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 }));
+  }
+};
+CropperHandler.style = cropperHandlerCss;
+
+export { CropperHandler as cropper_handler };