pushfeedback 0.1.83 → 0.1.85

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

@@ -8,8 +8,11 @@ export class FeedbackButton {
     this.sessionId = '';
     this.metadata = '';
     this.submit = false;
+    this.apiKey = '';
+    this.clickOutsideClose = true;
     this.customFont = false;
     this.emailAddress = '';
+    this.historyClose = true;
     this.isEmailRequired = false;
     this.fetchData = true;
     this.hideEmail = false;
@@ -22,6 +25,7 @@ export class FeedbackButton {
     this.ratingMode = 'thumbs';
     this.emailPlaceholder = 'Email address (optional)';
     this.errorMessage = 'Please try again later.';
+    this.errorMessage401 = 'This project requires a valid API key to submit feedback. Check the api-key attribute.';
     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 = '';
@@ -67,13 +71,19 @@ export class FeedbackButton {
     }
   }
   componentDidLoad() {
-    if (this.buttonPosition === 'center-right') {
+    if (this.buttonPosition === 'center-right' || this.buttonPosition === 'center-left') {
       const buttonContent = this.el.shadowRoot.querySelector('.feedback-button-content');
       let adjustement = 0;
       if (this.isSafariBrowser()) {
         adjustement = 5;
       }
-      buttonContent.style.right = `${((buttonContent.offsetWidth + adjustement) / 2) * -1}px`;
+      const offset = `${((buttonContent.offsetWidth + adjustement) / 2) * -1}px`;
+      if (this.buttonPosition === 'center-right') {
+        buttonContent.style.right = offset;
+      }
+      else {
+        buttonContent.style.left = offset;
+      }
     }
     if (!this.customFont) {
       this.loadInterFont();
@@ -82,9 +92,12 @@ export class FeedbackButton {
   connectedCallback() {
     this.feedbackModal = document.createElement('feedback-modal');
     const props = [
+      'apiKey',
+      'clickOutsideClose',
       'customFont',
       'emailAddress',
       'fetchData',
+      'historyClose',
       'hideEmail',
       'hidePrivacyPolicy',
       'hideRating',
@@ -110,6 +123,7 @@ export class FeedbackButton {
       'screenshotErrorUnexpected',
       'emailPlaceholder',
       'errorMessage',
+      'errorMessage401',
       'errorMessage403',
       'errorMessage404',
       'footerText',
@@ -174,12 +188,16 @@ export class FeedbackButton {
         }
       }
       const body = Object.assign({ url: window.location.href, project: this.project, rating: this.rating || -1, ratingMode: this.ratingMode, message: '', metadata: this.metadata, session: localStorage.getItem('pushfeedback_sessionid') || '' }, (recaptchaToken && { recaptchaToken }));
-      const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
+      const headers = {
+        'Content-Type': 'application/json',
+      };
+      if (this.apiKey) {
+        headers['Authorization'] = `Api-Key ${this.apiKey}`;
+      }
+      const res = await fetch('https://app.pushfeedback.com/api/v1/feedback/', {
         method: 'POST',
         body: JSON.stringify(body),
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers,
       });
       if (res.status === 201) {
         const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
@@ -210,7 +228,7 @@ export class FeedbackButton {
     }
   }
   render() {
-    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''} ${this.hideMobile ? 'feedback-button-content--hide-mobile' : ''}`, part: "button", onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (h("span", { class: "feedback-button-content-icon", part: "icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
+    return (h(Host, null, h("button", { type: "button", class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''} ${this.hideMobile ? 'feedback-button-content--hide-mobile' : ''}`, part: "button", onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (h("span", { class: "feedback-button-content-icon", part: "icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
   }
   static get is() { return "feedback-button"; }
   static get encapsulation() { return "shadow"; }
@@ -238,7 +256,7 @@ export class FeedbackButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Position of the button on the page. Valid values: `default`, `bottom-right`, `bottom-left`, `top-right`, `top-left`, `center-right` (vertical tab on the right edge) and `center-left` (vertical tab on the left edge). Any other value behaves like `default`."
         },
         "attribute": "button-position",
         "reflect": false,
@@ -352,6 +370,42 @@ export class FeedbackButton {
         "reflect": false,
         "defaultValue": "false"
       },
+      "apiKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional API key sent with feedback submissions, for projects that\nrequire one. Sent as `Authorization: Api-Key <key>` on the feedback POST\nrequest only, never on the public config request. Only use keys scoped to\n`feedback:submit`: like any credential used by an embedded widget, the\nvalue is part of the page and readable by any script running on it, so it\nprovides server-side scoping and traceability rather than client-side\nsecrecy. Intended for internal or access-controlled pages."
+        },
+        "attribute": "api-key",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "clickOutsideClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "click-outside-close",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "customFont": {
         "type": "boolean",
         "mutable": false,
@@ -388,6 +442,24 @@ export class FeedbackButton {
         "reflect": false,
         "defaultValue": "''"
       },
+      "historyClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "history-close",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "isEmailRequired": {
         "type": "boolean",
         "mutable": false,
@@ -603,6 +675,24 @@ export class FeedbackButton {
         "reflect": false,
         "defaultValue": "'Please try again later.'"
       },
+      "errorMessage401": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message-4-0-1",
+        "reflect": false,
+        "defaultValue": "'This project requires a valid API key to submit feedback. Check the api-key attribute.'"
+      },
       "errorMessage403": {
         "type": "string",
         "mutable": false,

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

@@ -70,6 +70,12 @@
   opacity: 1;
 }
 
+/* The dialog receives programmatic focus on open so screen readers announce its
+   title; it is not a control, so it should not paint a focus ring */
+.feedback-modal-content:focus {
+  outline: none;
+}
+
 .feedback-modal-header {
   color: var(--feedback-modal-header-text-color);
   display: flex;