pushfeedback 0.0.2 → 0.0.4
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 +28 -21
- package/dist/cjs/{index-cb138587.js → index-df770657.js} +18 -107
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/pushfeedback.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/feedback-button/feedback-button.css +13 -10
- package/dist/collection/components/feedback-button/feedback-button.js +53 -19
- package/dist/collection/components/feedback-modal/feedback-modal.css +29 -21
- package/dist/collection/components/feedback-modal/feedback-modal.js +8 -4
- package/dist/components/feedback-button.js +20 -16
- package/dist/components/feedback-modal2.js +9 -5
- package/dist/esm/feedback-button_2.entry.js +28 -21
- package/dist/esm/{index-a9d8de87.js → index-0ae29483.js} +18 -107
- package/dist/esm/loader.js +3 -3
- package/dist/esm/pushfeedback.js +3 -3
- package/dist/pushfeedback/p-60079923.js +2 -0
- package/dist/pushfeedback/p-b4e69248.entry.js +1 -0
- package/dist/pushfeedback/pushfeedback.css +1 -1
- package/dist/pushfeedback/pushfeedback.esm.js +1 -1
- package/dist/types/components/feedback-button/feedback-button.d.ts +5 -3
- package/dist/types/components/feedback-modal/feedback-modal.d.ts +1 -0
- package/dist/types/components.d.ts +4 -0
- package/package.json +1 -1
- package/dist/pushfeedback/p-327ea768.entry.js +0 -1
- package/dist/pushfeedback/p-6aedd58b.js +0 -2
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-df770657.js');
|
|
6
6
|
|
|
7
|
-
const feedbackButtonCss = ".feedback-button-content{cursor:pointer
|
|
7
|
+
const feedbackButtonCss = ".feedback-button-content{cursor:pointer}.feedback-button-content--light{background-color:var(--feedback-white-color);border:1px solid var(--feedback-light-color);border-radius:4px;color:var(--feedback-dark-color);padding:5px 10px;font-size:var(--feedback-text-font-size)}.feedback-button-content--light:hover{color:var(--feedback-primary-color);background-color:var(--feedback-secondary-color);border:1px solid var(--feedback-primary-color)}";
|
|
8
8
|
|
|
9
9
|
const FeedbackButton = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
|
-
this.feedbackModal = undefined;
|
|
13
12
|
this.modalTitle = 'Share your feedback';
|
|
14
13
|
this.successModalTitle = 'Thanks for your feedback!';
|
|
15
14
|
this.errorModalTitle = "Oops! We didn't receive your feedback. Please try again later.";
|
|
@@ -21,15 +20,12 @@ const FeedbackButton = class {
|
|
|
21
20
|
this.email = '';
|
|
22
21
|
this.emailPlaceholder = 'Email address (optional)';
|
|
23
22
|
this.messagePlaceholder = 'How could this page be more helpful?';
|
|
23
|
+
this.buttonStyle = 'default';
|
|
24
|
+
this.buttonPosition = 'default';
|
|
24
25
|
}
|
|
25
|
-
|
|
26
|
-
this.feedbackModal
|
|
27
|
-
|
|
28
|
-
showModal() {
|
|
29
|
-
this.feedbackModal.showModal = true;
|
|
30
|
-
}
|
|
31
|
-
render() {
|
|
32
|
-
const propKeys = [
|
|
26
|
+
connectedCallback() {
|
|
27
|
+
this.feedbackModal = document.createElement('feedback-modal');
|
|
28
|
+
const props = [
|
|
33
29
|
'modalTitle',
|
|
34
30
|
'successModalTitle',
|
|
35
31
|
'errorModalTitle',
|
|
@@ -41,13 +37,20 @@ const FeedbackButton = class {
|
|
|
41
37
|
'email',
|
|
42
38
|
'emailPlaceholder',
|
|
43
39
|
'messagePlaceholder',
|
|
44
|
-
'showModal',
|
|
45
40
|
];
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
feedbackModalProps[key] = this[key];
|
|
41
|
+
props.forEach(prop => {
|
|
42
|
+
this.feedbackModal[prop] = this[prop];
|
|
49
43
|
});
|
|
50
|
-
|
|
44
|
+
document.body.appendChild(this.feedbackModal);
|
|
45
|
+
}
|
|
46
|
+
disconnectedCallback() {
|
|
47
|
+
document.body.removeChild(this.feedbackModal);
|
|
48
|
+
}
|
|
49
|
+
showModal() {
|
|
50
|
+
this.feedbackModal.showModal = true;
|
|
51
|
+
}
|
|
52
|
+
render() {
|
|
53
|
+
return (index.h(index.Host, null, index.h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonStyle}`, onClick: () => this.showModal() }, index.h("slot", null))));
|
|
51
54
|
}
|
|
52
55
|
};
|
|
53
56
|
FeedbackButton.style = feedbackButtonCss;
|
|
@@ -834,13 +837,14 @@ var domToImage = createCommonjsModule(function (module) {
|
|
|
834
837
|
})();
|
|
835
838
|
});
|
|
836
839
|
|
|
837
|
-
const feedbackModalCss = ".text-center{text-align:center;flex-grow:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;font-family:var(--feedback-modal-content-font-family);max-width:300px;padding:20px;position:fixed;width:100%;z-index:300
|
|
840
|
+
const feedbackModalCss = ".text-center{text-align:center;flex-grow:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;font-family:var(--feedback-modal-content-font-family);max-width:300px;padding:20px;position:fixed;width:100%;z-index:300;left:50%;top:50%;transform:translate(-50%, -50%)}@media screen and (min-width: 768px){.feedback-modal-content.feedback-modal-content--bottom-right{top:initial;left:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);right:var(--feedback-modal-content-position-right)}.feedback-modal-content.feedback-modal-content--bottom-left{top:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left)}.feedback-modal-content.feedback-modal-content--top-right{top:initial;transform:initial;right:var(--feedback-modal-content-position-right);top:var(--fedback-modal-content-position-top)}.feedback-modal-content.feedback-modal-content--top-left{transform:initial;left:var(--feedback-modal-content-position-left);top:var(--fedback-modal-content-position-top)}}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);font-family:var(--feedback-modal-header-font-family);display:flex;font-size:var(--feedback-header-font-size);justify-content:space-between;margin-bottom:20px}.feedback-modal-text{margin-bottom:20px}.feedback-modal-text textarea{border:1px solid var(--feedback-modal-input-border-color);border-radius:4px;box-sizing:border-box;font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);height:100px;padding:10px;resize:none;width:100%}.feedback-modal-email{margin-bottom:20px}.feedback-modal-email input{border:1px solid var(--feedback-modal-input-border-color);border-radius:4px;box-sizing:border-box;font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);height:40px;padding:10px;width:100%}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;justify-content:space-between}.button{background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;font-size:var(--feedback-modal-button-font-size);padding:5px 10px}.button:hover,.button.active{color:var(--feedback-modal-button-text-color-active);background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active)}.feedback-modal-footer{font-size:12px;margin-top:5px 0;text-align:center}.feedback-modal-footer a{color:#191919;text-decoration:none}.feedback-logo{display:flex;align-items:center;justify-content:center;margin-top:5px}.feedback-logo svg{max-width:12px;margin-right:5px}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;margin-left:auto;padding:0;width:24px;height:24px}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);box-shadow:0px 0px 0px 5px var(--feedback-modal-screenshot-element-selected-bg-color) inset;height:100vh;left:0;position:fixed;top:0;width:100%;z-index:100}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);color:var(--feedback-modal-screenshot-element-selected-text-color);cursor:pointer;display:flex;padding:5px;position:fixed;justify-content:center;width:100%;z-index:200}.feedback-modal-screenshot-header span{padding-left:10px;padding-right:10px}.feedback-modal-screenshot-overlay{background-color:transparent;cursor:unset;height:100vh;left:0;position:fixed;top:0;width:100%;z-index:100}.feedback-modal-message{font-size:var(--fedback-modal-message-font-size)}.feedback-modal-element-hover{cursor:pointer;background-color:transparent;border:4px dashed var(--feedback-modal-screenshot-element-hover-border-color)}.feedback-modal-element-selected{border:4px solid var(--feedback-modal-screenshot-element-selected-border-color)}";
|
|
838
841
|
|
|
839
842
|
const FeedbackModal = class {
|
|
840
843
|
constructor(hostRef) {
|
|
841
844
|
index.registerInstance(this, hostRef);
|
|
842
845
|
this.handleSubmit = async (event) => {
|
|
843
846
|
event.preventDefault();
|
|
847
|
+
this.resetOverflow();
|
|
844
848
|
this.showScreenshotMode = false;
|
|
845
849
|
this.showModal = false;
|
|
846
850
|
this.sending = true;
|
|
@@ -894,14 +898,14 @@ const FeedbackModal = class {
|
|
|
894
898
|
this.formError = false;
|
|
895
899
|
this.formMessage = '';
|
|
896
900
|
this.formEmail = '';
|
|
901
|
+
this.resetOverflow();
|
|
897
902
|
};
|
|
898
903
|
this.openScreenShot = () => {
|
|
899
904
|
this.hasSelectedElement = false;
|
|
900
905
|
this.showModal = false;
|
|
901
906
|
this.showScreenshotMode = true;
|
|
902
907
|
this.encodedScreenshot = null;
|
|
903
|
-
|
|
904
|
-
page.style.overflow = 'auto';
|
|
908
|
+
this.resetOverflow();
|
|
905
909
|
};
|
|
906
910
|
this.closeScreenShot = () => {
|
|
907
911
|
this.showModal = false;
|
|
@@ -909,8 +913,7 @@ const FeedbackModal = class {
|
|
|
909
913
|
this.hasSelectedElement = false;
|
|
910
914
|
this.encodedScreenshot = null;
|
|
911
915
|
this.overlay.style.display = 'none';
|
|
912
|
-
|
|
913
|
-
page.style.overflow = 'inherit';
|
|
916
|
+
this.resetOverflow();
|
|
914
917
|
};
|
|
915
918
|
this.handleMouseOverScreenShot = (event) => {
|
|
916
919
|
event.preventDefault();
|
|
@@ -1008,6 +1011,10 @@ const FeedbackModal = class {
|
|
|
1008
1011
|
componentWillLoad() {
|
|
1009
1012
|
this.formEmail = this.email;
|
|
1010
1013
|
}
|
|
1014
|
+
resetOverflow() {
|
|
1015
|
+
const page = document.getElementsByTagName('html')[0];
|
|
1016
|
+
page.style.overflow = 'inherit';
|
|
1017
|
+
}
|
|
1011
1018
|
handleMessageInput(event) {
|
|
1012
1019
|
this.formMessage = event.target.value;
|
|
1013
1020
|
}
|
|
@@ -49,7 +49,6 @@ const uniqueTime = (key, measureText) => {
|
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
|
|
52
|
-
const XLINK_NS = 'http://www.w3.org/1999/xlink';
|
|
53
52
|
/**
|
|
54
53
|
* Default style mode id
|
|
55
54
|
*/
|
|
@@ -93,7 +92,6 @@ function queryNonceMetaTagContent(doc) {
|
|
|
93
92
|
// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
|
|
94
93
|
const h = (nodeName, vnodeData, ...children) => {
|
|
95
94
|
let child = null;
|
|
96
|
-
let key = null;
|
|
97
95
|
let simple = false;
|
|
98
96
|
let lastSimple = false;
|
|
99
97
|
const vNodeChildren = [];
|
|
@@ -121,10 +119,6 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
121
119
|
};
|
|
122
120
|
walk(children);
|
|
123
121
|
if (vnodeData) {
|
|
124
|
-
// normalize class / classname attributes
|
|
125
|
-
if (vnodeData.key) {
|
|
126
|
-
key = vnodeData.key;
|
|
127
|
-
}
|
|
128
122
|
{
|
|
129
123
|
const classData = vnodeData.className || vnodeData.class;
|
|
130
124
|
if (classData) {
|
|
@@ -142,9 +136,6 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
142
136
|
if (vNodeChildren.length > 0) {
|
|
143
137
|
vnode.$children$ = vNodeChildren;
|
|
144
138
|
}
|
|
145
|
-
{
|
|
146
|
-
vnode.$key$ = key;
|
|
147
|
-
}
|
|
148
139
|
return vnode;
|
|
149
140
|
};
|
|
150
141
|
/**
|
|
@@ -166,9 +157,6 @@ const newVNode = (tag, text) => {
|
|
|
166
157
|
{
|
|
167
158
|
vnode.$attrs$ = null;
|
|
168
159
|
}
|
|
169
|
-
{
|
|
170
|
-
vnode.$key$ = null;
|
|
171
|
-
}
|
|
172
160
|
return vnode;
|
|
173
161
|
};
|
|
174
162
|
const Host = {};
|
|
@@ -329,33 +317,6 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
329
317
|
classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
|
|
330
318
|
classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
|
|
331
319
|
}
|
|
332
|
-
else if (memberName === 'style') {
|
|
333
|
-
// update style attribute, css properties and values
|
|
334
|
-
{
|
|
335
|
-
for (const prop in oldValue) {
|
|
336
|
-
if (!newValue || newValue[prop] == null) {
|
|
337
|
-
if (prop.includes('-')) {
|
|
338
|
-
elm.style.removeProperty(prop);
|
|
339
|
-
}
|
|
340
|
-
else {
|
|
341
|
-
elm.style[prop] = '';
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
for (const prop in newValue) {
|
|
347
|
-
if (!oldValue || newValue[prop] !== oldValue[prop]) {
|
|
348
|
-
if (prop.includes('-')) {
|
|
349
|
-
elm.style.setProperty(prop, newValue[prop]);
|
|
350
|
-
}
|
|
351
|
-
else {
|
|
352
|
-
elm.style[prop] = newValue[prop];
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
else if (memberName === 'key')
|
|
358
|
-
;
|
|
359
320
|
else if (memberName === 'ref') {
|
|
360
321
|
// minifier will clean this up
|
|
361
322
|
if (newValue) {
|
|
@@ -422,36 +383,16 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
422
383
|
}
|
|
423
384
|
catch (e) { }
|
|
424
385
|
}
|
|
425
|
-
/**
|
|
426
|
-
* Need to manually update attribute if:
|
|
427
|
-
* - memberName is not an attribute
|
|
428
|
-
* - if we are rendering the host element in order to reflect attribute
|
|
429
|
-
* - if it's a SVG, since properties might not work in <svg>
|
|
430
|
-
* - if the newValue is null/undefined or 'false'.
|
|
431
|
-
*/
|
|
432
|
-
let xlink = false;
|
|
433
|
-
{
|
|
434
|
-
if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
|
|
435
|
-
memberName = ln;
|
|
436
|
-
xlink = true;
|
|
437
|
-
}
|
|
438
|
-
}
|
|
439
386
|
if (newValue == null || newValue === false) {
|
|
440
387
|
if (newValue !== false || elm.getAttribute(memberName) === '') {
|
|
441
|
-
|
|
442
|
-
elm.removeAttributeNS(XLINK_NS, memberName);
|
|
443
|
-
}
|
|
444
|
-
else {
|
|
388
|
+
{
|
|
445
389
|
elm.removeAttribute(memberName);
|
|
446
390
|
}
|
|
447
391
|
}
|
|
448
392
|
}
|
|
449
393
|
else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
|
|
450
394
|
newValue = newValue === true ? '' : newValue;
|
|
451
|
-
|
|
452
|
-
elm.setAttributeNS(XLINK_NS, memberName, newValue);
|
|
453
|
-
}
|
|
454
|
-
else {
|
|
395
|
+
{
|
|
455
396
|
elm.setAttribute(memberName, newValue);
|
|
456
397
|
}
|
|
457
398
|
}
|
|
@@ -670,8 +611,6 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
|
|
670
611
|
const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
671
612
|
let oldStartIdx = 0;
|
|
672
613
|
let newStartIdx = 0;
|
|
673
|
-
let idxInOld = 0;
|
|
674
|
-
let i = 0;
|
|
675
614
|
let oldEndIdx = oldCh.length - 1;
|
|
676
615
|
let oldStartVnode = oldCh[0];
|
|
677
616
|
let oldEndVnode = oldCh[oldEndIdx];
|
|
@@ -679,7 +618,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
679
618
|
let newStartVnode = newCh[0];
|
|
680
619
|
let newEndVnode = newCh[newEndIdx];
|
|
681
620
|
let node;
|
|
682
|
-
let elmToMove;
|
|
683
621
|
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
|
684
622
|
if (oldStartVnode == null) {
|
|
685
623
|
// VNode might have been moved left
|
|
@@ -746,41 +684,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
746
684
|
newStartVnode = newCh[++newStartIdx];
|
|
747
685
|
}
|
|
748
686
|
else {
|
|
749
|
-
// Here we do some checks to match up old and new nodes based on the
|
|
750
|
-
// `$key$` attribute, which is set by putting a `key="my-key"` attribute
|
|
751
|
-
// in the JSX for a DOM element in the implementation of a Stencil
|
|
752
|
-
// component.
|
|
753
|
-
//
|
|
754
|
-
// First we check to see if there are any nodes in the array of old
|
|
755
|
-
// children which have the same key as the first node in the new
|
|
756
|
-
// children.
|
|
757
|
-
idxInOld = -1;
|
|
758
687
|
{
|
|
759
|
-
for (i = oldStartIdx; i <= oldEndIdx; ++i) {
|
|
760
|
-
if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
|
|
761
|
-
idxInOld = i;
|
|
762
|
-
break;
|
|
763
|
-
}
|
|
764
|
-
}
|
|
765
|
-
}
|
|
766
|
-
if (idxInOld >= 0) {
|
|
767
|
-
// We found a node in the old children which matches up with the first
|
|
768
|
-
// node in the new children! So let's deal with that
|
|
769
|
-
elmToMove = oldCh[idxInOld];
|
|
770
|
-
if (elmToMove.$tag$ !== newStartVnode.$tag$) {
|
|
771
|
-
// the tag doesn't match so we'll need a new DOM element
|
|
772
|
-
node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
|
|
773
|
-
}
|
|
774
|
-
else {
|
|
775
|
-
patch(elmToMove, newStartVnode);
|
|
776
|
-
// invalidate the matching old node so that we won't try to update it
|
|
777
|
-
// again later on
|
|
778
|
-
oldCh[idxInOld] = undefined;
|
|
779
|
-
node = elmToMove.$elm$;
|
|
780
|
-
}
|
|
781
|
-
newStartVnode = newCh[++newStartIdx];
|
|
782
|
-
}
|
|
783
|
-
else {
|
|
784
688
|
// We either didn't find an element in the old children that matches
|
|
785
689
|
// the key of the first new child OR the build is not using `key`
|
|
786
690
|
// attributes at all. In either case we need to create a new element
|
|
@@ -829,10 +733,7 @@ const isSameVnode = (leftVNode, rightVNode) => {
|
|
|
829
733
|
// compare if two vnode to see if they're "technically" the same
|
|
830
734
|
// need to have the same element tag, and same key to be the same
|
|
831
735
|
if (leftVNode.$tag$ === rightVNode.$tag$) {
|
|
832
|
-
|
|
833
|
-
{
|
|
834
|
-
return leftVNode.$key$ === rightVNode.$key$;
|
|
835
|
-
}
|
|
736
|
+
return true;
|
|
836
737
|
}
|
|
837
738
|
return false;
|
|
838
739
|
};
|
|
@@ -1028,7 +929,6 @@ const postUpdateComponent = (hostRef) => {
|
|
|
1028
929
|
const tagName = hostRef.$cmpMeta$.$tagName$;
|
|
1029
930
|
const elm = hostRef.$hostElement$;
|
|
1030
931
|
const endPostUpdate = createTime('postUpdate', tagName);
|
|
1031
|
-
const instance = hostRef.$lazyInstance$ ;
|
|
1032
932
|
const ancestorComponent = hostRef.$ancestorComponent$;
|
|
1033
933
|
if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
|
|
1034
934
|
hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
|
|
@@ -1036,9 +936,6 @@ const postUpdateComponent = (hostRef) => {
|
|
|
1036
936
|
// DOM WRITE!
|
|
1037
937
|
addHydratedFlag(elm);
|
|
1038
938
|
}
|
|
1039
|
-
{
|
|
1040
|
-
safeCall(instance, 'componentDidLoad');
|
|
1041
|
-
}
|
|
1042
939
|
endPostUpdate();
|
|
1043
940
|
{
|
|
1044
941
|
hostRef.$onReadyResolve$(elm);
|
|
@@ -1259,6 +1156,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1259
1156
|
hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
|
|
1260
1157
|
}
|
|
1261
1158
|
endNewInstance();
|
|
1159
|
+
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
1262
1160
|
}
|
|
1263
1161
|
if (Cstr.style) {
|
|
1264
1162
|
// this component has styles but we haven't registered them yet
|
|
@@ -1287,6 +1185,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1287
1185
|
schedule();
|
|
1288
1186
|
}
|
|
1289
1187
|
};
|
|
1188
|
+
const fireConnectedCallback = (instance) => {
|
|
1189
|
+
{
|
|
1190
|
+
safeCall(instance, 'connectedCallback');
|
|
1191
|
+
}
|
|
1192
|
+
};
|
|
1290
1193
|
const connectedCallback = (elm) => {
|
|
1291
1194
|
if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
|
|
1292
1195
|
const hostRef = getHostRef(elm);
|
|
@@ -1325,12 +1228,20 @@ const connectedCallback = (elm) => {
|
|
|
1325
1228
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
1326
1229
|
}
|
|
1327
1230
|
}
|
|
1231
|
+
else {
|
|
1232
|
+
// fire off connectedCallback() on component instance
|
|
1233
|
+
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
1234
|
+
}
|
|
1328
1235
|
endConnected();
|
|
1329
1236
|
}
|
|
1330
1237
|
};
|
|
1331
1238
|
const disconnectedCallback = (elm) => {
|
|
1332
1239
|
if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
|
|
1333
|
-
getHostRef(elm);
|
|
1240
|
+
const hostRef = getHostRef(elm);
|
|
1241
|
+
const instance = hostRef.$lazyInstance$ ;
|
|
1242
|
+
{
|
|
1243
|
+
safeCall(instance, 'disconnectedCallback');
|
|
1244
|
+
}
|
|
1334
1245
|
}
|
|
1335
1246
|
};
|
|
1336
1247
|
const bootstrapLazy = (lazyBundles, options = {}) => {
|
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-df770657.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",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"
|
|
17
|
+
return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"]}],[1,"feedback-modal",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"hasSelectedElement":[1540,"has-selected-element"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formError":[32],"encodedScreenshot":[32]}]]]], options);
|
|
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-df770657.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",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"
|
|
20
|
+
return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"buttonStyle":[1,"button-style"],"buttonPosition":[1,"button-position"]}],[1,"feedback-modal",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"hasSelectedElement":[1540,"has-selected-element"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formError":[32],"encodedScreenshot":[32]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"entries": [
|
|
3
|
-
"./components/feedback-
|
|
4
|
-
"./components/feedback-
|
|
3
|
+
"./components/feedback-button/feedback-button.js",
|
|
4
|
+
"./components/feedback-modal/feedback-modal.js"
|
|
5
5
|
],
|
|
6
6
|
"compiler": {
|
|
7
7
|
"name": "@stencil/core",
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
.feedback-button-content {
|
|
2
2
|
cursor: pointer;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
color: var(--feedback-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.feedback-button-content--light{
|
|
6
|
+
background-color: var(--feedback-white-color);
|
|
7
|
+
border: 1px solid var(--feedback-light-color);
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
color: var(--feedback-dark-color);
|
|
9
10
|
padding: 5px 10px;
|
|
11
|
+
font-size: var(--feedback-text-font-size);
|
|
10
12
|
}
|
|
11
13
|
|
|
12
|
-
.feedback-button-content:hover {
|
|
13
|
-
color: var(--feedback-
|
|
14
|
-
background-color: var(--feedback-
|
|
15
|
-
border: 1px solid var(--feedback-
|
|
14
|
+
.feedback-button-content--light:hover {
|
|
15
|
+
color: var(--feedback-primary-color);
|
|
16
|
+
background-color: var(--feedback-secondary-color);
|
|
17
|
+
border: 1px solid var(--feedback-primary-color);
|
|
16
18
|
}
|
|
19
|
+
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Host, h } from '@stencil/core';
|
|
2
2
|
export class FeedbackButton {
|
|
3
3
|
constructor() {
|
|
4
|
-
this.feedbackModal = undefined;
|
|
5
4
|
this.modalTitle = 'Share your feedback';
|
|
6
5
|
this.successModalTitle = 'Thanks for your feedback!';
|
|
7
6
|
this.errorModalTitle = "Oops! We didn't receive your feedback. Please try again later.";
|
|
@@ -13,15 +12,12 @@ export class FeedbackButton {
|
|
|
13
12
|
this.email = '';
|
|
14
13
|
this.emailPlaceholder = 'Email address (optional)';
|
|
15
14
|
this.messagePlaceholder = 'How could this page be more helpful?';
|
|
15
|
+
this.buttonStyle = 'default';
|
|
16
|
+
this.buttonPosition = 'default';
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
-
this.feedbackModal
|
|
19
|
-
|
|
20
|
-
showModal() {
|
|
21
|
-
this.feedbackModal.showModal = true;
|
|
22
|
-
}
|
|
23
|
-
render() {
|
|
24
|
-
const propKeys = [
|
|
18
|
+
connectedCallback() {
|
|
19
|
+
this.feedbackModal = document.createElement('feedback-modal');
|
|
20
|
+
const props = [
|
|
25
21
|
'modalTitle',
|
|
26
22
|
'successModalTitle',
|
|
27
23
|
'errorModalTitle',
|
|
@@ -33,13 +29,20 @@ export class FeedbackButton {
|
|
|
33
29
|
'email',
|
|
34
30
|
'emailPlaceholder',
|
|
35
31
|
'messagePlaceholder',
|
|
36
|
-
'showModal',
|
|
37
32
|
];
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
feedbackModalProps[key] = this[key];
|
|
33
|
+
props.forEach(prop => {
|
|
34
|
+
this.feedbackModal[prop] = this[prop];
|
|
41
35
|
});
|
|
42
|
-
|
|
36
|
+
document.body.appendChild(this.feedbackModal);
|
|
37
|
+
}
|
|
38
|
+
disconnectedCallback() {
|
|
39
|
+
document.body.removeChild(this.feedbackModal);
|
|
40
|
+
}
|
|
41
|
+
showModal() {
|
|
42
|
+
this.feedbackModal.showModal = true;
|
|
43
|
+
}
|
|
44
|
+
render() {
|
|
45
|
+
return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonStyle}`, onClick: () => this.showModal() }, h("slot", null))));
|
|
43
46
|
}
|
|
44
47
|
static get is() { return "feedback-button"; }
|
|
45
48
|
static get encapsulation() { return "shadow"; }
|
|
@@ -252,12 +255,43 @@ export class FeedbackButton {
|
|
|
252
255
|
"attribute": "message-placeholder",
|
|
253
256
|
"reflect": false,
|
|
254
257
|
"defaultValue": "'How could this page be more helpful?'"
|
|
258
|
+
},
|
|
259
|
+
"buttonStyle": {
|
|
260
|
+
"type": "string",
|
|
261
|
+
"mutable": false,
|
|
262
|
+
"complexType": {
|
|
263
|
+
"original": "string",
|
|
264
|
+
"resolved": "string",
|
|
265
|
+
"references": {}
|
|
266
|
+
},
|
|
267
|
+
"required": false,
|
|
268
|
+
"optional": false,
|
|
269
|
+
"docs": {
|
|
270
|
+
"tags": [],
|
|
271
|
+
"text": ""
|
|
272
|
+
},
|
|
273
|
+
"attribute": "button-style",
|
|
274
|
+
"reflect": false,
|
|
275
|
+
"defaultValue": "'default'"
|
|
276
|
+
},
|
|
277
|
+
"buttonPosition": {
|
|
278
|
+
"type": "string",
|
|
279
|
+
"mutable": false,
|
|
280
|
+
"complexType": {
|
|
281
|
+
"original": "string",
|
|
282
|
+
"resolved": "string",
|
|
283
|
+
"references": {}
|
|
284
|
+
},
|
|
285
|
+
"required": false,
|
|
286
|
+
"optional": false,
|
|
287
|
+
"docs": {
|
|
288
|
+
"tags": [],
|
|
289
|
+
"text": ""
|
|
290
|
+
},
|
|
291
|
+
"attribute": "button-position",
|
|
292
|
+
"reflect": false,
|
|
293
|
+
"defaultValue": "'default'"
|
|
255
294
|
}
|
|
256
295
|
};
|
|
257
296
|
}
|
|
258
|
-
static get states() {
|
|
259
|
-
return {
|
|
260
|
-
"feedbackModal": {}
|
|
261
|
-
};
|
|
262
|
-
}
|
|
263
297
|
}
|
|
@@ -23,32 +23,40 @@
|
|
|
23
23
|
position: fixed;
|
|
24
24
|
width: 100%;
|
|
25
25
|
z-index: 300;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.feedback-modal-content.feedback-modal-content--center {
|
|
29
26
|
left: 50%;
|
|
30
27
|
top: 50%;
|
|
31
28
|
transform: translate(-50%, -50%);
|
|
32
29
|
}
|
|
33
30
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.feedback-modal-content.feedback-modal-content--
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
31
|
+
@media screen and (min-width: 768px) {
|
|
32
|
+
|
|
33
|
+
.feedback-modal-content.feedback-modal-content--bottom-right {
|
|
34
|
+
top: initial;
|
|
35
|
+
left: initial;
|
|
36
|
+
transform: initial;
|
|
37
|
+
bottom: var(--feedback-modal-content-position-bottom);
|
|
38
|
+
right: var(--feedback-modal-content-position-right);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.feedback-modal-content.feedback-modal-content--bottom-left {
|
|
42
|
+
top: initial;
|
|
43
|
+
transform: initial;
|
|
44
|
+
bottom: var(--feedback-modal-content-position-bottom);
|
|
45
|
+
left: var(--feedback-modal-content-position-left);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.feedback-modal-content.feedback-modal-content--top-right {
|
|
49
|
+
top: initial;
|
|
50
|
+
transform: initial;
|
|
51
|
+
right: var(--feedback-modal-content-position-right);
|
|
52
|
+
top: var(--fedback-modal-content-position-top);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.feedback-modal-content.feedback-modal-content--top-left {
|
|
56
|
+
transform: initial;
|
|
57
|
+
left: var(--feedback-modal-content-position-left);
|
|
58
|
+
top: var(--fedback-modal-content-position-top);
|
|
59
|
+
}
|
|
52
60
|
}
|
|
53
61
|
|
|
54
62
|
.feedback-modal-header {
|