pushfeedback 0.1.70 → 0.1.72

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

@@ -0,0 +1,1238 @@
+import { h } from '@stencil/core';
+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();
+      if (this.isEmailRequired && !this.formEmail) {
+        return;
+      }
+      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,
+          metadata: this.metadata,
+          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;
+        // Remove highlight from ALL selected elements
+        document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
+          el.classList.remove('feedback-modal-element-selected');
+        });
+        // Reset form states
+        this.formSuccess = false;
+        this.formError = false;
+        this.formErrorStatus = 500;
+        this.formMessage = '';
+        this.formEmail = '';
+        this.resetOverflow();
+      }, 200);
+    };
+    // Handle screenshot events from canvas editor
+    this.handleScreenshotReady = (event) => {
+      this.encodedScreenshot = event.detail.screenshot;
+      this.showModal = true;
+      this.takingScreenshot = false;
+      this.showCanvasEditor = false;
+      this.autoStartCapture = false;
+    };
+    this.handleScreenshotCancelled = () => {
+      this.showModal = true;
+      this.takingScreenshot = false;
+      this.showCanvasEditor = false;
+      this.autoStartCapture = false;
+    };
+    this.handleScreenshotError = (event) => {
+      console.error('Screenshot error:', event.detail.error);
+      // Store error message to display in feedback modal
+      this.screenshotError = event.detail.error;
+      this.showScreenshotError = true;
+      // Close canvas editor and return to feedback modal
+      this.showModal = true;
+      this.takingScreenshot = false;
+      this.showCanvasEditor = false;
+      this.autoStartCapture = false;
+      // Auto-hide error after 8 seconds
+      setTimeout(() => {
+        this.showScreenshotError = false;
+      }, 8000);
+    };
+    // Trigger screenshot capture
+    this.openScreenShot = () => {
+      this.showModal = false;
+      this.takingScreenshot = true;
+      this.autoStartCapture = true; // Auto-start new screenshot
+      this.showCanvasEditor = true;
+    };
+    // Open canvas editor for existing screenshot
+    this.openCanvasEditor = (event) => {
+      if (event) {
+        event.stopPropagation();
+      }
+      this.showModal = false;
+      this.autoStartCapture = false; // Don't auto-start, just edit existing
+      this.showCanvasEditor = 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 = -1;
+    this.overlayVisible = false;
+    this.isAnimating = false;
+    this.takingScreenshot = false;
+    this.showScreenshotError = false;
+    this.screenshotError = '';
+    this.showCanvasEditor = false;
+    this.autoStartCapture = false;
+    this.customFont = false;
+    this.emailAddress = '';
+    this.hideEmail = false;
+    this.isEmailRequired = false;
+    this.ratingMode = 'thumbs';
+    this.hasSelectedElement = false;
+    this.hidePrivacyPolicy = true;
+    this.hideRating = false;
+    this.hideScreenshotButton = false;
+    this.project = '';
+    this.showScreenshotMode = false;
+    this.showScreenshotTopBar = false;
+    this.showModal = false;
+    this.rating = undefined;
+    this.metadata = 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.successMessage = '';
+    this.screenshotEditorTitle = 'Edit screenshot';
+    this.screenshotEditorCancelText = 'Cancel';
+    this.screenshotEditorSaveText = 'Save';
+    this.screenshotAttachedText = 'Screenshot attached';
+    this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTakingText = 'Taking screenshot...';
+    this.screenshotEditTextButtonText = 'Edit text';
+    this.screenshotSizeLabelText = 'Size:';
+    this.screenshotBorderLabelText = 'Border:';
+    this.screenshotEditTextPromptText = 'Edit text:';
+    this.screenshotErrorGeneral = 'Failed to capture screenshot.';
+    this.screenshotErrorPermission = 'Permission denied. Please allow screen sharing to take screenshots.';
+    this.screenshotErrorNotSupported = 'Screen capture is not supported in this browser.';
+    this.screenshotErrorNotFound = 'No screen sources available for capture.';
+    this.screenshotErrorCancelled = 'Screenshot capture was cancelled.';
+    this.screenshotErrorBrowserNotSupported = 'Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.';
+    this.screenshotErrorUnexpected = 'An unexpected error occurred. Please try again.';
+  }
+  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() {
+    // Just clean up any stray classes, don't add/remove during screenshot
+    document.documentElement.classList.remove('feedback-modal-screenshot-open');
+    document.documentElement.classList.remove('feedback-modal-screenshot-open--scroll');
+    document.documentElement.classList.remove('feedback-modal-screenshot-closing');
+  }
+  handleMessageInput(event) {
+    this.formMessage = event.target.value;
+  }
+  handleEmailInput(event) {
+    this.formEmail = event.target.value;
+  }
+  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.showCanvasEditor && (h("canvas-editor", { ref: (el) => this.canvasEditorRef = el, "canvas-editor-title": this.screenshotEditorTitle, "canvas-editor-cancel-text": this.screenshotEditorCancelText, "canvas-editor-save-text": this.screenshotEditorSaveText, "screenshot-taking-text": this.screenshotTakingText, "screenshot-attached-text": this.screenshotAttachedText, "screenshot-button-text": this.screenshotButtonText, "auto-start-screenshot": this.autoStartCapture, "existing-screenshot": this.encodedScreenshot || '', "edit-text-button-text": this.screenshotEditTextButtonText, "size-label-text": this.screenshotSizeLabelText, "border-label-text": this.screenshotBorderLabelText, "edit-text-prompt-text": this.screenshotEditTextPromptText, "screenshot-error-general": this.screenshotErrorGeneral, "screenshot-error-permission": this.screenshotErrorPermission, "screenshot-error-not-supported": this.screenshotErrorNotSupported, "screenshot-error-not-found": this.screenshotErrorNotFound, "screenshot-error-cancelled": this.screenshotErrorCancelled, "screenshot-error-browser-not-supported": this.screenshotErrorBrowserNotSupported, "screenshot-error-unexpected": this.screenshotErrorUnexpected, onScreenshotReady: this.handleScreenshotReady, onScreenshotCancelled: this.handleScreenshotCancelled, onScreenshotFailed: this.handleScreenshotError })), this.showScreenshotError && (h("div", { class: "screenshot-error-notification" }, h("div", { class: "screenshot-error-content" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15" })), h("span", null, this.screenshotError), h("button", { class: "error-close-btn", onClick: () => this.showScreenshotError = false, title: "Close" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, 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, required: this.isEmailRequired }))), 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 || this.takingScreenshot }, this.encodedScreenshot && (h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (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.takingScreenshot && (h("div", { class: "screenshot-loading" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather-loader" }, h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })))), this.takingScreenshot ? this.screenshotTakingText :
+      this.encodedScreenshot ? this.screenshotAttachedText : 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) {
+      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"
+      },
+      "emailAddress": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "email-address",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "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"
+      },
+      "isEmailRequired": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-email-required",
+        "reflect": false,
+        "defaultValue": "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'"
+      },
+      "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"
+      },
+      "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"
+      },
+      "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"
+      },
+      "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"
+      },
+      "project": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "project",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "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"
+      },
+      "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"
+      },
+      "rating": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rating",
+        "reflect": false
+      },
+      "metadata": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "''",
+          "resolved": "\"\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "metadata",
+        "reflect": false
+      },
+      "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"
+      },
+      "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)'"
+      },
+      "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.'"
+      },
+      "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'"
+      },
+      "footerText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "footer-text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "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'"
+      },
+      "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'"
+      },
+      "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!'"
+      },
+      "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!'"
+      },
+      "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>.\""
+      },
+      "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?'"
+      },
+      "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": "''"
+      },
+      "screenshotEditorTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-editor-title",
+        "reflect": false,
+        "defaultValue": "'Edit screenshot'"
+      },
+      "screenshotEditorCancelText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-editor-cancel-text",
+        "reflect": false,
+        "defaultValue": "'Cancel'"
+      },
+      "screenshotEditorSaveText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-editor-save-text",
+        "reflect": false,
+        "defaultValue": "'Save'"
+      },
+      "screenshotAttachedText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-attached-text",
+        "reflect": false,
+        "defaultValue": "'Screenshot attached'"
+      },
+      "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'"
+      },
+      "screenshotTakingText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-taking-text",
+        "reflect": false,
+        "defaultValue": "'Taking screenshot...'"
+      },
+      "screenshotEditTextButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-edit-text-button-text",
+        "reflect": false,
+        "defaultValue": "'Edit text'"
+      },
+      "screenshotSizeLabelText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-size-label-text",
+        "reflect": false,
+        "defaultValue": "'Size:'"
+      },
+      "screenshotBorderLabelText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-border-label-text",
+        "reflect": false,
+        "defaultValue": "'Border:'"
+      },
+      "screenshotEditTextPromptText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-edit-text-prompt-text",
+        "reflect": false,
+        "defaultValue": "'Edit text:'"
+      },
+      "screenshotErrorGeneral": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-error-general",
+        "reflect": false,
+        "defaultValue": "'Failed to capture screenshot.'"
+      },
+      "screenshotErrorPermission": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-error-permission",
+        "reflect": false,
+        "defaultValue": "'Permission denied. Please allow screen sharing to take screenshots.'"
+      },
+      "screenshotErrorNotSupported": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-error-not-supported",
+        "reflect": false,
+        "defaultValue": "'Screen capture is not supported in this browser.'"
+      },
+      "screenshotErrorNotFound": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-error-not-found",
+        "reflect": false,
+        "defaultValue": "'No screen sources available for capture.'"
+      },
+      "screenshotErrorCancelled": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-error-cancelled",
+        "reflect": false,
+        "defaultValue": "'Screenshot capture was cancelled.'"
+      },
+      "screenshotErrorBrowserNotSupported": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-error-browser-not-supported",
+        "reflect": false,
+        "defaultValue": "'Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.'"
+      },
+      "screenshotErrorUnexpected": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-error-unexpected",
+        "reflect": false,
+        "defaultValue": "'An unexpected error occurred. Please try again.'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "sending": {},
+      "formMessage": {},
+      "formEmail": {},
+      "formSuccess": {},
+      "formVerification": {},
+      "formError": {},
+      "formErrorStatus": {},
+      "encodedScreenshot": {},
+      "isPrivacyChecked": {},
+      "whitelabel": {},
+      "selectedRating": {},
+      "overlayVisible": {},
+      "isAnimating": {},
+      "takingScreenshot": {},
+      "showScreenshotError": {},
+      "screenshotError": {},
+      "showCanvasEditor": {},
+      "autoStartCapture": {}
+    };
+  }
+  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": []
+        }
+      }
+    };
+  }
+}