pushfeedback 0.1.55 → 0.1.57

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

@@ -1,975 +0,0 @@
-import { h } from '@stencil/core';
-import html2canvas from 'html2canvas-pro';
-export class FeedbackModal {
-  constructor() {
-    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 body = {
-          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') || '',
-        };
-        const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
-          method: 'POST',
-          body: JSON.stringify(body),
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        });
-        if (res.status === 201) {
-          const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
-          this.feedbackSent.emit({ feedback: feedback_with_id });
-          this.formSuccess = true;
-          this.formError = false;
-        }
-        else {
-          const errorText = await res.text();
-          const response = {
-            status: res.status,
-            message: errorText,
-          };
-          this.feedbackError.emit({ error: response });
-          this.formSuccess = false;
-          this.formError = true;
-          this.formErrorStatus = res.status;
-        }
-      }
-      catch (error) {
-        const response = {
-          status: 500,
-          message: error,
-        };
-        this.feedbackError.emit({ error: response });
-        this.formSuccess = false;
-        this.formError = true;
-        this.formErrorStatus = 500;
-      }
-      finally {
-        this.sending = false;
-        this.showModal = true;
-      }
-    };
-    this.close = () => {
-      this.isAnimating = false;
-      setTimeout(() => {
-        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();
-      }, 200);
-    };
-    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.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.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.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');
-    // Only restore scroll position if we previously modified it
-    if (document.documentElement.style.top) {
-      window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
-      document.documentElement.style.top = '';
-    }
-    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.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) => {
-        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("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("span", { class: "feedback-footer-text", innerHTML: this.footerText })))))));
-  }
-  componentDidRender() {
-    if (this.showModal) {
-      requestAnimationFrame(() => {
-        this.overlayVisible = true;
-      });
-    }
-  }
-  async openModal() {
-    this.showModal = true;
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        this.isAnimating = true;
-      });
-    });
-  }
-  static get is() { return "feedback-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["feedback-modal.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["feedback-modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "customFont": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "custom-font",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "errorMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-message",
-        "reflect": false,
-        "defaultValue": "\"Please try again later.\""
-      },
-      "errorMessage403": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-message-4-0-3",
-        "reflect": false,
-        "defaultValue": "\"The request URL does not match the one defined in PushFeedback for this project.\""
-      },
-      "errorMessage404": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-message-4-0-4",
-        "reflect": false,
-        "defaultValue": "\"We could not find the provided project ID in PushFeedback.\""
-      },
-      "modalTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "modal-title",
-        "reflect": false,
-        "defaultValue": "'Share your feedback'"
-      },
-      "modalTitleSuccess": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "modal-title-success",
-        "reflect": false,
-        "defaultValue": "'Thanks for your feedback!'"
-      },
-      "modalTitleError": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "modal-title-error",
-        "reflect": false,
-        "defaultValue": "\"Oops!\""
-      },
-      "modalPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "modal-position",
-        "reflect": false,
-        "defaultValue": "'center'"
-      },
-      "sendButtonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "send-button-text",
-        "reflect": false,
-        "defaultValue": "'Send'"
-      },
-      "successMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "success-message",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "project": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "project",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "screenshotButtonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "screenshot-button-text",
-        "reflect": false,
-        "defaultValue": "'Add a screenshot'"
-      },
-      "screenshotTopbarText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "screenshot-topbar-text",
-        "reflect": false,
-        "defaultValue": "'Select an element on this page'"
-      },
-      "hideEmail": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-email",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "emailAddress": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "email-address",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "emailPlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "email-placeholder",
-        "reflect": false,
-        "defaultValue": "'Email address (optional)'"
-      },
-      "messagePlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "message-placeholder",
-        "reflect": false,
-        "defaultValue": "'Comments'"
-      },
-      "hideRating": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-rating",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "rating": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "rating",
-        "reflect": false
-      },
-      "ratingMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "rating-mode",
-        "reflect": false,
-        "defaultValue": "'thumbs'"
-      },
-      "ratingPlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "rating-placeholder",
-        "reflect": false,
-        "defaultValue": "'Was this page helpful?'"
-      },
-      "ratingStarsPlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "rating-stars-placeholder",
-        "reflect": false,
-        "defaultValue": "'How would you rate this page?'"
-      },
-      "footerText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "footer-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "showModal": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-modal",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showScreenshotMode": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-screenshot-mode",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showScreenshotTopBar": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-screenshot-top-bar",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "hasSelectedElement": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "has-selected-element",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "hideScreenshotButton": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-screenshot-button",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hidePrivacyPolicy": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-privacy-policy",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "privacyPolicyText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "privacy-policy-text",
-        "reflect": false,
-        "defaultValue": "\"I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.\""
-      },
-      "fetchData": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "fetch-data",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "sending": {},
-      "formMessage": {},
-      "formEmail": {},
-      "formSuccess": {},
-      "formVerification": {},
-      "formError": {},
-      "formErrorStatus": {},
-      "encodedScreenshot": {},
-      "isPrivacyChecked": {},
-      "whitelabel": {},
-      "selectedRating": {},
-      "overlayVisible": {},
-      "isAnimating": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "feedbackSent",
-        "name": "feedbackSent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ feedback: any }",
-          "resolved": "{ feedback: any; }",
-          "references": {}
-        }
-      }, {
-        "method": "feedbackError",
-        "name": "feedbackError",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ error: any }",
-          "resolved": "{ error: any; }",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "openModal": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}