pushfeedback 0.1.37 → 0.1.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/cjs/feedback-button_2.cjs.entry.js +388 -379
  2. package/dist/cjs/{index-d64bfb06.js → index-a717311c.js} +4 -0
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/pushfeedback.cjs.js +2 -2
  5. package/dist/collection/components/feedback-button/feedback-button.js +639 -620
  6. package/dist/collection/components/feedback-modal/feedback-modal.js +838 -814
  7. package/dist/collection/index.js +1 -1
  8. package/dist/components/feedback-button.js +152 -149
  9. package/dist/components/feedback-modal2.js +340 -332
  10. package/dist/esm/feedback-button_2.entry.js +388 -379
  11. package/dist/esm/{index-b07fba3a.js → index-37061d71.js} +4 -0
  12. package/dist/esm/loader.js +3 -3
  13. package/dist/esm/polyfills/core-js.js +0 -0
  14. package/dist/esm/polyfills/dom.js +0 -0
  15. package/dist/esm/polyfills/es5-html-element.js +0 -0
  16. package/dist/esm/polyfills/index.js +0 -0
  17. package/dist/esm/polyfills/system.js +0 -0
  18. package/dist/esm/pushfeedback.js +3 -3
  19. package/dist/pushfeedback/{p-ea59cbec.entry.js → p-56eed605.entry.js} +2 -2
  20. package/dist/pushfeedback/p-9e531691.js +2 -0
  21. package/dist/pushfeedback/pushfeedback.esm.js +1 -1
  22. package/dist/types/components/feedback-button/feedback-button.d.ts +40 -39
  23. package/dist/types/components/feedback-modal/feedback-modal.d.ts +65 -64
  24. package/dist/types/components.d.ts +4 -0
  25. package/dist/types/index.d.ts +1 -1
  26. package/package.json +2 -2
  27. package/dist/pushfeedback/p-a0681be3.js +0 -2
package/dist/esm/feedback-button_2.entry.js CHANGED
@@ -1,107 +1,109 @@
1
- import { r as registerInstance, h, H as Host, g as getElement } from './index-b07fba3a.js';
1
+ import { r as registerInstance, h, H as Host, g as getElement } from './index-37061d71.js';
2
2
 
3
3
  const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index)}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);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;color:var(--feedback-button-light-text-color);display:flex;font-family:var(--feedback-font-family);font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);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;color:var(--feedback-button-dark-text-color);display:flex;font-family:var(--feedback-font-family);font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}";
4
4
 
5
- const FeedbackButton = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.customFont = false;
9
- this.errorMessage = "Please try again later.";
10
- this.errorMessage403 = "The request URL does not match the one defined in PushFeedback for this project.";
11
- this.errorMessage404 = "We could not find the provided project id in PushFeedback.";
12
- this.modalTitle = 'Share your feedback';
13
- this.modalTitleSuccess = 'Thanks for your feedback!';
14
- this.modalTitleError = "Oops!";
15
- this.modalPosition = 'center';
16
- this.sendButtonText = 'Send';
17
- this.successMessage = "";
18
- this.project = '';
19
- this.screenshotButtonText = 'Add a screenshot';
20
- this.screenshotTopbarText = 'Select an element on this page';
21
- this.hideEmail = false;
22
- this.emailAddress = '';
23
- this.emailPlaceholder = 'Email address (optional)';
24
- this.messagePlaceholder = 'Comments';
25
- this.hideRating = false;
26
- this.ratingMode = 'thumbs';
27
- this.ratingPlaceholder = 'Was this page helpful?';
28
- this.ratingStarsPlaceholder = 'How would you rate this page?';
29
- this.buttonStyle = 'default';
30
- this.buttonPosition = 'default';
31
- this.hideIcon = false;
32
- this.hideScreenshotButton = false;
33
- this.hidePrivacyPolicy = true;
34
- this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
35
- this.fetchData = true;
36
- }
37
- connectedCallback() {
38
- this.feedbackModal = document.createElement('feedback-modal');
39
- const props = [
40
- 'customFont',
41
- 'errorMessage',
42
- 'errorMessage403',
43
- 'errorMessage404',
44
- 'modalTitle',
45
- 'modalTitleSuccess',
46
- 'modalTitleError',
47
- 'modalPosition',
48
- 'sendButtonText',
49
- 'successMessage',
50
- 'project',
51
- 'screenshotButtonText',
52
- 'screenshotTopbarText',
53
- 'hideEmail',
54
- 'emailAddress',
55
- 'emailPlaceholder',
56
- 'messagePlaceholder',
57
- 'hideRating',
58
- 'ratingMode',
59
- 'ratingPlaceholder',
60
- 'ratingStarsPlaceholder',
61
- 'hideScreenshotButton',
62
- 'hidePrivacyPolicy',
63
- 'privacyPolicyText',
64
- 'fetchData'
65
- ];
66
- props.forEach(prop => {
67
- this.feedbackModal[prop] = this[prop];
68
- });
69
- document.body.appendChild(this.feedbackModal);
70
- }
71
- disconnectedCallback() {
72
- document.body.removeChild(this.feedbackModal);
73
- }
74
- isSafariBrowser() {
75
- const isSafari = /safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent);
76
- return isSafari;
77
- }
78
- componentDidLoad() {
79
- if (this.buttonPosition === 'center-right') {
80
- const buttonContent = this.el.shadowRoot.querySelector('.feedback-button-content');
81
- let adjustement = 0;
82
- if (this.isSafariBrowser()) {
83
- adjustement = 10;
84
- }
85
- buttonContent.style.right = `${(buttonContent.offsetWidth + adjustement) / 2 * -1}px`;
86
- }
87
- if (!this.customFont) {
88
- this.loadInterFont();
89
- }
90
- }
91
- loadInterFont() {
92
- const link = document.createElement('link');
93
- link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap';
94
- link.rel = 'stylesheet';
95
- document.head.appendChild(link);
96
- }
97
- showModal() {
98
- this.feedbackModal.showModal = true;
99
- }
100
- render() {
101
- 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-edit-3" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), !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-edit-3" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
102
- }
103
- get el() { return getElement(this); }
104
- };
5
+ const FeedbackButton = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ this.customFont = false;
9
+ this.errorMessage = "Please try again later.";
10
+ this.errorMessage403 = "The request URL does not match the one defined in PushFeedback for this project.";
11
+ this.errorMessage404 = "We could not find the provided project id in PushFeedback.";
12
+ this.modalTitle = 'Share your feedback';
13
+ this.modalTitleSuccess = 'Thanks for your feedback!';
14
+ this.modalTitleError = "Oops!";
15
+ this.modalPosition = 'center';
16
+ this.sendButtonText = 'Send';
17
+ this.successMessage = "";
18
+ this.project = '';
19
+ this.screenshotButtonText = 'Add a screenshot';
20
+ this.screenshotTopbarText = 'Select an element on this page';
21
+ this.hideEmail = false;
22
+ this.emailAddress = '';
23
+ this.emailPlaceholder = 'Email address (optional)';
24
+ this.messagePlaceholder = 'Comments';
25
+ this.hideRating = false;
26
+ this.rating = undefined;
27
+ this.ratingMode = 'thumbs';
28
+ this.ratingPlaceholder = 'Was this page helpful?';
29
+ this.ratingStarsPlaceholder = 'How would you rate this page?';
30
+ this.buttonStyle = 'default';
31
+ this.buttonPosition = 'default';
32
+ this.hideIcon = false;
33
+ this.hideScreenshotButton = false;
34
+ this.hidePrivacyPolicy = true;
35
+ this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
36
+ this.fetchData = true;
37
+ }
38
+ connectedCallback() {
39
+ this.feedbackModal = document.createElement('feedback-modal');
40
+ const props = [
41
+ 'customFont',
42
+ 'errorMessage',
43
+ 'errorMessage403',
44
+ 'errorMessage404',
45
+ 'modalTitle',
46
+ 'modalTitleSuccess',
47
+ 'modalTitleError',
48
+ 'modalPosition',
49
+ 'sendButtonText',
50
+ 'successMessage',
51
+ 'project',
52
+ 'screenshotButtonText',
53
+ 'screenshotTopbarText',
54
+ 'hideEmail',
55
+ 'emailAddress',
56
+ 'emailPlaceholder',
57
+ 'messagePlaceholder',
58
+ 'hideRating',
59
+ 'rating',
60
+ 'ratingMode',
61
+ 'ratingPlaceholder',
62
+ 'ratingStarsPlaceholder',
63
+ 'hideScreenshotButton',
64
+ 'hidePrivacyPolicy',
65
+ 'privacyPolicyText',
66
+ 'fetchData'
67
+ ];
68
+ props.forEach(prop => {
69
+ this.feedbackModal[prop] = this[prop];
70
+ });
71
+ document.body.appendChild(this.feedbackModal);
72
+ }
73
+ disconnectedCallback() {
74
+ document.body.removeChild(this.feedbackModal);
75
+ }
76
+ isSafariBrowser() {
77
+ const isSafari = /safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent);
78
+ return isSafari;
79
+ }
80
+ componentDidLoad() {
81
+ if (this.buttonPosition === 'center-right') {
82
+ const buttonContent = this.el.shadowRoot.querySelector('.feedback-button-content');
83
+ let adjustement = 0;
84
+ if (this.isSafariBrowser()) {
85
+ adjustement = 10;
86
+ }
87
+ buttonContent.style.right = `${(buttonContent.offsetWidth + adjustement) / 2 * -1}px`;
88
+ }
89
+ if (!this.customFont) {
90
+ this.loadInterFont();
91
+ }
92
+ }
93
+ loadInterFont() {
94
+ const link = document.createElement('link');
95
+ link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap';
96
+ link.rel = 'stylesheet';
97
+ document.head.appendChild(link);
98
+ }
99
+ showModal() {
100
+ this.feedbackModal.showModal = true;
101
+ }
102
+ render() {
103
+ 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-edit-3" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), !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-edit-3" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
104
+ }
105
+ get el() { return getElement(this); }
106
+ };
105
107
  FeedbackButton.style = feedbackButtonCss;
106
108
 
107
109
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -7950,284 +7952,291 @@ var html2canvas = createCommonjsModule(function (module, exports) {
7950
7952
 
7951
7953
  const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.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);left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%);width:100%;z-index:var(--feedback-modal-content-z-index)}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-family:var(--feedback-modal-header-font-family);font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-family:var(--feedback-modal-content-font-family);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.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;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;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;display:flex;font-size:var(--feedback-modal-button-font-size);font-family:var(--feedback-modal-content-font-family);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px;font-family:var(--feedback-modal-content-font-family)}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo{align-items:center;display:flex;justify-content:center;margin-top:5px}.feedback-logo a{margin-left:3px}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-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-screenshot-header-text-color);cursor:pointer;display:flex;font-family:var(--feedback-modal-content-font-family);left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:1px solid var(--feedback-modal-element-selected-border-color)}@media screen and (min-width: 768px){.feedback-modal-content{max-width:600px}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:300px;left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:300px;left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}}";
7952
7954
 
7953
- const FeedbackModal = class {
7954
- constructor(hostRef) {
7955
- registerInstance(this, hostRef);
7956
- this.onScrollDebounced = () => {
7957
- clearTimeout(this.scrollTimeout);
7958
- this.scrollTimeout = setTimeout(() => {
7959
- document.documentElement.classList.remove('feedback-modal-screenshot-closing');
7960
- document.documentElement.style.top = "";
7961
- window.removeEventListener('scroll', this.onScrollDebounced);
7962
- }, 200);
7963
- };
7964
- this.handleSubmit = async (event) => {
7965
- event.preventDefault();
7966
- this.resetOverflow();
7967
- this.showScreenshotMode = false;
7968
- this.showScreenshotTopBar = false;
7969
- this.showModal = false;
7970
- this.sending = true;
7971
- try {
7972
- const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
7973
- method: 'POST',
7974
- body: JSON.stringify({
7975
- url: window.location.href,
7976
- message: this.formMessage,
7977
- email: this.formEmail,
7978
- project: this.project,
7979
- screenshot: this.encodedScreenshot,
7980
- rating: this.selectedRating,
7981
- ratingMode: this.ratingMode,
7982
- }),
7983
- headers: {
7984
- 'Content-Type': 'application/json'
7985
- }
7986
- });
7987
- if (res.status === 201) {
7988
- this.formSuccess = true;
7989
- this.formError = false;
7990
- }
7991
- else {
7992
- this.formSuccess = false;
7993
- this.formError = true;
7994
- this.formErrorStatus = res.status;
7995
- }
7996
- }
7997
- catch (error) {
7998
- console.log(error);
7999
- this.formSuccess = false;
8000
- this.formError = true;
8001
- this.formErrorStatus = 500;
8002
- }
8003
- finally {
8004
- this.sending = false;
8005
- this.showModal = true;
8006
- }
8007
- };
8008
- this.close = () => {
8009
- this.sending = false;
8010
- this.showModal = false;
8011
- this.showScreenshotMode = false;
8012
- this.showScreenshotTopBar = false;
8013
- this.hasSelectedElement = false;
8014
- this.encodedScreenshot = null;
8015
- this.formSuccess = false;
8016
- this.formError = false;
8017
- this.formErrorStatus = 500;
8018
- this.formMessage = '';
8019
- this.formEmail = '';
8020
- this.resetOverflow();
8021
- };
8022
- this.openScreenShot = () => {
8023
- this.hasSelectedElement = false;
8024
- this.showModal = false;
8025
- this.showScreenshotMode = true;
8026
- this.showScreenshotTopBar = true;
8027
- this.encodedScreenshot = null;
8028
- if (window.innerWidth > document.documentElement.clientWidth) {
8029
- document.documentElement.classList.add('feedback-modal-screenshot-open--scroll');
8030
- }
8031
- const scrollY = window.scrollY;
8032
- document.documentElement.style.top = `-${scrollY}px`;
8033
- window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
8034
- document.documentElement.classList.add('feedback-modal-screenshot-open');
8035
- };
8036
- this.closeScreenShot = () => {
8037
- this.showModal = false;
8038
- this.showScreenshotMode = false;
8039
- this.showScreenshotTopBar = false;
8040
- this.hasSelectedElement = false;
8041
- this.encodedScreenshot = null;
8042
- this.resetOverflow();
8043
- };
8044
- this.handleMouseOverScreenShot = (event) => {
8045
- event.preventDefault();
8046
- if (this.hasSelectedElement)
8047
- return;
8048
- const borderOffset = 2;
8049
- this.screenshotModal.style.display = 'none';
8050
- const elementUnder = document.elementFromPoint(event.clientX, event.clientY);
8051
- const rect = elementUnder.getBoundingClientRect();
8052
- this.screenshotModal.style.display = '';
8053
- // Get the bounding box of the element selected
8054
- this.elementSelected.style.position = "absolute";
8055
- this.elementSelected.style.left = `${rect.left}px`;
8056
- this.elementSelected.style.top = `${rect.top}px`;
8057
- this.elementSelected.style.width = `${rect.width}px`;
8058
- this.elementSelected.style.height = `${rect.height}px`;
8059
- this.elementSelected.classList.add('feedback-modal-element-hover');
8060
- // Set the background color of nonselected areas
8061
- // Top
8062
- this.topSide.style.position = "absolute";
8063
- this.topSide.style.left = `${rect.left}px`;
8064
- this.topSide.style.top = '0px';
8065
- this.topSide.style.width = `${rect.width + borderOffset}px`;
8066
- this.topSide.style.height = `${rect.top}px`;
8067
- this.topSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
8068
- // Left
8069
- this.leftSide.style.position = "absolute";
8070
- this.leftSide.style.left = '0px';
8071
- this.leftSide.style.top = '0px';
8072
- this.leftSide.style.width = `${rect.left}px`;
8073
- this.leftSide.style.height = '100vh';
8074
- this.leftSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
8075
- // Bottom
8076
- this.bottomSide.style.position = "absolute";
8077
- this.bottomSide.style.left = `${rect.left}px`;
8078
- this.bottomSide.style.top = `${rect.bottom + borderOffset}px`;
8079
- this.bottomSide.style.width = `${rect.width + borderOffset}px`;
8080
- this.bottomSide.style.height = '100vh';
8081
- this.bottomSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
8082
- // Right
8083
- this.rightSide.style.position = "absolute";
8084
- this.rightSide.style.left = `${rect.right + borderOffset}px`;
8085
- this.rightSide.style.top = '0px';
8086
- this.rightSide.style.width = '100%';
8087
- this.rightSide.style.height = '100vh';
8088
- this.rightSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
8089
- // Restore the visibility of the screenshot-modal
8090
- this.screenshotModal.style.backgroundColor = 'transparent';
8091
- };
8092
- this.handleMouseClickedSelectedElement = async (event) => {
8093
- event.preventDefault();
8094
- if (!this.elementSelected) {
8095
- return;
8096
- }
8097
- this.hasSelectedElement = true;
8098
- this.elementSelected.classList.add('feedback-modal-element-selected');
8099
- // Get the top position including the scroll offset
8100
- const rectTop = this.elementSelected.getBoundingClientRect().top;
8101
- const topWithScroll = rectTop + window.scrollY;
8102
- // Move the element with the scroll offset
8103
- this.elementSelected.style.top = `${topWithScroll}px`;
8104
- // Clone the selected element and append it to the body
8105
- const clonedElementSelected = this.elementSelected.cloneNode(true);
8106
- document.body.appendChild(clonedElementSelected);
8107
- // Reset the top position of the original element
8108
- this.elementSelected.style.top = `${rectTop}px`;
8109
- this.showScreenshotTopBar = false;
8110
- this.showModal = false;
8111
- try {
8112
- const dataUrl = await this.captureScreenshot();
8113
- console.log('Screenshot captured');
8114
- this.encodedScreenshot = dataUrl;
8115
- }
8116
- catch (error) {
8117
- console.error('Failed to capture screenshot:', error);
8118
- this.hasSelectedElement = false;
8119
- }
8120
- finally {
8121
- // Remove the cloned element and show the modal again
8122
- document.body.removeChild(clonedElementSelected);
8123
- this.showModal = true;
8124
- }
8125
- };
8126
- this.sending = false;
8127
- this.formMessage = '';
8128
- this.formEmail = '';
8129
- this.formSuccess = false;
8130
- this.formError = false;
8131
- this.formErrorStatus = 500;
8132
- this.encodedScreenshot = undefined;
8133
- this.isPrivacyChecked = false;
8134
- this.whitelabel = false;
8135
- this.selectedRating = 0;
8136
- this.errorMessage = "Please try again later.";
8137
- this.errorMessage403 = "The request URL does not match the one defined in PushFeedback for this project.";
8138
- this.errorMessage404 = "We could not find the provided project ID in PushFeedback.";
8139
- this.modalTitle = 'Share your feedback';
8140
- this.modalTitleSuccess = 'Thanks for your feedback!';
8141
- this.modalTitleError = "Oops!";
8142
- this.modalPosition = 'center';
8143
- this.sendButtonText = 'Send';
8144
- this.successMessage = "";
8145
- this.project = '';
8146
- this.screenshotButtonText = 'Add a screenshot';
8147
- this.screenshotTopbarText = 'Select an element on this page';
8148
- this.hideEmail = false;
8149
- this.emailAddress = '';
8150
- this.emailPlaceholder = 'Email address (optional)';
8151
- this.messagePlaceholder = 'Comments';
8152
- this.hideRating = false;
8153
- this.ratingMode = 'thumbs';
8154
- this.ratingPlaceholder = 'Was this page helpful?';
8155
- this.ratingStarsPlaceholder = 'How would you rate this page?';
8156
- this.showModal = false;
8157
- this.showScreenshotMode = false;
8158
- this.showScreenshotTopBar = false;
8159
- this.hasSelectedElement = false;
8160
- this.hideScreenshotButton = false;
8161
- this.hidePrivacyPolicy = true;
8162
- this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
8163
- this.fetchData = true;
8164
- }
8165
- componentWillLoad() {
8166
- if (this.fetchData)
8167
- this.fetchProjectData();
8168
- this.formEmail = this.emailAddress;
8169
- }
8170
- async fetchProjectData() {
8171
- try {
8172
- const response = await fetch('https://app.pushfeedback.com/api/projects/' + this.project + '/');
8173
- const data = await response.json();
8174
- this.whitelabel = data.whitelabel;
8175
- }
8176
- catch (error) {
8177
- console.log(error);
8178
- }
8179
- }
8180
- resetOverflow() {
8181
- document.documentElement.classList.remove('feedback-modal-screenshot-open');
8182
- document.documentElement.classList.remove('feedback-modal-screenshot-open--scroll');
8183
- document.documentElement.classList.add('feedback-modal-screenshot-closing');
8184
- window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
8185
- window.addEventListener('scroll', this.onScrollDebounced);
8186
- }
8187
- handleMessageInput(event) {
8188
- this.formMessage = event.target.value;
8189
- }
8190
- handleEmailInput(event) {
8191
- this.formEmail = event.target.value;
8192
- }
8193
- captureScreenshot() {
8194
- return new Promise((resolve, reject) => {
8195
- requestAnimationFrame(() => {
8196
- html2canvas(document.body, {
8197
- x: window.scrollX,
8198
- y: window.scrollY,
8199
- width: window.innerWidth,
8200
- height: window.innerHeight,
8201
- }).then(canvas => {
8202
- const dataUrl = canvas.toDataURL();
8203
- resolve(dataUrl);
8204
- })
8205
- .catch(error => {
8206
- console.error(error);
8207
- reject(error);
8208
- });
8209
- });
8210
- });
8211
- }
8212
- handleCheckboxChange(event) {
8213
- this.isPrivacyChecked = event.target.checked;
8214
- }
8215
- handleRatingChange(newRating) {
8216
- this.selectedRating = newRating;
8217
- }
8218
- render() {
8219
- return (h("div", { class: 'feedback-modal-wrapper' }, this.showScreenshotMode && (h("div", { class: "feedback-modal-screenshot", ref: el => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, h("div", { class: "feedback-modal-screenshot-element-selected", ref: el => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), h("div", { class: "top-side", ref: el => (this.topSide = el) }), h("div", { class: "left-side", ref: el => (this.leftSide = el) }), h("div", { class: "bottom-side", ref: el => (this.bottomSide = el) }), h("div", { class: "right-side", ref: el => (this.rightSide = el) }), this.showScreenshotTopBar && (h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, h("span", null, this.screenshotTopbarText), h("span", { class: "feedback-modal-screenshot-close" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (h("div", { class: "feedback-overlay" })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.showModal ? 'feedback-modal-content--open' : ''}`, ref: el => (this.modalContent = el) }, h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (h("span", null, this.modalTitle)) : this.formSuccess ? (h("span", null, this.modalTitleSuccess)) : h("span", null, this.modalTitleError), h("button", { class: "feedback-modal-close", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
8220
- event.preventDefault();
8221
- this.handleRatingChange(1);
8222
- } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { title: "No", class: `feedback-modal-rating-button ${this.selectedRating === 5 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
8223
- event.preventDefault();
8224
- this.handleRatingChange(5);
8225
- } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, class: `feedback-modal-rating-button ${this.selectedRating >= rating ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
8226
- event.preventDefault();
8227
- this.handleRatingChange(rating);
8228
- } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail }))), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? "feedback-modal-button--active" : ""}`, onClick: this.openScreenShot, disabled: this.sending }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" })), this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("p", { class: "feedback-modal-message" }, this.successMessage)) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message" }, this.errorMessage)) : h("span", null)), h("div", { class: "feedback-modal-footer", style: { display: this.whitelabel ? 'none' : 'block' } }, h("div", { class: "feedback-logo" }, "Powered by ", h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")))))));
8229
- }
8230
- };
7955
+ const FeedbackModal = class {
7956
+ constructor(hostRef) {
7957
+ registerInstance(this, hostRef);
7958
+ this.onScrollDebounced = () => {
7959
+ clearTimeout(this.scrollTimeout);
7960
+ this.scrollTimeout = setTimeout(() => {
7961
+ document.documentElement.classList.remove('feedback-modal-screenshot-closing');
7962
+ document.documentElement.style.top = "";
7963
+ window.removeEventListener('scroll', this.onScrollDebounced);
7964
+ }, 200);
7965
+ };
7966
+ this.handleSubmit = async (event) => {
7967
+ event.preventDefault();
7968
+ this.resetOverflow();
7969
+ this.showScreenshotMode = false;
7970
+ this.showScreenshotTopBar = false;
7971
+ this.showModal = false;
7972
+ this.sending = true;
7973
+ try {
7974
+ const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
7975
+ method: 'POST',
7976
+ body: JSON.stringify({
7977
+ url: window.location.href,
7978
+ message: this.formMessage,
7979
+ email: this.formEmail,
7980
+ project: this.project,
7981
+ screenshot: this.encodedScreenshot,
7982
+ rating: this.selectedRating,
7983
+ ratingMode: this.ratingMode,
7984
+ }),
7985
+ headers: {
7986
+ 'Content-Type': 'application/json'
7987
+ }
7988
+ });
7989
+ if (res.status === 201) {
7990
+ this.formSuccess = true;
7991
+ this.formError = false;
7992
+ }
7993
+ else {
7994
+ this.formSuccess = false;
7995
+ this.formError = true;
7996
+ this.formErrorStatus = res.status;
7997
+ }
7998
+ }
7999
+ catch (error) {
8000
+ console.log(error);
8001
+ this.formSuccess = false;
8002
+ this.formError = true;
8003
+ this.formErrorStatus = 500;
8004
+ }
8005
+ finally {
8006
+ this.sending = false;
8007
+ this.showModal = true;
8008
+ }
8009
+ };
8010
+ this.close = () => {
8011
+ this.sending = false;
8012
+ this.showModal = false;
8013
+ this.showScreenshotMode = false;
8014
+ this.showScreenshotTopBar = false;
8015
+ this.hasSelectedElement = false;
8016
+ this.encodedScreenshot = null;
8017
+ this.formSuccess = false;
8018
+ this.formError = false;
8019
+ this.formErrorStatus = 500;
8020
+ this.formMessage = '';
8021
+ this.formEmail = '';
8022
+ this.resetOverflow();
8023
+ };
8024
+ this.openScreenShot = () => {
8025
+ this.hasSelectedElement = false;
8026
+ this.showModal = false;
8027
+ this.showScreenshotMode = true;
8028
+ this.showScreenshotTopBar = true;
8029
+ this.encodedScreenshot = null;
8030
+ if (window.innerWidth > document.documentElement.clientWidth) {
8031
+ document.documentElement.classList.add('feedback-modal-screenshot-open--scroll');
8032
+ }
8033
+ const scrollY = window.scrollY;
8034
+ document.documentElement.style.top = `-${scrollY}px`;
8035
+ window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
8036
+ document.documentElement.classList.add('feedback-modal-screenshot-open');
8037
+ };
8038
+ this.closeScreenShot = () => {
8039
+ this.showModal = false;
8040
+ this.showScreenshotMode = false;
8041
+ this.showScreenshotTopBar = false;
8042
+ this.hasSelectedElement = false;
8043
+ this.encodedScreenshot = null;
8044
+ this.resetOverflow();
8045
+ };
8046
+ this.handleMouseOverScreenShot = (event) => {
8047
+ event.preventDefault();
8048
+ if (this.hasSelectedElement)
8049
+ return;
8050
+ const borderOffset = 2;
8051
+ this.screenshotModal.style.display = 'none';
8052
+ const elementUnder = document.elementFromPoint(event.clientX, event.clientY);
8053
+ const rect = elementUnder.getBoundingClientRect();
8054
+ this.screenshotModal.style.display = '';
8055
+ // Get the bounding box of the element selected
8056
+ this.elementSelected.style.position = "absolute";
8057
+ this.elementSelected.style.left = `${rect.left}px`;
8058
+ this.elementSelected.style.top = `${rect.top}px`;
8059
+ this.elementSelected.style.width = `${rect.width}px`;
8060
+ this.elementSelected.style.height = `${rect.height}px`;
8061
+ this.elementSelected.classList.add('feedback-modal-element-hover');
8062
+ // Set the background color of nonselected areas
8063
+ // Top
8064
+ this.topSide.style.position = "absolute";
8065
+ this.topSide.style.left = `${rect.left}px`;
8066
+ this.topSide.style.top = '0px';
8067
+ this.topSide.style.width = `${rect.width + borderOffset}px`;
8068
+ this.topSide.style.height = `${rect.top}px`;
8069
+ this.topSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
8070
+ // Left
8071
+ this.leftSide.style.position = "absolute";
8072
+ this.leftSide.style.left = '0px';
8073
+ this.leftSide.style.top = '0px';
8074
+ this.leftSide.style.width = `${rect.left}px`;
8075
+ this.leftSide.style.height = '100vh';
8076
+ this.leftSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
8077
+ // Bottom
8078
+ this.bottomSide.style.position = "absolute";
8079
+ this.bottomSide.style.left = `${rect.left}px`;
8080
+ this.bottomSide.style.top = `${rect.bottom + borderOffset}px`;
8081
+ this.bottomSide.style.width = `${rect.width + borderOffset}px`;
8082
+ this.bottomSide.style.height = '100vh';
8083
+ this.bottomSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
8084
+ // Right
8085
+ this.rightSide.style.position = "absolute";
8086
+ this.rightSide.style.left = `${rect.right + borderOffset}px`;
8087
+ this.rightSide.style.top = '0px';
8088
+ this.rightSide.style.width = '100%';
8089
+ this.rightSide.style.height = '100vh';
8090
+ this.rightSide.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
8091
+ // Restore the visibility of the screenshot-modal
8092
+ this.screenshotModal.style.backgroundColor = 'transparent';
8093
+ };
8094
+ this.handleMouseClickedSelectedElement = async (event) => {
8095
+ event.preventDefault();
8096
+ if (!this.elementSelected) {
8097
+ return;
8098
+ }
8099
+ this.hasSelectedElement = true;
8100
+ this.elementSelected.classList.add('feedback-modal-element-selected');
8101
+ // Get the top position including the scroll offset
8102
+ const rectTop = this.elementSelected.getBoundingClientRect().top;
8103
+ const topWithScroll = rectTop + window.scrollY;
8104
+ // Move the element with the scroll offset
8105
+ this.elementSelected.style.top = `${topWithScroll}px`;
8106
+ // Clone the selected element and append it to the body
8107
+ const clonedElementSelected = this.elementSelected.cloneNode(true);
8108
+ document.body.appendChild(clonedElementSelected);
8109
+ // Reset the top position of the original element
8110
+ this.elementSelected.style.top = `${rectTop}px`;
8111
+ this.showScreenshotTopBar = false;
8112
+ this.showModal = false;
8113
+ try {
8114
+ const dataUrl = await this.captureScreenshot();
8115
+ console.log('Screenshot captured');
8116
+ this.encodedScreenshot = dataUrl;
8117
+ }
8118
+ catch (error) {
8119
+ console.error('Failed to capture screenshot:', error);
8120
+ this.hasSelectedElement = false;
8121
+ }
8122
+ finally {
8123
+ // Remove the cloned element and show the modal again
8124
+ document.body.removeChild(clonedElementSelected);
8125
+ this.showModal = true;
8126
+ }
8127
+ };
8128
+ this.sending = false;
8129
+ this.formMessage = '';
8130
+ this.formEmail = '';
8131
+ this.formSuccess = false;
8132
+ this.formError = false;
8133
+ this.formErrorStatus = 500;
8134
+ this.encodedScreenshot = undefined;
8135
+ this.isPrivacyChecked = false;
8136
+ this.whitelabel = false;
8137
+ this.selectedRating = 0;
8138
+ this.errorMessage = "Please try again later.";
8139
+ this.errorMessage403 = "The request URL does not match the one defined in PushFeedback for this project.";
8140
+ this.errorMessage404 = "We could not find the provided project ID in PushFeedback.";
8141
+ this.modalTitle = 'Share your feedback';
8142
+ this.modalTitleSuccess = 'Thanks for your feedback!';
8143
+ this.modalTitleError = "Oops!";
8144
+ this.modalPosition = 'center';
8145
+ this.sendButtonText = 'Send';
8146
+ this.successMessage = "";
8147
+ this.project = '';
8148
+ this.screenshotButtonText = 'Add a screenshot';
8149
+ this.screenshotTopbarText = 'Select an element on this page';
8150
+ this.hideEmail = false;
8151
+ this.emailAddress = '';
8152
+ this.emailPlaceholder = 'Email address (optional)';
8153
+ this.messagePlaceholder = 'Comments';
8154
+ this.hideRating = false;
8155
+ this.rating = undefined;
8156
+ this.ratingMode = 'thumbs';
8157
+ this.ratingPlaceholder = 'Was this page helpful?';
8158
+ this.ratingStarsPlaceholder = 'How would you rate this page?';
8159
+ this.showModal = false;
8160
+ this.showScreenshotMode = false;
8161
+ this.showScreenshotTopBar = false;
8162
+ this.hasSelectedElement = false;
8163
+ this.hideScreenshotButton = false;
8164
+ this.hidePrivacyPolicy = true;
8165
+ this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
8166
+ this.fetchData = true;
8167
+ }
8168
+ componentWillLoad() {
8169
+ if (this.fetchData)
8170
+ this.fetchProjectData();
8171
+ this.formEmail = this.emailAddress;
8172
+ if (this.rating) {
8173
+ this.selectedRating = this.rating;
8174
+ }
8175
+ if (this.ratingMode == "thumbs" && this.rating == 0) {
8176
+ this.selectedRating = 5;
8177
+ }
8178
+ }
8179
+ async fetchProjectData() {
8180
+ try {
8181
+ const response = await fetch('https://app.pushfeedback.com/api/projects/' + this.project + '/');
8182
+ const data = await response.json();
8183
+ this.whitelabel = data.whitelabel;
8184
+ }
8185
+ catch (error) {
8186
+ console.log(error);
8187
+ }
8188
+ }
8189
+ resetOverflow() {
8190
+ document.documentElement.classList.remove('feedback-modal-screenshot-open');
8191
+ document.documentElement.classList.remove('feedback-modal-screenshot-open--scroll');
8192
+ document.documentElement.classList.add('feedback-modal-screenshot-closing');
8193
+ window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
8194
+ window.addEventListener('scroll', this.onScrollDebounced);
8195
+ }
8196
+ handleMessageInput(event) {
8197
+ this.formMessage = event.target.value;
8198
+ }
8199
+ handleEmailInput(event) {
8200
+ this.formEmail = event.target.value;
8201
+ }
8202
+ captureScreenshot() {
8203
+ return new Promise((resolve, reject) => {
8204
+ requestAnimationFrame(() => {
8205
+ html2canvas(document.body, {
8206
+ x: window.scrollX,
8207
+ y: window.scrollY,
8208
+ width: window.innerWidth,
8209
+ height: window.innerHeight,
8210
+ }).then(canvas => {
8211
+ const dataUrl = canvas.toDataURL();
8212
+ resolve(dataUrl);
8213
+ })
8214
+ .catch(error => {
8215
+ console.error(error);
8216
+ reject(error);
8217
+ });
8218
+ });
8219
+ });
8220
+ }
8221
+ handleCheckboxChange(event) {
8222
+ this.isPrivacyChecked = event.target.checked;
8223
+ }
8224
+ handleRatingChange(newRating) {
8225
+ this.selectedRating = newRating;
8226
+ }
8227
+ render() {
8228
+ return (h("div", { class: 'feedback-modal-wrapper' }, this.showScreenshotMode && (h("div", { class: "feedback-modal-screenshot", ref: el => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, h("div", { class: "feedback-modal-screenshot-element-selected", ref: el => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), h("div", { class: "top-side", ref: el => (this.topSide = el) }), h("div", { class: "left-side", ref: el => (this.leftSide = el) }), h("div", { class: "bottom-side", ref: el => (this.bottomSide = el) }), h("div", { class: "right-side", ref: el => (this.rightSide = el) }), this.showScreenshotTopBar && (h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, h("span", null, this.screenshotTopbarText), h("span", { class: "feedback-modal-screenshot-close" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (h("div", { class: "feedback-overlay" })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.showModal ? 'feedback-modal-content--open' : ''}`, ref: el => (this.modalContent = el) }, h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (h("span", null, this.modalTitle)) : this.formSuccess ? (h("span", null, this.modalTitleSuccess)) : h("span", null, this.modalTitleError), h("button", { class: "feedback-modal-close", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
8229
+ event.preventDefault();
8230
+ this.handleRatingChange(1);
8231
+ } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { title: "No", class: `feedback-modal-rating-button ${this.selectedRating === 5 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
8232
+ event.preventDefault();
8233
+ this.handleRatingChange(5);
8234
+ } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, class: `feedback-modal-rating-button ${this.selectedRating >= rating ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
8235
+ event.preventDefault();
8236
+ this.handleRatingChange(rating);
8237
+ } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail }))), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? "feedback-modal-button--active" : ""}`, onClick: this.openScreenShot, disabled: this.sending }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" })), this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("p", { class: "feedback-modal-message" }, this.successMessage)) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message" }, this.errorMessage)) : h("span", null)), h("div", { class: "feedback-modal-footer", style: { display: this.whitelabel ? 'none' : 'block' } }, h("div", { class: "feedback-logo" }, "Powered by ", h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")))))));
8238
+ }
8239
+ };
8231
8240
  FeedbackModal.style = feedbackModalCss;
8232
8241
 
8233
8242
  export { FeedbackButton as feedback_button, FeedbackModal as feedback_modal };