pushfeedback 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ecaab1ef.js');
+
+/*
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"feedbackModal":[32]}],[1,"feedback-modal",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"hasSelectedElement":[1540,"has-selected-element"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formError":[32],"encodedScreenshot":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/pushfeedback.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-ecaab1ef.js');
+
+/*
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pushfeedback.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"feedbackModal":[32]}],[1,"feedback-modal",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"hasSelectedElement":[1540,"has-selected-element"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formError":[32],"encodedScreenshot":[32]}]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "./components/feedback-modal/feedback-modal.js",
+    "./components/feedback-button/feedback-button.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,16 @@
+.feedback-button-content {
+  cursor: pointer;
+  background-color: var(--feedback-button-bg-color);
+  border: 1px solid var(--feedback-button-border-color);
+  border-radius: var(--feedback-button-border-radius);
+  color: var(--feedback-button-text-color);
+  cursor: pointer;
+  font-size: var(--feedback-modal-button-font-size);
+  padding: 5px 10px;
+}
+
+.feedback-button-content:hover {
+  color: var(--feedback-button-text-color-active);
+  background-color: var(--feedback-button-bg-color-active);
+  border: 1px solid var(--feedback-button-border-color-active);
+}

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

@@ -0,0 +1,263 @@
+import { Host, h } from '@stencil/core';
+export class FeedbackButton {
+  constructor() {
+    this.feedbackModal = undefined;
+    this.modalTitle = 'Share your feedback';
+    this.successModalTitle = 'Thanks for your feedback!';
+    this.errorModalTitle = "Oops! We didn't receive your feedback. Please try again later.";
+    this.modalPosition = 'center';
+    this.sendButtonText = 'Send';
+    this.project = '';
+    this.screenshotButtonTooltipText = 'Take a Screenshot';
+    this.screenshotTopbarText = 'SELECT AN ELEMENT ON THE PAGE';
+    this.email = '';
+    this.emailPlaceholder = 'Email address (optional)';
+    this.messagePlaceholder = 'How could this page be more helpful?';
+  }
+  componentDidLoad() {
+    this.feedbackModal.showModal = false;
+  }
+  showModal() {
+    this.feedbackModal.showModal = true;
+  }
+  render() {
+    const propKeys = [
+      'modalTitle',
+      'successModalTitle',
+      'errorModalTitle',
+      'modalPosition',
+      'sendButtonText',
+      'project',
+      'screenshotButtonTooltipText',
+      'screenshotTopbarText',
+      'email',
+      'emailPlaceholder',
+      'messagePlaceholder',
+      'showModal',
+    ];
+    let feedbackModalProps = {};
+    propKeys.forEach((key) => {
+      feedbackModalProps[key] = this[key];
+    });
+    return (h(Host, null, h("a", { class: "feedback-button-content", onClick: () => this.showModal() }, h("slot", null)), h("feedback-modal", Object.assign({}, feedbackModalProps, { ref: (el) => this.feedbackModal = el }))));
+  }
+  static get is() { return "feedback-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["feedback-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["feedback-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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'"
+      },
+      "successModalTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "success-modal-title",
+        "reflect": false,
+        "defaultValue": "'Thanks for your feedback!'"
+      },
+      "errorModalTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-modal-title",
+        "reflect": false,
+        "defaultValue": "\"Oops! We didn't receive your feedback. Please try again later.\""
+      },
+      "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'"
+      },
+      "project": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "project",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "screenshotButtonTooltipText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-button-tooltip-text",
+        "reflect": false,
+        "defaultValue": "'Take 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 THE PAGE'"
+      },
+      "email": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "email",
+        "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": "'How could this page be more helpful?'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "feedbackModal": {}
+    };
+  }
+}

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

@@ -0,0 +1,209 @@
+.text-center {
+  text-align: center;
+  flex-grow: 1;
+}
+  
+.feedback-modal {
+  display: inline-block;
+  position: relative;
+}
+
+.feedback-modal-content {
+  background-color: var(--feedback-modal-content-bg-color);
+  border-color: 1px solid var(--feedback-modal-header-text-color);
+  border-radius: var(--feedback-modal-content-border-radius);
+  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
+  box-sizing: border-box;
+  color: var(--feedback-modal-content-text-color);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--feedback-modal-content-font-family);
+  max-width: 300px;
+  padding: 20px;
+  position: fixed;
+  width: 100%;
+  z-index: 300;
+}
+
+.feedback-modal-content.feedback-modal-content--center {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.feedback-modal-content.feedback-modal-content--bottom-right {
+  bottom: var(--feedback-modal-content-position-bottom);
+  right: var(--feedback-modal-content-position-right);
+}
+
+.feedback-modal-content.feedback-modal-content--bottom-left {
+  bottom: var(--feedback-modal-content-position-bottom);
+  left: var(--feedback-modal-content-position-left);
+}
+
+.feedback-modal-content.feedback-modal-content--top-right {
+  right: var(--feedback-modal-content-position-right);
+  top: var(--fedback-modal-content-position-top);
+}
+
+.feedback-modal-content.feedback-modal-content--top-left {
+  left: var(--feedback-modal-content-position-left);
+  top: var(--fedback-modal-content-position-top);
+}
+
+.feedback-modal-header {
+  align-items: center;
+  color: var(--feedback-modal-header-text-color);
+  font-family: var(--feedback-modal-header-font-family);
+  display: flex;
+  font-size: var(--feedback-header-font-size);
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.feedback-modal-text {
+  margin-bottom: 20px;
+}
+
+.feedback-modal-text textarea {
+  border: 1px solid var(--feedback-modal-input-border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-family: var(--feedback-modal-content-font-family);
+  font-size: var(--feedback-modal-input-font-size);
+  height: 100px;
+  padding: 10px;
+  resize: none;
+  width: 100%;
+}
+
+.feedback-modal-email {
+  margin-bottom: 20px;
+}
+
+.feedback-modal-email input {
+  border: 1px solid var(--feedback-modal-input-border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-family: var(--feedback-modal-content-font-family);
+  font-size: var(--feedback-modal-input-font-size);
+  height: 40px;
+  padding: 10px;
+  width: 100%;
+}
+
+.feedback-modal-text textarea:focus, .feedback-modal-email input:focus {
+  border: 1px solid var(--feedback-modal-input-border-color-focused);
+  outline: none;
+}
+
+.feedback-modal-buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.button {
+  background-color: transparent;
+  border: 1px solid var(--feedback-modal-button-border-color);
+  border-radius: var(--feedback-modal-button-border-radius);
+  color: var(--feedback-modal-button-text-color);
+  cursor: pointer;
+  font-size: var(--feedback-modal-button-font-size);
+  padding: 5px 10px;
+}
+
+.button:hover,
+.button.active {
+  color: var(--feedback-modal-button-text-color-active);
+  background-color: var(--feedback-modal-button-bg-color-active);
+  border: 1px solid var(--feedback-modal-button-border-color-active);
+}
+
+.feedback-modal-footer {
+  font-size: 12px;
+  margin-top: 5px 0;
+  text-align: center;
+}
+
+.feedback-modal-footer a {
+  color: #191919;
+  text-decoration: none;
+}
+
+.feedback-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5px;
+}
+
+.feedback-logo svg {
+  max-width: 12px;
+  margin-right: 5px;
+}
+
+
+.feedback-modal-close {
+  background-color: var(--feedback-modal-close-bg-color);
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-left: auto;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.feedback-modal-screenshot {
+  background-color: var(--feedback-modal-screenshot-bg-color);
+  box-shadow: 0px 0px 0px 5px var(--feedback-modal-screenshot-element-selected-bg-color) inset;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.feedback-modal-screenshot-header {
+  align-items: center;
+  background-color: var(--feedback-modal-screenshot-header-bg-color);
+  color: var(--feedback-modal-screenshot-element-selected-text-color);
+  cursor: pointer;
+  display: flex;
+  padding: 5px;
+  position: fixed;
+  justify-content: center;
+  width: 100%;
+  z-index: 200;
+}
+
+.feedback-modal-screenshot-header span {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.feedback-modal-screenshot-overlay {
+  background-color: transparent;
+  cursor: unset;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.feedback-modal-message {
+  font-size: var(--fedback-modal-message-font-size);
+}
+
+.feedback-modal-element-hover {
+  cursor: pointer;
+  background-color: transparent;
+  border: 4px dashed var(--feedback-modal-screenshot-element-hover-border-color);
+}
+
+.feedback-modal-element-selected {
+  border: 4px solid var(--feedback-modal-screenshot-element-selected-border-color);
+}