pushfeedback 0.1.42 → 0.1.44

package/dist/collection/index.js

@@ -1 +1 @@
-export * from './components';
+export * from './components';

package/dist/components/feedback-button.js

@@ -1,163 +1,175 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './feedback-modal2.js';
 
-const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index)}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-family:var(--feedback-font-family);font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-family:var(--feedback-font-family);font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}";
+const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index)}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-family:var(--feedback-font-family);font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-family:var(--feedback-font-family);font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-text-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-text-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}";
 
-const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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;
-  }
-  connectedCallback() {
-    this.feedbackModal = document.createElement('feedback-modal');
-    const props = [
-      'sessionId',
-      '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);
-  }
-  isSafariBrowser() {
-    const isSafari = /safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent);
-    return isSafari;
-  }
-  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();
-    }
-  }
-  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 === 'dark' && (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: "feather feather-edit-3" }, 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" })))), !this.hideIcon && this.buttonStyle === 'light' && (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: "#0070F4", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-edit-3" }, 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))));
-  }
-  get el() { return this; }
-  static get style() { return feedbackButtonCss; }
-}, [1, "feedback-button", {
-    "sessionId": [1, "session-id"],
-    "customFont": [4, "custom-font"],
-    "errorMessage": [1, "error-message"],
-    "errorMessage403": [1, "error-message-4-0-3"],
-    "errorMessage404": [1, "error-message-4-0-4"],
-    "modalTitle": [1, "modal-title"],
-    "modalTitleSuccess": [1, "modal-title-success"],
-    "modalTitleError": [1, "modal-title-error"],
-    "modalPosition": [1, "modal-position"],
-    "sendButtonText": [1, "send-button-text"],
-    "successMessage": [1, "success-message"],
-    "project": [1],
-    "screenshotButtonText": [1, "screenshot-button-text"],
-    "screenshotTopbarText": [1, "screenshot-topbar-text"],
-    "hideEmail": [4, "hide-email"],
-    "emailAddress": [1, "email-address"],
-    "emailPlaceholder": [1, "email-placeholder"],
-    "messagePlaceholder": [1, "message-placeholder"],
-    "hideRating": [4, "hide-rating"],
-    "rating": [2],
-    "ratingMode": [1, "rating-mode"],
-    "ratingPlaceholder": [1, "rating-placeholder"],
-    "ratingStarsPlaceholder": [1, "rating-stars-placeholder"],
-    "buttonStyle": [1, "button-style"],
-    "buttonPosition": [1, "button-position"],
-    "hideIcon": [4, "hide-icon"],
-    "hideScreenshotButton": [4, "hide-screenshot-button"],
-    "hidePrivacyPolicy": [4, "hide-privacy-policy"],
-    "privacyPolicyText": [1, "privacy-policy-text"],
-    "fetchData": [4, "fetch-data"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["feedback-button", "feedback-modal"];
-  components.forEach(tagName => { switch (tagName) {
-    case "feedback-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FeedbackButton$1);
-      }
-      break;
-    case "feedback-modal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 && (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))));
+  }
+  get el() { return this; }
+  static get style() { return feedbackButtonCss; }
+}, [1, "feedback-button", {
+    "sessionId": [1537, "session-id"],
+    "customFont": [4, "custom-font"],
+    "errorMessage": [1, "error-message"],
+    "errorMessage403": [1, "error-message-4-0-3"],
+    "errorMessage404": [1, "error-message-4-0-4"],
+    "modalTitle": [1, "modal-title"],
+    "modalTitleSuccess": [1, "modal-title-success"],
+    "modalTitleError": [1, "modal-title-error"],
+    "modalPosition": [1, "modal-position"],
+    "sendButtonText": [1, "send-button-text"],
+    "successMessage": [1, "success-message"],
+    "project": [1],
+    "screenshotButtonText": [1, "screenshot-button-text"],
+    "screenshotTopbarText": [1, "screenshot-topbar-text"],
+    "hideEmail": [4, "hide-email"],
+    "emailAddress": [1, "email-address"],
+    "emailPlaceholder": [1, "email-placeholder"],
+    "messagePlaceholder": [1, "message-placeholder"],
+    "hideRating": [4, "hide-rating"],
+    "rating": [2],
+    "ratingMode": [1, "rating-mode"],
+    "ratingPlaceholder": [1, "rating-placeholder"],
+    "ratingStarsPlaceholder": [1, "rating-stars-placeholder"],
+    "buttonStyle": [1, "button-style"],
+    "buttonPosition": [1, "button-position"],
+    "hideIcon": [4, "hide-icon"],
+    "hideScreenshotButton": [4, "hide-screenshot-button"],
+    "hidePrivacyPolicy": [4, "hide-privacy-policy"],
+    "privacyPolicyText": [1, "privacy-policy-text"],
+    "fetchData": [4, "fetch-data"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["feedback-button", "feedback-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "feedback-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FeedbackButton$1);
+      }
+      break;
+    case "feedback-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const FeedbackButton = FeedbackButton$1;