pushfeedback 0.1.63 → 0.1.64

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

@@ -7,39 +7,39 @@ const FeedbackButton = class {
     registerInstance(this, hostRef);
     this.feedbackSent = createEvent(this, "feedbackSent", 7);
     this.feedbackError = createEvent(this, "feedbackError", 7);
-    this.sessionId = "";
+    this.buttonPosition = 'default';
+    this.buttonStyle = 'default';
+    this.hideIcon = false;
+    this.hideMobile = false;
+    this.sessionId = '';
+    this.submit = false;
     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.fetchData = true;
+    this.hideEmail = false;
+    this.hidePrivacyPolicy = true;
     this.hideRating = false;
+    this.hideScreenshotButton = false;
+    this.modalPosition = 'center';
+    this.project = '';
     this.rating = undefined;
     this.ratingMode = 'thumbs';
-    this.ratingPlaceholder = 'Was this page helpful?';
-    this.ratingStarsPlaceholder = 'How would you rate this page?';
+    this.emailPlaceholder = 'Email address (optional)';
+    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.footerText = '';
-    this.buttonStyle = 'default';
-    this.buttonPosition = 'default';
-    this.hideIcon = false;
-    this.hideScreenshotButton = false;
-    this.hidePrivacyPolicy = true;
-    this.hideMobile = false;
+    this.messagePlaceholder = 'Comments';
+    this.modalTitle = 'Share your feedback';
+    this.modalTitleError = 'Oops!';
+    this.modalTitleSuccess = 'Thanks for your feedback!';
     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;
-    this.submit = false;
+    this.ratingPlaceholder = 'Was this page helpful?';
+    this.ratingStarsPlaceholder = 'How would you rate this page?';
+    this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTopbarText = 'Select an element on this page';
+    this.sendButtonText = 'Send';
+    this.successMessage = '';
   }
   componentWillLoad() {
     if (!this.sessionId) {
@@ -58,7 +58,7 @@ const FeedbackButton = class {
       if (this.isSafariBrowser()) {
         adjustement = 5;
       }
-      buttonContent.style.right = `${(buttonContent.offsetWidth + adjustement) / 2 * -1}px`;
+      buttonContent.style.right = `${((buttonContent.offsetWidth + adjustement) / 2) * -1}px`;
     }
     if (!this.customFont) {
       this.loadInterFont();
@@ -68,34 +68,34 @@ const FeedbackButton = class {
     this.feedbackModal = document.createElement('feedback-modal');
     const props = [
       'customFont',
+      'emailAddress',
+      'fetchData',
+      'hideEmail',
+      'hidePrivacyPolicy',
+      'hideRating',
+      'hideScreenshotButton',
+      'modalPosition',
+      'project',
+      'rating',
+      'ratingMode',
+      'emailPlaceholder',
       'errorMessage',
       'errorMessage403',
       'errorMessage404',
+      'footerText',
+      'messagePlaceholder',
       'modalTitle',
-      'modalTitleSuccess',
       'modalTitleError',
-      'modalPosition',
-      'sendButtonText',
-      'successMessage',
-      'project',
-      'screenshotButtonText',
-      'screenshotTopbarText',
-      'hideEmail',
-      'emailAddress',
-      'emailPlaceholder',
-      'messagePlaceholder',
-      'hideRating',
-      'rating',
-      'ratingMode',
+      'modalTitleSuccess',
+      'privacyPolicyText',
       'ratingPlaceholder',
       'ratingStarsPlaceholder',
-      'footerText',
-      'hideScreenshotButton',
-      'hidePrivacyPolicy',
-      'privacyPolicyText',
-      'fetchData',
+      'screenshotButtonText',
+      'screenshotTopbarText',
+      'sendButtonText',
+      'successMessage',
     ];
-    props.forEach(prop => {
+    props.forEach((prop) => {
       this.feedbackModal[prop] = this[prop];
     });
     document.body.appendChild(this.feedbackModal);
@@ -131,15 +131,15 @@ const FeedbackButton = class {
         project: this.project,
         rating: this.rating || -1,
         ratingMode: this.ratingMode,
-        message: "",
+        message: '',
         session: localStorage.getItem('pushfeedback_sessionid') || '',
       };
       const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
         method: 'POST',
         body: JSON.stringify(body),
         headers: {
-          'Content-Type': 'application/json'
-        }
+          'Content-Type': 'application/json',
+        },
       });
       if (res.status === 201) {
         const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
@@ -8971,7 +8971,7 @@ const FeedbackModal = class {
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = setTimeout(() => {
         document.documentElement.classList.remove('feedback-modal-screenshot-closing');
-        document.documentElement.style.top = "";
+        document.documentElement.style.top = '';
         window.removeEventListener('scroll', this.onScrollDebounced);
       }, 200);
     };
@@ -8998,8 +8998,8 @@ const FeedbackModal = class {
           method: 'POST',
           body: JSON.stringify(body),
           headers: {
-            'Content-Type': 'application/json'
-          }
+            'Content-Type': 'application/json',
+          },
         });
         if (res.status === 201) {
           const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
@@ -9083,7 +9083,7 @@ const FeedbackModal = class {
       const rect = elementUnder.getBoundingClientRect();
       this.screenshotModal.style.display = '';
       // Get the bounding box of the element selected
-      this.elementSelected.style.position = "absolute";
+      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`;
@@ -9091,33 +9091,33 @@ const FeedbackModal = class {
       this.elementSelected.classList.add('feedback-modal-element-hover');
       // Set the background color of nonselected areas
       // Top
-      this.topSide.style.position = "absolute";
+      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)";
+      this.topSide.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
       // Left
-      this.leftSide.style.position = "absolute";
+      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)";
+      this.leftSide.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
       // Bottom
-      this.bottomSide.style.position = "absolute";
+      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)";
+      this.bottomSide.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
       // Right
-      this.rightSide.style.position = "absolute";
+      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)";
+      this.rightSide.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
       // Restore the visibility of the screenshot-modal
       this.screenshotModal.style.backgroundColor = 'transparent';
     };
@@ -9169,36 +9169,36 @@ const FeedbackModal = class {
     this.overlayVisible = false;
     this.isAnimating = false;
     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.hideEmail = false;
     this.ratingMode = 'thumbs';
-    this.ratingPlaceholder = 'Was this page helpful?';
-    this.ratingStarsPlaceholder = 'How would you rate this page?';
-    this.footerText = '';
-    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.hideRating = false;
+    this.hideScreenshotButton = false;
+    this.project = '';
+    this.showScreenshotMode = false;
+    this.showScreenshotTopBar = false;
+    this.showModal = false;
+    this.rating = undefined;
     this.fetchData = true;
+    this.emailPlaceholder = 'Email address (optional)';
+    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.messagePlaceholder = 'Comments';
+    this.footerText = '';
+    this.modalPosition = 'center';
+    this.modalTitle = 'Share your feedback';
+    this.modalTitleError = 'Oops!';
+    this.modalTitleSuccess = 'Thanks for your feedback!';
+    this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
+    this.ratingPlaceholder = 'Was this page helpful?';
+    this.ratingStarsPlaceholder = 'How would you rate this page?';
+    this.sendButtonText = 'Send';
+    this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTopbarText = 'Select an element on this page';
+    this.successMessage = '';
   }
   componentWillLoad() {
     if (this.fetchData)
@@ -9207,7 +9207,7 @@ const FeedbackModal = class {
     if (this.rating) {
       this.selectedRating = this.rating;
     }
-    if (this.ratingMode == "thumbs" && this.rating == 0) {
+    if (this.ratingMode == 'thumbs' && this.rating == 0) {
       this.selectedRating = 5;
     }
   }
@@ -9246,11 +9246,12 @@ const FeedbackModal = class {
           y: window.scrollY,
           width: window.innerWidth,
           height: window.innerHeight,
-        }).then(canvas => {
+        })
+          .then((canvas) => {
           const dataUrl = canvas.toDataURL();
           resolve(dataUrl);
         })
-          .catch(error => {
+          .catch((error) => {
           console.error(error);
           reject(error);
         });
@@ -9267,16 +9268,22 @@ const FeedbackModal = class {
     this.selectedRating = newRating;
   }
   render() {
-    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, 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.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? '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) => {
+    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, 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.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? '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) => {
+      } }, 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) => {
+      } }, 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("div", { class: "feedback-modal-success" }, 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" }, h("div", { class: "feedback-logo", style: { display: this.whitelabel ? 'none' : 'block' } }, "Powered by ", h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")), this.footerText && h("div", { class: "feedback-footer-text" }, h("span", { innerHTML: this.footerText })))))));
+      } }, 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("div", { class: "feedback-modal-success" }, 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" }, h("div", { class: "feedback-logo", style: { display: this.whitelabel ? 'none' : 'block' } }, "Powered by", ' ', h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")), this.footerText && (h("div", { class: "feedback-footer-text" }, h("span", { innerHTML: this.footerText }))))))));
   }
   componentDidRender() {
     if (this.showModal) {

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["feedback-button_2",[[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"],"footerText":[1,"footer-text"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideMobile":[4,"hide-mobile"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"],"submit":[4]}],[1,"feedback-modal",{"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"],"footerText":[1,"footer-text"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"hasSelectedElement":[1540,"has-selected-element"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"openModal":[64]}]]]], options);
+  return bootstrapLazy([["feedback-button_2",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"openModal":[64]}]]]], options);
   });
 };
 

package/dist/esm/pushfeedback.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["feedback-button_2",[[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"],"footerText":[1,"footer-text"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideMobile":[4,"hide-mobile"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"],"submit":[4]}],[1,"feedback-modal",{"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"],"footerText":[1,"footer-text"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"hasSelectedElement":[1540,"has-selected-element"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"openModal":[64]}]]]], options);
+  return bootstrapLazy([["feedback-button_2",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"openModal":[64]}]]]], options);
 });