@magicfeedback/popup-sdk 1.1.8 → 1.3.0

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.
@@ -4,878 +4,12 @@ import {
4
4
  buildSurveyIdentity,
5
5
  sdkError,
6
6
  sdkLog,
7
- sdkWarn
8
- } from "./chunk-4UXOEIAB.mjs";
7
+ sdkWarn,
8
+ style_default
9
+ } from "./chunk-R4B3K2ZW.mjs";
9
10
 
10
11
  // src/ui/renderPopup.ts
11
12
  import magicfeedback from "@magicfeedback/native";
12
-
13
- // src/assets/style.css
14
- var style_default = `.magicfeedback-container {
15
- width: 100%;
16
- }
17
-
18
-
19
- .magicfeedback-success-message,
20
- .magicfeedback-info-message,
21
- .magicfeedback-start-message,
22
- .magicfeedback-container{
23
- animation-duration: 0.5s;
24
- animation-name: animate-fade;
25
- animation-delay: 0.25s;
26
- animation-fill-mode: backwards;
27
-
28
- font-style: normal;
29
- text-align: justify;
30
- font-weight: 400;
31
- font-size: 1.2rem;
32
- color: #475569;
33
- line-height: 1.5;
34
- }
35
-
36
- @keyframes animate-fade {
37
- 0% { opacity: 0; }
38
- 100% { opacity: 1; }
39
- }
40
-
41
- .magicfeedback-form {
42
- display: flex;
43
- flex-direction: column;
44
- justify-content: flex-start;
45
- align-items: center;
46
- width: 100%;
47
- }
48
- .magicfeedback-questions {
49
- display: flex;
50
- flex-direction: column;
51
- justify-content: flex-start;
52
- align-items: flex-start;
53
- width: 100%;
54
- }
55
-
56
- .magicfeedback-div {
57
- display: flex;
58
- flex-direction: column;
59
- justify-content: flex-start;
60
- align-items: flex-start;
61
- margin-bottom: 10px;
62
- width: 100%;
63
- }
64
-
65
- .magicfeedback-label {
66
- margin-bottom: 25px;
67
- margin-top: 20px;
68
- font-weight: 400;
69
- font-family: inherit;
70
- font-size: 1.2rem;
71
- color: #212529;
72
- text-align: start;
73
- word-wrap: break-word;
74
- white-space: normal;
75
-
76
- }
77
-
78
- .magicfeedback-checkbox {
79
- display: flex;
80
- flex-direction: column;
81
- flex-wrap: wrap;
82
- width: 100%;
83
- }
84
-
85
- .magicfeedback-checkbox-container {
86
- display: flex;
87
- flex-direction: row;
88
- justify-content: flex-start;
89
- align-items: center;
90
- margin-bottom: 5px;
91
- margin-top: 5px;
92
- }
93
-
94
- .magicfeedback-radio {
95
- display: flex;
96
- flex-direction: column;
97
- justify-content: flex-start;
98
- flex-wrap: wrap;
99
- width: 100%;
100
- margin-right: 5px;
101
- padding: 5px;
102
- }
103
-
104
- .magicfeedback-checkbox-container,
105
- .magicfeedback-radio-container {
106
- display: flex;
107
- flex-direction: row;
108
- justify-content: flex-start;
109
- align-items: center;
110
- margin: 5px;
111
- padding: 5px 0;
112
- background-color: #fff;
113
- border-radius: 5px;
114
- box-shadow: 0 0 3px #ccc;
115
- }
116
-
117
- .deepdots-popup input::-webkit-outer-spin-button,
118
- .deepdots-popup input::-webkit-inner-spin-button {
119
- -webkit-appearance: none;
120
- -moz-appearance: textfield;
121
- }
122
-
123
- .magicfeedback-checkbox input[type="checkbox"] {
124
- margin-right: 5px;
125
- margin-left: 5px;
126
- width: 20px;
127
- height: 20px;
128
- cursor: pointer;
129
- }
130
-
131
-
132
- .magicfeedback-checkbox label,
133
- .magicfeedback-radio-container label {
134
- margin-left: 5px;
135
- font-weight: 400;
136
- font-family: inherit;
137
- font-size: 16px;
138
- color: #212529;
139
- text-align: start;
140
- width: 100%;
141
- }
142
-
143
- .deepdots-popup p {
144
- margin-bottom: 0px;
145
- font-size: 12px;
146
- }
147
-
148
- .deepdots-popup h2 {
149
- line-height: 1.66;
150
- margin: 0;
151
- padding: 0;
152
- font-weight: 900;
153
- color: #222;
154
- font-family: var(--deepdots-font, 'Montserrat');
155
- font-size: 18px;
156
- text-transform: uppercase;
157
- text-align: center;
158
- margin-bottom: 40px;
159
- }
160
-
161
- /* Los controles de formulario no heredan font-family por defecto: cuando hay
162
- fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */
163
- .deepdots-popup.deepdots-has-font button,
164
- .deepdots-popup.deepdots-has-font input,
165
- .deepdots-popup.deepdots-has-font textarea,
166
- .deepdots-popup.deepdots-has-font select {
167
- font-family: var(--deepdots-font, inherit);
168
- }
169
-
170
- .deepdots-popup h6 {
171
- margin-bottom: 1rem;
172
- }
173
-
174
- .deepdots-popup input[type="date"],
175
- .deepdots-popup input[type="text"],
176
- .deepdots-popup input[type="number"],
177
- .deepdots-popup input[type="email"],
178
- .deepdots-popup input[type="password"],
179
- .deepdots-popup textarea,
180
- .deepdots-popup select {
181
- box-sizing: border-box;
182
- padding: 10px;
183
- margin: 10px 0;
184
- width: 100%;
185
- border: 2px solid #ccc; /* Default border color - you can customize this */
186
- border-radius: 5px;
187
- font-size: 18px;
188
- outline: none;
189
- transition: border-color 0.3s ease;
190
- min-height: 50px;
191
- font-family: inherit;
192
- -webkit-appearance: none;
193
- }
194
-
195
- .deepdots-popup select {
196
- background-image: linear-gradient(45deg, transparent 50%, gray 50%),
197
- linear-gradient(135deg, gray 50%, transparent 50%),
198
- linear-gradient(to right, #ccc, #ccc);
199
- background-position: calc(100% - 20px) calc(1em + 2px),
200
- calc(100% - 15px) calc(1em + 2px),
201
- calc(100% - 2.5em) 0.5em;
202
- background-size: 5px 5px,
203
- 5px 5px,
204
- 1px 1.5em;
205
- background-repeat: no-repeat;
206
- }
207
-
208
- .magicfeedback-boolean-container {
209
- display: flex;
210
- flex-direction: row;
211
- justify-content: flex-start;
212
- align-items: center;
213
- margin: 10px 0;
214
- width: 100%;
215
- }
216
-
217
- .magicfeedback-boolean-container label {
218
- margin-left: 10px;
219
- font-weight: 400;
220
- font-size: 16px;
221
- width: 100%;
222
- padding-top: 5px;
223
- }
224
-
225
- .magicfeedback-boolean-option {
226
- margin-right: 10px;
227
- margin-left: 10px;
228
- width: 100%;
229
- height: 38px;
230
- border-radius: 8px;
231
- font-size: 16px;
232
- cursor: pointer;
233
- border: 1px solid #ced4da !important;
234
- }
235
-
236
- .magicfeedback-boolean-option label {
237
- font-weight: 400;
238
- font-size: 16px;
239
- color: #475569;
240
- cursor: pointer;
241
- width: 100%;
242
- height: 100%;
243
- display: flex;
244
- justify-content: center;
245
- align-items: center;
246
- border-radius: inherit;
247
- }
248
-
249
- .magicfeedback-boolean-option input[type=radio] + label:hover {
250
- color: #007bff;
251
- }
252
-
253
- .magicfeedback-boolean-option input[type=radio]:checked + label {
254
- color: #007bff;
255
- background-color: #cadff8;
256
- }
257
-
258
- .deepdots-popup input[type="radio"] {
259
- padding: 20px;
260
- margin: 10px 0 10px 15px;
261
- width: 40px;
262
- background-color: #fff;
263
- box-shadow: none;
264
- }
265
-
266
- /* Style for focused input/select */
267
- .deepdots-popup input:focus, .deepdots-popup select:focus {
268
- border-color: #4CAF50; /* Highlight color when focused - you can customize this */
269
- }
270
-
271
- /* Style for invalid input (example: validation error) */
272
- .deepdots-popup input.error, .deepdots-popup select.error {
273
- border-color: #ff3333; /* Red color for error state - you can customize this */
274
- }
275
-
276
- .magicfeedback-action-container {
277
- display: flex;
278
- flex-direction: row;
279
- justify-content: space-between;
280
- align-items: center;
281
- margin-top: 10px;
282
- width: 100%;
283
- }
284
-
285
- .magicfeedback-action-container .magicfeedback-submit {
286
- cursor: pointer;
287
- padding: 10px;
288
- margin: 10px 0;
289
- width: 100px;
290
- border-radius: 8px;
291
- font-size: 16px;
292
- outline: none;
293
- transition: border-color 0.3s ease;
294
- background-color: #1E293B;
295
- color: white;
296
- }
297
-
298
- .magicfeedback-action-container .magicfeedback-back {
299
- cursor: pointer;
300
- padding: 10px;
301
- margin: 10px 0;
302
- width: 100px;
303
- border: 0;
304
- border-radius: 8px;
305
- font-size: 16px;
306
- outline: none;
307
- transition: border-color 0.3s ease;
308
- background-color: transparent;
309
- color: #212529;
310
- }
311
-
312
-
313
-
314
- /* Rating styles */
315
- .magicfeedback-rating {
316
- width: 100%;
317
- }
318
-
319
- .magicfeedback-rating-container {
320
- display: flex;
321
- flex-direction: row;
322
- justify-content: space-around;
323
- flex-wrap: wrap;
324
- align-items: center;
325
-
326
- margin: 15px 5px;
327
- padding: 0;
328
-
329
- list-style: none;
330
- font-size: 1.5rem;
331
- cursor: pointer;
332
- user-select: none;
333
- -webkit-user-select: none;
334
- -moz-user-select: none;
335
- -ms-user-select: none;
336
- }
337
-
338
- .magicfeedback-rating-placeholder-value,
339
- .magicfeedback-rating-placeholder{
340
- text-align: center;
341
- align-content: center;
342
- justify-content: center;
343
- text-wrap: wrap;
344
- }
345
-
346
- .magicfeedback-rating-option {
347
- margin: 0 0.5rem;
348
- padding: 0;
349
- }
350
-
351
- @media (max-width: 1024px) {
352
- .magicfeedback-rating-option {
353
- margin: 10px 0;
354
- padding: 0;
355
- width: 20%;
356
- display: flex;
357
- justify-content: center;
358
- }
359
-
360
- .magicfeedback-rating-placeholder-value {
361
- font-size: 0.75rem;
362
- margin-bottom: 1px;
363
- }
364
- .magicfeedback-rating-placeholder{
365
- justify-content: center;
366
- }
367
-
368
- .magicfeedback-rating-container {
369
- flex-wrap: wrap;
370
- justify-content: flex-start;
371
- }
372
- }
373
-
374
-
375
- .magicfeedback-rating-option-label-container {
376
- display: flex;
377
- flex-direction: column;
378
- }
379
-
380
-
381
- .magicfeedback-rating-option-label-container label {
382
- display: inline-block;
383
- text-align: center;
384
- margin-bottom: 0;
385
- font-weight: 600;
386
- font-size: 18px;
387
- color: #475569;
388
- }
389
-
390
- .magicfeedback-rating-option-label-container input[type=radio] {
391
- position: absolute;
392
- opacity: 0;
393
- width: 0;
394
- height: 0;
395
- }
396
-
397
- /* IMAGE STYLES */
398
- .magicfeedback-rating-option-label-container input[type=radio] + img {
399
- cursor: pointer;
400
- height: 48px;
401
- width: 48px;
402
- }
403
-
404
- /* LABEL STYLES */
405
- .magicfeedback-rating-option-label-container input[type=radio] + label {
406
- cursor: pointer;
407
- }
408
-
409
- /* CHECKED STYLES */
410
- .magicfeedback-rating-option-label-container input[type=radio]:checked + img {
411
- box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;
412
- border-radius: 50%;
413
- }
414
-
415
- .magicfeedback-rating-number {
416
- width: 100%;
417
- }
418
- .magicfeedback-rating-container,
419
- .magicfeedback-rating-number-container {
420
- display: flex;
421
- flex-direction: row;
422
- justify-content: space-between;
423
- align-items: center;
424
-
425
- margin: 15px 0;
426
- padding: 0;
427
-
428
- list-style: none;
429
- font-size: 1.5rem;
430
- cursor: pointer;
431
- user-select: none;
432
- -webkit-user-select: none;
433
- -moz-user-select: none;
434
- -ms-user-select: none;
435
- }
436
-
437
- /* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa
438
- el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */
439
- .magicfeedback-rating-number-container--with-placeholder {
440
- flex-wrap: wrap;
441
- align-items: flex-start;
442
- }
443
-
444
- .magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {
445
- width: 100%;
446
- margin-bottom: 8px;
447
- }
448
-
449
- .magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {
450
- width: auto;
451
- flex: 1;
452
- }
453
-
454
- .magicfeedback-rating-number-option {
455
- display: flex;
456
- flex-direction: row;
457
- justify-content: flex-start;
458
- align-items: center;
459
- margin: 5px;
460
- padding: 0;
461
- list-style: none;
462
- font-size: 1.5rem;
463
- cursor: pointer;
464
- user-select: none;
465
- -webkit-user-select: none;
466
- -moz-user-select: none;
467
- -ms-user-select: none;
468
- width: 100%;
469
- }
470
-
471
- .magicfeedback-rating-number-option-row{
472
- max-width: 100% !important;
473
- }
474
-
475
- .magicfeedback-rating-number-top-placeholder,
476
- .magicfeedback-rating-number-bottom-placeholder{
477
- text-align: center !important;
478
- align-content: center;
479
- justify-content: center;
480
- text-wrap: wrap;
481
-
482
- font-size: 15px;
483
- color: #475569;
484
-
485
- width: 100%;
486
- margin: auto;
487
- }
488
-
489
- @media (min-width: 650px) {
490
- .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,
491
- .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {
492
- margin-left: 0;
493
- width: calc(100% - 10px);
494
- }
495
-
496
- .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,
497
- .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {
498
- margin-right: 0;
499
- width: calc(100% - 10px);
500
- }
501
- }
502
-
503
-
504
- .magicfeedback-rating-number-option-label-container {
505
- display: flex;
506
- flex-direction: column;
507
- align-items: center;
508
- justify-content: center;
509
- width: 100%;
510
- height: 100%;
511
- }
512
-
513
- .magicfeedback-rating-number-option-label-container label {
514
- display: flex;
515
- align-items: center;
516
- justify-content: center;
517
- white-space: nowrap;
518
- overflow: hidden;
519
- text-overflow: ellipsis;
520
- margin: 0 10px;
521
- font-weight: 600;
522
- font-size: 14px;
523
- color: #475569;
524
- cursor: pointer;
525
- width: 100%;
526
- height: 100%;
527
- min-height: 50px;
528
- text-align: center;
529
- padding: 0;
530
- border-radius: 4px;
531
- border: 1px solid #ced4da;
532
- background-color: rgba(246, 246, 246, 0.3);
533
- transition: background-color 0.15s ease-in-out;
534
- }
535
-
536
- .magicfeedback-rating-number-option-label-container input[type=radio] {
537
- position: absolute;
538
- opacity: 0;
539
- width: 0;
540
- height: 0;
541
- }
542
-
543
- .magicfeedback-rating-number-option-label-container input[type=radio] + label {
544
- cursor: pointer;
545
- }
546
-
547
- .magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,
548
- .magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {
549
- color: #007bff;
550
- border: 1px solid #007bff;
551
- background-color: rgba(86, 168, 253, 0.29);
552
- }
553
-
554
- .magicfeedback-rating-number-container-column{
555
- align-items: flex-start !important;
556
- }
557
-
558
- @media (max-width: 650px) {
559
- .magicfeedback-rating-number-container-ltr {
560
- justify-content: center;
561
- flex-wrap: wrap;
562
- }
563
-
564
- .magicfeedback-rating-number-container-rtl {
565
- justify-content: center;
566
- flex-wrap: wrap-reverse;
567
- }
568
-
569
- .magicfeedback-rating-number-option {
570
- max-width: 100%;
571
- height: 55px;
572
- margin: 5px 0;
573
- }
574
- }
575
-
576
- .magicfeedback-rating-star {
577
- width: 100%;
578
- }
579
-
580
- .magicfeedback-rating-star-container {
581
- display: flex !important;
582
- flex-direction: row !important;
583
- justify-content: center !important;
584
- align-items: center !important;
585
- flex-wrap: wrap;
586
- margin: 15px 5px;
587
- padding: 0;
588
- list-style: none;
589
- font-size: 1.5rem;
590
- cursor: pointer;
591
- user-select: none;
592
- -webkit-user-select: none;
593
- -moz-user-select: none;
594
- -ms-user-select: none;
595
- }
596
-
597
- .magicfeedback-rating-star-option:not(:checked) > .rating__star {
598
- float: right;
599
- width: 1em;
600
- overflow: hidden;
601
- white-space: nowrap;
602
- cursor: pointer;
603
- font-size: 30px;
604
- color: #ccc;
605
- margin: 0 10px;
606
- }
607
-
608
- .magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
609
- .magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
610
- color: #deb217 !important;
611
- }
612
-
613
- .magicfeedback-rating-star-selected {
614
- color: #ffc700 !important;
615
- }
616
-
617
-
618
- /* Style for multiple choice image */
619
- .magicfeedback-image-option-label-container:hover {
620
- cursor: pointer;
621
- border: 0 !important;
622
- }
623
-
624
- .magicfeedback-image-option-label-container input[type=radio]:checked + img,
625
- .magicfeedback-image-option-label-container input[type=checkbox]:checked + img {
626
- border: 1px solid #007bff !important;
627
- box-shadow: 0 0 3px #007bff !important;
628
- }
629
-
630
- .magicfeedback-image-option-label-container input[type=radio] + img,
631
- .magicfeedback-image-option-label-container input[type=checkbox] + img {
632
- border: 1px solid transparent !important;
633
- }
634
-
635
- .magicfeedback-image-option-label-container{
636
- margin: 10px !important;
637
- height: calc(100% - 20px) !important;
638
- width: calc(100% - 20px) !important;
639
- }
640
-
641
- .magicfeedback-multiple-choice-image-option {
642
- display: flex;
643
- height: auto !important;
644
- box-shadow: 0 0 3px #ccc;
645
- }
646
-
647
- .magicfeedback-multiple-choice-image-label {
648
- font-size: 1rem;
649
- }
650
-
651
- .magicfeedback-consent-container {
652
- display: flex;
653
- flex-direction: row;
654
- justify-content: flex-start;
655
- align-items: center;
656
- margin: 10px 0;
657
- width: 100%;
658
- }
659
-
660
- .magicfeedback-consent-container label {
661
- margin-left: 10px;
662
- }
663
-
664
- .magicfeedback-start-message-container {
665
- /* ... add your start message container styles here ... */
666
- }
667
-
668
- .magicfeedback-success-message,
669
- .magicfeedback-info-message,
670
- .magicfeedback-start-message {
671
- margin: 35px 5px;
672
- }
673
-
674
- .magicfeedback-success-message p,
675
- .magicfeedback-info-message p,
676
- .magicfeedback-start-message p {
677
- font-style: normal;
678
- text-align: start;
679
- font-weight: 400;
680
- font-size: 16px;
681
- color: #475569;
682
- line-height: 1.5;
683
- }
684
-
685
- .magicfeedback-success-message img,
686
- .magicfeedback-info-message img,
687
- .magicfeedback-start-message img {
688
- width: 400px;
689
- max-width: 80%;
690
- height: auto;
691
- margin: 10px auto;
692
- }
693
-
694
- .magicfeedback-counter,
695
- .magicfeedback-point-system-total {
696
- margin: 10px 0 0 0 !important;
697
- display: flex !important;
698
- justify-content: right !important;
699
- align-items: center !important;
700
- width: 100%;
701
- }
702
-
703
- .magicfeedback-skip-container {
704
- background-color: transparent !important;
705
- border: 0 !important;
706
- color: #999999FF !important;
707
- padding: 0 !important;
708
- margin: 0 !important;
709
- cursor: pointer !important;
710
- font-size: 0.5em !important;
711
- font-weight: 400 !important;
712
- box-shadow: 0 0 0 !important;
713
-
714
- &:hover {
715
- color: #0066ff;
716
- }
717
- }
718
-
719
- .magicfeedback-skip-container input[type=checkbox] {
720
- border-color: #999999FF !important;
721
- border: 0 !important;
722
- cursor: pointer !important;
723
-
724
- }
725
-
726
- .magicfeedback-multi-question-matrix,
727
- .magicfeedback-point-system,
728
- .magicfeedback-priority-list {
729
- width: 100% !important;
730
- }
731
-
732
- .magicfeedback-multi-question-matrix-container,
733
- .magicfeedback-point-system-container,
734
- .magicfeedback-priority-list-container {
735
- width: 100% !important;
736
- overflow-x: auto;
737
- }
738
-
739
- .magicfeedback-point-system-list,
740
- .magicfeedback-priority-list-list,
741
- .magicfeedback-multi-question-matrix-table {
742
- width: 100% !important;
743
- padding: 0 !important;
744
- overflow-x: auto;
745
- }
746
-
747
- .magicfeedback-multi-question-matrix {
748
- position: relative !important;
749
- }
750
-
751
- .magicfeedback-multi-question-matrix-container {
752
- overflow: auto !important;
753
- padding-bottom: 10px;
754
- }
755
-
756
- .magicfeedback-multi-question-matrix-label{
757
- text-align: left !important;
758
- }
759
- .magicfeedback-priority-list-item {
760
- display: flex;
761
- flex-direction: row;
762
- justify-content: space-between;
763
- align-items: center;
764
- padding: 10px 0 10px 10px;
765
-
766
- border: 1px solid #ced4da;
767
- border-radius: 5px;
768
- margin: 10px 0 !important;
769
- }
770
-
771
- .magicfeedback-point-system-item {
772
- height: 45px;
773
- margin: 5px 0 !important;
774
- }
775
-
776
- .magicfeedback-point-system-item label,
777
- .magicfeedback-priority-list-item-label {
778
- font-family: inherit;
779
- font-size: 18px !important;
780
- color: #212529;
781
- text-align: start;
782
- word-wrap: break-word;
783
- white-space: normal;
784
- padding: 0 10px 0 0;
785
- }
786
-
787
- .magicfeedback-point-system-input-container {
788
- padding: 0 10px 0 0;
789
- border-radius: 5px;
790
- font-size: 14px;
791
- border: 1px solid #ced4da;
792
- height: 42px;
793
- margin: auto 0;
794
- }
795
-
796
- .magicfeedback-multi-question-matrix-table thead {
797
- margin-bottom: 20px;
798
- }
799
-
800
- .magicfeedback-multi-question-matrix-table th{
801
- text-align: center;
802
- font-weight: 400 !important;
803
- font-size: 1rem !important;
804
- padding: 0 10px !important;
805
- }
806
-
807
- .magicfeedback-multi-question-matrix-table th,
808
- .magicfeedback-multi-question-matrix-table td label,
809
- .magicfeedback-priority-list-arrow-up,
810
- .magicfeedback-priority-list-arrow-down {
811
- font-style: normal !important;
812
- font-weight: 400 !important;
813
- font-size: 1rem !important;
814
- color: #475569 !important;
815
- cursor: pointer !important;
816
- margin: 0 !important;
817
- line-height: inherit;
818
- }
819
-
820
- .magicfeedback-multi-question-matrix-table tr {
821
- align-items: center;
822
- margin: 5px 0;
823
- }
824
-
825
- .magicfeedback-multi-question-matrix-row-tr{
826
- border-radius: 5px;
827
- margin: 10px 0 !important;
828
- }
829
-
830
- .magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {
831
- background-color: #f1f6f6; /* Light gray background for odd rows */
832
- }
833
-
834
- .magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
835
- background-color: #ffffff; /* White background for even rows */
836
- }
837
-
838
- .magicfeedback-multi-question-matrix-row-label {
839
- text-align: left !important;
840
- }
841
-
842
- .magicfeedback-point-system-item span {
843
- color: #475569 !important;
844
- }
845
-
846
- .magicfeedback-point-system-item input {
847
- padding: 0;
848
- margin: 0 !important;
849
- width: auto !important;
850
- min-width: 100px !important;
851
- height: auto !important;
852
- min-height: 42px;
853
- cursor: pointer;
854
- font-size: 14px;
855
- text-align: center !important;
856
- }
857
-
858
- .magicfeedback-multi-question-matrix-table input {
859
- margin: auto !important;
860
- padding: 20px !important;
861
- width: 100% !important;
862
- height: 15px;
863
- border: 1px solid #ced4da;
864
- cursor: pointer;
865
- }
866
-
867
- .magicfeedback-image{
868
- max-height: 400px !important;
869
- height: auto !important;
870
- max-width: 100% !important;
871
- margin: 10px auto !important;
872
- }
873
-
874
- .magicfeedback-error{
875
- margin-top: 5px;
876
- }`;
877
-
878
- // src/ui/renderPopup.ts
879
13
  function ensureMagicFeedbackStyles(_popup) {
880
14
  const STYLE_ID = "magicfeedback-sdk-styles";
881
15
  if (document.getElementById(STYLE_ID)) return;
@@ -951,6 +85,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
951
85
  const isDark = style?.theme === "dark";
952
86
  const theme = {
953
87
  popupBg: isDark ? "#1e1e1e" : "#fff",
88
+ // El popup fija su propio fondo, así que debe fijar también el esquema de color.
89
+ // Sin esto los controles de formulario (input/textarea/select) caen al estilo por
90
+ // defecto del navegador: en un host con `prefers-color-scheme: dark` se pintan
91
+ // oscuros con texto blanco sobre el fondo claro del popup.
92
+ colorScheme: isDark ? "dark" : "light",
954
93
  textPrimary: isDark ? "#f0f0f0" : "#111",
955
94
  closeBtnHoverBg: isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.06)",
956
95
  closeBtnHoverColor: isDark ? "#fff" : "#000000"
@@ -973,6 +112,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
973
112
  flex-direction: column;
974
113
  justify-content: flex-start;
975
114
  background: ${theme.popupBg};
115
+ color-scheme: ${theme.colorScheme};
976
116
  border-radius: 8px;
977
117
  padding: 24px;
978
118
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
@@ -1407,4 +547,4 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
1407
547
  export {
1408
548
  renderPopup
1409
549
  };
1410
- //# sourceMappingURL=renderPopup-PS3NJDUR.mjs.map
550
+ //# sourceMappingURL=renderPopup-ZYXOUBCP.mjs.map