@product7/feedback-sdk 1.0.5 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/feedback-sdk.js +327 -278
  2. package/dist/feedback-sdk.js.map +1 -1
  3. package/dist/feedback-sdk.min.js +1 -1
  4. package/dist/feedback-sdk.min.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/core/FeedbackSDK.js +1 -1
  7. package/src/styles/styles.js +202 -201
  8. package/src/widgets/BaseWidget.js +127 -79
  9. package/src/widgets/ButtonWidget.js +2 -2
package/src/styles/styles.js CHANGED
@@ -53,7 +53,7 @@ export const CSS_STYLES = `
53
53
  font-weight: 500;
54
54
  font-family: inherit;
55
55
  cursor: pointer;
56
- transition: all 0.3s duration;
56
+ transition: all 0.3s ease;
57
57
  color: white;
58
58
  background: #155EEF;
59
59
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
@@ -74,109 +74,133 @@ export const CSS_STYLES = `
74
74
  outline-offset: 2px;
75
75
  }
76
76
 
77
- .feedback-modal {
77
+ /* Side Panel Styles */
78
+ .feedback-panel {
78
79
  position: fixed;
79
- top: 0;
80
- left: 0;
81
- right: 0;
82
- bottom: 0;
80
+ bottom: 80px;
81
+ right: 24px;
82
+ width: 420px;
83
+ max-height: 500px;
83
84
  z-index: 1000000;
84
- display: flex;
85
- align-items: center;
86
- justify-content: center;
85
+ transform: translateX(calc(100% + 24px));
86
+ transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
87
87
  font-family: inherit;
88
88
  }
89
89
 
90
- .feedback-modal-overlay {
91
- position: absolute;
90
+ .feedback-panel.open {
91
+ transform: translateX(0);
92
+ }
93
+
94
+ .feedback-panel-backdrop {
95
+ position: fixed;
92
96
  top: 0;
93
97
  left: 0;
94
98
  right: 0;
95
99
  bottom: 0;
96
- background: rgba(0, 0, 0, 0.5);
97
- display: flex;
98
- align-items: center;
99
- justify-content: center;
100
+ background: rgba(0, 0, 0, 0.1);
101
+ opacity: 0;
102
+ transition: opacity 0.3s ease;
103
+ pointer-events: none;
104
+ z-index: 999999;
105
+ }
106
+
107
+ .feedback-panel-backdrop.show {
108
+ opacity: 1;
109
+ pointer-events: auto;
100
110
  }
101
111
 
102
- .feedback-modal-content {
112
+ .feedback-panel-content {
103
113
  background: white;
104
- border-radius: 8px;
105
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
106
- min-width: 460px;
107
- max-width: 500px;
108
- width: 100%;
109
- padding: 16px;
110
- max-height: 85vh;
111
- overflow-y: hidden;
112
- position: relative;
114
+ height: 100%;
115
+ display: flex;
116
+ flex-direction: column;
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);
113
121
  }
114
122
 
115
- .feedback-modal.theme-dark .feedback-modal-content {
123
+ .feedback-panel.theme-dark .feedback-panel-content {
116
124
  background: #1F2937;
117
125
  color: white;
118
126
  }
119
127
 
120
- .feedback-modal-header {
128
+ .feedback-panel-header {
121
129
  display: flex;
122
130
  align-items: center;
123
131
  justify-content: space-between;
124
- padding: 16px;
125
- border-bottom: 1px solid #D1D5DB;
132
+ padding: 24px;
133
+ border-bottom: 1px solid #E5E7EB;
126
134
  flex-shrink: 0;
127
135
  }
128
136
 
129
- .feedback-modal.theme-dark .feedback-modal-header {
137
+ .feedback-panel.theme-dark .feedback-panel-header {
130
138
  border-bottom-color: #374151;
131
139
  }
132
140
 
133
- .feedback-modal-header h3 {
141
+ .feedback-panel-header h3 {
134
142
  margin: 0;
135
- font-size: 16px;
143
+ font-size: 18px;
136
144
  font-weight: 600;
145
+ color: #111827;
137
146
  }
138
147
 
139
- .feedback-modal-close {
148
+ .feedback-panel.theme-dark .feedback-panel-header h3 {
149
+ color: white;
150
+ }
151
+
152
+ .feedback-panel-close {
140
153
  background: none;
141
154
  border: none;
142
155
  font-size: 24px;
143
156
  cursor: pointer;
144
157
  color: #6B7280;
145
- padding: 0;
146
- width: 24px;
147
- height: 24px;
158
+ padding: 4px;
159
+ width: 32px;
160
+ height: 32px;
148
161
  display: flex;
149
162
  align-items: center;
150
163
  justify-content: center;
151
- transition: all 0.3s ease;
164
+ border-radius: 6px;
165
+ transition: all 0.2s ease;
152
166
  }
153
167
 
154
- .feedback-modal-close:hover {
155
- color: #374151;
168
+ .feedback-panel-close:hover {
169
+ background: #F3F4F6;
170
+ color: #111827;
156
171
  }
157
172
 
158
- .feedback-modal-close:focus-visible {
173
+ .feedback-panel-close:focus-visible {
159
174
  outline: 2px solid #155EEF;
160
175
  outline-offset: 2px;
161
176
  }
162
177
 
163
- .feedback-modal.theme-dark .feedback-modal-close {
178
+ .feedback-panel.theme-dark .feedback-panel-close {
164
179
  color: #9CA3AF;
165
180
  }
166
181
 
167
- .feedback-modal.theme-dark .feedback-modal-close:hover {
168
- color: #D1D5DB;
182
+ .feedback-panel.theme-dark .feedback-panel-close:hover {
183
+ background: #374151;
184
+ color: white;
185
+ }
186
+
187
+ .feedback-panel-body {
188
+ flex: 1;
189
+ overflow-y: auto;
190
+ padding: 24px;
169
191
  }
170
192
 
171
193
  .feedback-form {
172
- padding: 16px;
194
+ display: flex;
195
+ flex-direction: column;
196
+ height: 100%;
173
197
  }
174
198
 
175
199
  .feedback-form-group {
176
200
  display: flex;
177
201
  flex-direction: column;
178
- gap: 4px;
179
- margin-bottom: 12px;
202
+ gap: 8px;
203
+ margin-bottom: 20px;
180
204
  }
181
205
 
182
206
  .feedback-form-group:last-child {
@@ -190,19 +214,19 @@ export const CSS_STYLES = `
190
214
  color: #374151;
191
215
  }
192
216
 
193
- .feedback-modal.theme-dark .feedback-form-group label {
217
+ .feedback-panel.theme-dark .feedback-form-group label {
194
218
  color: #D1D5DB;
195
219
  }
196
220
 
197
221
  .feedback-form-group input {
198
- height: 40px;
222
+ height: 44px;
199
223
  width: 100%;
200
- border-radius: 6px;
224
+ border-radius: 8px;
201
225
  border: 1px solid #D1D5DB;
202
- padding: 2px 12px;
203
- font-size: 14px;
226
+ padding: 10px 14px;
227
+ font-size: 15px;
204
228
  font-weight: 400;
205
- line-height: 1.25;
229
+ line-height: 1.5;
206
230
  color: #1F2937;
207
231
  font-family: inherit;
208
232
  outline: none;
@@ -210,13 +234,13 @@ export const CSS_STYLES = `
210
234
  }
211
235
 
212
236
  .feedback-form-group input::placeholder {
213
- font-size: 14px;
214
- color: #6B7280;
237
+ font-size: 15px;
238
+ color: #9CA3AF;
215
239
  }
216
240
 
217
241
  .feedback-form-group input:focus {
218
- border-color: #84ADFF;
219
- box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(41, 112, 255, 0.2);
242
+ border-color: #155EEF;
243
+ box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
220
244
  }
221
245
 
222
246
  .feedback-form-group input:focus-visible {
@@ -224,15 +248,15 @@ export const CSS_STYLES = `
224
248
  }
225
249
 
226
250
  .feedback-form-group textarea {
227
- min-height: 100px;
251
+ min-height: 200px;
228
252
  width: 100%;
229
- resize: both;
230
- border-radius: 6px;
253
+ resize: vertical;
254
+ border-radius: 8px;
231
255
  border: 1px solid #D1D5DB;
232
- padding: 2px 12px;
233
- font-size: 14px;
256
+ padding: 10px 14px;
257
+ font-size: 15px;
234
258
  font-weight: 400;
235
- line-height: 1.25;
259
+ line-height: 1.5;
236
260
  color: #1F2937;
237
261
  font-family: inherit;
238
262
  outline: none;
@@ -240,37 +264,42 @@ export const CSS_STYLES = `
240
264
  }
241
265
 
242
266
  .feedback-form-group textarea::placeholder {
243
- font-size: 14px;
244
- color: #6B7280;
267
+ font-size: 15px;
268
+ color: #9CA3AF;
245
269
  }
246
270
 
247
271
  .feedback-form-group textarea:focus {
248
- border-color: #84ADFF;
249
- box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(41, 112, 255, 0.2);
272
+ border-color: #155EEF;
273
+ box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
250
274
  }
251
275
 
252
276
  .feedback-form-group textarea:focus-visible {
253
277
  outline: none;
254
278
  }
255
279
 
256
- .feedback-modal.theme-dark .feedback-form-group input,
257
- .feedback-modal.theme-dark .feedback-form-group textarea {
280
+ .feedback-panel.theme-dark .feedback-form-group input,
281
+ .feedback-panel.theme-dark .feedback-form-group textarea {
258
282
  background: #374151;
259
283
  border-color: #4B5563;
260
284
  color: white;
261
285
  }
262
286
 
287
+ .feedback-panel.theme-dark .feedback-form-group input::placeholder,
288
+ .feedback-panel.theme-dark .feedback-form-group textarea::placeholder {
289
+ color: #6B7280;
290
+ }
291
+
263
292
  .feedback-btn {
264
293
  position: relative;
265
294
  display: inline-flex;
266
295
  align-items: center;
267
296
  justify-content: center;
268
297
  overflow: hidden;
269
- border-radius: 6px;
298
+ border-radius: 8px;
270
299
  border: none;
271
- height: 40px;
272
- padding: 2px 16px;
273
- font-size: 14px;
300
+ height: 44px;
301
+ padding: 10px 18px;
302
+ font-size: 15px;
274
303
  font-weight: 500;
275
304
  font-family: inherit;
276
305
  cursor: pointer;
@@ -278,7 +307,7 @@ export const CSS_STYLES = `
278
307
  }
279
308
 
280
309
  .feedback-btn:disabled {
281
- opacity: 0.7;
310
+ opacity: 0.6;
282
311
  cursor: not-allowed;
283
312
  }
284
313
 
@@ -290,10 +319,15 @@ export const CSS_STYLES = `
290
319
  .feedback-btn-submit {
291
320
  background: #155EEF;
292
321
  color: white;
322
+ width: 100%;
293
323
  }
294
324
 
295
325
  .feedback-btn-submit:hover:not(:disabled) {
296
- background: #004EEB;
326
+ background: #1A56DB;
327
+ }
328
+
329
+ .feedback-btn-submit:active:not(:disabled) {
330
+ background: #1E429F;
297
331
  }
298
332
 
299
333
  .feedback-btn-cancel {
@@ -308,103 +342,84 @@ export const CSS_STYLES = `
308
342
  color: #374151;
309
343
  }
310
344
 
311
- .feedback-modal.theme-dark .feedback-btn-cancel {
345
+ .feedback-panel.theme-dark .feedback-btn-cancel {
312
346
  color: #D1D5DB;
313
347
  border-color: #4B5563;
314
348
  }
315
349
 
316
- .feedback-modal.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
350
+ .feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
317
351
  background: #374151;
318
352
  }
319
353
 
320
354
  .feedback-form-actions {
321
355
  display: flex;
322
- gap: 8px;
323
- justify-content: flex-end;
324
- margin-top: 16px;
325
- padding-top: 4px;
326
- }
327
-
328
- .feedback-loading {
329
- width: 20px;
330
- height: 20px;
331
- border-radius: 50%;
332
- mask: radial-gradient(transparent 62%, white 65%);
333
- -webkit-mask: radial-gradient(transparent 62%, white 65%);
334
- animation: feedbackRotate 0.7s linear infinite;
335
- }
336
-
337
- .feedback-loading-white {
338
- background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.5), white);
339
- }
340
-
341
- .feedback-loading-blue {
342
- background: conic-gradient(from 0deg, #004EEB, #eff4ff);
343
- }
344
-
345
- @keyframes feedbackRotate {
346
- 0% { transform: rotate(0deg); }
347
- 100% { transform: rotate(360deg); }
356
+ flex-direction: column;
357
+ gap: 12px;
358
+ margin-top: auto;
359
+ padding-top: 24px;
348
360
  }
349
361
 
350
362
  .feedback-error {
351
- color: #F04438;
363
+ color: #DC2626;
352
364
  font-size: 14px;
353
365
  font-weight: 400;
354
- margin-top: 4px;
355
- text-transform: capitalize;
356
- }
357
-
358
- .feedback-form-error {
359
- color: #F04438;
360
- font-size: 14px;
361
- margin-top: 12px;
362
- padding: 8px 12px;
366
+ margin-top: 8px;
367
+ padding: 12px;
363
368
  background: #FEE2E2;
364
369
  border: 1px solid #FECACA;
365
- border-radius: 6px;
370
+ border-radius: 8px;
371
+ display: none;
372
+ }
373
+
374
+ .feedback-error.show {
375
+ display: block;
366
376
  }
367
377
 
368
- .feedback-modal.theme-dark .feedback-form-error {
378
+ .feedback-panel.theme-dark .feedback-error {
369
379
  background: #7F1D1D;
370
380
  border-color: #991B1B;
371
381
  color: #FCA5A5;
372
382
  }
373
383
 
374
- .feedback-form-group.error input,
375
- .feedback-form-group.error textarea {
376
- border-color: #FDA29B;
377
- }
378
-
379
- .feedback-form-group.error input:focus,
380
- .feedback-form-group.error textarea:focus {
381
- border-color: #FDA29B;
382
- box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(253, 162, 155, 0.3);
383
- }
384
-
385
384
  .feedback-success-notification {
386
385
  position: fixed;
387
- top: 20px;
388
- right: 20px;
389
- z-index: 1000001;
386
+ top: 24px;
387
+ right: 24px;
388
+ z-index: 1000002;
390
389
  background: white;
391
390
  border: 1px solid #D1FAE5;
392
- border-radius: 8px;
393
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
394
- animation: slideInRight 0.3s ease-out;
391
+ border-radius: 12px;
392
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
393
+ animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
394
+ min-width: 320px;
395
395
  }
396
396
 
397
397
  .feedback-success-content {
398
398
  display: flex;
399
399
  align-items: center;
400
- padding: 12px 16px;
400
+ padding: 16px 20px;
401
401
  gap: 12px;
402
402
  }
403
403
 
404
+ .feedback-success-icon {
405
+ width: 20px;
406
+ height: 20px;
407
+ border-radius: 50%;
408
+ background: #10B981;
409
+ color: white;
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: center;
413
+ font-size: 12px;
414
+ font-weight: 600;
415
+ flex-shrink: 0;
416
+ }
417
+
404
418
  .feedback-success-content span {
405
- color: #059669;
419
+ color: #065F46;
406
420
  font-weight: 500;
407
421
  font-size: 14px;
422
+ flex: 1;
408
423
  }
409
424
 
410
425
  .feedback-success-close {
@@ -412,17 +427,20 @@ export const CSS_STYLES = `
412
427
  border: none;
413
428
  color: #6B7280;
414
429
  cursor: pointer;
415
- font-size: 18px;
430
+ font-size: 20px;
416
431
  padding: 0;
417
- width: 20px;
418
- height: 20px;
432
+ width: 24px;
433
+ height: 24px;
419
434
  display: flex;
420
435
  align-items: center;
421
436
  justify-content: center;
422
- transition: all 0.3s ease;
437
+ transition: all 0.2s ease;
438
+ border-radius: 4px;
439
+ flex-shrink: 0;
423
440
  }
424
441
 
425
442
  .feedback-success-close:hover {
443
+ background: #F3F4F6;
426
444
  color: #374151;
427
445
  }
428
446
 
@@ -433,7 +451,7 @@ export const CSS_STYLES = `
433
451
 
434
452
  @keyframes slideInRight {
435
453
  from {
436
- transform: translateX(100%);
454
+ transform: translateX(400px);
437
455
  opacity: 0;
438
456
  }
439
457
  to {
@@ -447,56 +465,58 @@ export const CSS_STYLES = `
447
465
  to { opacity: 1; }
448
466
  }
449
467
 
450
- .feedback-modal {
451
- animation: fadeIn 0.2s ease-out;
452
- }
453
-
454
- .feedback-modal-content {
455
- animation: slideInUp 0.3s ease-out;
468
+ .feedback-panel-backdrop {
469
+ animation: fadeIn 0.3s ease;
456
470
  }
457
471
 
458
- @keyframes slideInUp {
459
- from {
460
- transform: translateY(20px);
461
- opacity: 0;
472
+ @media (max-width: 768px) {
473
+ .feedback-panel {
474
+ width: 100%;
475
+ top: auto;
476
+ bottom: 0;
477
+ right: 0;
478
+ left: 0;
479
+ height: 85vh;
480
+ max-height: 85vh;
481
+ transform: translateY(100%);
482
+ border-radius: 20px 20px 0 0;
462
483
  }
463
- to {
484
+
485
+ .feedback-panel.open {
464
486
  transform: translateY(0);
465
- opacity: 1;
466
- }
467
- }
468
-
469
- @media (max-width: 640px) {
470
- .feedback-modal {
471
- padding: 8px;
472
487
  }
473
488
 
474
- .feedback-modal-content {
475
- min-width: 280px;
476
- max-width: 100%;
477
- max-height: 95vh;
489
+ .feedback-panel-content {
490
+ border-radius: 20px 20px 0 0;
478
491
  }
479
492
 
480
- .feedback-form {
481
- padding: 16px;
493
+ .feedback-panel-header {
494
+ padding: 20px;
495
+ position: relative;
482
496
  }
483
497
 
484
- .feedback-modal-header {
485
- padding: 16px;
498
+ .feedback-panel-header::before {
499
+ content: '';
500
+ position: absolute;
501
+ top: 8px;
502
+ left: 50%;
503
+ transform: translateX(-50%);
504
+ width: 40px;
505
+ height: 4px;
506
+ background: #D1D5DB;
507
+ border-radius: 2px;
486
508
  }
487
509
 
488
- .feedback-modal-header h3 {
489
- font-size: 15px;
510
+ .feedback-panel.theme-dark .feedback-panel-header::before {
511
+ background: #4B5563;
490
512
  }
491
513
 
492
- .feedback-form-actions {
493
- flex-direction: column;
494
- gap: 8px;
514
+ .feedback-panel-body {
515
+ padding: 20px;
495
516
  }
496
517
 
497
- .feedback-btn {
498
- width: 100%;
499
- height: 40px;
518
+ .feedback-form-group textarea {
519
+ min-height: 150px;
500
520
  }
501
521
 
502
522
  .feedback-widget-button {
@@ -508,50 +528,31 @@ export const CSS_STYLES = `
508
528
  left: 16px;
509
529
  }
510
530
 
511
- .feedback-trigger-btn {
512
- padding: 10px 16px;
513
- font-size: 13px;
514
- }
515
-
516
531
  .feedback-success-notification {
517
- top: 8px;
518
- right: 8px;
519
- left: 8px;
520
- max-width: none;
521
- }
522
-
523
- .feedback-form-group input {
524
- height: 40px;
525
- padding: 2px 12px;
526
- }
527
-
528
- .feedback-form-group textarea {
529
- min-height: 80px;
530
- padding: 2px 12px;
532
+ top: 16px;
533
+ right: 16px;
534
+ left: 16px;
535
+ min-width: auto;
531
536
  }
532
537
  }
533
538
 
534
539
  @media (prefers-reduced-motion: reduce) {
535
540
  .feedback-trigger-btn,
536
541
  .feedback-btn,
537
- .feedback-modal,
538
- .feedback-modal-content,
539
- .feedback-success-notification,
540
- .feedback-loading {
542
+ .feedback-panel,
543
+ .feedback-panel-backdrop,
544
+ .feedback-success-notification {
541
545
  transition: none;
542
546
  animation: none;
543
547
  }
544
-
545
- .feedback-trigger-btn:hover {
546
- transform: none;
547
- }
548
548
  }
549
549
 
550
550
  @media print {
551
551
  .feedback-widget,
552
- .feedback-modal,
552
+ .feedback-panel,
553
+ .feedback-panel-backdrop,
553
554
  .feedback-success-notification {
554
555
  display: none !important;
555
556
  }
556
557
  }
557
- `;
558
+ `;