pushfeedback 0.1.46 → 0.1.48
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.
- package/dist/cjs/feedback-button_2.cjs.entry.js +33 -17
- package/dist/cjs/{index-b596cc3a.js → index-b181563b.js} +14 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/pushfeedback.cjs.js +2 -2
- package/dist/collection/components/feedback-button/feedback-button.css +6 -2
- package/dist/collection/components/feedback-button/feedback-button.js +1 -1
- package/dist/collection/components/feedback-modal/feedback-modal.css +10 -9
- package/dist/collection/components/feedback-modal/feedback-modal.js +78 -13
- package/dist/components/feedback-button.js +2 -2
- package/dist/components/feedback-modal2.js +32 -15
- package/dist/esm/feedback-button_2.entry.js +33 -17
- package/dist/esm/{index-deb00b84.js → index-f58727eb.js} +14 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/pushfeedback.js +3 -3
- package/dist/pushfeedback/p-6204856a.js +2 -0
- package/dist/pushfeedback/{p-fa888cd3.entry.js → p-9641858f.entry.js} +2 -2
- package/dist/pushfeedback/pushfeedback.esm.js +1 -1
- package/dist/types/components/feedback-modal/feedback-modal.d.ts +8 -0
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
- package/dist/pushfeedback/p-90e8ba79.js +0 -2
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-b181563b.js');
|
|
6
6
|
|
|
7
|
-
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-
|
|
7
|
+
const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.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-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-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-text-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-text-color)}.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}";
|
|
8
8
|
|
|
9
9
|
const FeedbackButton = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -118,7 +118,7 @@ const FeedbackButton = class {
|
|
|
118
118
|
this.feedbackModal.showModal = true;
|
|
119
119
|
}
|
|
120
120
|
render() {
|
|
121
|
-
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 != 'default' && (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: "icon-edit" }, index.h("path", { d: "M12 20h9" }), index.h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), index.h("slot", null))));
|
|
121
|
+
return (index.h(index.Host, null, index.h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (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: "icon-edit" }, index.h("path", { d: "M12 20h9" }), index.h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), index.h("slot", null))));
|
|
122
122
|
}
|
|
123
123
|
get el() { return index.getElement(this); }
|
|
124
124
|
};
|
|
@@ -7968,11 +7968,13 @@ var html2canvas = createCommonjsModule(function (module, exports) {
|
|
|
7968
7968
|
//# sourceMappingURL=html2canvas.js.map
|
|
7969
7969
|
});
|
|
7970
7970
|
|
|
7971
|
-
const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-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;
|
|
7971
|
+
const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-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;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-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-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-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-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{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-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}.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;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}}";
|
|
7972
7972
|
|
|
7973
7973
|
const FeedbackModal = class {
|
|
7974
7974
|
constructor(hostRef) {
|
|
7975
7975
|
index.registerInstance(this, hostRef);
|
|
7976
|
+
this.feedbackSent = index.createEvent(this, "feedbackSent", 7);
|
|
7977
|
+
this.feedbackError = index.createEvent(this, "feedbackError", 7);
|
|
7976
7978
|
this.onScrollDebounced = () => {
|
|
7977
7979
|
clearTimeout(this.scrollTimeout);
|
|
7978
7980
|
this.scrollTimeout = setTimeout(() => {
|
|
@@ -7989,35 +7991,48 @@ const FeedbackModal = class {
|
|
|
7989
7991
|
this.showModal = false;
|
|
7990
7992
|
this.sending = true;
|
|
7991
7993
|
try {
|
|
7994
|
+
const body = {
|
|
7995
|
+
url: window.location.href,
|
|
7996
|
+
message: this.formMessage,
|
|
7997
|
+
email: this.formEmail,
|
|
7998
|
+
project: this.project,
|
|
7999
|
+
screenshot: this.encodedScreenshot,
|
|
8000
|
+
rating: this.selectedRating,
|
|
8001
|
+
ratingMode: this.ratingMode,
|
|
8002
|
+
verification: this.formVerification,
|
|
8003
|
+
session: localStorage.getItem('pushfeedback_sessionid') || '',
|
|
8004
|
+
};
|
|
7992
8005
|
const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
|
|
7993
8006
|
method: 'POST',
|
|
7994
|
-
body: JSON.stringify(
|
|
7995
|
-
url: window.location.href,
|
|
7996
|
-
message: this.formMessage,
|
|
7997
|
-
email: this.formEmail,
|
|
7998
|
-
project: this.project,
|
|
7999
|
-
screenshot: this.encodedScreenshot,
|
|
8000
|
-
rating: this.selectedRating,
|
|
8001
|
-
ratingMode: this.ratingMode,
|
|
8002
|
-
verification: this.formVerification,
|
|
8003
|
-
session: localStorage.getItem('pushfeedback_sessionid') || '',
|
|
8004
|
-
}),
|
|
8007
|
+
body: JSON.stringify(body),
|
|
8005
8008
|
headers: {
|
|
8006
8009
|
'Content-Type': 'application/json'
|
|
8007
8010
|
}
|
|
8008
8011
|
});
|
|
8009
8012
|
if (res.status === 201) {
|
|
8013
|
+
const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
|
|
8014
|
+
this.feedbackSent.emit({ feedback: feedback_with_id });
|
|
8010
8015
|
this.formSuccess = true;
|
|
8011
8016
|
this.formError = false;
|
|
8012
8017
|
}
|
|
8013
8018
|
else {
|
|
8019
|
+
const errorText = await res.text();
|
|
8020
|
+
const response = {
|
|
8021
|
+
status: res.status,
|
|
8022
|
+
message: errorText,
|
|
8023
|
+
};
|
|
8024
|
+
this.feedbackError.emit({ error: response });
|
|
8014
8025
|
this.formSuccess = false;
|
|
8015
8026
|
this.formError = true;
|
|
8016
8027
|
this.formErrorStatus = res.status;
|
|
8017
8028
|
}
|
|
8018
8029
|
}
|
|
8019
8030
|
catch (error) {
|
|
8020
|
-
|
|
8031
|
+
const response = {
|
|
8032
|
+
status: 500,
|
|
8033
|
+
message: error,
|
|
8034
|
+
};
|
|
8035
|
+
this.feedbackError.emit({ error: response });
|
|
8021
8036
|
this.formSuccess = false;
|
|
8022
8037
|
this.formError = true;
|
|
8023
8038
|
this.formErrorStatus = 500;
|
|
@@ -8156,6 +8171,7 @@ const FeedbackModal = class {
|
|
|
8156
8171
|
this.isPrivacyChecked = false;
|
|
8157
8172
|
this.whitelabel = false;
|
|
8158
8173
|
this.selectedRating = 0;
|
|
8174
|
+
this.customFont = false;
|
|
8159
8175
|
this.errorMessage = "Please try again later.";
|
|
8160
8176
|
this.errorMessage403 = "The request URL does not match the one defined in PushFeedback for this project.";
|
|
8161
8177
|
this.errorMessage404 = "We could not find the provided project ID in PushFeedback.";
|
|
@@ -8249,7 +8265,7 @@ const FeedbackModal = class {
|
|
|
8249
8265
|
this.selectedRating = newRating;
|
|
8250
8266
|
}
|
|
8251
8267
|
render() {
|
|
8252
|
-
return (index.h("div", { class: 'feedback-modal-wrapper' }, this.showScreenshotMode && (index.h("div", { class: "feedback-modal-screenshot", ref: el => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, index.h("div", { class: "feedback-modal-screenshot-element-selected", ref: el => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), index.h("div", { class: "top-side", ref: el => (this.topSide = el) }), index.h("div", { class: "left-side", ref: el => (this.leftSide = el) }), index.h("div", { class: "bottom-side", ref: el => (this.bottomSide = el) }), index.h("div", { class: "right-side", ref: el => (this.rightSide = el) }), this.showScreenshotTopBar && (index.h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, index.h("span", null, this.screenshotTopbarText), index.h("span", { class: "feedback-modal-screenshot-close" }, index.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" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (index.h("div", { class: "feedback-overlay" })), this.showModal && (index.h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.showModal ? 'feedback-modal-content--open' : ''}`, ref: el => (this.modalContent = el) }, index.h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (index.h("span", null, this.modalTitle)) : this.formSuccess ? (index.h("span", null, this.modalTitleSuccess)) : index.h("span", null, this.modalTitleError), index.h("button", { class: "feedback-modal-close", onClick: this.close }, index.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" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), index.h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (index.h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (index.h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (index.h("div", { class: "feedback-modal-rating-content" }, index.h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), index.h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, index.h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
|
|
8268
|
+
return (index.h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, this.showScreenshotMode && (index.h("div", { class: "feedback-modal-screenshot", ref: el => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, index.h("div", { class: "feedback-modal-screenshot-element-selected", ref: el => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), index.h("div", { class: "top-side", ref: el => (this.topSide = el) }), index.h("div", { class: "left-side", ref: el => (this.leftSide = el) }), index.h("div", { class: "bottom-side", ref: el => (this.bottomSide = el) }), index.h("div", { class: "right-side", ref: el => (this.rightSide = el) }), this.showScreenshotTopBar && (index.h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, index.h("span", null, this.screenshotTopbarText), index.h("span", { class: "feedback-modal-screenshot-close" }, index.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" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (index.h("div", { class: "feedback-overlay" })), this.showModal && (index.h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.showModal ? 'feedback-modal-content--open' : ''}`, ref: el => (this.modalContent = el) }, index.h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (index.h("span", null, this.modalTitle)) : this.formSuccess ? (index.h("span", null, this.modalTitleSuccess)) : index.h("span", null, this.modalTitleError), index.h("button", { class: "feedback-modal-close", onClick: this.close }, index.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" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), index.h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (index.h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (index.h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (index.h("div", { class: "feedback-modal-rating-content" }, index.h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), index.h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, index.h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
|
|
8253
8269
|
event.preventDefault();
|
|
8254
8270
|
this.handleRatingChange(1);
|
|
8255
8271
|
} }, index.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" }, index.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" }))), index.h("button", { title: "No", class: `feedback-modal-rating-button ${this.selectedRating === 5 ? 'feedback-modal-rating-button--selected' : ''}`, onClick: (event) => {
|
|
@@ -226,6 +226,19 @@ const parsePropertyValue = (propValue, propType) => {
|
|
|
226
226
|
return propValue;
|
|
227
227
|
};
|
|
228
228
|
const getElement = (ref) => (getHostRef(ref).$hostElement$ );
|
|
229
|
+
const createEvent = (ref, name, flags) => {
|
|
230
|
+
const elm = getElement(ref);
|
|
231
|
+
return {
|
|
232
|
+
emit: (detail) => {
|
|
233
|
+
return emitEvent(elm, name, {
|
|
234
|
+
bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
|
|
235
|
+
composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
|
|
236
|
+
cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
|
|
237
|
+
detail,
|
|
238
|
+
});
|
|
239
|
+
},
|
|
240
|
+
};
|
|
241
|
+
};
|
|
229
242
|
/**
|
|
230
243
|
* Helper function to create & dispatch a custom Event on a provided target
|
|
231
244
|
* @param elm the target of the Event
|
|
@@ -1544,6 +1557,7 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
|
1544
1557
|
|
|
1545
1558
|
exports.Host = Host;
|
|
1546
1559
|
exports.bootstrapLazy = bootstrapLazy;
|
|
1560
|
+
exports.createEvent = createEvent;
|
|
1547
1561
|
exports.getElement = getElement;
|
|
1548
1562
|
exports.h = h;
|
|
1549
1563
|
exports.promiseResolve = promiseResolve;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-b181563b.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
|
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"sessionId":[1537,"session-id"],"customFont":[4,"custom-font"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"modalTitle":[1,"modal-title"],"modalTitleSuccess":[1,"modal-title-success"],"modalTitleError":[1,"modal-title-error"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"],"project":[1],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"hideEmail":[4,"hide-email"],"emailAddress":[1,"email-address"],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"hideRating":[4,"hide-rating"],"rating":[2],"ratingMode":[1,"rating-mode"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"]}],[1,"feedback-modal",{"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"modalTitle":[1,"modal-title"],"modalTitleSuccess":[1,"modal-title-success"],"modalTitleError":[1,"modal-title-error"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"],"project":[1],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"hideEmail":[4,"hide-email"],"emailAddress":[1,"email-address"],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"hideRating":[4,"hide-rating"],"rating":[2],"ratingMode":[1,"rating-mode"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"hasSelectedElement":[1540,"has-selected-element"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32]}]]]], options);
|
|
17
|
+
return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"sessionId":[1537,"session-id"],"customFont":[4,"custom-font"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"modalTitle":[1,"modal-title"],"modalTitleSuccess":[1,"modal-title-success"],"modalTitleError":[1,"modal-title-error"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"],"project":[1],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"hideEmail":[4,"hide-email"],"emailAddress":[1,"email-address"],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"hideRating":[4,"hide-rating"],"rating":[2],"ratingMode":[1,"rating-mode"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"modalTitle":[1,"modal-title"],"modalTitleSuccess":[1,"modal-title-success"],"modalTitleError":[1,"modal-title-error"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"],"project":[1],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"hideEmail":[4,"hide-email"],"emailAddress":[1,"email-address"],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"hideRating":[4,"hide-rating"],"rating":[2],"ratingMode":[1,"rating-mode"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"hasSelectedElement":[1540,"has-selected-element"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-b181563b.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"sessionId":[1537,"session-id"],"customFont":[4,"custom-font"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"modalTitle":[1,"modal-title"],"modalTitleSuccess":[1,"modal-title-success"],"modalTitleError":[1,"modal-title-error"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"],"project":[1],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"hideEmail":[4,"hide-email"],"emailAddress":[1,"email-address"],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"hideRating":[4,"hide-rating"],"rating":[2],"ratingMode":[1,"rating-mode"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"]}],[1,"feedback-modal",{"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"modalTitle":[1,"modal-title"],"modalTitleSuccess":[1,"modal-title-success"],"modalTitleError":[1,"modal-title-error"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"],"project":[1],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"hideEmail":[4,"hide-email"],"emailAddress":[1,"email-address"],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"hideRating":[4,"hide-rating"],"rating":[2],"ratingMode":[1,"rating-mode"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"hasSelectedElement":[1540,"has-selected-element"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32]}]]]], options);
|
|
20
|
+
return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"sessionId":[1537,"session-id"],"customFont":[4,"custom-font"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"modalTitle":[1,"modal-title"],"modalTitleSuccess":[1,"modal-title-success"],"modalTitleError":[1,"modal-title-error"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"],"project":[1],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"hideEmail":[4,"hide-email"],"emailAddress":[1,"email-address"],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"hideRating":[4,"hide-rating"],"rating":[2],"ratingMode":[1,"rating-mode"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"],"hideIcon":[4,"hide-icon"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"modalTitle":[1,"modal-title"],"modalTitleSuccess":[1,"modal-title-success"],"modalTitleError":[1,"modal-title-error"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"],"project":[1],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"hideEmail":[4,"hide-email"],"emailAddress":[1,"email-address"],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"hideRating":[4,"hide-rating"],"rating":[2],"ratingMode":[1,"rating-mode"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"hasSelectedElement":[1540,"has-selected-element"],"hideScreenshotButton":[4,"hide-screenshot-button"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"privacyPolicyText":[1,"privacy-policy-text"],"fetchData":[4,"fetch-data"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -2,8 +2,14 @@
|
|
|
2
2
|
cursor: pointer;
|
|
3
3
|
max-width: fit-content;
|
|
4
4
|
z-index: var(--feedback-button-z-index);
|
|
5
|
+
font-family: var(--feedback-font-family);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.feedback-button-content--custom-font {
|
|
9
|
+
font-family: inherit;
|
|
5
10
|
}
|
|
6
11
|
|
|
12
|
+
|
|
7
13
|
.feedback-button-content--light{
|
|
8
14
|
align-items: center;
|
|
9
15
|
background-color: var(--feedback-button-light-bg-color);
|
|
@@ -12,7 +18,6 @@
|
|
|
12
18
|
box-sizing: border-box;
|
|
13
19
|
color: var(--feedback-button-light-text-color);
|
|
14
20
|
display: flex;
|
|
15
|
-
font-family: var(--feedback-font-family);
|
|
16
21
|
font-size: var(--feedback-button-text-font-size);
|
|
17
22
|
font-weight: var(--feedback-button-text-font-weight);
|
|
18
23
|
padding: 8px 15px;
|
|
@@ -26,7 +31,6 @@
|
|
|
26
31
|
box-sizing: border-box;
|
|
27
32
|
color: var(--feedback-button-dark-text-color);
|
|
28
33
|
display: flex;
|
|
29
|
-
font-family: var(--feedback-font-family);
|
|
30
34
|
font-weight: var(--feedback-button-text-font-weight);
|
|
31
35
|
font-size: var(--feedback-button-text-font-size);
|
|
32
36
|
padding: 8px 15px;
|
|
@@ -110,7 +110,7 @@ export class FeedbackButton {
|
|
|
110
110
|
this.feedbackModal.showModal = true;
|
|
111
111
|
}
|
|
112
112
|
render() {
|
|
113
|
-
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 != 'default' && (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: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
|
|
113
|
+
return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (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: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
|
|
114
114
|
}
|
|
115
115
|
static get is() { return "feedback-button"; }
|
|
116
116
|
static get encapsulation() { return "shadow"; }
|
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
text-align: center;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
+
.feedback-modal-wrapper * {
|
|
7
|
+
font-family: var(--feedback-font-family);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.feedback-modal-wrapper--custom-font * {
|
|
11
|
+
font-family: inherit;
|
|
12
|
+
|
|
13
|
+
}
|
|
14
|
+
|
|
6
15
|
.feedback-modal-wrapper {
|
|
7
16
|
position: absolute;
|
|
8
17
|
z-index: var(--feedback-modal-modal-wrapper-z-index);
|
|
@@ -32,7 +41,6 @@
|
|
|
32
41
|
color: var(--feedback-modal-content-text-color);
|
|
33
42
|
display: flex;
|
|
34
43
|
flex-direction: column;
|
|
35
|
-
font-family: var(--feedback-modal-content-font-family);
|
|
36
44
|
left: 50%;
|
|
37
45
|
max-width: 90%;
|
|
38
46
|
padding: 20px;
|
|
@@ -47,7 +55,6 @@
|
|
|
47
55
|
align-items: center;
|
|
48
56
|
color: var(--feedback-modal-header-text-color);
|
|
49
57
|
display: flex;
|
|
50
|
-
font-family: var(--feedback-modal-header-font-family);
|
|
51
58
|
font-size: var(--feedback-header-font-size);
|
|
52
59
|
font-weight: var(--feedback-modal-header-font-weight);
|
|
53
60
|
justify-content: space-between;
|
|
@@ -72,7 +79,7 @@
|
|
|
72
79
|
border-radius: var(--feedback-modal-button-border-radius);
|
|
73
80
|
color: var(--feedback-modal-button-text-color);
|
|
74
81
|
font-size: var(--feedback-modal-button-font-size);
|
|
75
|
-
|
|
82
|
+
|
|
76
83
|
font-weight: 500;
|
|
77
84
|
margin-right: 10px;
|
|
78
85
|
justify-content: center;
|
|
@@ -107,7 +114,6 @@
|
|
|
107
114
|
border-radius: var(--feedback-modal-input-border-radius);
|
|
108
115
|
box-sizing: border-box;
|
|
109
116
|
color: var(--feedback-modal-input-text-color);
|
|
110
|
-
font-family: var(--feedback-modal-content-font-family);
|
|
111
117
|
font-size: var(--feedback-modal-input-font-size);
|
|
112
118
|
margin-bottom: 20px;
|
|
113
119
|
height: 100px;
|
|
@@ -124,7 +130,6 @@
|
|
|
124
130
|
border-radius: var(--feedback-modal-input-border-radius);
|
|
125
131
|
box-sizing: border-box;
|
|
126
132
|
color: var(--feedback-modal-input-text-color);
|
|
127
|
-
font-family: var(--feedback-modal-content-font-family);
|
|
128
133
|
font-size: var(--feedback-modal-input-font-size);
|
|
129
134
|
margin-bottom: 20px;
|
|
130
135
|
height: 40px;
|
|
@@ -134,7 +139,6 @@
|
|
|
134
139
|
}
|
|
135
140
|
|
|
136
141
|
.feedback-modal-privacy {
|
|
137
|
-
font-family: var(--feedback-modal-content-font-family);
|
|
138
142
|
font-size: var(--feedback-modal-input-font-size);
|
|
139
143
|
margin-bottom: 20px;
|
|
140
144
|
}
|
|
@@ -163,7 +167,6 @@
|
|
|
163
167
|
cursor: pointer;
|
|
164
168
|
display: flex;
|
|
165
169
|
font-size: var(--feedback-modal-button-font-size);
|
|
166
|
-
font-family: var(--feedback-modal-content-font-family);
|
|
167
170
|
font-weight: 500;
|
|
168
171
|
justify-content: center;
|
|
169
172
|
min-height: 40px;
|
|
@@ -208,7 +211,6 @@
|
|
|
208
211
|
font-size: 14px;
|
|
209
212
|
font-weight: 300;
|
|
210
213
|
padding-bottom: 10px;
|
|
211
|
-
font-family: var(--feedback-modal-content-font-family);
|
|
212
214
|
}
|
|
213
215
|
|
|
214
216
|
.feedback-modal-footer {
|
|
@@ -268,7 +270,6 @@
|
|
|
268
270
|
color: var(--feedback-modal-screenshot-header-text-color);
|
|
269
271
|
cursor: pointer;
|
|
270
272
|
display: flex;
|
|
271
|
-
font-family: var(--feedback-modal-content-font-family);
|
|
272
273
|
left: 50%;
|
|
273
274
|
top: 20px;
|
|
274
275
|
transform: translateX(-50%);
|
|
@@ -18,35 +18,48 @@ export class FeedbackModal {
|
|
|
18
18
|
this.showModal = false;
|
|
19
19
|
this.sending = true;
|
|
20
20
|
try {
|
|
21
|
+
const body = {
|
|
22
|
+
url: window.location.href,
|
|
23
|
+
message: this.formMessage,
|
|
24
|
+
email: this.formEmail,
|
|
25
|
+
project: this.project,
|
|
26
|
+
screenshot: this.encodedScreenshot,
|
|
27
|
+
rating: this.selectedRating,
|
|
28
|
+
ratingMode: this.ratingMode,
|
|
29
|
+
verification: this.formVerification,
|
|
30
|
+
session: localStorage.getItem('pushfeedback_sessionid') || '',
|
|
31
|
+
};
|
|
21
32
|
const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
|
|
22
33
|
method: 'POST',
|
|
23
|
-
body: JSON.stringify(
|
|
24
|
-
url: window.location.href,
|
|
25
|
-
message: this.formMessage,
|
|
26
|
-
email: this.formEmail,
|
|
27
|
-
project: this.project,
|
|
28
|
-
screenshot: this.encodedScreenshot,
|
|
29
|
-
rating: this.selectedRating,
|
|
30
|
-
ratingMode: this.ratingMode,
|
|
31
|
-
verification: this.formVerification,
|
|
32
|
-
session: localStorage.getItem('pushfeedback_sessionid') || '',
|
|
33
|
-
}),
|
|
34
|
+
body: JSON.stringify(body),
|
|
34
35
|
headers: {
|
|
35
36
|
'Content-Type': 'application/json'
|
|
36
37
|
}
|
|
37
38
|
});
|
|
38
39
|
if (res.status === 201) {
|
|
40
|
+
const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
|
|
41
|
+
this.feedbackSent.emit({ feedback: feedback_with_id });
|
|
39
42
|
this.formSuccess = true;
|
|
40
43
|
this.formError = false;
|
|
41
44
|
}
|
|
42
45
|
else {
|
|
46
|
+
const errorText = await res.text();
|
|
47
|
+
const response = {
|
|
48
|
+
status: res.status,
|
|
49
|
+
message: errorText,
|
|
50
|
+
};
|
|
51
|
+
this.feedbackError.emit({ error: response });
|
|
43
52
|
this.formSuccess = false;
|
|
44
53
|
this.formError = true;
|
|
45
54
|
this.formErrorStatus = res.status;
|
|
46
55
|
}
|
|
47
56
|
}
|
|
48
57
|
catch (error) {
|
|
49
|
-
|
|
58
|
+
const response = {
|
|
59
|
+
status: 500,
|
|
60
|
+
message: error,
|
|
61
|
+
};
|
|
62
|
+
this.feedbackError.emit({ error: response });
|
|
50
63
|
this.formSuccess = false;
|
|
51
64
|
this.formError = true;
|
|
52
65
|
this.formErrorStatus = 500;
|
|
@@ -186,6 +199,7 @@ export class FeedbackModal {
|
|
|
186
199
|
this.isPrivacyChecked = false;
|
|
187
200
|
this.whitelabel = false;
|
|
188
201
|
this.selectedRating = 0;
|
|
202
|
+
this.customFont = false;
|
|
189
203
|
this.errorMessage = "Please try again later.";
|
|
190
204
|
this.errorMessage403 = "The request URL does not match the one defined in PushFeedback for this project.";
|
|
191
205
|
this.errorMessage404 = "We could not find the provided project ID in PushFeedback.";
|
|
@@ -279,7 +293,7 @@ export class FeedbackModal {
|
|
|
279
293
|
this.selectedRating = newRating;
|
|
280
294
|
}
|
|
281
295
|
render() {
|
|
282
|
-
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) => {
|
|
296
|
+
return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, 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) => {
|
|
283
297
|
event.preventDefault();
|
|
284
298
|
this.handleRatingChange(1);
|
|
285
299
|
} }, 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) => {
|
|
@@ -304,6 +318,24 @@ export class FeedbackModal {
|
|
|
304
318
|
}
|
|
305
319
|
static get properties() {
|
|
306
320
|
return {
|
|
321
|
+
"customFont": {
|
|
322
|
+
"type": "boolean",
|
|
323
|
+
"mutable": false,
|
|
324
|
+
"complexType": {
|
|
325
|
+
"original": "boolean",
|
|
326
|
+
"resolved": "boolean",
|
|
327
|
+
"references": {}
|
|
328
|
+
},
|
|
329
|
+
"required": false,
|
|
330
|
+
"optional": false,
|
|
331
|
+
"docs": {
|
|
332
|
+
"tags": [],
|
|
333
|
+
"text": ""
|
|
334
|
+
},
|
|
335
|
+
"attribute": "custom-font",
|
|
336
|
+
"reflect": false,
|
|
337
|
+
"defaultValue": "false"
|
|
338
|
+
},
|
|
307
339
|
"errorMessage": {
|
|
308
340
|
"type": "string",
|
|
309
341
|
"mutable": false,
|
|
@@ -842,4 +874,37 @@ export class FeedbackModal {
|
|
|
842
874
|
"selectedRating": {}
|
|
843
875
|
};
|
|
844
876
|
}
|
|
877
|
+
static get events() {
|
|
878
|
+
return [{
|
|
879
|
+
"method": "feedbackSent",
|
|
880
|
+
"name": "feedbackSent",
|
|
881
|
+
"bubbles": true,
|
|
882
|
+
"cancelable": true,
|
|
883
|
+
"composed": true,
|
|
884
|
+
"docs": {
|
|
885
|
+
"tags": [],
|
|
886
|
+
"text": ""
|
|
887
|
+
},
|
|
888
|
+
"complexType": {
|
|
889
|
+
"original": "{ feedback: any }",
|
|
890
|
+
"resolved": "{ feedback: any; }",
|
|
891
|
+
"references": {}
|
|
892
|
+
}
|
|
893
|
+
}, {
|
|
894
|
+
"method": "feedbackError",
|
|
895
|
+
"name": "feedbackError",
|
|
896
|
+
"bubbles": true,
|
|
897
|
+
"cancelable": true,
|
|
898
|
+
"composed": true,
|
|
899
|
+
"docs": {
|
|
900
|
+
"tags": [],
|
|
901
|
+
"text": ""
|
|
902
|
+
},
|
|
903
|
+
"complexType": {
|
|
904
|
+
"original": "{ error: any }",
|
|
905
|
+
"resolved": "{ error: any; }",
|
|
906
|
+
"references": {}
|
|
907
|
+
}
|
|
908
|
+
}];
|
|
909
|
+
}
|
|
845
910
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as defineCustomElement$2 } from './feedback-modal2.js';
|
|
3
3
|
|
|
4
|
-
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-
|
|
4
|
+
const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.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-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-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-text-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-text-color)}.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}";
|
|
5
5
|
|
|
6
6
|
const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -117,7 +117,7 @@ const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
117
117
|
this.feedbackModal.showModal = true;
|
|
118
118
|
}
|
|
119
119
|
render() {
|
|
120
|
-
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 != 'default' && (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: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
|
|
120
|
+
return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (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: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
|
|
121
121
|
}
|
|
122
122
|
get el() { return this; }
|
|
123
123
|
static get style() { return feedbackButtonCss; }
|