pushfeedback 0.1.42 → 0.1.44

package/dist/esm/feedback-button_2.entry.js

@@ -1,111 +1,123 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-deb00b84.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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 getElement(this); }
-};
+const FeedbackButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
 FeedbackButton.style = feedbackButtonCss;
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -7952,311 +7964,299 @@ var html2canvas = createCommonjsModule(function (module, exports) {
 //# sourceMappingURL=html2canvas.js.map
 });
 
-const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;font-family:var(--feedback-modal-content-font-family);left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%);width:100%;z-index:var(--feedback-modal-content-z-index)}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-family:var(--feedback-modal-header-font-family);font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-family:var(--feedback-modal-content-font-family);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-family:var(--feedback-modal-content-font-family);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px;font-family:var(--feedback-modal-content-font-family)}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo{align-items:center;display:flex;justify-content:center;margin-top:5px}.feedback-logo a{margin-left:3px}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;font-family:var(--feedback-modal-content-font-family);left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:1px solid var(--feedback-modal-element-selected-border-color)}@media screen and (min-width: 768px){.feedback-modal-content{max-width:600px}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:300px;left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:300px;left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}}";
+const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;font-family:var(--feedback-modal-content-font-family);left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%);width:100%;z-index:var(--feedback-modal-content-z-index)}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-family:var(--feedback-modal-header-font-family);font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-family:var(--feedback-modal-content-font-family);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-family:var(--feedback-modal-content-font-family);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px;font-family:var(--feedback-modal-content-font-family)}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo{align-items:center;display:flex;justify-content:center;margin-top:5px}.feedback-logo a{margin-left:3px}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;font-family:var(--feedback-modal-content-font-family);left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:1px solid var(--feedback-modal-element-selected-border-color)}@media screen and (min-width: 768px){.feedback-modal-content{max-width:600px}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:300px;left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:300px;left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}}";
 
-const FeedbackModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onScrollDebounced = () => {
-      clearTimeout(this.scrollTimeout);
-      this.scrollTimeout = setTimeout(() => {
-        document.documentElement.classList.remove('feedback-modal-screenshot-closing');
-        document.documentElement.style.top = "";
-        window.removeEventListener('scroll', this.onScrollDebounced);
-      }, 200);
-    };
-    this.handleSubmit = async (event) => {
-      event.preventDefault();
-      this.resetOverflow();
-      this.showScreenshotMode = false;
-      this.showScreenshotTopBar = false;
-      this.showModal = false;
-      this.sending = true;
-      try {
-        const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
-          method: 'POST',
-          body: JSON.stringify({
-            url: window.location.href,
-            message: this.formMessage,
-            email: this.formEmail,
-            project: this.project,
-            screenshot: this.encodedScreenshot,
-            rating: this.selectedRating,
-            ratingMode: this.ratingMode,
-            verification: this.formVerification,
-            session: this.session,
-          }),
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        });
-        if (res.status === 201) {
-          this.formSuccess = true;
-          this.formError = false;
-        }
-        else {
-          this.formSuccess = false;
-          this.formError = true;
-          this.formErrorStatus = res.status;
-        }
-      }
-      catch (error) {
-        console.log(error);
-        this.formSuccess = false;
-        this.formError = true;
-        this.formErrorStatus = 500;
-      }
-      finally {
-        this.sending = false;
-        this.showModal = true;
-      }
-    };
-    this.close = () => {
-      this.sending = false;
-      this.showModal = false;
-      this.showScreenshotMode = false;
-      this.showScreenshotTopBar = false;
-      this.hasSelectedElement = false;
-      this.encodedScreenshot = null;
-      this.formSuccess = false;
-      this.formError = false;
-      this.formErrorStatus = 500;
-      this.formMessage = '';
-      this.formEmail = '';
-      this.resetOverflow();
-    };
-    this.openScreenShot = () => {
-      this.hasSelectedElement = false;
-      this.showModal = false;
-      this.showScreenshotMode = true;
-      this.showScreenshotTopBar = true;
-      this.encodedScreenshot = null;
-      if (window.innerWidth > document.documentElement.clientWidth) {
-        document.documentElement.classList.add('feedback-modal-screenshot-open--scroll');
-      }
-      const scrollY = window.scrollY;
-      document.documentElement.style.top = `-${scrollY}px`;
-      window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
-      document.documentElement.classList.add('feedback-modal-screenshot-open');
-    };
-    this.closeScreenShot = () => {
-      this.showModal = false;
-      this.showScreenshotMode = false;
-      this.showScreenshotTopBar = false;
-      this.hasSelectedElement = false;
-      this.encodedScreenshot = null;
-      this.resetOverflow();
-    };
-    this.handleMouseOverScreenShot = (event) => {
-      event.preventDefault();
-      if (this.hasSelectedElement)
-        return;
-      const borderOffset = 2;
-      this.screenshotModal.style.display = 'none';
-      const elementUnder = document.elementFromPoint(event.clientX, event.clientY);
-      const rect = elementUnder.getBoundingClientRect();
-      this.screenshotModal.style.display = '';
-      // Get the bounding box of the element selected
-      this.elementSelected.style.position = "absolute";
-      this.elementSelected.style.left = `${rect.left}px`;
-      this.elementSelected.style.top = `${rect.top}px`;
-      this.elementSelected.style.width = `${rect.width}px`;
-      this.elementSelected.style.height = `${rect.height}px`;
-      this.elementSelected.classList.add('feedback-modal-element-hover');
-      // Set the background color of nonselected areas
-      // Top
-      this.topSide.style.position = "absolute";
-      this.topSide.style.left = `${rect.left}px`;
-      this.topSide.style.top = '0px';
-      this.topSide.style.width = `${rect.width + borderOffset}px`;
-      this.topSide.style.height = `${rect.top}px`;
-      this.topSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
-      // Left
-      this.leftSide.style.position = "absolute";
-      this.leftSide.style.left = '0px';
-      this.leftSide.style.top = '0px';
-      this.leftSide.style.width = `${rect.left}px`;
-      this.leftSide.style.height = '100vh';
-      this.leftSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
-      // Bottom
-      this.bottomSide.style.position = "absolute";
-      this.bottomSide.style.left = `${rect.left}px`;
-      this.bottomSide.style.top = `${rect.bottom + borderOffset}px`;
-      this.bottomSide.style.width = `${rect.width + borderOffset}px`;
-      this.bottomSide.style.height = '100vh';
-      this.bottomSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
-      // Right
-      this.rightSide.style.position = "absolute";
-      this.rightSide.style.left = `${rect.right + borderOffset}px`;
-      this.rightSide.style.top = '0px';
-      this.rightSide.style.width = '100%';
-      this.rightSide.style.height = '100vh';
-      this.rightSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
-      // Restore the visibility of the screenshot-modal
-      this.screenshotModal.style.backgroundColor = 'transparent';
-    };
-    this.handleMouseClickedSelectedElement = async (event) => {
-      event.preventDefault();
-      if (!this.elementSelected) {
-        return;
-      }
-      this.hasSelectedElement = true;
-      this.elementSelected.classList.add('feedback-modal-element-selected');
-      // Get the top position including the scroll offset
-      const rectTop = this.elementSelected.getBoundingClientRect().top;
-      const topWithScroll = rectTop + window.scrollY;
-      // Move the element with the scroll offset
-      this.elementSelected.style.top = `${topWithScroll}px`;
-      // Clone the selected element and append it to the body
-      const clonedElementSelected = this.elementSelected.cloneNode(true);
-      document.body.appendChild(clonedElementSelected);
-      // Reset the top position of the original element
-      this.elementSelected.style.top = `${rectTop}px`;
-      this.showScreenshotTopBar = false;
-      this.showModal = false;
-      try {
-        const dataUrl = await this.captureScreenshot();
-        console.log('Screenshot captured');
-        this.encodedScreenshot = dataUrl;
-      }
-      catch (error) {
-        console.error('Failed to capture screenshot:', error);
-        this.hasSelectedElement = false;
-      }
-      finally {
-        // Remove the cloned element and show the modal again
-        document.body.removeChild(clonedElementSelected);
-        this.showModal = true;
-      }
-    };
-    this.sending = false;
-    this.formMessage = '';
-    this.formEmail = '';
-    this.formSuccess = false;
-    this.formVerification = '';
-    this.formError = false;
-    this.formErrorStatus = 500;
-    this.encodedScreenshot = undefined;
-    this.isPrivacyChecked = false;
-    this.whitelabel = false;
-    this.selectedRating = 0;
-    this.session = '';
-    this.sessionId = "";
-    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.showModal = false;
-    this.showScreenshotMode = false;
-    this.showScreenshotTopBar = false;
-    this.hasSelectedElement = 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.fetchData)
-      this.fetchProjectData();
-    this.formEmail = this.emailAddress;
-    if (!this.sessionId) {
-      this.session = this.generateRandomSessionId();
-    }
-    else {
-      this.session = this.sessionId;
-    }
-    console.log(this.session);
-    if (this.rating) {
-      this.selectedRating = this.rating;
-    }
-    if (this.ratingMode == "thumbs" && this.rating == 0) {
-      this.selectedRating = 5;
-    }
-  }
-  async fetchProjectData() {
-    try {
-      const response = await fetch('https://app.pushfeedback.com/api/projects/' + this.project + '/');
-      const data = await response.json();
-      this.whitelabel = data.whitelabel;
-    }
-    catch (error) {
-      console.log(error);
-    }
-  }
-  generateRandomSessionId(length = 16) {
-    return Math.random().toString(36).substr(2, length);
-  }
-  resetOverflow() {
-    document.documentElement.classList.remove('feedback-modal-screenshot-open');
-    document.documentElement.classList.remove('feedback-modal-screenshot-open--scroll');
-    document.documentElement.classList.add('feedback-modal-screenshot-closing');
-    window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
-    window.addEventListener('scroll', this.onScrollDebounced);
-  }
-  handleMessageInput(event) {
-    this.formMessage = event.target.value;
-  }
-  handleEmailInput(event) {
-    this.formEmail = event.target.value;
-  }
-  captureScreenshot() {
-    return new Promise((resolve, reject) => {
-      requestAnimationFrame(() => {
-        html2canvas(document.body, {
-          x: window.scrollX,
-          y: window.scrollY,
-          width: window.innerWidth,
-          height: window.innerHeight,
-        }).then(canvas => {
-          const dataUrl = canvas.toDataURL();
-          resolve(dataUrl);
-        })
-          .catch(error => {
-          console.error(error);
-          reject(error);
-        });
-      });
-    });
-  }
-  handleCheckboxChange(event) {
-    this.isPrivacyChecked = event.target.checked;
-  }
-  handleVerification(event) {
-    this.formVerification = event.target.value;
-  }
-  handleRatingChange(newRating) {
-    this.selectedRating = newRating;
-  }
-  render() {
-    return (h("div", { class: 'feedback-modal-wrapper' }, this.showScreenshotMode && (h("div", { class: "feedback-modal-screenshot", ref: el => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, h("div", { class: "feedback-modal-screenshot-element-selected", ref: el => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), h("div", { class: "top-side", ref: el => (this.topSide = el) }), h("div", { class: "left-side", ref: el => (this.leftSide = el) }), h("div", { class: "bottom-side", ref: el => (this.bottomSide = el) }), h("div", { class: "right-side", ref: el => (this.rightSide = el) }), this.showScreenshotTopBar && (h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, h("span", null, this.screenshotTopbarText), h("span", { class: "feedback-modal-screenshot-close" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (h("div", { class: "feedback-overlay" })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.showModal ? 'feedback-modal-content--open' : ''}`, ref: el => (this.modalContent = el) }, h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (h("span", null, this.modalTitle)) : this.formSuccess ? (h("span", null, this.modalTitleSuccess)) : h("span", null, this.modalTitleError), h("button", { class: "feedback-modal-close", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
-        event.preventDefault();
-        this.handleRatingChange(1);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { title: "No", class: `feedback-modal-rating-button ${this.selectedRating === 5 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
-        event.preventDefault();
-        this.handleRatingChange(5);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, class: `feedback-modal-rating-button ${this.selectedRating >= rating ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
-        event.preventDefault();
-        this.handleRatingChange(rating);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? "feedback-modal-button--active" : ""}`, onClick: this.openScreenShot, disabled: this.sending }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" })), this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("p", { class: "feedback-modal-message" }, this.successMessage)) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message" }, this.errorMessage)) : h("span", null)), h("div", { class: "feedback-modal-footer", style: { display: this.whitelabel ? 'none' : 'block' } }, h("div", { class: "feedback-logo" }, "Powered by ", h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")))))));
-  }
-};
+const FeedbackModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onScrollDebounced = () => {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = setTimeout(() => {
+        document.documentElement.classList.remove('feedback-modal-screenshot-closing');
+        document.documentElement.style.top = "";
+        window.removeEventListener('scroll', this.onScrollDebounced);
+      }, 200);
+    };
+    this.handleSubmit = async (event) => {
+      event.preventDefault();
+      this.resetOverflow();
+      this.showScreenshotMode = false;
+      this.showScreenshotTopBar = false;
+      this.showModal = false;
+      this.sending = true;
+      try {
+        const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
+          method: 'POST',
+          body: JSON.stringify({
+            url: window.location.href,
+            message: this.formMessage,
+            email: this.formEmail,
+            project: this.project,
+            screenshot: this.encodedScreenshot,
+            rating: this.selectedRating,
+            ratingMode: this.ratingMode,
+            verification: this.formVerification,
+            session: localStorage.getItem('pushfeedback_sessionid') || '',
+          }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        });
+        if (res.status === 201) {
+          this.formSuccess = true;
+          this.formError = false;
+        }
+        else {
+          this.formSuccess = false;
+          this.formError = true;
+          this.formErrorStatus = res.status;
+        }
+      }
+      catch (error) {
+        console.log(error);
+        this.formSuccess = false;
+        this.formError = true;
+        this.formErrorStatus = 500;
+      }
+      finally {
+        this.sending = false;
+        this.showModal = true;
+      }
+    };
+    this.close = () => {
+      this.sending = false;
+      this.showModal = false;
+      this.showScreenshotMode = false;
+      this.showScreenshotTopBar = false;
+      this.hasSelectedElement = false;
+      this.encodedScreenshot = null;
+      this.formSuccess = false;
+      this.formError = false;
+      this.formErrorStatus = 500;
+      this.formMessage = '';
+      this.formEmail = '';
+      this.resetOverflow();
+    };
+    this.openScreenShot = () => {
+      this.hasSelectedElement = false;
+      this.showModal = false;
+      this.showScreenshotMode = true;
+      this.showScreenshotTopBar = true;
+      this.encodedScreenshot = null;
+      if (window.innerWidth > document.documentElement.clientWidth) {
+        document.documentElement.classList.add('feedback-modal-screenshot-open--scroll');
+      }
+      const scrollY = window.scrollY;
+      document.documentElement.style.top = `-${scrollY}px`;
+      window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
+      document.documentElement.classList.add('feedback-modal-screenshot-open');
+    };
+    this.closeScreenShot = () => {
+      this.showModal = false;
+      this.showScreenshotMode = false;
+      this.showScreenshotTopBar = false;
+      this.hasSelectedElement = false;
+      this.encodedScreenshot = null;
+      this.resetOverflow();
+    };
+    this.handleMouseOverScreenShot = (event) => {
+      event.preventDefault();
+      if (this.hasSelectedElement)
+        return;
+      const borderOffset = 2;
+      this.screenshotModal.style.display = 'none';
+      const elementUnder = document.elementFromPoint(event.clientX, event.clientY);
+      const rect = elementUnder.getBoundingClientRect();
+      this.screenshotModal.style.display = '';
+      // Get the bounding box of the element selected
+      this.elementSelected.style.position = "absolute";
+      this.elementSelected.style.left = `${rect.left}px`;
+      this.elementSelected.style.top = `${rect.top}px`;
+      this.elementSelected.style.width = `${rect.width}px`;
+      this.elementSelected.style.height = `${rect.height}px`;
+      this.elementSelected.classList.add('feedback-modal-element-hover');
+      // Set the background color of nonselected areas
+      // Top
+      this.topSide.style.position = "absolute";
+      this.topSide.style.left = `${rect.left}px`;
+      this.topSide.style.top = '0px';
+      this.topSide.style.width = `${rect.width + borderOffset}px`;
+      this.topSide.style.height = `${rect.top}px`;
+      this.topSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
+      // Left
+      this.leftSide.style.position = "absolute";
+      this.leftSide.style.left = '0px';
+      this.leftSide.style.top = '0px';
+      this.leftSide.style.width = `${rect.left}px`;
+      this.leftSide.style.height = '100vh';
+      this.leftSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
+      // Bottom
+      this.bottomSide.style.position = "absolute";
+      this.bottomSide.style.left = `${rect.left}px`;
+      this.bottomSide.style.top = `${rect.bottom + borderOffset}px`;
+      this.bottomSide.style.width = `${rect.width + borderOffset}px`;
+      this.bottomSide.style.height = '100vh';
+      this.bottomSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
+      // Right
+      this.rightSide.style.position = "absolute";
+      this.rightSide.style.left = `${rect.right + borderOffset}px`;
+      this.rightSide.style.top = '0px';
+      this.rightSide.style.width = '100%';
+      this.rightSide.style.height = '100vh';
+      this.rightSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
+      // Restore the visibility of the screenshot-modal
+      this.screenshotModal.style.backgroundColor = 'transparent';
+    };
+    this.handleMouseClickedSelectedElement = async (event) => {
+      event.preventDefault();
+      if (!this.elementSelected) {
+        return;
+      }
+      this.hasSelectedElement = true;
+      this.elementSelected.classList.add('feedback-modal-element-selected');
+      // Get the top position including the scroll offset
+      const rectTop = this.elementSelected.getBoundingClientRect().top;
+      const topWithScroll = rectTop + window.scrollY;
+      // Move the element with the scroll offset
+      this.elementSelected.style.top = `${topWithScroll}px`;
+      // Clone the selected element and append it to the body
+      const clonedElementSelected = this.elementSelected.cloneNode(true);
+      document.body.appendChild(clonedElementSelected);
+      // Reset the top position of the original element
+      this.elementSelected.style.top = `${rectTop}px`;
+      this.showScreenshotTopBar = false;
+      this.showModal = false;
+      try {
+        const dataUrl = await this.captureScreenshot();
+        console.log('Screenshot captured');
+        this.encodedScreenshot = dataUrl;
+      }
+      catch (error) {
+        console.error('Failed to capture screenshot:', error);
+        this.hasSelectedElement = false;
+      }
+      finally {
+        // Remove the cloned element and show the modal again
+        document.body.removeChild(clonedElementSelected);
+        this.showModal = true;
+      }
+    };
+    this.sending = false;
+    this.formMessage = '';
+    this.formEmail = '';
+    this.formSuccess = false;
+    this.formVerification = '';
+    this.formError = false;
+    this.formErrorStatus = 500;
+    this.encodedScreenshot = undefined;
+    this.isPrivacyChecked = false;
+    this.whitelabel = false;
+    this.selectedRating = 0;
+    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.showModal = false;
+    this.showScreenshotMode = false;
+    this.showScreenshotTopBar = false;
+    this.hasSelectedElement = 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.fetchData)
+      this.fetchProjectData();
+    this.formEmail = this.emailAddress;
+    if (this.rating) {
+      this.selectedRating = this.rating;
+    }
+    if (this.ratingMode == "thumbs" && this.rating == 0) {
+      this.selectedRating = 5;
+    }
+  }
+  async fetchProjectData() {
+    try {
+      const response = await fetch('https://app.pushfeedback.com/api/projects/' + this.project + '/');
+      const data = await response.json();
+      this.whitelabel = data.whitelabel;
+    }
+    catch (error) {
+      console.log(error);
+    }
+  }
+  resetOverflow() {
+    document.documentElement.classList.remove('feedback-modal-screenshot-open');
+    document.documentElement.classList.remove('feedback-modal-screenshot-open--scroll');
+    document.documentElement.classList.add('feedback-modal-screenshot-closing');
+    window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
+    window.addEventListener('scroll', this.onScrollDebounced);
+  }
+  handleMessageInput(event) {
+    this.formMessage = event.target.value;
+  }
+  handleEmailInput(event) {
+    this.formEmail = event.target.value;
+  }
+  captureScreenshot() {
+    return new Promise((resolve, reject) => {
+      requestAnimationFrame(() => {
+        html2canvas(document.body, {
+          x: window.scrollX,
+          y: window.scrollY,
+          width: window.innerWidth,
+          height: window.innerHeight,
+        }).then(canvas => {
+          const dataUrl = canvas.toDataURL();
+          resolve(dataUrl);
+        })
+          .catch(error => {
+          console.error(error);
+          reject(error);
+        });
+      });
+    });
+  }
+  handleCheckboxChange(event) {
+    this.isPrivacyChecked = event.target.checked;
+  }
+  handleVerification(event) {
+    this.formVerification = event.target.value;
+  }
+  handleRatingChange(newRating) {
+    this.selectedRating = newRating;
+  }
+  render() {
+    return (h("div", { class: 'feedback-modal-wrapper' }, this.showScreenshotMode && (h("div", { class: "feedback-modal-screenshot", ref: el => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, h("div", { class: "feedback-modal-screenshot-element-selected", ref: el => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), h("div", { class: "top-side", ref: el => (this.topSide = el) }), h("div", { class: "left-side", ref: el => (this.leftSide = el) }), h("div", { class: "bottom-side", ref: el => (this.bottomSide = el) }), h("div", { class: "right-side", ref: el => (this.rightSide = el) }), this.showScreenshotTopBar && (h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, h("span", null, this.screenshotTopbarText), h("span", { class: "feedback-modal-screenshot-close" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (h("div", { class: "feedback-overlay" })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.showModal ? 'feedback-modal-content--open' : ''}`, ref: el => (this.modalContent = el) }, h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (h("span", null, this.modalTitle)) : this.formSuccess ? (h("span", null, this.modalTitleSuccess)) : h("span", null, this.modalTitleError), h("button", { class: "feedback-modal-close", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
+        event.preventDefault();
+        this.handleRatingChange(1);
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { title: "No", class: `feedback-modal-rating-button ${this.selectedRating === 5 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
+        event.preventDefault();
+        this.handleRatingChange(5);
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, class: `feedback-modal-rating-button ${this.selectedRating >= rating ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
+        event.preventDefault();
+        this.handleRatingChange(rating);
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? "feedback-modal-button--active" : ""}`, onClick: this.openScreenShot, disabled: this.sending }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" })), this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("p", { class: "feedback-modal-message" }, this.successMessage)) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message" }, this.errorMessage)) : h("span", null)), h("div", { class: "feedback-modal-footer", style: { display: this.whitelabel ? 'none' : 'block' } }, h("div", { class: "feedback-logo" }, "Powered by ", h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")))))));
+  }
+};
 FeedbackModal.style = feedbackModalCss;
 
 export { FeedbackButton as feedback_button, FeedbackModal as feedback_modal };