vviinn-widgets 2.18.21 → 2.19.1

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, State, Listen, Element, Event, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { CameraIcon } from "../vviinn-icons";
 import { SlotSkeleton } from "../customized-slots";
 import { campaignTypeNames } from "../../campaign/Campaign";
@@ -37,361 +37,397 @@ import { campaignTypeNames } from "../../campaign/Campaign";
  */
 export class VviinnVpsButton {
   constructor() {
-    /** Currency sign will shown after price */
+    this.getBasicEventData = () => {
+      return {
+        widgetType: "VPS",
+        campaignTypeId: "VPS",
+        campaignTypeName: campaignTypeNames["VPS"],
+        widgetId: this.el.id,
+      };
+    };
+    this.token = undefined;
     this.currencySign = "€";
-    /** Locale for currency formatting */
     this.locale = "de-DE";
-    /** Add style to the button */
+    this.campaignId = undefined;
     this.addStyle = false;
-    this.pressed = false;
+    this.mode = "modal";
+    this.apiPath = undefined;
+    this.buttonPressed = false;
   }
   handleModalClosed() {
-    this.pressed = false;
+    this.buttonPressed = false;
   }
   componentDidLoad() {
     const slots = this.el.querySelectorAll("[slot]");
     this.globalSlotsChanged.emit(Array.from(slots));
   }
-  handleKeyDown(ev) {
-    if (ev.code !== "Enter" && ev.code !== "Space")
-      return;
-    this.pressed = true;
-  }
   handleClick() {
-    this.pressed = true;
+    this.buttonPressed = true;
+  }
+  resetButton() {
+    this.buttonPressed = false;
   }
   render() {
-    return (h(Host, { tabindex: "0", role: "button", pressed: this.pressed, onKeyDown: (ev) => this.handleKeyDown(ev) },
-      h("vviinn-button", { onClick: () => {
-          this.handleClick();
-          this.vviinnWidgetOpen.emit({
-            widgetType: "VPS",
-            campaignTypeId: "VPS",
-            campaignTypeName: campaignTypeNames["VPS"],
-            widgetId: this.el.id,
-          });
-        }, addStyle: this.addStyle, part: "vviinn-button" },
-        h("slot", null,
-          h(CameraIcon, null))),
-      h(SlotSkeleton, null),
-      h("vviinn-vps-widget", { active: this.pressed, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId, showingInButton: true, buttonElementId: this.el.id })));
+    return (h(Host, { tabindex: "0", role: "button" }, h("vviinn-button", { onClick: () => {
+        this.handleClick();
+      }, addStyle: this.addStyle, part: "vviinn-button" }, h("slot", null, h(CameraIcon, null))), h(SlotSkeleton, null), h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id })));
   }
   static get is() { return "vviinn-vps-button"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-vps-button.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-vps-button.css"]
-  }; }
-  static get properties() { return {
-    "token": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "vviinn customer token"
-      },
-      "attribute": "token",
-      "reflect": 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"
-      },
-      "attribute": "currency-sign",
-      "reflect": false,
-      "defaultValue": "\"\u20AC\""
-    },
-    "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\""
-    },
-    "campaignId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Campaign using for visual search"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-vps-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-vps-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "token": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "vviinn customer token"
+        },
+        "attribute": "token",
+        "reflect": false
       },
-      "attribute": "campaign-id",
-      "reflect": false
-    },
-    "addStyle": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "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": false,
-      "docs": {
-        "tags": [],
-        "text": "Add style to the button"
+      "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": "add-style",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "apiPath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string",
-        "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": false,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "internal"
-          }],
-        "text": ""
+      "addStyle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add style to the button"
+        },
+        "attribute": "add-style",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "api-path",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "pressed": {}
-  }; }
-  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": [],
+          "text": "Add style to the button"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "\"modal\""
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "apiPath": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "api-path",
+        "reflect": false
       }
-    }, {
-      "method": "vviinnWidgetOpen",
-      "name": "vviinnWidgetOpen",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted when vps-button clicked"
-      },
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
+    };
+  }
+  static get states() {
+    return {
+      "buttonPressed": {}
+    };
+  }
+  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": "vviinnWidgetOpen",
+        "name": "vviinnWidgetOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when vps-button clicked"
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
         }
-      }
-    }, {
-      "method": "vviinnWidgetLoad",
-      "name": "vviinnWidgetLoad",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "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": "vviinnImageUpload",
+        "name": "vviinnImageUpload",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fires when user select file"
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
+        }
+      }, {
+        "method": "vviinnNoResult",
+        "name": "vviinnNoResult",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fires when user select file that no .jpg, .jpeg or png"
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
+        }
+      }, {
+        "method": "vviinnWidgetLoad",
+        "name": "vviinnWidgetLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "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": "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": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "vviinnWidgetClose",
-      "method": "handleModalClosed",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "vviinnWidgetClose",
+        "method": "handleModalClosed",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }