pushfeedback 0.1.45 → 0.1.46

package/dist/collection/components/feedback-button/feedback-button.js

@@ -0,0 +1,671 @@
+import { Host, h } from '@stencil/core';
+export class FeedbackButton {
+  constructor() {
+    this.sessionId = "";
+    this.customFont = false;
+    this.errorMessage = "Please try again later.";
+    this.errorMessage403 = "The request URL does not match the one defined in PushFeedback for this project.";
+    this.errorMessage404 = "We could not find the provided project id in PushFeedback.";
+    this.modalTitle = 'Share your feedback';
+    this.modalTitleSuccess = 'Thanks for your feedback!';
+    this.modalTitleError = "Oops!";
+    this.modalPosition = 'center';
+    this.sendButtonText = 'Send';
+    this.successMessage = "";
+    this.project = '';
+    this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTopbarText = 'Select an element on this page';
+    this.hideEmail = false;
+    this.emailAddress = '';
+    this.emailPlaceholder = 'Email address (optional)';
+    this.messagePlaceholder = 'Comments';
+    this.hideRating = false;
+    this.rating = undefined;
+    this.ratingMode = 'thumbs';
+    this.ratingPlaceholder = 'Was this page helpful?';
+    this.ratingStarsPlaceholder = 'How would you rate this page?';
+    this.buttonStyle = 'default';
+    this.buttonPosition = 'default';
+    this.hideIcon = false;
+    this.hideScreenshotButton = false;
+    this.hidePrivacyPolicy = true;
+    this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
+    this.fetchData = true;
+  }
+  componentWillLoad() {
+    if (!this.sessionId) {
+      let storedSessionId = localStorage.getItem('pushfeedback_sessionid');
+      if (!storedSessionId) {
+        storedSessionId = this.generateRandomSessionId();
+        localStorage.setItem('pushfeedback_sessionid', storedSessionId);
+        this.sessionId = storedSessionId;
+      }
+    }
+  }
+  componentDidLoad() {
+    if (this.buttonPosition === 'center-right') {
+      const buttonContent = this.el.shadowRoot.querySelector('.feedback-button-content');
+      let adjustement = 0;
+      if (this.isSafariBrowser()) {
+        adjustement = 10;
+      }
+      buttonContent.style.right = `${(buttonContent.offsetWidth + adjustement) / 2 * -1}px`;
+    }
+    if (!this.customFont) {
+      this.loadInterFont();
+    }
+  }
+  connectedCallback() {
+    this.feedbackModal = document.createElement('feedback-modal');
+    const props = [
+      'customFont',
+      'errorMessage',
+      'errorMessage403',
+      'errorMessage404',
+      'modalTitle',
+      'modalTitleSuccess',
+      'modalTitleError',
+      'modalPosition',
+      'sendButtonText',
+      'successMessage',
+      'project',
+      'screenshotButtonText',
+      'screenshotTopbarText',
+      'hideEmail',
+      'emailAddress',
+      'emailPlaceholder',
+      'messagePlaceholder',
+      'hideRating',
+      'rating',
+      'ratingMode',
+      'ratingPlaceholder',
+      'ratingStarsPlaceholder',
+      'hideScreenshotButton',
+      'hidePrivacyPolicy',
+      'privacyPolicyText',
+      'fetchData'
+    ];
+    props.forEach(prop => {
+      this.feedbackModal[prop] = this[prop];
+    });
+    document.body.appendChild(this.feedbackModal);
+  }
+  disconnectedCallback() {
+    document.body.removeChild(this.feedbackModal);
+  }
+  generateRandomSessionId(length = 16) {
+    return Math.random().toString(36).substr(2, length);
+  }
+  isSafariBrowser() {
+    const isSafari = /safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent);
+    return isSafari;
+  }
+  loadInterFont() {
+    const link = document.createElement('link');
+    link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap';
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+  }
+  showModal() {
+    this.feedbackModal.showModal = true;
+  }
+  render() {
+    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (h("span", { class: "feedback-button-content-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
+  }
+  static get is() { return "feedback-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["feedback-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["feedback-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sessionId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "session-id",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "customFont": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-font",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false,
+        "defaultValue": "\"Please try again later.\""
+      },
+      "errorMessage403": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message-4-0-3",
+        "reflect": false,
+        "defaultValue": "\"The request URL does not match the one defined in PushFeedback for this project.\""
+      },
+      "errorMessage404": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message-4-0-4",
+        "reflect": false,
+        "defaultValue": "\"We could not find the provided project id in PushFeedback.\""
+      },
+      "modalTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-title",
+        "reflect": false,
+        "defaultValue": "'Share your feedback'"
+      },
+      "modalTitleSuccess": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-title-success",
+        "reflect": false,
+        "defaultValue": "'Thanks for your feedback!'"
+      },
+      "modalTitleError": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-title-error",
+        "reflect": false,
+        "defaultValue": "\"Oops!\""
+      },
+      "modalPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-position",
+        "reflect": false,
+        "defaultValue": "'center'"
+      },
+      "sendButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "send-button-text",
+        "reflect": false,
+        "defaultValue": "'Send'"
+      },
+      "successMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "success-message",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "project": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "project",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "screenshotButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-button-text",
+        "reflect": false,
+        "defaultValue": "'Add a screenshot'"
+      },
+      "screenshotTopbarText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-topbar-text",
+        "reflect": false,
+        "defaultValue": "'Select an element on this page'"
+      },
+      "hideEmail": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-email",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "emailAddress": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "email-address",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "emailPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "email-placeholder",
+        "reflect": false,
+        "defaultValue": "'Email address (optional)'"
+      },
+      "messagePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "message-placeholder",
+        "reflect": false,
+        "defaultValue": "'Comments'"
+      },
+      "hideRating": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-rating",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rating": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rating",
+        "reflect": false
+      },
+      "ratingMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rating-mode",
+        "reflect": false,
+        "defaultValue": "'thumbs'"
+      },
+      "ratingPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rating-placeholder",
+        "reflect": false,
+        "defaultValue": "'Was this page helpful?'"
+      },
+      "ratingStarsPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rating-stars-placeholder",
+        "reflect": false,
+        "defaultValue": "'How would you rate this page?'"
+      },
+      "buttonStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-style",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "buttonPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-position",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "hideIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hideScreenshotButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-screenshot-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hidePrivacyPolicy": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-privacy-policy",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "privacyPolicyText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "privacy-policy-text",
+        "reflect": false,
+        "defaultValue": "\"I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.\""
+      },
+      "fetchData": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fetch-data",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}