pushfeedback 0.0.3 → 0.0.5

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-df770657.js');
 
-const feedbackButtonCss = ".feedback-button-content{cursor:pointer}.feedback-button-content--light{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);padding:5px 10px;font-size:var(--feedback-modal-button-font-size)}.feedback-button-content--light: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)}";
+const feedbackButtonCss = ".feedback-button-content{cursor:pointer;z-index:300}.feedback-button-content--light{align-items:center;background-color:var(--feedback-white-color);border-radius:20px;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-primary-color);font-weight:bold;padding:8px 15px;font-size:var(--feedback-text-font-size)}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-primary-color);border-radius:20px;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-white-color);font-weight:bold;padding:8px 15px;font-size:16px}.feedback-button-content--bottom-right{position:fixed;bottom:10px;right:10px}.feedback-button-content--center-right{position:fixed;bottom:50%;right:-50px;transform:rotate(-90deg)}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-right-radius:0px;border-bottom-left-radius:0px}.feedback-button-content-icon{margin-right:5px}";
 
 const FeedbackButton = class {
   constructor(hostRef) {
@@ -21,6 +21,8 @@ const FeedbackButton = class {
     this.emailPlaceholder = 'Email address (optional)';
     this.messagePlaceholder = 'How could this page be more helpful?';
     this.buttonStyle = 'default';
+    this.buttonPosition = 'default';
+    this.hideIcon = false;
   }
   connectedCallback() {
     this.feedbackModal = document.createElement('feedback-modal');
@@ -49,7 +51,7 @@ const FeedbackButton = class {
     this.feedbackModal.showModal = true;
   }
   render() {
-    return (index.h(index.Host, null, index.h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle}`, onClick: () => this.showModal() }, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle === 'dark' && (index.h("span", { class: "feedback-button-content-icon" }, index.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: "feather feather-repeat" }, index.h("polyline", { points: "17 1 21 5 17 9" }), index.h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), index.h("polyline", { points: "7 23 3 19 7 15" }), index.h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), !this.hideIcon && this.buttonStyle === 'light' && (index.h("span", { class: "feedback-button-content-icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#0070F4", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-repeat" }, index.h("polyline", { points: "17 1 21 5 17 9" }), index.h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), index.h("polyline", { points: "7 23 3 19 7 15" }), index.h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), index.h("slot", null))));
   }
 };
 FeedbackButton.style = feedbackButtonCss;
@@ -836,13 +838,14 @@ var domToImage = createCommonjsModule(function (module) {
 })();
 });
 
-const feedbackModalCss = ".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)}";
+const feedbackModalCss = ".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;left:50%;top:50%;transform:translate(-50%, -50%)}@media screen and (min-width: 768px){.feedback-modal-content.feedback-modal-content--bottom-right{top:initial;left:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);right:var(--feedback-modal-content-position-right)}.feedback-modal-content.feedback-modal-content--bottom-left{top:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left)}.feedback-modal-content.feedback-modal-content--top-right{top:initial;transform:initial;right:var(--feedback-modal-content-position-right);top:var(--fedback-modal-content-position-top)}.feedback-modal-content.feedback-modal-content--top-left{transform:initial;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)}";
 
 const FeedbackModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.handleSubmit = async (event) => {
       event.preventDefault();
+      this.resetOverflow();
       this.showScreenshotMode = false;
       this.showModal = false;
       this.sending = true;
@@ -896,14 +899,14 @@ const FeedbackModal = class {
       this.formError = false;
       this.formMessage = '';
       this.formEmail = '';
+      this.resetOverflow();
     };
     this.openScreenShot = () => {
       this.hasSelectedElement = false;
       this.showModal = false;
       this.showScreenshotMode = true;
       this.encodedScreenshot = null;
-      const page = document.getElementsByTagName('html')[0];
-      page.style.overflow = 'auto';
+      this.resetOverflow();
     };
     this.closeScreenShot = () => {
       this.showModal = false;
@@ -911,8 +914,7 @@ const FeedbackModal = class {
       this.hasSelectedElement = false;
       this.encodedScreenshot = null;
       this.overlay.style.display = 'none';
-      const page = document.getElementsByTagName('html')[0];
-      page.style.overflow = 'inherit';
+      this.resetOverflow();
     };
     this.handleMouseOverScreenShot = (event) => {
       event.preventDefault();
@@ -1010,6 +1012,10 @@ const FeedbackModal = class {
   componentWillLoad() {
     this.formEmail = this.email;
   }
+  resetOverflow() {
+    const page = document.getElementsByTagName('html')[0];
+    page.style.overflow = 'inherit';
+  }
   handleMessageInput(event) {
     this.formMessage = event.target.value;
   }

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 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"],"buttonStyle":[1,"button-style"]}],[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);
+  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"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"]}],[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/cjs/pushfeedback.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 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"],"buttonStyle":[1,"button-style"]}],[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);
+  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"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"]}],[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.setNonce = index.setNonce;

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

@@ -1,18 +1,56 @@
 .feedback-button-content {
   cursor: pointer;
+  z-index: 300;
 }
 
 .feedback-button-content--light{
-  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);
-  padding: 5px 10px;
-  font-size: var(--feedback-modal-button-font-size);
+  align-items: center;
+  background-color: var(--feedback-white-color);
+  border-radius: 20px;
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+  box-sizing: border-box;
+  display: flex;
+  font-family: var(--feedback-font-family);
+  color: var(--feedback-primary-color);
+  font-weight: bold;
+  padding: 8px 15px;
+  font-size: var(--feedback-text-font-size);
 }
 
-.feedback-button-content--light: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);
+.feedback-button-content--dark{
+  align-items: center;
+  background-color: var(--feedback-primary-color);
+  border-radius: 20px;
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+  box-sizing: border-box;
+  display: flex;
+  font-family: var(--feedback-font-family);
+  color: var(--feedback-white-color);
+  font-weight: bold;
+  padding: 8px 15px;
+  font-size: 16px;
 }
+
+.feedback-button-content--bottom-right{
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+}
+
+.feedback-button-content--center-right{
+  position: fixed;
+  bottom: 50%;
+  right: -50px;
+  transform: rotate(-90deg);
+}
+
+.feedback-button-content--center-right.feedback-button-content--dark,
+.feedback-button-content--center-right.feedback-button-content--light {
+  border-radius: 4px;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.feedback-button-content-icon{
+  margin-right: 5px;
+}

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

@@ -13,6 +13,8 @@ export class FeedbackButton {
     this.emailPlaceholder = 'Email address (optional)';
     this.messagePlaceholder = 'How could this page be more helpful?';
     this.buttonStyle = 'default';
+    this.buttonPosition = 'default';
+    this.hideIcon = false;
   }
   connectedCallback() {
     this.feedbackModal = document.createElement('feedback-modal');
@@ -41,7 +43,7 @@ export class FeedbackButton {
     this.feedbackModal.showModal = true;
   }
   render() {
-    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle}`, onClick: () => this.showModal() }, h("slot", null))));
+    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle === 'dark' && (h("span", { class: "feedback-button-content-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: "feather feather-repeat" }, h("polyline", { points: "17 1 21 5 17 9" }), h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), h("polyline", { points: "7 23 3 19 7 15" }), h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), !this.hideIcon && this.buttonStyle === 'light' && (h("span", { class: "feedback-button-content-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#0070F4", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-repeat" }, h("polyline", { points: "17 1 21 5 17 9" }), h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), h("polyline", { points: "7 23 3 19 7 15" }), h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), h("slot", null))));
   }
   static get is() { return "feedback-button"; }
   static get encapsulation() { return "shadow"; }
@@ -272,6 +274,42 @@ export class FeedbackButton {
         "attribute": "button-style",
         "reflect": false,
         "defaultValue": "'default'"
+      },
+      "buttonPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-position",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "hideIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-icon",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -23,32 +23,40 @@
   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);
+@media screen and (min-width: 768px) {
+  
+  .feedback-modal-content.feedback-modal-content--bottom-right {
+    top: initial;
+    left: initial;
+    transform: initial;
+    bottom: var(--feedback-modal-content-position-bottom);
+    right: var(--feedback-modal-content-position-right);
+  }
+  
+  .feedback-modal-content.feedback-modal-content--bottom-left {
+    top: initial;
+    transform: initial;
+    bottom: var(--feedback-modal-content-position-bottom);
+    left: var(--feedback-modal-content-position-left);
+  }
+  
+  .feedback-modal-content.feedback-modal-content--top-right {
+    top: initial;
+    transform: initial;
+    right: var(--feedback-modal-content-position-right);
+    top: var(--fedback-modal-content-position-top);
+  }
+  
+  .feedback-modal-content.feedback-modal-content--top-left {
+    transform: initial;
+    left: var(--feedback-modal-content-position-left);
+    top: var(--fedback-modal-content-position-top);
+  }  
 }
 
 .feedback-modal-header {

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

@@ -4,6 +4,7 @@ export class FeedbackModal {
   constructor() {
     this.handleSubmit = async (event) => {
       event.preventDefault();
+      this.resetOverflow();
       this.showScreenshotMode = false;
       this.showModal = false;
       this.sending = true;
@@ -57,14 +58,14 @@ export class FeedbackModal {
       this.formError = false;
       this.formMessage = '';
       this.formEmail = '';
+      this.resetOverflow();
     };
     this.openScreenShot = () => {
       this.hasSelectedElement = false;
       this.showModal = false;
       this.showScreenshotMode = true;
       this.encodedScreenshot = null;
-      const page = document.getElementsByTagName('html')[0];
-      page.style.overflow = 'auto';
+      this.resetOverflow();
     };
     this.closeScreenShot = () => {
       this.showModal = false;
@@ -72,8 +73,7 @@ export class FeedbackModal {
       this.hasSelectedElement = false;
       this.encodedScreenshot = null;
       this.overlay.style.display = 'none';
-      const page = document.getElementsByTagName('html')[0];
-      page.style.overflow = 'inherit';
+      this.resetOverflow();
     };
     this.handleMouseOverScreenShot = (event) => {
       event.preventDefault();
@@ -172,6 +172,10 @@ export class FeedbackModal {
   componentWillLoad() {
     this.formEmail = this.email;
   }
+  resetOverflow() {
+    const page = document.getElementsByTagName('html')[0];
+    page.style.overflow = 'inherit';
+  }
   handleMessageInput(event) {
     this.formMessage = event.target.value;
   }

package/dist/components/feedback-button.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './feedback-modal2.js';
 
-const feedbackButtonCss = ".feedback-button-content{cursor:pointer}.feedback-button-content--light{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);padding:5px 10px;font-size:var(--feedback-modal-button-font-size)}.feedback-button-content--light: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)}";
+const feedbackButtonCss = ".feedback-button-content{cursor:pointer;z-index:300}.feedback-button-content--light{align-items:center;background-color:var(--feedback-white-color);border-radius:20px;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-primary-color);font-weight:bold;padding:8px 15px;font-size:var(--feedback-text-font-size)}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-primary-color);border-radius:20px;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-white-color);font-weight:bold;padding:8px 15px;font-size:16px}.feedback-button-content--bottom-right{position:fixed;bottom:10px;right:10px}.feedback-button-content--center-right{position:fixed;bottom:50%;right:-50px;transform:rotate(-90deg)}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-right-radius:0px;border-bottom-left-radius:0px}.feedback-button-content-icon{margin-right:5px}";
 
 const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -20,6 +20,8 @@ const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.emailPlaceholder = 'Email address (optional)';
     this.messagePlaceholder = 'How could this page be more helpful?';
     this.buttonStyle = 'default';
+    this.buttonPosition = 'default';
+    this.hideIcon = false;
   }
   connectedCallback() {
     this.feedbackModal = document.createElement('feedback-modal');
@@ -48,7 +50,7 @@ const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.feedbackModal.showModal = true;
   }
   render() {
-    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle}`, onClick: () => this.showModal() }, h("slot", null))));
+    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle === 'dark' && (h("span", { class: "feedback-button-content-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: "feather feather-repeat" }, h("polyline", { points: "17 1 21 5 17 9" }), h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), h("polyline", { points: "7 23 3 19 7 15" }), h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), !this.hideIcon && this.buttonStyle === 'light' && (h("span", { class: "feedback-button-content-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#0070F4", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-repeat" }, h("polyline", { points: "17 1 21 5 17 9" }), h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), h("polyline", { points: "7 23 3 19 7 15" }), h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), h("slot", null))));
   }
   static get style() { return feedbackButtonCss; }
 }, [1, "feedback-button", {
@@ -63,7 +65,9 @@ const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "email": [1],
     "emailPlaceholder": [1, "email-placeholder"],
     "messagePlaceholder": [1, "message-placeholder"],
-    "buttonStyle": [1, "button-style"]
+    "buttonStyle": [1, "button-style"],
+    "buttonPosition": [1, "button-position"],
+    "hideIcon": [4, "hide-icon"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/feedback-modal2.js

@@ -782,7 +782,7 @@ var domToImage = createCommonjsModule(function (module) {
 })();
 });
 
-const feedbackModalCss = ".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)}";
+const feedbackModalCss = ".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;left:50%;top:50%;transform:translate(-50%, -50%)}@media screen and (min-width: 768px){.feedback-modal-content.feedback-modal-content--bottom-right{top:initial;left:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);right:var(--feedback-modal-content-position-right)}.feedback-modal-content.feedback-modal-content--bottom-left{top:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left)}.feedback-modal-content.feedback-modal-content--top-right{top:initial;transform:initial;right:var(--feedback-modal-content-position-right);top:var(--fedback-modal-content-position-top)}.feedback-modal-content.feedback-modal-content--top-left{transform:initial;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)}";
 
 const FeedbackModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -791,6 +791,7 @@ const FeedbackModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__attachShadow();
     this.handleSubmit = async (event) => {
       event.preventDefault();
+      this.resetOverflow();
       this.showScreenshotMode = false;
       this.showModal = false;
       this.sending = true;
@@ -844,14 +845,14 @@ const FeedbackModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.formError = false;
       this.formMessage = '';
       this.formEmail = '';
+      this.resetOverflow();
     };
     this.openScreenShot = () => {
       this.hasSelectedElement = false;
       this.showModal = false;
       this.showScreenshotMode = true;
       this.encodedScreenshot = null;
-      const page = document.getElementsByTagName('html')[0];
-      page.style.overflow = 'auto';
+      this.resetOverflow();
     };
     this.closeScreenShot = () => {
       this.showModal = false;
@@ -859,8 +860,7 @@ const FeedbackModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.hasSelectedElement = false;
       this.encodedScreenshot = null;
       this.overlay.style.display = 'none';
-      const page = document.getElementsByTagName('html')[0];
-      page.style.overflow = 'inherit';
+      this.resetOverflow();
     };
     this.handleMouseOverScreenShot = (event) => {
       event.preventDefault();
@@ -958,6 +958,10 @@ const FeedbackModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   componentWillLoad() {
     this.formEmail = this.email;
   }
+  resetOverflow() {
+    const page = document.getElementsByTagName('html')[0];
+    page.style.overflow = 'inherit';
+  }
   handleMessageInput(event) {
     this.formMessage = event.target.value;
   }

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-0ae29483.js';
 
-const feedbackButtonCss = ".feedback-button-content{cursor:pointer}.feedback-button-content--light{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);padding:5px 10px;font-size:var(--feedback-modal-button-font-size)}.feedback-button-content--light: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)}";
+const feedbackButtonCss = ".feedback-button-content{cursor:pointer;z-index:300}.feedback-button-content--light{align-items:center;background-color:var(--feedback-white-color);border-radius:20px;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-primary-color);font-weight:bold;padding:8px 15px;font-size:var(--feedback-text-font-size)}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-primary-color);border-radius:20px;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-white-color);font-weight:bold;padding:8px 15px;font-size:16px}.feedback-button-content--bottom-right{position:fixed;bottom:10px;right:10px}.feedback-button-content--center-right{position:fixed;bottom:50%;right:-50px;transform:rotate(-90deg)}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-right-radius:0px;border-bottom-left-radius:0px}.feedback-button-content-icon{margin-right:5px}";
 
 const FeedbackButton = class {
   constructor(hostRef) {
@@ -17,6 +17,8 @@ const FeedbackButton = class {
     this.emailPlaceholder = 'Email address (optional)';
     this.messagePlaceholder = 'How could this page be more helpful?';
     this.buttonStyle = 'default';
+    this.buttonPosition = 'default';
+    this.hideIcon = false;
   }
   connectedCallback() {
     this.feedbackModal = document.createElement('feedback-modal');
@@ -45,7 +47,7 @@ const FeedbackButton = class {
     this.feedbackModal.showModal = true;
   }
   render() {
-    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle}`, onClick: () => this.showModal() }, h("slot", null))));
+    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle === 'dark' && (h("span", { class: "feedback-button-content-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: "feather feather-repeat" }, h("polyline", { points: "17 1 21 5 17 9" }), h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), h("polyline", { points: "7 23 3 19 7 15" }), h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), !this.hideIcon && this.buttonStyle === 'light' && (h("span", { class: "feedback-button-content-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#0070F4", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-repeat" }, h("polyline", { points: "17 1 21 5 17 9" }), h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), h("polyline", { points: "7 23 3 19 7 15" }), h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), h("slot", null))));
   }
 };
 FeedbackButton.style = feedbackButtonCss;
@@ -832,13 +834,14 @@ var domToImage = createCommonjsModule(function (module) {
 })();
 });
 
-const feedbackModalCss = ".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)}";
+const feedbackModalCss = ".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;left:50%;top:50%;transform:translate(-50%, -50%)}@media screen and (min-width: 768px){.feedback-modal-content.feedback-modal-content--bottom-right{top:initial;left:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);right:var(--feedback-modal-content-position-right)}.feedback-modal-content.feedback-modal-content--bottom-left{top:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left)}.feedback-modal-content.feedback-modal-content--top-right{top:initial;transform:initial;right:var(--feedback-modal-content-position-right);top:var(--fedback-modal-content-position-top)}.feedback-modal-content.feedback-modal-content--top-left{transform:initial;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)}";
 
 const FeedbackModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.handleSubmit = async (event) => {
       event.preventDefault();
+      this.resetOverflow();
       this.showScreenshotMode = false;
       this.showModal = false;
       this.sending = true;
@@ -892,14 +895,14 @@ const FeedbackModal = class {
       this.formError = false;
       this.formMessage = '';
       this.formEmail = '';
+      this.resetOverflow();
     };
     this.openScreenShot = () => {
       this.hasSelectedElement = false;
       this.showModal = false;
       this.showScreenshotMode = true;
       this.encodedScreenshot = null;
-      const page = document.getElementsByTagName('html')[0];
-      page.style.overflow = 'auto';
+      this.resetOverflow();
     };
     this.closeScreenShot = () => {
       this.showModal = false;
@@ -907,8 +910,7 @@ const FeedbackModal = class {
       this.hasSelectedElement = false;
       this.encodedScreenshot = null;
       this.overlay.style.display = 'none';
-      const page = document.getElementsByTagName('html')[0];
-      page.style.overflow = 'inherit';
+      this.resetOverflow();
     };
     this.handleMouseOverScreenShot = (event) => {
       event.preventDefault();
@@ -1006,6 +1008,10 @@ const FeedbackModal = class {
   componentWillLoad() {
     this.formEmail = this.email;
   }
+  resetOverflow() {
+    const page = document.getElementsByTagName('html')[0];
+    page.style.overflow = 'inherit';
+  }
   handleMessageInput(event) {
     this.formMessage = event.target.value;
   }

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["feedback-button_2",[[1,"feedback-button",{"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"],"buttonStyle":[1,"button-style"]}],[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);
+  return bootstrapLazy([["feedback-button_2",[[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"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"]}],[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/esm/pushfeedback.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["feedback-button_2",[[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"],"buttonStyle":[1,"button-style"]}],[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);
+  return bootstrapLazy([["feedback-button_2",[[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"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"]}],[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/pushfeedback/p-65e5f493.entry.js

@@ -0,0 +1 @@
+import{r as t,h as e,H as o}from"./p-60079923.js";const n=class{constructor(e){t(this,e),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?",this.buttonStyle="default",this.buttonPosition="default",this.hideIcon=!1}connectedCallback(){this.feedbackModal=document.createElement("feedback-modal"),["modalTitle","successModalTitle","errorModalTitle","modalPosition","sendButtonText","project","screenshotButtonTooltipText","screenshotTopbarText","email","emailPlaceholder","messagePlaceholder"].forEach((t=>{this.feedbackModal[t]=this[t]})),document.body.appendChild(this.feedbackModal)}disconnectedCallback(){document.body.removeChild(this.feedbackModal)}showModal(){this.feedbackModal.showModal=!0}render(){return e(o,null,e("a",{class:`feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition}`,onClick:()=>this.showModal()},!this.hideIcon&&"dark"===this.buttonStyle&&e("span",{class:"feedback-button-content-icon"},e("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:"feather feather-repeat"},e("polyline",{points:"17 1 21 5 17 9"}),e("path",{d:"M3 11V9a4 4 0 0 1 4-4h14"}),e("polyline",{points:"7 23 3 19 7 15"}),e("path",{d:"M21 13v2a4 4 0 0 1-4 4H3"}))),!this.hideIcon&&"light"===this.buttonStyle&&e("span",{class:"feedback-button-content-icon"},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"#0070F4","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-repeat"},e("polyline",{points:"17 1 21 5 17 9"}),e("path",{d:"M3 11V9a4 4 0 0 1 4-4h14"}),e("polyline",{points:"7 23 3 19 7 15"}),e("path",{d:"M21 13v2a4 4 0 0 1-4 4H3"}))),e("slot",null)))}};n.style=".feedback-button-content{cursor:pointer;z-index:300}.feedback-button-content--light{align-items:center;background-color:var(--feedback-white-color);border-radius:20px;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-primary-color);font-weight:bold;padding:8px 15px;font-size:var(--feedback-text-font-size)}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-primary-color);border-radius:20px;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-white-color);font-weight:bold;padding:8px 15px;font-size:16px}.feedback-button-content--bottom-right{position:fixed;bottom:10px;right:10px}.feedback-button-content--center-right{position:fixed;bottom:50%;right:-50px;transform:rotate(-90deg)}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-right-radius:0px;border-bottom-left-radius:0px}.feedback-button-content-icon{margin-right:5px}";var i,r,a=(i=function(t){!function(){var e=function(){return{escape:function(t){return t.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1")},parseExtension:e,mimeType:function(t){var o,n;return(o="application/font-woff",n="image/jpeg",{woff:o,woff2:o,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:n,jpeg:n,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"})[e(t).toLowerCase()]||""},dataAsUrl:function(t,e){return"data:"+e+";base64,"+t},isDataUrl:function(t){return-1!==t.search(/^(data:)/)},canvasToBlob:function(t){return t.toBlob?new Promise((function(e){t.toBlob(e)})):function(t){return new Promise((function(e){for(var o=window.atob(t.toDataURL().split(",")[1]),n=o.length,i=new Uint8Array(n),r=0;r<n;r++)i[r]=o.charCodeAt(r);e(new Blob([i],{type:"image/png"}))}))}(t)},resolveUrl:function(t,e){var o=document.implementation.createHTMLDocument(),n=o.createElement("base");o.head.appendChild(n);var i=o.createElement("a");return o.body.appendChild(i),n.href=e,i.href=t,i.href},getAndEncode:function(t){return s.impl.options.cacheBust&&(t+=(/\?/.test(t)?"&":"?")+(new Date).getTime()),new Promise((function(e){var o,n=new XMLHttpRequest;if(n.onreadystatechange=function(){if(4===n.readyState)if(200===n.status){var i=new FileReader;i.onloadend=function(){var t=i.result.split(/,/)[1];e(t)},i.readAsDataURL(n.response)}else o?e(o):r("cannot fetch resource: "+t+", status: "+n.status)},n.ontimeout=function(){o?e(o):r("timeout of 30000ms occured while fetching resource: "+t)},n.responseType="blob",n.timeout=3e4,n.open("GET",t,!0),n.send(),s.impl.options.imagePlaceholder){var i=s.impl.options.imagePlaceholder.split(/,/);i&&i[1]&&(o=i[1])}function r(t){console.error(t),e("")}}))},uid:(t=0,function(){return"u"+("0000"+(Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)+t++}),delay:function(t){return function(e){return new Promise((function(o){setTimeout((function(){o(e)}),t)}))}},asArray:function(t){for(var e=[],o=t.length,n=0;n<o;n++)e.push(t[n]);return e},escapeXhtml:function(t){return t.replace(/#/g,"%23").replace(/\n/g,"%0A")},makeImage:function(t){return new Promise((function(e,o){var n=new Image;n.onload=function(){e(n)},n.onerror=o,n.src=t}))},width:function(t){var e=o(t,"border-left-width"),n=o(t,"border-right-width");return t.scrollWidth+e+n},height:function(t){var e=o(t,"border-top-width"),n=o(t,"border-bottom-width");return t.scrollHeight+e+n}};var t;function e(t){var e=/\.([^\.\/]*?)$/g.exec(t);return e?e[1]:""}function o(t,e){var o=window.getComputedStyle(t).getPropertyValue(e);return parseFloat(o.replace("px",""))}}(),o=function(){var t=/url\(['"]?([^'"]+?)['"]?\)/g;return{inlineAll:function(t,e,r){return o(t)?Promise.resolve(t).then(n).then((function(o){var n=Promise.resolve(t);return o.forEach((function(t){n=n.then((function(o){return i(o,t,e,r)}))})),n})):Promise.resolve(t)},shouldProcess:o,impl:{readUrls:n,inline:i}};function o(e){return-1!==e.search(t)}function n(o){for(var n,i=[];null!==(n=t.exec(o));)i.push(n[1]);return i.filter((function(t){return!e.isDataUrl(t)}))}function i(t,o,n,i){return Promise.resolve(o).then((function(t){return n?e.resolveUrl(t,n):t})).then(i||e.getAndEncode).then((function(t){return e.dataAsUrl(t,e.mimeType(o))})).then((function(n){return t.replace(function(t){return new RegExp("(url\\(['\"]?)("+e.escape(t)+")(['\"]?\\))","g")}(o),"$1"+n+"$3")}))}}(),n=function(){return{resolveAll:function(){return t().then((function(t){return Promise.all(t.map((function(t){return t.resolve()})))})).then((function(t){return t.join("\n")}))},impl:{readAll:t}};function t(){return Promise.resolve(e.asArray(document.styleSheets)).then((function(t){var o=[];return t.forEach((function(t){try{e.asArray(t.cssRules||[]).forEach(o.push.bind(o))}catch(e){console.log("Error while reading CSS rules from "+t.href,e.toString())}})),o})).then((function(t){return t.filter((function(t){return t.type===CSSRule.FONT_FACE_RULE})).filter((function(t){return o.shouldProcess(t.style.getPropertyValue("src"))}))})).then((function(e){return e.map(t)}));function t(t){return{resolve:function(){return o.inlineAll(t.cssText,(t.parentStyleSheet||{}).href)},src:function(){return t.style.getPropertyValue("src")}}}}}(),i=function(){return{inlineAll:function n(i){return i instanceof Element?function(t){var e=t.style.getPropertyValue("background");return e?o.inlineAll(e).then((function(e){t.style.setProperty("background",e,t.style.getPropertyPriority("background"))})).then((function(){return t})):Promise.resolve(t)}(i).then((function(){return i instanceof HTMLImageElement?t(i).inline():Promise.all(e.asArray(i.childNodes).map((function(t){return n(t)})))})):Promise.resolve(i)},impl:{newImage:t}};function t(t){return{inline:function(o){return e.isDataUrl(t.src)?Promise.resolve():Promise.resolve(t.src).then(o||e.getAndEncode).then((function(o){return e.dataAsUrl(o,e.mimeType(t.src))})).then((function(e){return new Promise((function(o,n){t.onload=o,t.onerror=n,t.src=e}))}))}}}}(),r=void 0,a=!1,s={toSvg:c,toPng:function(t,e){return d(t,e||{}).then((function(t){return t.toDataURL()}))},toJpeg:function(t,e){return d(t,e=e||{}).then((function(t){return t.toDataURL("image/jpeg",e.quality||1)}))},toBlob:function(t,o){return d(t,o||{}).then(e.canvasToBlob)},toPixelData:function(t,o){return d(t,o||{}).then((function(o){return o.getContext("2d").getImageData(0,0,e.width(t),e.height(t)).data}))},impl:{fontFaces:n,images:i,util:e,inliner:o,options:{}}};function c(t,o){return function(t){s.impl.options.imagePlaceholder=void 0===t.imagePlaceholder?r:t.imagePlaceholder,s.impl.options.cacheBust=void 0===t.cacheBust?a:t.cacheBust}(o=o||{}),Promise.resolve(t).then((function(t){return l(t,o.filter,!0)})).then(f).then(u).then((function(t){return o.bgcolor&&(t.style.backgroundColor=o.bgcolor),o.width&&(t.style.width=o.width+"px"),o.height&&(t.style.height=o.height+"px"),o.style&&Object.keys(o.style).forEach((function(e){t.style[e]=o.style[e]})),t})).then((function(n){return function(t,o,n){return Promise.resolve(t).then((function(t){return t.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(t)})).then(e.escapeXhtml).then((function(t){return'<foreignObject x="0" y="0" width="100%" height="100%">'+t+"</foreignObject>"})).then((function(t){return'<svg xmlns="http://www.w3.org/2000/svg" width="'+o+'" height="'+n+'">'+t+"</svg>"})).then((function(t){return"data:image/svg+xml;charset=utf-8,"+t}))}(n,o.width||e.width(t),o.height||e.height(t))}))}function d(t,o){return c(t,o).then(e.makeImage).then(e.delay(100)).then((function(n){var i=function(t){var n=document.createElement("canvas");if(n.width=o.width||e.width(t),n.height=o.height||e.height(t),o.bgcolor){var i=n.getContext("2d");i.fillStyle=o.bgcolor,i.fillRect(0,0,n.width,n.height)}return n}(t);return i.getContext("2d").drawImage(n,0,0),i}))}function l(t,o,n){return n||!o||o(t)?Promise.resolve(t).then((function(t){return t instanceof HTMLCanvasElement?e.makeImage(t.toDataURL()):t.cloneNode(!1)})).then((function(n){return function(t,o,n){var i=t.childNodes;return 0===i.length?Promise.resolve(o):function(t,e,o){var n=Promise.resolve();return e.forEach((function(e){n=n.then((function(){return l(e,o)})).then((function(e){e&&t.appendChild(e)}))})),n}(o,e.asArray(i),n).then((function(){return o}))}(t,n,o)})).then((function(o){return function(t,o){return o instanceof Element?Promise.resolve().then((function(){n=window.getComputedStyle(t),i=o.style,n.cssText?i.cssText=n.cssText:function(t,o){e.asArray(t).forEach((function(e){o.setProperty(e,t.getPropertyValue(e),t.getPropertyPriority(e))}))}(n,i);var n,i})).then((function(){[":before",":after"].forEach((function(n){!function(n){var i=window.getComputedStyle(t,n),r=i.getPropertyValue("content");if(""!==r&&"none"!==r){var a=e.uid();o.className=o.className+" "+a;var s=document.createElement("style");s.appendChild(function(t,o,n){var i="."+t+":"+o,r=n.cssText?a(n):s(n);return document.createTextNode(i+"{"+r+"}");function a(t){var e=t.getPropertyValue("content");return t.cssText+" content: "+e+";"}function s(t){return e.asArray(t).map(o).join("; ")+";";function o(e){return e+": "+t.getPropertyValue(e)+(t.getPropertyPriority(e)?" !important":"")}}}(a,n,i)),o.appendChild(s)}}(n)}))})).then((function(){t instanceof HTMLTextAreaElement&&(o.innerHTML=t.value),t instanceof HTMLInputElement&&o.setAttribute("value",t.value)})).then((function(){o instanceof SVGElement&&(o.setAttribute("xmlns","http://www.w3.org/2000/svg"),o instanceof SVGRectElement&&["width","height"].forEach((function(t){var e=o.getAttribute(t);e&&o.style.setProperty(t,e)})))})).then((function(){return o})):o}(t,o)})):Promise.resolve()}function f(t){return n.resolveAll().then((function(e){var o=document.createElement("style");return t.appendChild(o),o.appendChild(document.createTextNode(e)),t}))}function u(t){return i.inlineAll(t).then((function(){return t}))}t.exports=s}()},i(r={path:undefined,exports:{},require:function(){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}}),r.exports);const s=class{constructor(e){t(this,e),this.handleSubmit=async t=>{t.preventDefault(),this.resetOverflow(),this.showScreenshotMode=!1,this.showModal=!1,this.sending=!0;let e="";this.encodedScreenshot&&await this.encodedScreenshot.then((t=>{e=t})).catch((t=>{console.log(t)}));try{200===(await fetch("https://app.pushfeedback.com/api/feedback/",{method:"POST",body:JSON.stringify({url:window.location.href,message:this.formMessage,email:this.formEmail,project:this.project,screenshot:e}),headers:{"Content-Type":"application/json"}})).status?(this.formSuccess=!0,this.formError=!1):(this.formSuccess=!1,this.formError=!0)}catch(t){this.formSuccess=!1,this.formError=!0}finally{this.sending=!1,this.showModal=!0}},this.close=()=>{this.sending=!1,this.showModal=!1,this.showScreenshotMode=!1,this.hasSelectedElement=!1,this.encodedScreenshot=null,this.formSuccess=!1,this.formError=!1,this.formMessage="",this.formEmail="",this.resetOverflow()},this.openScreenShot=()=>{this.hasSelectedElement=!1,this.showModal=!1,this.showScreenshotMode=!0,this.encodedScreenshot=null,this.resetOverflow()},this.closeScreenShot=()=>{this.showModal=!1,this.showScreenshotMode=!1,this.hasSelectedElement=!1,this.encodedScreenshot=null,this.overlay.style.display="none",this.resetOverflow()},this.handleMouseOverScreenShot=t=>{if(t.preventDefault(),this.hasSelectedElement)return;this.overlay.style.display="none",this.screenshotModal.style.display="none";const e=document.elementFromPoint(t.clientX,t.clientY).getBoundingClientRect();this.screenshotModal.style.display="",this.elementSelected.style.position="absolute",this.elementSelected.style.left=`${e.left}px`,this.elementSelected.style.top=`${e.top}px`,this.elementSelected.style.width=`${e.width}px`,this.elementSelected.style.height=`${e.height}px`,this.elementSelected.classList.add("feedback-modal-element-hover"),this.topSide.style.position="absolute",this.topSide.style.left=`${e.left}px`,this.topSide.style.top="0px",this.topSide.style.width=`${e.width+8}px`,this.topSide.style.height=`${e.top}px`,this.topSide.style.backgroundColor="rgba(0, 0, 0, 0.3)",this.leftSide.style.position="absolute",this.leftSide.style.left="0px",this.leftSide.style.top="0px",this.leftSide.style.width=`${e.left}px`,this.leftSide.style.height="100vh",this.leftSide.style.backgroundColor="rgba(0, 0, 0, 0.3)",this.bottomSide.style.position="absolute",this.bottomSide.style.left=`${e.left}px`,this.bottomSide.style.top=`${e.bottom+8}px`,this.bottomSide.style.width=`${e.width+8}px`,this.bottomSide.style.height="100vh",this.bottomSide.style.backgroundColor="rgba(0, 0, 0, 0.3)",this.rightSide.style.position="absolute",this.rightSide.style.left=`${e.right+8}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.3)",this.screenshotModal.style.backgroundColor="transparent"},this.handleMouseClickedSelectedElement=t=>{t.preventDefault(),this.elementSelected&&this.elementSelected.classList.add("feedback-modal-element-selected");let e=this.elementSelected.getBoundingClientRect().top;this.elementSelected.style.top=`${e+window.pageYOffset}px`;const o=this.elementSelected.cloneNode(!0);document.body.appendChild(o),this.elementSelected.style.top=`${e}px`,this.encodedScreenshot=a.toPng(document.body,{cacheBust:!0}).then((function(t){return document.body.removeChild(o),t})).catch((function(t){return console.error("oops, something went wrong!",t),""})),document.getElementsByTagName("html")[0].style.overflow="hidden",this.hasSelectedElement=!0,this.overlay.style.display="block",this.showModal=!0},this.sending=!1,this.formMessage="",this.formEmail="",this.formSuccess=!1,this.formError=!1,this.encodedScreenshot=void 0,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?",this.showModal=!1,this.showScreenshotMode=!1,this.hasSelectedElement=!1}componentWillLoad(){this.formEmail=this.email}resetOverflow(){document.getElementsByTagName("html")[0].style.overflow="inherit"}handleMessageInput(t){this.formMessage=t.target.value}handleEmailInput(t){this.formEmail=t.target.value}render(){return e("div",{class:"feedback-modal-wrapper"},this.showScreenshotMode&&e("div",{class:"feedback-modal-screenshot",ref:t=>this.screenshotModal=t,onMouseMove:this.handleMouseOverScreenShot},e("div",{class:"feedback-modal-screenshot-element-selected",ref:t=>this.elementSelected=t,onClick:this.handleMouseClickedSelectedElement}),e("div",{class:"top-side",ref:t=>this.topSide=t}),e("div",{class:"left-side",ref:t=>this.leftSide=t}),e("div",{class:"bottom-side",ref:t=>this.bottomSide=t}),e("div",{class:"right-side",ref:t=>this.rightSide=t}),e("div",{class:"feedback-modal-screenshot-header",onClick:this.closeScreenShot},e("span",null,this.screenshotTopbarText),e("span",{class:"feedback-modal-screenshot-close"},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-x"},e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})))),e("div",{class:"feedback-modal-screenshot-overlay",ref:t=>this.overlay=t})),this.showModal&&e("div",{class:`feedback-modal-content feedback-modal-content--${this.modalPosition}`,ref:t=>this.modalContent=t},e("div",{class:"feedback-modal-header"},this.formSuccess||this.formError?this.formSuccess?e("span",{class:"text-center"},this.successModalTitle):this.formError?e("span",{class:"text-center"},this.errorModalTitle):e("span",null):e("span",null,this.modalTitle),e("button",{class:"feedback-modal-close",onClick:this.close},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"#ccc","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-x"},e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})))),e("div",{class:"feedback-modal-body"},this.formSuccess||this.formError?e("span",null):e("form",{onSubmit:this.handleSubmit},e("div",{class:"feedback-modal-text"},e("textarea",{placeholder:this.messagePlaceholder,value:this.formMessage,onInput:t=>this.handleMessageInput(t),required:!0})),!this.email&&e("div",{class:"feedback-modal-email"},e("input",{type:"email",placeholder:this.emailPlaceholder,onInput:t=>this.handleEmailInput(t),value:this.formEmail})),e("div",{class:"feedback-modal-buttons"},e("button",{type:"button",class:"button"+(this.encodedScreenshot?" active":""),title:this.screenshotButtonTooltipText,onClick:this.openScreenShot,disabled:this.sending},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-camera"},e("path",{d:"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"}),e("circle",{cx:"12",cy:"13",r:"4"}))),e("button",{class:"button",type:"submit",disabled:this.sending},this.sendButtonText)))),e("div",{class:"feedback-modal-footer"},e("div",{class:"feedback-logo"},e("svg",{class:"w-8 h-8",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg"},e("defs",null,e("radialGradient",{cx:"21.152%",cy:"86.063%",fx:"21.152%",fy:"86.063%",r:"79.941%",id:"footer-logo"},e("stop",{"stop-color":"#4FD1C5",offset:"0%"}),e("stop",{"stop-color":"#81E6D9",offset:"25.871%"}),e("stop",{"stop-color":"#338CF5",offset:"100%"}))),e("rect",{width:"32",height:"32",rx:"16",fill:"url(#footer-logo)","fill-rule":"nonzero"}))," ",e("a",{href:"https://pushfeedback.com"},"PushFeedback")))))}};s.style=".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;left:50%;top:50%;transform:translate(-50%, -50%)}@media screen and (min-width: 768px){.feedback-modal-content.feedback-modal-content--bottom-right{top:initial;left:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);right:var(--feedback-modal-content-position-right)}.feedback-modal-content.feedback-modal-content--bottom-left{top:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left)}.feedback-modal-content.feedback-modal-content--top-right{top:initial;transform:initial;right:var(--feedback-modal-content-position-right);top:var(--fedback-modal-content-position-top)}.feedback-modal-content.feedback-modal-content--top-left{transform:initial;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)}";export{n as feedback_button,s as feedback_modal}

package/dist/pushfeedback/pushfeedback.css

@@ -1 +1 @@
-:root{--feedback-primary-color:#0070F4;--feedback-secondary-color:#fbfbfb;--feedback-light-color:#ccc;--feedback-dark-color:#191919;--feedback-text-color:#5f6368;--feedback-white-color:#fff;--feedback-font-family:"Tahoma", "sans-serif";--feedback-heading-font-size:16px;--feedback-text-font-size:14px;--feedback-button-bg-color:var(--feedback-white-color);--feedback-button-bg-color-active:var(--feedback-secondary-color);--feedback-button-text-color:var(--feedback-dark-color);--feedback-button-text-color-active:var(--feedback-primary-color);--feedback-button-border-color:var(--feedback-light-color);--feedback-button-border-color-active:var(--feedback-primary-color);--feedback-button-border-color-active:var(--feedback-primary-color);--feedback-button-border-radius:4px;--feedback-modal-content-bg-color:var(--feedback-white-color);--feedback-modal-content-border-color:var(--feedback-light-color);--feedback-modal-content-font-family:var(--feedback-font-family);--feedback-modal-content-text-color:var(--feedback-text-color);--feedback-modal-content-border-radius:8px;--feedback-modal-content-position-top:25px;--feedback-modal-content-position-bottom:25px;--feedback-modal-content-position-right:20px;--feedback-modal-content-position-left:20px;--feedback-modal-header-text-color:var(--feedback-dark-color);--feedback-modal-header-font-size:var(--feedback-header-font-size);--feedback-modal-header-font-family:var(--feedback-font-family);--feedback-modal-input-font-size:var(--feedback-text-font-size);--feedback-modal-button-font-size:var(--feedback-text-font-size);--fedback-modal-message-font-size:var(--feedback-text-font-size);--feedback-modal-button-bg-color:var(--feedback-white-color);--feedback-modal-button-bg-color-active:var(--feedback-secondary-color);--feedback-modal-button-text-color:var(--feedback-dark-color);--feedback-modal-button-text-color-active:var(--feedback-primary-color);--feedback-modal-button-border-color:var(--feedback-light-color);--feedback-modal-button-border-color-active:var(--feedback-primary-color);--feedback-modal-button-border-radius:4px;--feedback-modal-input-border-color:var(--feedback-light-color);--feedback-modal-input-border-color-focused:var(--feedback-primary-color);--feedback-modal-input-border-radius:4px;--feedback-modal-close-bg-color:var(--feedback-white-color);--feedback-modal-screenshot-bg-color:rgba(0, 0, 0, 0.3);--feedback-modal-screenshot-element-hover-border-color:var(--feedback-primary-color);--feedback-modal-screenshot-element-selected-bg-color:var(--feedback-primary-color);--feedback-modal-screenshot-element-selected-text-color:var(--feedback-white-color);--feedback-modal-screenshot-element-selected-border-color:var(--feedback-primary-color);--feedback-modal-screenshot-header-bg-color:var(--feedback-primary-color)}
+:root{--feedback-primary-color:#0070F4;--feedback-secondary-color:#fbfbfb;--feedback-light-color:#ccc;--feedback-dark-color:#191919;--feedback-text-color:#5f6368;--feedback-white-color:#fff;--feedback-font-family:"Tahoma", "sans-serif";--feedback-heading-font-size:16px;--feedback-text-font-size:14px;--feedback-modal-content-bg-color:var(--feedback-white-color);--feedback-modal-content-border-color:var(--feedback-light-color);--feedback-modal-content-font-family:var(--feedback-font-family);--feedback-modal-content-text-color:var(--feedback-text-color);--feedback-modal-content-border-radius:8px;--feedback-modal-content-position-top:10px;--feedback-modal-content-position-bottom:10px;--feedback-modal-content-position-right:10px;--feedback-modal-content-position-left:10px;--feedback-modal-header-text-color:var(--feedback-dark-color);--feedback-modal-header-font-size:var(--feedback-header-font-size);--feedback-modal-header-font-family:var(--feedback-font-family);--feedback-modal-input-font-size:var(--feedback-text-font-size);--feedback-modal-button-font-size:var(--feedback-text-font-size);--fedback-modal-message-font-size:var(--feedback-text-font-size);--feedback-modal-button-bg-color:var(--feedback-white-color);--feedback-modal-button-bg-color-active:var(--feedback-secondary-color);--feedback-modal-button-text-color:var(--feedback-dark-color);--feedback-modal-button-text-color-active:var(--feedback-primary-color);--feedback-modal-button-border-color:var(--feedback-light-color);--feedback-modal-button-border-color-active:var(--feedback-primary-color);--feedback-modal-button-border-radius:4px;--feedback-modal-input-border-color:var(--feedback-light-color);--feedback-modal-input-border-color-focused:var(--feedback-primary-color);--feedback-modal-input-border-radius:4px;--feedback-modal-close-bg-color:var(--feedback-white-color);--feedback-modal-screenshot-bg-color:rgba(0, 0, 0, 0.3);--feedback-modal-screenshot-element-hover-border-color:var(--feedback-primary-color);--feedback-modal-screenshot-element-selected-bg-color:var(--feedback-primary-color);--feedback-modal-screenshot-element-selected-text-color:var(--feedback-white-color);--feedback-modal-screenshot-element-selected-border-color:var(--feedback-primary-color);--feedback-modal-screenshot-header-bg-color:var(--feedback-primary-color)}

package/dist/pushfeedback/pushfeedback.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-60079923.js";export{s as setNonce}from"./p-60079923.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-eac9210f",[[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"],buttonStyle:[1,"button-style"]}],[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]}]]]],e)));
+import{p as e,b as o}from"./p-60079923.js";export{s as setNonce}from"./p-60079923.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((e=>o([["p-65e5f493",[[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"],buttonStyle:[1,"button-style"],buttonPosition:[1,"button-position"],hideIcon:[4,"hide-icon"]}],[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]}]]]],e)));

package/dist/types/components/feedback-button/feedback-button.d.ts

@@ -12,6 +12,8 @@ export declare class FeedbackButton {
   emailPlaceholder: string;
   messagePlaceholder: string;
   buttonStyle: string;
+  buttonPosition: string;
+  hideIcon: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
   showModal(): void;

package/dist/types/components/feedback-modal/feedback-modal.d.ts

@@ -28,6 +28,7 @@ export declare class FeedbackModal {
   bottomSide: HTMLElement;
   rightSide: HTMLElement;
   componentWillLoad(): void;
+  resetOverflow(): void;
   handleMessageInput(event: Event): void;
   handleEmailInput(event: Event): void;
   handleSubmit: (event: Event) => Promise<void>;

package/dist/types/components.d.ts

@@ -7,10 +7,12 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
     interface FeedbackButton {
+        "buttonPosition": string;
         "buttonStyle": string;
         "email": string;
         "emailPlaceholder": string;
         "errorModalTitle": string;
+        "hideIcon": boolean;
         "messagePlaceholder": string;
         "modalPosition": string;
         "modalTitle": string;
@@ -57,10 +59,12 @@ declare global {
 }
 declare namespace LocalJSX {
     interface FeedbackButton {
+        "buttonPosition"?: string;
         "buttonStyle"?: string;
         "email"?: string;
         "emailPlaceholder"?: string;
         "errorModalTitle"?: string;
+        "hideIcon"?: boolean;
         "messagePlaceholder"?: string;
         "modalPosition"?: string;
         "modalTitle"?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pushfeedback",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Feedback widget for websites.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/pushfeedback/p-eac9210f.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t,H as o}from"./p-60079923.js";const n=class{constructor(t){e(this,t),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?",this.buttonStyle="default"}connectedCallback(){this.feedbackModal=document.createElement("feedback-modal"),["modalTitle","successModalTitle","errorModalTitle","modalPosition","sendButtonText","project","screenshotButtonTooltipText","screenshotTopbarText","email","emailPlaceholder","messagePlaceholder"].forEach((e=>{this.feedbackModal[e]=this[e]})),document.body.appendChild(this.feedbackModal)}disconnectedCallback(){document.body.removeChild(this.feedbackModal)}showModal(){this.feedbackModal.showModal=!0}render(){return t(o,null,t("a",{class:`feedback-button-content feedback-button-content--${this.buttonStyle}`,onClick:()=>this.showModal()},t("slot",null)))}};n.style=".feedback-button-content{cursor:pointer}.feedback-button-content--light{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);padding:5px 10px;font-size:var(--feedback-modal-button-font-size)}.feedback-button-content--light: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)}";var r,i,a=(r=function(e){!function(){var t=function(){return{escape:function(e){return e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1")},parseExtension:t,mimeType:function(e){var o,n;return(o="application/font-woff",n="image/jpeg",{woff:o,woff2:o,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:n,jpeg:n,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"})[t(e).toLowerCase()]||""},dataAsUrl:function(e,t){return"data:"+t+";base64,"+e},isDataUrl:function(e){return-1!==e.search(/^(data:)/)},canvasToBlob:function(e){return e.toBlob?new Promise((function(t){e.toBlob(t)})):function(e){return new Promise((function(t){for(var o=window.atob(e.toDataURL().split(",")[1]),n=o.length,r=new Uint8Array(n),i=0;i<n;i++)r[i]=o.charCodeAt(i);t(new Blob([r],{type:"image/png"}))}))}(e)},resolveUrl:function(e,t){var o=document.implementation.createHTMLDocument(),n=o.createElement("base");o.head.appendChild(n);var r=o.createElement("a");return o.body.appendChild(r),n.href=t,r.href=e,r.href},getAndEncode:function(e){return s.impl.options.cacheBust&&(e+=(/\?/.test(e)?"&":"?")+(new Date).getTime()),new Promise((function(t){var o,n=new XMLHttpRequest;if(n.onreadystatechange=function(){if(4===n.readyState)if(200===n.status){var r=new FileReader;r.onloadend=function(){var e=r.result.split(/,/)[1];t(e)},r.readAsDataURL(n.response)}else o?t(o):i("cannot fetch resource: "+e+", status: "+n.status)},n.ontimeout=function(){o?t(o):i("timeout of 30000ms occured while fetching resource: "+e)},n.responseType="blob",n.timeout=3e4,n.open("GET",e,!0),n.send(),s.impl.options.imagePlaceholder){var r=s.impl.options.imagePlaceholder.split(/,/);r&&r[1]&&(o=r[1])}function i(e){console.error(e),t("")}}))},uid:(e=0,function(){return"u"+("0000"+(Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)+e++}),delay:function(e){return function(t){return new Promise((function(o){setTimeout((function(){o(t)}),e)}))}},asArray:function(e){for(var t=[],o=e.length,n=0;n<o;n++)t.push(e[n]);return t},escapeXhtml:function(e){return e.replace(/#/g,"%23").replace(/\n/g,"%0A")},makeImage:function(e){return new Promise((function(t,o){var n=new Image;n.onload=function(){t(n)},n.onerror=o,n.src=e}))},width:function(e){var t=o(e,"border-left-width"),n=o(e,"border-right-width");return e.scrollWidth+t+n},height:function(e){var t=o(e,"border-top-width"),n=o(e,"border-bottom-width");return e.scrollHeight+t+n}};var e;function t(e){var t=/\.([^\.\/]*?)$/g.exec(e);return t?t[1]:""}function o(e,t){var o=window.getComputedStyle(e).getPropertyValue(t);return parseFloat(o.replace("px",""))}}(),o=function(){var e=/url\(['"]?([^'"]+?)['"]?\)/g;return{inlineAll:function(e,t,i){return o(e)?Promise.resolve(e).then(n).then((function(o){var n=Promise.resolve(e);return o.forEach((function(e){n=n.then((function(o){return r(o,e,t,i)}))})),n})):Promise.resolve(e)},shouldProcess:o,impl:{readUrls:n,inline:r}};function o(t){return-1!==t.search(e)}function n(o){for(var n,r=[];null!==(n=e.exec(o));)r.push(n[1]);return r.filter((function(e){return!t.isDataUrl(e)}))}function r(e,o,n,r){return Promise.resolve(o).then((function(e){return n?t.resolveUrl(e,n):e})).then(r||t.getAndEncode).then((function(e){return t.dataAsUrl(e,t.mimeType(o))})).then((function(n){return e.replace(function(e){return new RegExp("(url\\(['\"]?)("+t.escape(e)+")(['\"]?\\))","g")}(o),"$1"+n+"$3")}))}}(),n=function(){return{resolveAll:function(){return e().then((function(e){return Promise.all(e.map((function(e){return e.resolve()})))})).then((function(e){return e.join("\n")}))},impl:{readAll:e}};function e(){return Promise.resolve(t.asArray(document.styleSheets)).then((function(e){var o=[];return e.forEach((function(e){try{t.asArray(e.cssRules||[]).forEach(o.push.bind(o))}catch(t){console.log("Error while reading CSS rules from "+e.href,t.toString())}})),o})).then((function(e){return e.filter((function(e){return e.type===CSSRule.FONT_FACE_RULE})).filter((function(e){return o.shouldProcess(e.style.getPropertyValue("src"))}))})).then((function(t){return t.map(e)}));function e(e){return{resolve:function(){return o.inlineAll(e.cssText,(e.parentStyleSheet||{}).href)},src:function(){return e.style.getPropertyValue("src")}}}}}(),r=function(){return{inlineAll:function n(r){return r instanceof Element?function(e){var t=e.style.getPropertyValue("background");return t?o.inlineAll(t).then((function(t){e.style.setProperty("background",t,e.style.getPropertyPriority("background"))})).then((function(){return e})):Promise.resolve(e)}(r).then((function(){return r instanceof HTMLImageElement?e(r).inline():Promise.all(t.asArray(r.childNodes).map((function(e){return n(e)})))})):Promise.resolve(r)},impl:{newImage:e}};function e(e){return{inline:function(o){return t.isDataUrl(e.src)?Promise.resolve():Promise.resolve(e.src).then(o||t.getAndEncode).then((function(o){return t.dataAsUrl(o,t.mimeType(e.src))})).then((function(t){return new Promise((function(o,n){e.onload=o,e.onerror=n,e.src=t}))}))}}}}(),i=void 0,a=!1,s={toSvg:c,toPng:function(e,t){return d(e,t||{}).then((function(e){return e.toDataURL()}))},toJpeg:function(e,t){return d(e,t=t||{}).then((function(e){return e.toDataURL("image/jpeg",t.quality||1)}))},toBlob:function(e,o){return d(e,o||{}).then(t.canvasToBlob)},toPixelData:function(e,o){return d(e,o||{}).then((function(o){return o.getContext("2d").getImageData(0,0,t.width(e),t.height(e)).data}))},impl:{fontFaces:n,images:r,util:t,inliner:o,options:{}}};function c(e,o){return function(e){s.impl.options.imagePlaceholder=void 0===e.imagePlaceholder?i:e.imagePlaceholder,s.impl.options.cacheBust=void 0===e.cacheBust?a:e.cacheBust}(o=o||{}),Promise.resolve(e).then((function(e){return l(e,o.filter,!0)})).then(u).then(f).then((function(e){return o.bgcolor&&(e.style.backgroundColor=o.bgcolor),o.width&&(e.style.width=o.width+"px"),o.height&&(e.style.height=o.height+"px"),o.style&&Object.keys(o.style).forEach((function(t){e.style[t]=o.style[t]})),e})).then((function(n){return function(e,o,n){return Promise.resolve(e).then((function(e){return e.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(e)})).then(t.escapeXhtml).then((function(e){return'<foreignObject x="0" y="0" width="100%" height="100%">'+e+"</foreignObject>"})).then((function(e){return'<svg xmlns="http://www.w3.org/2000/svg" width="'+o+'" height="'+n+'">'+e+"</svg>"})).then((function(e){return"data:image/svg+xml;charset=utf-8,"+e}))}(n,o.width||t.width(e),o.height||t.height(e))}))}function d(e,o){return c(e,o).then(t.makeImage).then(t.delay(100)).then((function(n){var r=function(e){var n=document.createElement("canvas");if(n.width=o.width||t.width(e),n.height=o.height||t.height(e),o.bgcolor){var r=n.getContext("2d");r.fillStyle=o.bgcolor,r.fillRect(0,0,n.width,n.height)}return n}(e);return r.getContext("2d").drawImage(n,0,0),r}))}function l(e,o,n){return n||!o||o(e)?Promise.resolve(e).then((function(e){return e instanceof HTMLCanvasElement?t.makeImage(e.toDataURL()):e.cloneNode(!1)})).then((function(n){return function(e,o,n){var r=e.childNodes;return 0===r.length?Promise.resolve(o):function(e,t,o){var n=Promise.resolve();return t.forEach((function(t){n=n.then((function(){return l(t,o)})).then((function(t){t&&e.appendChild(t)}))})),n}(o,t.asArray(r),n).then((function(){return o}))}(e,n,o)})).then((function(o){return function(e,o){return o instanceof Element?Promise.resolve().then((function(){n=window.getComputedStyle(e),r=o.style,n.cssText?r.cssText=n.cssText:function(e,o){t.asArray(e).forEach((function(t){o.setProperty(t,e.getPropertyValue(t),e.getPropertyPriority(t))}))}(n,r);var n,r})).then((function(){[":before",":after"].forEach((function(n){!function(n){var r=window.getComputedStyle(e,n),i=r.getPropertyValue("content");if(""!==i&&"none"!==i){var a=t.uid();o.className=o.className+" "+a;var s=document.createElement("style");s.appendChild(function(e,o,n){var r="."+e+":"+o,i=n.cssText?a(n):s(n);return document.createTextNode(r+"{"+i+"}");function a(e){var t=e.getPropertyValue("content");return e.cssText+" content: "+t+";"}function s(e){return t.asArray(e).map(o).join("; ")+";";function o(t){return t+": "+e.getPropertyValue(t)+(e.getPropertyPriority(t)?" !important":"")}}}(a,n,r)),o.appendChild(s)}}(n)}))})).then((function(){e instanceof HTMLTextAreaElement&&(o.innerHTML=e.value),e instanceof HTMLInputElement&&o.setAttribute("value",e.value)})).then((function(){o instanceof SVGElement&&(o.setAttribute("xmlns","http://www.w3.org/2000/svg"),o instanceof SVGRectElement&&["width","height"].forEach((function(e){var t=o.getAttribute(e);t&&o.style.setProperty(e,t)})))})).then((function(){return o})):o}(e,o)})):Promise.resolve()}function u(e){return n.resolveAll().then((function(t){var o=document.createElement("style");return e.appendChild(o),o.appendChild(document.createTextNode(t)),e}))}function f(e){return r.inlineAll(e).then((function(){return e}))}e.exports=s}()},r(i={path:undefined,exports:{},require:function(){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}}),i.exports);const s=class{constructor(t){e(this,t),this.handleSubmit=async e=>{e.preventDefault(),this.showScreenshotMode=!1,this.showModal=!1,this.sending=!0;let t="";this.encodedScreenshot&&await this.encodedScreenshot.then((e=>{t=e})).catch((e=>{console.log(e)}));try{200===(await fetch("https://app.pushfeedback.com/api/feedback/",{method:"POST",body:JSON.stringify({url:window.location.href,message:this.formMessage,email:this.formEmail,project:this.project,screenshot:t}),headers:{"Content-Type":"application/json"}})).status?(this.formSuccess=!0,this.formError=!1):(this.formSuccess=!1,this.formError=!0)}catch(e){this.formSuccess=!1,this.formError=!0}finally{this.sending=!1,this.showModal=!0}},this.close=()=>{this.sending=!1,this.showModal=!1,this.showScreenshotMode=!1,this.hasSelectedElement=!1,this.encodedScreenshot=null,this.formSuccess=!1,this.formError=!1,this.formMessage="",this.formEmail=""},this.openScreenShot=()=>{this.hasSelectedElement=!1,this.showModal=!1,this.showScreenshotMode=!0,this.encodedScreenshot=null,document.getElementsByTagName("html")[0].style.overflow="auto"},this.closeScreenShot=()=>{this.showModal=!1,this.showScreenshotMode=!1,this.hasSelectedElement=!1,this.encodedScreenshot=null,this.overlay.style.display="none",document.getElementsByTagName("html")[0].style.overflow="inherit"},this.handleMouseOverScreenShot=e=>{if(e.preventDefault(),this.hasSelectedElement)return;this.overlay.style.display="none",this.screenshotModal.style.display="none";const t=document.elementFromPoint(e.clientX,e.clientY).getBoundingClientRect();this.screenshotModal.style.display="",this.elementSelected.style.position="absolute",this.elementSelected.style.left=`${t.left}px`,this.elementSelected.style.top=`${t.top}px`,this.elementSelected.style.width=`${t.width}px`,this.elementSelected.style.height=`${t.height}px`,this.elementSelected.classList.add("feedback-modal-element-hover"),this.topSide.style.position="absolute",this.topSide.style.left=`${t.left}px`,this.topSide.style.top="0px",this.topSide.style.width=`${t.width+8}px`,this.topSide.style.height=`${t.top}px`,this.topSide.style.backgroundColor="rgba(0, 0, 0, 0.3)",this.leftSide.style.position="absolute",this.leftSide.style.left="0px",this.leftSide.style.top="0px",this.leftSide.style.width=`${t.left}px`,this.leftSide.style.height="100vh",this.leftSide.style.backgroundColor="rgba(0, 0, 0, 0.3)",this.bottomSide.style.position="absolute",this.bottomSide.style.left=`${t.left}px`,this.bottomSide.style.top=`${t.bottom+8}px`,this.bottomSide.style.width=`${t.width+8}px`,this.bottomSide.style.height="100vh",this.bottomSide.style.backgroundColor="rgba(0, 0, 0, 0.3)",this.rightSide.style.position="absolute",this.rightSide.style.left=`${t.right+8}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.3)",this.screenshotModal.style.backgroundColor="transparent"},this.handleMouseClickedSelectedElement=e=>{e.preventDefault(),this.elementSelected&&this.elementSelected.classList.add("feedback-modal-element-selected");let t=this.elementSelected.getBoundingClientRect().top;this.elementSelected.style.top=`${t+window.pageYOffset}px`;const o=this.elementSelected.cloneNode(!0);document.body.appendChild(o),this.elementSelected.style.top=`${t}px`,this.encodedScreenshot=a.toPng(document.body,{cacheBust:!0}).then((function(e){return document.body.removeChild(o),e})).catch((function(e){return console.error("oops, something went wrong!",e),""})),document.getElementsByTagName("html")[0].style.overflow="hidden",this.hasSelectedElement=!0,this.overlay.style.display="block",this.showModal=!0},this.sending=!1,this.formMessage="",this.formEmail="",this.formSuccess=!1,this.formError=!1,this.encodedScreenshot=void 0,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?",this.showModal=!1,this.showScreenshotMode=!1,this.hasSelectedElement=!1}componentWillLoad(){this.formEmail=this.email}handleMessageInput(e){this.formMessage=e.target.value}handleEmailInput(e){this.formEmail=e.target.value}render(){return t("div",{class:"feedback-modal-wrapper"},this.showScreenshotMode&&t("div",{class:"feedback-modal-screenshot",ref:e=>this.screenshotModal=e,onMouseMove:this.handleMouseOverScreenShot},t("div",{class:"feedback-modal-screenshot-element-selected",ref:e=>this.elementSelected=e,onClick:this.handleMouseClickedSelectedElement}),t("div",{class:"top-side",ref:e=>this.topSide=e}),t("div",{class:"left-side",ref:e=>this.leftSide=e}),t("div",{class:"bottom-side",ref:e=>this.bottomSide=e}),t("div",{class:"right-side",ref:e=>this.rightSide=e}),t("div",{class:"feedback-modal-screenshot-header",onClick:this.closeScreenShot},t("span",null,this.screenshotTopbarText),t("span",{class:"feedback-modal-screenshot-close"},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-x"},t("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t("line",{x1:"6",y1:"6",x2:"18",y2:"18"})))),t("div",{class:"feedback-modal-screenshot-overlay",ref:e=>this.overlay=e})),this.showModal&&t("div",{class:`feedback-modal-content feedback-modal-content--${this.modalPosition}`,ref:e=>this.modalContent=e},t("div",{class:"feedback-modal-header"},this.formSuccess||this.formError?this.formSuccess?t("span",{class:"text-center"},this.successModalTitle):this.formError?t("span",{class:"text-center"},this.errorModalTitle):t("span",null):t("span",null,this.modalTitle),t("button",{class:"feedback-modal-close",onClick:this.close},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"#ccc","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-x"},t("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t("line",{x1:"6",y1:"6",x2:"18",y2:"18"})))),t("div",{class:"feedback-modal-body"},this.formSuccess||this.formError?t("span",null):t("form",{onSubmit:this.handleSubmit},t("div",{class:"feedback-modal-text"},t("textarea",{placeholder:this.messagePlaceholder,value:this.formMessage,onInput:e=>this.handleMessageInput(e),required:!0})),!this.email&&t("div",{class:"feedback-modal-email"},t("input",{type:"email",placeholder:this.emailPlaceholder,onInput:e=>this.handleEmailInput(e),value:this.formEmail})),t("div",{class:"feedback-modal-buttons"},t("button",{type:"button",class:"button"+(this.encodedScreenshot?" active":""),title:this.screenshotButtonTooltipText,onClick:this.openScreenShot,disabled:this.sending},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-camera"},t("path",{d:"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"}),t("circle",{cx:"12",cy:"13",r:"4"}))),t("button",{class:"button",type:"submit",disabled:this.sending},this.sendButtonText)))),t("div",{class:"feedback-modal-footer"},t("div",{class:"feedback-logo"},t("svg",{class:"w-8 h-8",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg"},t("defs",null,t("radialGradient",{cx:"21.152%",cy:"86.063%",fx:"21.152%",fy:"86.063%",r:"79.941%",id:"footer-logo"},t("stop",{"stop-color":"#4FD1C5",offset:"0%"}),t("stop",{"stop-color":"#81E6D9",offset:"25.871%"}),t("stop",{"stop-color":"#338CF5",offset:"100%"}))),t("rect",{width:"32",height:"32",rx:"16",fill:"url(#footer-logo)","fill-rule":"nonzero"}))," ",t("a",{href:"https://pushfeedback.com"},"PushFeedback")))))}};s.style=".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)}";export{n as feedback_button,s as feedback_modal}