@product7/feedback-sdk 1.1.6 → 1.1.8
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/feedback-sdk.js +226 -215
- package/dist/feedback-sdk.js.map +1 -1
- package/dist/feedback-sdk.min.js +1 -1
- package/dist/feedback-sdk.min.js.map +1 -1
- package/package.json +1 -1
- package/src/styles/styles.js +185 -183
- package/src/widgets/BaseWidget.js +24 -21
- package/src/widgets/ButtonWidget.js +19 -13
package/package.json
CHANGED
package/src/styles/styles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const CSS_STYLES = `
|
|
2
2
|
.feedback-widget {
|
|
3
|
-
font-family:
|
|
3
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
4
4
|
font-size: 14px;
|
|
5
5
|
line-height: 1.4;
|
|
6
6
|
z-index: 999999;
|
|
@@ -38,142 +38,40 @@ export const CSS_STYLES = `
|
|
|
38
38
|
left: 20px;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.feedback-widget-button.position-bottom-center {
|
|
42
|
-
bottom: 20px;
|
|
43
|
-
left: 50%;
|
|
44
|
-
transform: translateX(-50%);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.feedback-widget-button.position-top-center {
|
|
48
|
-
top: 20px;
|
|
49
|
-
left: 50%;
|
|
50
|
-
transform: translateX(-50%);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.feedback-widget-button.position-center {
|
|
54
|
-
top: 50%;
|
|
55
|
-
left: 50%;
|
|
56
|
-
transform: translate(-50%, -50%);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/* New button design - white with elevation */
|
|
60
41
|
.feedback-trigger-btn {
|
|
61
|
-
|
|
62
|
-
height: 52px;
|
|
63
|
-
border-radius: 50%;
|
|
64
|
-
border: none;
|
|
65
|
-
background: #ffffff;
|
|
66
|
-
cursor: pointer;
|
|
42
|
+
position: relative;
|
|
67
43
|
display: flex;
|
|
68
44
|
align-items: center;
|
|
69
45
|
justify-content: center;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
box-shadow:
|
|
79
|
-
0 4px 12px rgba(0, 0, 0, 0.1),
|
|
80
|
-
0 8px 24px rgba(0, 0, 0, 0.08);
|
|
81
|
-
transform: translateY(-2px);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.feedback-trigger-btn:active {
|
|
85
|
-
transform: translateY(0px);
|
|
86
|
-
box-shadow:
|
|
87
|
-
0 2px 6px rgba(0, 0, 0, 0.08),
|
|
88
|
-
0 1px 4px rgba(0, 0, 0, 0.06);
|
|
89
|
-
}
|
|
90
|
-
.feedback-trigger-btn svg {
|
|
91
|
-
flex-shrink: 0;
|
|
92
|
-
width: 22px;
|
|
93
|
-
height: 25px;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.feedback-trigger-btn svg path {
|
|
97
|
-
fill: #21244A;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/* Loading Modal */
|
|
101
|
-
.feedback-loading-modal {
|
|
102
|
-
position: fixed;
|
|
103
|
-
top: 50%;
|
|
104
|
-
left: 50%;
|
|
105
|
-
transform: translate(-50%, -50%) scale(0.9);
|
|
106
|
-
z-index: 1000001;
|
|
107
|
-
opacity: 0;
|
|
108
|
-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.feedback-loading-modal.show {
|
|
112
|
-
opacity: 1;
|
|
113
|
-
transform: translate(-50%, -50%) scale(1);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.feedback-loading-spinner {
|
|
117
|
-
width: 48px;
|
|
118
|
-
height: 48px;
|
|
119
|
-
border: 4px solid rgba(0, 0, 0, 0.1);
|
|
120
|
-
border-top-color: #21244A;
|
|
121
|
-
border-radius: 50%;
|
|
122
|
-
animation: spin 0.8s linear infinite;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
@keyframes spin {
|
|
126
|
-
to { transform: rotate(360deg); }
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
/* Modal Styles (centered) */
|
|
130
|
-
.feedback-modal {
|
|
131
|
-
position: fixed;
|
|
132
|
-
top: 50%;
|
|
133
|
-
left: 50%;
|
|
134
|
-
transform: translate(-50%, -50%) scale(0.9);
|
|
135
|
-
width: 480px;
|
|
136
|
-
max-width: 90vw;
|
|
137
|
-
max-height: 85vh;
|
|
138
|
-
z-index: 1000000;
|
|
139
|
-
opacity: 0;
|
|
140
|
-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
46
|
+
gap: 12px;
|
|
47
|
+
height: 44px;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
border-radius: 0.5rem;
|
|
50
|
+
border: none;
|
|
51
|
+
padding: 10px 16px;
|
|
52
|
+
font-size: 14px;
|
|
53
|
+
font-weight: 500;
|
|
141
54
|
font-family: inherit;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
transition: all 0.3s ease;
|
|
57
|
+
color: white;
|
|
58
|
+
background: #155EEF;
|
|
59
|
+
box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
|
|
142
60
|
}
|
|
143
61
|
|
|
144
|
-
.feedback-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.feedback-modal .feedback-panel-content {
|
|
150
|
-
max-height: 85vh;
|
|
151
|
-
overflow-y: auto;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
/* Size variants */
|
|
155
|
-
.feedback-modal.size-small {
|
|
156
|
-
width: 360px;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.feedback-modal.size-medium {
|
|
160
|
-
width: 480px;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.feedback-modal.size-large {
|
|
164
|
-
width: 600px;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.feedback-panel.size-small {
|
|
168
|
-
width: 320px;
|
|
62
|
+
.feedback-trigger-btn:hover:not(:disabled) {
|
|
63
|
+
background: #004EEB;
|
|
64
|
+
box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.1);
|
|
169
65
|
}
|
|
170
66
|
|
|
171
|
-
.feedback-
|
|
172
|
-
|
|
67
|
+
.feedback-trigger-btn:disabled {
|
|
68
|
+
opacity: 0.7;
|
|
69
|
+
cursor: not-allowed;
|
|
173
70
|
}
|
|
174
71
|
|
|
175
|
-
.feedback-
|
|
176
|
-
|
|
72
|
+
.feedback-trigger-btn:focus-visible {
|
|
73
|
+
outline: 2px solid #155EEF;
|
|
74
|
+
outline-offset: 2px;
|
|
177
75
|
}
|
|
178
76
|
|
|
179
77
|
/* Side Panel Styles */
|
|
@@ -199,8 +97,7 @@ export const CSS_STYLES = `
|
|
|
199
97
|
left: 0;
|
|
200
98
|
right: 0;
|
|
201
99
|
bottom: 0;
|
|
202
|
-
background: rgba(0, 0, 0, 0.
|
|
203
|
-
backdrop-filter: blur(4px);
|
|
100
|
+
background: rgba(0, 0, 0, 0.1);
|
|
204
101
|
opacity: 0;
|
|
205
102
|
transition: opacity 0.3s ease;
|
|
206
103
|
pointer-events: none;
|
|
@@ -213,60 +110,84 @@ export const CSS_STYLES = `
|
|
|
213
110
|
}
|
|
214
111
|
|
|
215
112
|
.feedback-panel-content {
|
|
216
|
-
background:
|
|
217
|
-
color: var(--text-color, #171717);
|
|
113
|
+
background: white;
|
|
218
114
|
height: 100%;
|
|
219
115
|
display: flex;
|
|
220
116
|
flex-direction: column;
|
|
221
|
-
border-radius:
|
|
222
|
-
|
|
117
|
+
border-radius: 16px;
|
|
118
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
|
119
|
+
0 10px 10px -5px rgba(0, 0, 0, 0.04),
|
|
120
|
+
0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.feedback-panel.theme-dark .feedback-panel-content {
|
|
124
|
+
background: #1F2937;
|
|
125
|
+
color: white;
|
|
223
126
|
}
|
|
224
127
|
|
|
225
128
|
.feedback-panel-header {
|
|
226
129
|
display: flex;
|
|
227
130
|
align-items: center;
|
|
228
131
|
justify-content: space-between;
|
|
229
|
-
padding: 24px
|
|
132
|
+
padding: 24px;
|
|
133
|
+
border-bottom: 1px solid #E5E7EB;
|
|
230
134
|
flex-shrink: 0;
|
|
231
135
|
}
|
|
232
136
|
|
|
137
|
+
.feedback-panel.theme-dark .feedback-panel-header {
|
|
138
|
+
border-bottom-color: #374151;
|
|
139
|
+
}
|
|
140
|
+
|
|
233
141
|
.feedback-panel-header h3 {
|
|
234
142
|
margin: 0;
|
|
235
143
|
font-size: 18px;
|
|
236
144
|
font-weight: 600;
|
|
237
|
-
color:
|
|
145
|
+
color: #111827;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.feedback-panel.theme-dark .feedback-panel-header h3 {
|
|
149
|
+
color: white;
|
|
238
150
|
}
|
|
239
151
|
|
|
240
152
|
.feedback-panel-close {
|
|
241
153
|
background: none;
|
|
242
154
|
border: none;
|
|
243
|
-
font-size:
|
|
155
|
+
font-size: 24px;
|
|
244
156
|
cursor: pointer;
|
|
245
|
-
color: #
|
|
246
|
-
padding:
|
|
157
|
+
color: #6B7280;
|
|
158
|
+
padding: 4px;
|
|
247
159
|
width: 32px;
|
|
248
160
|
height: 32px;
|
|
249
161
|
display: flex;
|
|
250
162
|
align-items: center;
|
|
251
163
|
justify-content: center;
|
|
252
|
-
border-radius:
|
|
253
|
-
transition: all 0.
|
|
164
|
+
border-radius: 6px;
|
|
165
|
+
transition: all 0.2s ease;
|
|
254
166
|
}
|
|
255
167
|
|
|
256
168
|
.feedback-panel-close:hover {
|
|
257
|
-
background: #
|
|
258
|
-
color: #
|
|
169
|
+
background: #F3F4F6;
|
|
170
|
+
color: #111827;
|
|
259
171
|
}
|
|
260
172
|
|
|
261
173
|
.feedback-panel-close:focus-visible {
|
|
262
|
-
outline: 2px solid
|
|
174
|
+
outline: 2px solid #155EEF;
|
|
263
175
|
outline-offset: 2px;
|
|
264
176
|
}
|
|
265
177
|
|
|
178
|
+
.feedback-panel.theme-dark .feedback-panel-close {
|
|
179
|
+
color: #9CA3AF;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.feedback-panel.theme-dark .feedback-panel-close:hover {
|
|
183
|
+
background: #374151;
|
|
184
|
+
color: white;
|
|
185
|
+
}
|
|
186
|
+
|
|
266
187
|
.feedback-panel-body {
|
|
267
188
|
flex: 1;
|
|
268
189
|
overflow-y: auto;
|
|
269
|
-
padding:
|
|
190
|
+
padding: 24px;
|
|
270
191
|
}
|
|
271
192
|
|
|
272
193
|
.feedback-form {
|
|
@@ -276,59 +197,96 @@ export const CSS_STYLES = `
|
|
|
276
197
|
}
|
|
277
198
|
|
|
278
199
|
.feedback-form-group {
|
|
279
|
-
|
|
200
|
+
display: flex;
|
|
201
|
+
flex-direction: column;
|
|
202
|
+
gap: 8px;
|
|
203
|
+
margin-bottom: 20px;
|
|
280
204
|
}
|
|
281
205
|
|
|
282
206
|
.feedback-form-group:last-child {
|
|
283
207
|
margin-bottom: 0;
|
|
284
208
|
}
|
|
285
209
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
background: #ffffff;
|
|
292
|
-
transition: all 0.15s ease;
|
|
210
|
+
.feedback-form-group label {
|
|
211
|
+
font-size: 14px;
|
|
212
|
+
font-weight: 500;
|
|
213
|
+
line-height: 1.25;
|
|
214
|
+
color: #374151;
|
|
293
215
|
}
|
|
294
216
|
|
|
295
|
-
.feedback-
|
|
296
|
-
|
|
297
|
-
box-shadow: 0 0 0 3px rgba(33, 36, 74, 0.08);
|
|
217
|
+
.feedback-panel.theme-dark .feedback-form-group label {
|
|
218
|
+
color: #D1D5DB;
|
|
298
219
|
}
|
|
299
220
|
|
|
300
|
-
.feedback-form-group input
|
|
301
|
-
|
|
221
|
+
.feedback-form-group input {
|
|
222
|
+
height: 44px;
|
|
302
223
|
width: 100%;
|
|
303
|
-
border:
|
|
304
|
-
|
|
305
|
-
|
|
224
|
+
border-radius: 8px;
|
|
225
|
+
border: 1px solid #D1D5DB;
|
|
226
|
+
padding: 10px 14px;
|
|
227
|
+
font-size: 15px;
|
|
228
|
+
font-weight: 400;
|
|
229
|
+
line-height: 1.5;
|
|
230
|
+
color: #1F2937;
|
|
306
231
|
font-family: inherit;
|
|
307
|
-
color: var(--text-color, #171717);
|
|
308
|
-
background: transparent;
|
|
309
232
|
outline: none;
|
|
310
|
-
|
|
233
|
+
transition: all 0.2s ease;
|
|
311
234
|
}
|
|
312
235
|
|
|
313
|
-
.feedback-form-group input {
|
|
314
|
-
font-weight: 600;
|
|
236
|
+
.feedback-form-group input::placeholder {
|
|
315
237
|
font-size: 15px;
|
|
316
|
-
|
|
238
|
+
color: #9CA3AF;
|
|
317
239
|
}
|
|
318
240
|
|
|
319
|
-
.feedback-form-group input
|
|
320
|
-
color: #
|
|
321
|
-
|
|
241
|
+
.feedback-form-group input:focus {
|
|
242
|
+
border-color: #155EEF;
|
|
243
|
+
box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.feedback-form-group input:focus-visible {
|
|
247
|
+
outline: none;
|
|
322
248
|
}
|
|
323
249
|
|
|
324
250
|
.feedback-form-group textarea {
|
|
325
|
-
min-height:
|
|
251
|
+
min-height: 200px;
|
|
252
|
+
width: 100%;
|
|
253
|
+
resize: vertical;
|
|
254
|
+
border-radius: 8px;
|
|
255
|
+
border: 1px solid #D1D5DB;
|
|
256
|
+
padding: 10px 14px;
|
|
257
|
+
font-size: 15px;
|
|
326
258
|
font-weight: 400;
|
|
259
|
+
line-height: 1.5;
|
|
260
|
+
color: #1F2937;
|
|
261
|
+
font-family: inherit;
|
|
262
|
+
outline: none;
|
|
263
|
+
transition: all 0.2s ease;
|
|
327
264
|
}
|
|
328
265
|
|
|
329
266
|
.feedback-form-group textarea::placeholder {
|
|
330
|
-
|
|
331
|
-
|
|
267
|
+
font-size: 15px;
|
|
268
|
+
color: #9CA3AF;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.feedback-form-group textarea:focus {
|
|
272
|
+
border-color: #155EEF;
|
|
273
|
+
box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.feedback-form-group textarea:focus-visible {
|
|
277
|
+
outline: none;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.feedback-panel.theme-dark .feedback-form-group input,
|
|
281
|
+
.feedback-panel.theme-dark .feedback-form-group textarea {
|
|
282
|
+
background: #374151;
|
|
283
|
+
border-color: #4B5563;
|
|
284
|
+
color: white;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.feedback-panel.theme-dark .feedback-form-group input::placeholder,
|
|
288
|
+
.feedback-panel.theme-dark .feedback-form-group textarea::placeholder {
|
|
289
|
+
color: #6B7280;
|
|
332
290
|
}
|
|
333
291
|
|
|
334
292
|
.feedback-btn {
|
|
@@ -345,7 +303,7 @@ export const CSS_STYLES = `
|
|
|
345
303
|
font-weight: 500;
|
|
346
304
|
font-family: inherit;
|
|
347
305
|
cursor: pointer;
|
|
348
|
-
transition: all 0.
|
|
306
|
+
transition: all 0.2s ease;
|
|
349
307
|
}
|
|
350
308
|
|
|
351
309
|
.feedback-btn:disabled {
|
|
@@ -354,32 +312,62 @@ export const CSS_STYLES = `
|
|
|
354
312
|
}
|
|
355
313
|
|
|
356
314
|
.feedback-btn:focus-visible {
|
|
357
|
-
outline: 2px solid #
|
|
315
|
+
outline: 2px solid #155EEF;
|
|
358
316
|
outline-offset: 2px;
|
|
359
317
|
}
|
|
360
318
|
|
|
361
319
|
.feedback-btn-submit {
|
|
362
|
-
background:
|
|
320
|
+
background: #155EEF;
|
|
363
321
|
color: white;
|
|
364
322
|
width: 100%;
|
|
365
323
|
}
|
|
366
324
|
|
|
367
325
|
.feedback-btn-submit:hover:not(:disabled) {
|
|
368
|
-
background: #
|
|
326
|
+
background: #1A56DB;
|
|
369
327
|
}
|
|
370
328
|
|
|
371
329
|
.feedback-btn-submit:active:not(:disabled) {
|
|
372
|
-
|
|
330
|
+
background: #1E429F;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.feedback-btn-cancel {
|
|
334
|
+
background: transparent;
|
|
335
|
+
color: #6B7280;
|
|
336
|
+
border: 1px solid #D1D5DB;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.feedback-btn-cancel:hover:not(:disabled) {
|
|
340
|
+
background: #F9FAFB;
|
|
341
|
+
border-color: #9CA3AF;
|
|
342
|
+
color: #374151;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.feedback-panel.theme-dark .feedback-btn-cancel {
|
|
346
|
+
color: #D1D5DB;
|
|
347
|
+
border-color: #4B5563;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
|
|
351
|
+
background: #374151;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.feedback-form-actions {
|
|
355
|
+
display: flex;
|
|
356
|
+
flex-direction: column;
|
|
357
|
+
gap: 12px;
|
|
358
|
+
margin-top: auto;
|
|
359
|
+
padding-top: 24px;
|
|
373
360
|
}
|
|
374
361
|
|
|
375
362
|
.feedback-error {
|
|
376
|
-
background: #FEF2F2;
|
|
377
|
-
border: 1px solid #FEE2E2;
|
|
378
363
|
color: #DC2626;
|
|
379
|
-
|
|
364
|
+
font-size: 14px;
|
|
365
|
+
font-weight: 400;
|
|
366
|
+
margin-top: 8px;
|
|
367
|
+
padding: 12px;
|
|
368
|
+
background: #FEE2E2;
|
|
369
|
+
border: 1px solid #FECACA;
|
|
380
370
|
border-radius: 8px;
|
|
381
|
-
font-size: 13px;
|
|
382
|
-
margin-top: 12px;
|
|
383
371
|
display: none;
|
|
384
372
|
}
|
|
385
373
|
|
|
@@ -387,6 +375,12 @@ export const CSS_STYLES = `
|
|
|
387
375
|
display: block;
|
|
388
376
|
}
|
|
389
377
|
|
|
378
|
+
.feedback-panel.theme-dark .feedback-error {
|
|
379
|
+
background: #7F1D1D;
|
|
380
|
+
border-color: #991B1B;
|
|
381
|
+
color: #FCA5A5;
|
|
382
|
+
}
|
|
383
|
+
|
|
390
384
|
.feedback-success-notification {
|
|
391
385
|
position: fixed;
|
|
392
386
|
top: 24px;
|
|
@@ -451,7 +445,7 @@ export const CSS_STYLES = `
|
|
|
451
445
|
}
|
|
452
446
|
|
|
453
447
|
.feedback-success-close:focus-visible {
|
|
454
|
-
outline: 2px solid #
|
|
448
|
+
outline: 2px solid #155EEF;
|
|
455
449
|
outline-offset: 2px;
|
|
456
450
|
}
|
|
457
451
|
|
|
@@ -513,10 +507,18 @@ export const CSS_STYLES = `
|
|
|
513
507
|
border-radius: 2px;
|
|
514
508
|
}
|
|
515
509
|
|
|
510
|
+
.feedback-panel.theme-dark .feedback-panel-header::before {
|
|
511
|
+
background: #4B5563;
|
|
512
|
+
}
|
|
513
|
+
|
|
516
514
|
.feedback-panel-body {
|
|
517
515
|
padding: 20px;
|
|
518
516
|
}
|
|
519
517
|
|
|
518
|
+
.feedback-form-group textarea {
|
|
519
|
+
min-height: 150px;
|
|
520
|
+
}
|
|
521
|
+
|
|
520
522
|
.feedback-widget-button {
|
|
521
523
|
bottom: 16px;
|
|
522
524
|
right: 16px;
|
|
@@ -553,4 +555,4 @@ export const CSS_STYLES = `
|
|
|
553
555
|
display: none !important;
|
|
554
556
|
}
|
|
555
557
|
}
|
|
556
|
-
`;
|
|
558
|
+
`;
|
|
@@ -283,41 +283,44 @@ export class BaseWidget {
|
|
|
283
283
|
|
|
284
284
|
_getPanelHTML() {
|
|
285
285
|
return `
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
286
|
+
<div class="feedback-panel-content">
|
|
287
|
+
<div class="feedback-panel-header">
|
|
288
|
+
<h3>Send Feedback</h3>
|
|
289
|
+
<button class="feedback-panel-close" type="button" aria-label="Close">×</button>
|
|
290
|
+
</div>
|
|
291
|
+
<div class="feedback-panel-body">
|
|
292
|
+
<form class="feedback-form">
|
|
293
|
+
<div class="feedback-form-group">
|
|
294
|
+
<label for="feedback-title-${this.id}">Title (optional)</label>
|
|
295
295
|
<input
|
|
296
296
|
type="text"
|
|
297
297
|
id="feedback-title-${this.id}"
|
|
298
298
|
name="title"
|
|
299
|
-
placeholder="
|
|
299
|
+
placeholder="Brief description of your feedback"
|
|
300
300
|
value="${this.state.title}"
|
|
301
301
|
/>
|
|
302
|
+
</div>
|
|
303
|
+
<div class="feedback-form-group">
|
|
304
|
+
<label for="feedback-content-${this.id}">Message *</label>
|
|
302
305
|
<textarea
|
|
303
306
|
id="feedback-content-${this.id}"
|
|
304
307
|
name="content"
|
|
305
|
-
placeholder="Tell us what
|
|
308
|
+
placeholder="Tell us what you think..."
|
|
306
309
|
required
|
|
307
310
|
>${this.state.content}</textarea>
|
|
308
311
|
</div>
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
</
|
|
315
|
-
</
|
|
316
|
-
</
|
|
312
|
+
<div class="feedback-error" role="alert"></div>
|
|
313
|
+
<div class="feedback-form-actions">
|
|
314
|
+
<button type="submit" class="feedback-btn feedback-btn-submit">
|
|
315
|
+
${this.state.isSubmitting ? 'Sending...' : 'Send Feedback'}
|
|
316
|
+
</button>
|
|
317
|
+
</div>
|
|
318
|
+
</form>
|
|
319
|
+
</div>
|
|
317
320
|
</div>
|
|
318
|
-
|
|
319
|
-
`;
|
|
321
|
+
`;
|
|
320
322
|
}
|
|
323
|
+
|
|
321
324
|
_attachPanelEvents() {
|
|
322
325
|
const panel = this.panelElement;
|
|
323
326
|
|
|
@@ -9,15 +9,14 @@ export class ButtonWidget extends BaseWidget {
|
|
|
9
9
|
const button = document.createElement('div');
|
|
10
10
|
button.className = `feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`;
|
|
11
11
|
button.innerHTML = `
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
</
|
|
19
|
-
|
|
20
|
-
`;
|
|
12
|
+
<button class="feedback-trigger-btn" type="button">
|
|
13
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
|
|
14
|
+
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
|
|
15
|
+
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
|
|
16
|
+
</svg>
|
|
17
|
+
Feedback
|
|
18
|
+
</button>
|
|
19
|
+
`;
|
|
21
20
|
|
|
22
21
|
if (this.options.customStyles) {
|
|
23
22
|
Object.assign(button.style, this.options.customStyles);
|
|
@@ -25,23 +24,30 @@ export class ButtonWidget extends BaseWidget {
|
|
|
25
24
|
|
|
26
25
|
return button;
|
|
27
26
|
}
|
|
27
|
+
|
|
28
28
|
_attachEvents() {
|
|
29
29
|
const button = this.element.querySelector('.feedback-trigger-btn');
|
|
30
30
|
button.addEventListener('click', this.openPanel);
|
|
31
31
|
|
|
32
32
|
button.addEventListener('mouseenter', () => {
|
|
33
33
|
if (!this.state.isSubmitting) {
|
|
34
|
-
button.style.transform = '
|
|
34
|
+
button.style.transform = 'translateY(-2px)';
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
37
|
|
|
38
38
|
button.addEventListener('mouseleave', () => {
|
|
39
|
-
button.style.transform = '
|
|
39
|
+
button.style.transform = 'translateY(0)';
|
|
40
40
|
});
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
updateText(text) {
|
|
44
|
-
|
|
44
|
+
const button = this.element?.querySelector('.feedback-trigger-btn');
|
|
45
|
+
if (button) {
|
|
46
|
+
const textNode = button.childNodes[button.childNodes.length - 1];
|
|
47
|
+
if (textNode && textNode.nodeType === Node.TEXT_NODE) {
|
|
48
|
+
textNode.textContent = text;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
45
51
|
}
|
|
46
52
|
|
|
47
53
|
updatePosition(position) {
|
|
@@ -53,4 +59,4 @@ export class ButtonWidget extends BaseWidget {
|
|
|
53
59
|
);
|
|
54
60
|
}
|
|
55
61
|
}
|
|
56
|
-
}
|
|
62
|
+
}
|