vviinn-widgets 2.18.21 → 2.19.1

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js

@@ -1,7 +1,8 @@
 var __rest = (this && this.__rest) || function (s, e) {
   var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function")
     for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
       if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
@@ -9,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
   return t;
 };
-import { Component, Host, h, State, Prop, Element, Watch, Listen, Event, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { state } from "../../store/store";
 import { imageSearchState } from "../../store/imageSearch.store";
 import * as O from "fp-ts/lib/Option";
@@ -70,20 +71,6 @@ const notNan = (n) => !isNaN(n);
  */
 export class VviinnVpsWidget {
   constructor() {
-    /** @internal */
-    this.apiPath = "https://api.vviinn.com";
-    /** When true modal window with widget will be shown */
-    this.active = false;
-    /** Currency sign will shown after price */
-    this.currencySign = "€";
-    /** Locale for currency formatting */
-    this.locale = "de-DE";
-    /** Set true when showing the widget in button */
-    this.showingInButton = false;
-    this.slidePosition = 0;
-    this.width = 0;
-    this.wrongImageFormat = false;
-    this.trackingDeactivated = false;
     this.imageSource = null;
     this.setTrackingDeactivated = (result) => {
       if (result.status === "rejected") {
@@ -99,6 +86,21 @@ export class VviinnVpsWidget {
         widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
       };
     };
+    this.token = undefined;
+    this.apiPath = "https://api.vviinn.com";
+    this.active = false;
+    this.currencySign = "€";
+    this.locale = "de-DE";
+    this.campaignId = undefined;
+    this.showingInButton = false;
+    this.buttonElementId = undefined;
+    this.buttonPressed = undefined;
+    this.mode = "modal";
+    this.resetVpsButton = undefined;
+    this.slidePosition = 0;
+    this.width = 0;
+    this.wrongImageFormat = false;
+    this.trackingDeactivated = false;
   }
   componentDidLoad() {
     const slots = this.el.querySelectorAll("[slot]");
@@ -114,6 +116,14 @@ export class VviinnVpsWidget {
       document.body.style.overflow = this.overflow;
     }
   }
+  buttonPressedWatcher(pressed) {
+    if (!pressed)
+      return;
+    if (this.mode === "modal") {
+      this.active = true;
+      this.vviinnWidgetOpen.emit(this.getBasicEventData());
+    }
+  }
   trackProductView({ detail }) {
     if (this.trackingDeactivated)
       return;
@@ -178,14 +188,8 @@ export class VviinnVpsWidget {
     this.id = this.el.id;
   }
   componentWillLoad() {
-    var _a;
     slotChangeListener(this, this.el);
-    this.vviinnWidgetLoad.emit({
-      widgetType: "VPS",
-      campaignTypeId: "VPS",
-      campaignTypeName: campaignTypeNames["VPS"],
-      widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
-    });
+    this.vviinnWidgetLoad.emit(this.getBasicEventData());
   }
   trackOpenEvent() {
     if (this.trackingDeactivated)
@@ -257,422 +261,495 @@ export class VviinnVpsWidget {
   }
   render() {
     var _a;
-    return (h(Host, null,
-      !this.showingInButton && h(SlotSkeleton, null),
-      h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, exportparts: "secondary-action, title, close-button, example-images" },
-        h("vviinn-slider", { showBullets: false, position: this.slidePosition },
-          h("vviinn-slide", { class: { "start-page": true } },
-            h("div", { class: {
-                error: this.haveErrors(),
-                "start-page_block": true,
-              } },
-              h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => (this.wrongImageFormat = false) }),
-              h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, handler: () => (imageSearchState.serverError = false) }),
-              h("vviinn-teaser", { class: { hidden: this.haveErrors() } }),
-              h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onVviinnImageUpload: () => this.handleImageSelection("upload"), onVviinnNoResult: () => (this.wrongImageFormat = true), basicEventData: this.getBasicEventData(), part: "select-image_button" },
-                h("span", { slot: "upload-button-text", class: "upload-button-content" },
-                  h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" },
-                    h("defs", null),
-                    h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }),
-                    h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M14.5 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })),
-                  h("slot", { name: "vviinn-image-upload-button-text" },
-                    h("span", null, "Kamera oder Bild ausw\u00E4hlen")))),
-              h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })),
-            h("div", { id: "onboarding-block", class: "start-page_block" },
-              h("div", { class: "onboarding-wrapper" },
-                h("vviinn-onboarding", null),
-                h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))),
-          h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } },
-            h("div", { class: "image-wrapper" },
-              h("vviinn-image-view", { basicEventData: this.getBasicEventData() }),
-              h("div", { class: "filters-wrapper" },
-                h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))),
-            h("div", { id: "results-block", class: "products-wrapper" },
-              h("div", { class: {
-                  "nothing-found": true,
-                  hidden: imageSearchState.results.length > 0,
-                } },
-                h("vviinn-empty-results", null),
-                h("vviinn-onboarding", null)),
-              h("div", { class: {
-                  hidden: imageSearchState.results.length <= 0,
-                  products: true,
-                } }, imageSearchState.results.map((p, i) => {
-                var _a;
-                return (h("vviinn-product-card", { key: p.productId, hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card", campaignTypeId: "VPS", index: i, widgetElementId: this.id, buttonElementId: this.buttonElementId }));
-              }))))))));
+    return (h(Host, null, !this.showingInButton && h(SlotSkeleton, null), h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, hideBackButton: this.mode === "upload", exportparts: "secondary-action, title, close-button, example-images" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: { "start-page": true } }, h("div", { class: {
+        error: this.haveErrors(),
+        "start-page_block": true,
+      } }, h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => (this.wrongImageFormat = false) }), h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, handler: () => (imageSearchState.serverError = false) }), h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onVviinnImageUpload: () => {
+        this.active = true;
+        this.handleImageSelection("upload");
+        if (this.mode === "upload") {
+          this.vviinnWidgetOpen.emit(this.getBasicEventData());
+        }
+      }, onVviinnNoResult: () => (this.wrongImageFormat = true), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "select-image_button", startUpload: this.buttonPressed &&
+        this.showingInButton &&
+        this.mode === "upload" }, h("span", { slot: "upload-button-text", class: "upload-button-content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, h("defs", null), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M14.5 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), h("div", { id: "onboarding-block", class: "start-page_block" }, h("div", { class: "onboarding-wrapper" }, h("vviinn-onboarding", null), h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), h("div", { id: "results-block", class: "products-wrapper" }, h("div", { class: {
+        "nothing-found": true,
+        hidden: imageSearchState.results.length > 0,
+      } }, h("vviinn-empty-results", null), h("vviinn-onboarding", null)), h("div", { class: {
+        hidden: imageSearchState.results.length <= 0,
+        products: true,
+      } }, imageSearchState.results.map((p, i) => {
+      var _a;
+      return (h("vviinn-product-card", { key: p.productId, hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card", campaignTypeId: "VPS", index: i, widgetElementId: this.id, buttonElementId: this.buttonElementId }));
+    }))))))));
   }
   static get is() { return "vviinn-vps-widget"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-vps-widget.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-vps-widget.css"]
-  }; }
-  static get properties() { return {
-    "token": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "vviinn customer token"
-      },
-      "attribute": "token",
-      "reflect": false
-    },
-    "apiPath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "internal"
-          }],
-        "text": ""
-      },
-      "attribute": "api-path",
-      "reflect": false,
-      "defaultValue": "\"https://api.vviinn.com\""
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true modal window with widget will be shown"
-      },
-      "attribute": "active",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "currencySign": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Currency sign will shown after price"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-vps-widget.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-vps-widget.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "token": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "vviinn customer token"
+        },
+        "attribute": "token",
+        "reflect": false
       },
-      "attribute": "currency-sign",
-      "reflect": false,
-      "defaultValue": "\"\u20AC\""
-    },
-    "locale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "apiPath": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "api-path",
+        "reflect": false,
+        "defaultValue": "\"https://api.vviinn.com\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Locale for currency formatting"
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true modal window with widget will be shown"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "\"de-DE\""
-    },
-    "campaignId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "currencySign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Currency sign will shown after price"
+        },
+        "attribute": "currency-sign",
+        "reflect": false,
+        "defaultValue": "\"\u20AC\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Campaign using for visual search"
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Locale for currency formatting"
+        },
+        "attribute": "locale",
+        "reflect": false,
+        "defaultValue": "\"de-DE\""
       },
-      "attribute": "campaign-id",
-      "reflect": false
-    },
-    "showingInButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "campaignId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Campaign using for visual search"
+        },
+        "attribute": "campaign-id",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Set true when showing the widget in button"
+      "showingInButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set true when showing the widget in button"
+        },
+        "attribute": "showing-in-button",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "showing-in-button",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "buttonElementId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "buttonElementId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "button-element-id",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "internal"
-          }],
-        "text": ""
+      "buttonPressed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "button-pressed",
+        "reflect": false
       },
-      "attribute": "button-element-id",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "slidePosition": {},
-    "width": {},
-    "wrongImageFormat": {},
-    "trackingDeactivated": {}
-  }; }
-  static get events() { return [{
-      "method": "globalSlotsChanged",
-      "name": "globalSlotsChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "internal"
-          }],
-        "text": ""
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"modal\" | \"upload\"",
+          "resolved": "\"modal\" | \"upload\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "\"modal\""
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "resetVpsButton": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        }
       }
-    }, {
-      "method": "vviinnWidgetLoad",
-      "name": "vviinnWidgetLoad",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
+    };
+  }
+  static get states() {
+    return {
+      "slidePosition": {},
+      "width": {},
+      "wrongImageFormat": {},
+      "trackingDeactivated": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "globalSlotsChanged",
+        "name": "globalSlotsChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnWidgetLoad",
+        "name": "vviinnWidgetLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
         }
-      }
-    }, {
-      "method": "vviinnWidgetClose",
-      "name": "vviinnWidgetClose",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "vviinnProductClick",
-      "name": "vviinnProductClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "vviinnProductView",
-      "name": "vviinnProductView",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "vviinnProductLoad",
-      "name": "vviinnProductLoad",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "vviinnImageUpload",
-      "name": "vviinnImageUpload",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "vviinnImageCrop",
-      "name": "vviinnImageCrop",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "vviinnSelectObject",
-      "name": "vviinnSelectObject",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "vviinnSelectFilter",
-      "name": "vviinnSelectFilter",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "vviinnNoResult",
-      "name": "vviinnNoResult",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+      }, {
+        "method": "vviinnWidgetOpen",
+        "name": "vviinnWidgetOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
+        }
+      }, {
+        "method": "vviinnWidgetClose",
+        "name": "vviinnWidgetClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnProductClick",
+        "name": "vviinnProductClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnProductView",
+        "name": "vviinnProductView",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnProductLoad",
+        "name": "vviinnProductLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnImageUpload",
+        "name": "vviinnImageUpload",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnImageCrop",
+        "name": "vviinnImageCrop",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnSelectObject",
+        "name": "vviinnSelectObject",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnSelectFilter",
+        "name": "vviinnSelectFilter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "vviinnNoResult",
+        "name": "vviinnNoResult",
+        "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": "active",
-      "methodName": "activeWatcher"
-    }]; }
-  static get listeners() { return [{
-      "name": "vviinnProductView",
-      "method": "trackProductView",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "vviinnProductClick",
-      "method": "trackProductClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "vviinnImageCrop",
-      "method": "trachSearchAreaChanges",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "vviinnSelectObject",
-      "method": "trackDetectedObject",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "vviinnSelectFilter",
-      "method": "trackFilter",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "active",
+        "methodName": "activeWatcher"
+      }, {
+        "propName": "buttonPressed",
+        "methodName": "buttonPressedWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "vviinnProductView",
+        "method": "trackProductView",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "vviinnProductClick",
+        "method": "trackProductClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "vviinnImageCrop",
+        "method": "trachSearchAreaChanges",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "vviinnSelectObject",
+        "method": "trackDetectedObject",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "vviinnSelectFilter",
+        "method": "trackFilter",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }