@magicfeedback/native 2.1.7-alpha.9 → 2.1.12
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/README.md +315 -467
- package/dist/magicfeedback-sdk.browser.js +1 -1
- package/dist/magicfeedback-sdk.node.js +1 -1
- package/dist/styles/magicfeedback-default.css +193 -80
- package/dist/types/src/models/pageGraphs.d.ts +52 -0
- package/dist/types/src/models/types.d.ts +92 -3
- package/dist/types/src/render/helpers.d.ts +3 -0
- package/dist/types/src/render/ratingHelpers.d.ts +3 -0
- package/dist/types/src/render/registry.d.ts +3 -0
- package/dist/types/src/render/renderBoolean.d.ts +2 -0
- package/dist/types/src/render/renderChoice.d.ts +2 -0
- package/dist/types/src/render/renderConsent.d.ts +2 -0
- package/dist/types/src/render/renderDate.d.ts +2 -0
- package/dist/types/src/render/renderEmail.d.ts +2 -0
- package/dist/types/src/render/renderInfoPage.d.ts +2 -0
- package/dist/types/src/render/renderLongText.d.ts +2 -0
- package/dist/types/src/render/renderMatrix.d.ts +2 -0
- package/dist/types/src/render/renderMultipleChoiceImage.d.ts +2 -0
- package/dist/types/src/render/renderNumber.d.ts +2 -0
- package/dist/types/src/render/renderPassword.d.ts +2 -0
- package/dist/types/src/render/renderPointSystem.d.ts +2 -0
- package/dist/types/src/render/renderPriorityList.d.ts +2 -0
- package/dist/types/src/render/renderRatingEmoji.d.ts +2 -0
- package/dist/types/src/render/renderRatingNumber.d.ts +2 -0
- package/dist/types/src/render/renderRatingStar.d.ts +2 -0
- package/dist/types/src/render/renderSelect.d.ts +2 -0
- package/dist/types/src/render/renderText.d.ts +2 -0
- package/dist/types/src/render/renderUploadFile.d.ts +2 -0
- package/dist/types/src/render/renderUploadImage.d.ts +2 -0
- package/dist/types/src/render/types.d.ts +20 -0
- package/package.json +1 -1
|
@@ -3,29 +3,35 @@
|
|
|
3
3
|
* Clean, minimal, and elegant survey rendering
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");
|
|
7
|
+
|
|
6
8
|
/* ========================================
|
|
7
9
|
CSS VARIABLES - Design SYSTEM
|
|
8
10
|
======================================== */
|
|
9
11
|
:root {
|
|
10
|
-
/* Colors -
|
|
11
|
-
--mf-primary: #
|
|
12
|
-
--mf-primary-hover: #
|
|
13
|
-
--mf-primary-light: #
|
|
12
|
+
/* Colors - Minimal Pastel */
|
|
13
|
+
--mf-primary: #1E293B;
|
|
14
|
+
--mf-primary-hover: #0F172A;
|
|
15
|
+
--mf-primary-light: #E2E8F0;
|
|
16
|
+
|
|
17
|
+
--mf-text-primary: #1E293B;
|
|
18
|
+
--mf-text-secondary: #475569;
|
|
19
|
+
--mf-text-muted: #94A3B8;
|
|
14
20
|
|
|
15
|
-
--mf-
|
|
16
|
-
--mf-
|
|
17
|
-
--mf-
|
|
21
|
+
--mf-bg-primary: #F8FAFC;
|
|
22
|
+
--mf-bg-secondary: #FFFFFF;
|
|
23
|
+
--mf-bg-hover: #EEF2F6;
|
|
18
24
|
|
|
19
|
-
--mf-
|
|
20
|
-
--mf-
|
|
21
|
-
--mf-bg-hover: #f1f5f9;
|
|
25
|
+
--mf-border: #E2E8F0;
|
|
26
|
+
--mf-border-focus: #1E293B;
|
|
22
27
|
|
|
23
|
-
--mf-
|
|
24
|
-
--mf-
|
|
28
|
+
--mf-success: #16A34A;
|
|
29
|
+
--mf-error: #EF4444;
|
|
30
|
+
--mf-warning: #F59E0B;
|
|
25
31
|
|
|
26
|
-
--mf-
|
|
27
|
-
--mf-
|
|
28
|
-
--mf-
|
|
32
|
+
--mf-surface: #FFFFFF;
|
|
33
|
+
--mf-surface-alt: #F1F5F9;
|
|
34
|
+
--mf-accent: #38BDF8;
|
|
29
35
|
|
|
30
36
|
/* Spacing */
|
|
31
37
|
--mf-space-xs: 0.25rem;
|
|
@@ -35,25 +41,33 @@
|
|
|
35
41
|
--mf-space-xl: 1.5rem;
|
|
36
42
|
|
|
37
43
|
/* Border Radius */
|
|
38
|
-
--mf-radius-sm: 0.
|
|
39
|
-
--mf-radius-md: 0.
|
|
40
|
-
--mf-radius-lg:
|
|
44
|
+
--mf-radius-sm: 0.5rem;
|
|
45
|
+
--mf-radius-md: 0.75rem;
|
|
46
|
+
--mf-radius-lg: 1.25rem;
|
|
41
47
|
--mf-radius-full: 9999px;
|
|
42
48
|
|
|
43
49
|
/* Shadows */
|
|
44
|
-
--mf-shadow-sm: 0 1px 2px 0 rgba(
|
|
45
|
-
--mf-shadow-md: 0
|
|
46
|
-
--mf-shadow-lg: 0
|
|
47
|
-
--mf-shadow-focus: 0 0 0 3px rgba(
|
|
50
|
+
--mf-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
|
|
51
|
+
--mf-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
|
|
52
|
+
--mf-shadow-lg: 0 16px 30px rgba(15, 23, 42, 0.12);
|
|
53
|
+
--mf-shadow-focus: 0 0 0 3px rgba(30, 41, 59, 0.15);
|
|
54
|
+
--mf-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.08);
|
|
48
55
|
|
|
49
56
|
/* Typography */
|
|
50
|
-
--mf-font-sans:
|
|
57
|
+
--mf-font-sans: "Nunito", "Quicksand", "Avenir Next", "Trebuchet MS", sans-serif;
|
|
51
58
|
--mf-font-size-sm: 0.875rem;
|
|
52
59
|
--mf-font-size-base: 1rem;
|
|
53
60
|
--mf-font-size-lg: 1.125rem;
|
|
54
61
|
--mf-font-size-xl: 1.25rem;
|
|
55
62
|
--mf-line-height: 1.6;
|
|
56
63
|
|
|
64
|
+
/* Font Weights */
|
|
65
|
+
--mf-font-weight-normal: 400;
|
|
66
|
+
--mf-font-weight-medium: 500;
|
|
67
|
+
--mf-font-weight-semibold: 600;
|
|
68
|
+
--mf-font-weight-bold: 700;
|
|
69
|
+
--mf-font-weight-extrabold: 800;
|
|
70
|
+
|
|
57
71
|
/* Transitions */
|
|
58
72
|
--mf-transition: all 0.2s ease;
|
|
59
73
|
--mf-transition-fast: all 0.15s ease;
|
|
@@ -109,11 +123,11 @@
|
|
|
109
123
|
BASE CONTAINER
|
|
110
124
|
======================================== */
|
|
111
125
|
.magicfeedback-container {
|
|
112
|
-
width: 100%;
|
|
113
126
|
font-family: var(--mf-font-sans), sans-serif;
|
|
114
127
|
color: var(--mf-text-primary);
|
|
115
128
|
line-height: var(--mf-line-height);
|
|
116
129
|
animation: mf-fade-in 0.4s ease-out;
|
|
130
|
+
border-radius: var(--mf-radius-lg);
|
|
117
131
|
}
|
|
118
132
|
|
|
119
133
|
/* ========================================
|
|
@@ -125,7 +139,9 @@
|
|
|
125
139
|
padding: var(--mf-space-lg);
|
|
126
140
|
margin: var(--mf-space-lg) 0;
|
|
127
141
|
border-radius: var(--mf-radius-lg);
|
|
128
|
-
background: var(--mf-
|
|
142
|
+
background: var(--mf-surface-alt);
|
|
143
|
+
border: 1px solid var(--mf-border);
|
|
144
|
+
box-shadow: var(--mf-shadow-sm);
|
|
129
145
|
animation: mf-scale-in 0.3s ease-out;
|
|
130
146
|
}
|
|
131
147
|
|
|
@@ -164,7 +180,10 @@
|
|
|
164
180
|
display: flex;
|
|
165
181
|
flex-direction: column;
|
|
166
182
|
gap: var(--mf-space-lg);
|
|
167
|
-
|
|
183
|
+
background: var(--mf-surface);
|
|
184
|
+
padding: clamp(16px, 2.5vw, 28px);
|
|
185
|
+
border: 1px solid var(--mf-border);
|
|
186
|
+
border-radius: var(--mf-radius-lg);
|
|
168
187
|
}
|
|
169
188
|
|
|
170
189
|
.magicfeedback-questions {
|
|
@@ -178,8 +197,9 @@
|
|
|
178
197
|
display: flex;
|
|
179
198
|
flex-direction: column;
|
|
180
199
|
gap: var(--mf-space-sm);
|
|
181
|
-
width: 100%;
|
|
182
200
|
animation: mf-slide-in 0.3s ease-out;
|
|
201
|
+
background: var(--mf-bg-secondary);
|
|
202
|
+
border-radius: var(--mf-radius-md);
|
|
183
203
|
}
|
|
184
204
|
|
|
185
205
|
/* ========================================
|
|
@@ -187,11 +207,18 @@
|
|
|
187
207
|
======================================== */
|
|
188
208
|
.magicfeedback-label {
|
|
189
209
|
font-size: var(--mf-font-size-lg);
|
|
190
|
-
font-weight:
|
|
210
|
+
font-weight: var(--mf-font-weight-bold);
|
|
191
211
|
color: var(--mf-text-primary);
|
|
192
212
|
line-height: var(--mf-line-height);
|
|
193
|
-
margin: 0 0 var(--mf-space-md) 0;
|
|
194
213
|
text-align: left;
|
|
214
|
+
letter-spacing: -0.01em;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.magicfeedback-sublabel {
|
|
218
|
+
font-size: var(--mf-font-size-base);
|
|
219
|
+
font-weight: var(--mf-font-weight-normal);
|
|
220
|
+
color: var(--mf-text-secondary);
|
|
221
|
+
margin-bottom: var(--mf-space-sm);
|
|
195
222
|
}
|
|
196
223
|
|
|
197
224
|
h2 {
|
|
@@ -219,18 +246,18 @@ input[type="email"],
|
|
|
219
246
|
input[type="password"],
|
|
220
247
|
textarea,
|
|
221
248
|
select {
|
|
222
|
-
|
|
223
|
-
padding: var(--mf-space-sm) var(--mf-space-md);
|
|
249
|
+
padding: 0.75rem 0.9rem;
|
|
224
250
|
font-size: var(--mf-font-size-base);
|
|
225
251
|
font-family: inherit;
|
|
226
252
|
color: var(--mf-text-primary);
|
|
227
|
-
background-color: var(--mf-
|
|
228
|
-
border:
|
|
253
|
+
background-color: var(--mf-surface);
|
|
254
|
+
border: 2px solid var(--mf-border);
|
|
229
255
|
border-radius: var(--mf-radius-md);
|
|
230
256
|
outline: none;
|
|
231
257
|
transition: var(--mf-transition);
|
|
232
258
|
-webkit-appearance: none;
|
|
233
259
|
appearance: none;
|
|
260
|
+
box-shadow: var(--mf-shadow-sm);
|
|
234
261
|
}
|
|
235
262
|
|
|
236
263
|
textarea {
|
|
@@ -238,13 +265,6 @@ textarea {
|
|
|
238
265
|
resize: vertical;
|
|
239
266
|
}
|
|
240
267
|
|
|
241
|
-
input:focus,
|
|
242
|
-
select:focus,
|
|
243
|
-
textarea:focus {
|
|
244
|
-
border-color: var(--mf-border-focus);
|
|
245
|
-
box-shadow: var(--mf-shadow-focus);
|
|
246
|
-
}
|
|
247
|
-
|
|
248
268
|
input::placeholder,
|
|
249
269
|
textarea::placeholder {
|
|
250
270
|
color: var(--mf-text-muted);
|
|
@@ -373,6 +393,8 @@ textarea.error {
|
|
|
373
393
|
cursor: pointer;
|
|
374
394
|
transition: var(--mf-transition-fast);
|
|
375
395
|
margin: 0;
|
|
396
|
+
width: -webkit-fill-available;
|
|
397
|
+
height: inherit;
|
|
376
398
|
}
|
|
377
399
|
|
|
378
400
|
.magicfeedback-boolean-option label:hover {
|
|
@@ -420,6 +442,40 @@ textarea.error {
|
|
|
420
442
|
margin: var(--mf-space-sm) 0;
|
|
421
443
|
}
|
|
422
444
|
|
|
445
|
+
@media (min-width: 600px) {
|
|
446
|
+
.magicfeedback-rating-container,
|
|
447
|
+
.magicfeedback-rating-number-container,
|
|
448
|
+
.magicfeedback-rating-star-container {
|
|
449
|
+
position: relative;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.magicfeedback-rating-container--with-placeholder,
|
|
453
|
+
.magicfeedback-rating-number-container--with-placeholder {
|
|
454
|
+
padding-top: calc(var(--mf-space-md) + var(--mf-space-sm) - 4px);
|
|
455
|
+
padding-bottom: calc(var(--mf-space-md) - var(--mf-space-sm));
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.magicfeedback-rating-placeholder {
|
|
459
|
+
position: absolute;
|
|
460
|
+
top: 0;
|
|
461
|
+
left: 0;
|
|
462
|
+
right: 0;
|
|
463
|
+
margin: 0;
|
|
464
|
+
padding: 0 4px;
|
|
465
|
+
box-sizing: border-box;
|
|
466
|
+
pointer-events: none;
|
|
467
|
+
z-index: 1;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.magicfeedback-rating-placeholder-value {
|
|
471
|
+
margin: 0;
|
|
472
|
+
max-width: 50%;
|
|
473
|
+
overflow-wrap: anywhere;
|
|
474
|
+
word-break: break-word;
|
|
475
|
+
white-space: normal;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
|
|
423
479
|
/* Rating with Images */
|
|
424
480
|
.magicfeedback-rating-option-label-container input[type="radio"] {
|
|
425
481
|
position: absolute;
|
|
@@ -683,7 +739,7 @@ textarea.error {
|
|
|
683
739
|
background-color: var(--mf-bg-primary);
|
|
684
740
|
border: 1.5px solid var(--mf-border);
|
|
685
741
|
border-radius: var(--mf-radius-md);
|
|
686
|
-
min-height:
|
|
742
|
+
min-height: 45px;
|
|
687
743
|
}
|
|
688
744
|
|
|
689
745
|
.magicfeedback-point-system-item label {
|
|
@@ -724,7 +780,8 @@ textarea.error {
|
|
|
724
780
|
======================================== */
|
|
725
781
|
.magicfeedback-consent-container {
|
|
726
782
|
display: flex;
|
|
727
|
-
|
|
783
|
+
flex-direction: row;
|
|
784
|
+
align-items: center;
|
|
728
785
|
gap: var(--mf-space-sm);
|
|
729
786
|
padding: var(--mf-space-md);
|
|
730
787
|
background-color: var(--mf-bg-secondary);
|
|
@@ -745,6 +802,7 @@ textarea.error {
|
|
|
745
802
|
color: var(--mf-text-secondary);
|
|
746
803
|
line-height: var(--mf-line-height);
|
|
747
804
|
cursor: pointer;
|
|
805
|
+
margin-bottom: 0;
|
|
748
806
|
}
|
|
749
807
|
|
|
750
808
|
/* ========================================
|
|
@@ -761,22 +819,22 @@ textarea.error {
|
|
|
761
819
|
}
|
|
762
820
|
|
|
763
821
|
.magicfeedback-submit {
|
|
764
|
-
padding:
|
|
822
|
+
padding: 0.8rem 1.6rem;
|
|
765
823
|
font-size: var(--mf-font-size-base);
|
|
766
|
-
font-weight:
|
|
767
|
-
color:
|
|
824
|
+
font-weight: 800;
|
|
825
|
+
color: #FFFFFF;
|
|
768
826
|
background-color: var(--mf-primary);
|
|
769
|
-
border:
|
|
770
|
-
border-radius: var(--mf-radius-
|
|
827
|
+
border: 2px solid var(--mf-primary);
|
|
828
|
+
border-radius: var(--mf-radius-full);
|
|
771
829
|
cursor: pointer;
|
|
772
830
|
transition: var(--mf-transition-fast);
|
|
773
|
-
box-shadow: var(--mf-shadow-
|
|
831
|
+
box-shadow: var(--mf-shadow-md);
|
|
774
832
|
}
|
|
775
833
|
|
|
776
834
|
.magicfeedback-submit:hover {
|
|
777
835
|
background-color: var(--mf-primary-hover);
|
|
778
|
-
box-shadow: var(--mf-shadow-
|
|
779
|
-
transform: translateY(-
|
|
836
|
+
box-shadow: var(--mf-shadow-lg);
|
|
837
|
+
transform: translateY(-2px);
|
|
780
838
|
}
|
|
781
839
|
|
|
782
840
|
.magicfeedback-submit:active {
|
|
@@ -791,18 +849,20 @@ textarea.error {
|
|
|
791
849
|
}
|
|
792
850
|
|
|
793
851
|
.magicfeedback-back {
|
|
794
|
-
padding:
|
|
852
|
+
padding: 0.65rem 1rem;
|
|
795
853
|
font-size: var(--mf-font-size-base);
|
|
796
|
-
font-weight:
|
|
797
|
-
color: var(--mf-
|
|
798
|
-
background-color:
|
|
799
|
-
border:
|
|
854
|
+
font-weight: 700;
|
|
855
|
+
color: var(--mf-primary);
|
|
856
|
+
background-color: var(--mf-bg-secondary);
|
|
857
|
+
border: 2px solid var(--mf-border);
|
|
858
|
+
border-radius: var(--mf-radius-full);
|
|
800
859
|
cursor: pointer;
|
|
801
860
|
transition: var(--mf-transition-fast);
|
|
802
861
|
}
|
|
803
862
|
|
|
804
863
|
.magicfeedback-back:hover {
|
|
805
|
-
color: var(--mf-primary);
|
|
864
|
+
border-color: var(--mf-primary);
|
|
865
|
+
background-color: var(--mf-bg-hover);
|
|
806
866
|
}
|
|
807
867
|
|
|
808
868
|
/* ========================================
|
|
@@ -850,7 +910,7 @@ textarea.error {
|
|
|
850
910
|
left: 0;
|
|
851
911
|
width: 100vw;
|
|
852
912
|
height: 100vh;
|
|
853
|
-
background: rgba(0,
|
|
913
|
+
background: rgba(0,0,0,0.4);
|
|
854
914
|
display: none; /* toggled to flex when open */
|
|
855
915
|
align-items: center;
|
|
856
916
|
justify-content: center;
|
|
@@ -861,7 +921,7 @@ textarea.error {
|
|
|
861
921
|
.magicfeedback-modal {
|
|
862
922
|
background: #fff;
|
|
863
923
|
border-radius: 8px;
|
|
864
|
-
box-shadow: 0 8px 24px rgba(0,
|
|
924
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
|
865
925
|
max-width: 520px;
|
|
866
926
|
width: 90%;
|
|
867
927
|
max-height: 80vh;
|
|
@@ -902,7 +962,6 @@ textarea.error {
|
|
|
902
962
|
/* Priority list header */
|
|
903
963
|
.magicfeedback-priority-list-header {
|
|
904
964
|
display: flex;
|
|
905
|
-
flex-direction: row-reverse;
|
|
906
965
|
align-items: center;
|
|
907
966
|
justify-content: space-between;
|
|
908
967
|
gap: 12px;
|
|
@@ -938,35 +997,39 @@ textarea.error {
|
|
|
938
997
|
/* Buttons */
|
|
939
998
|
.magicfeedback-button {
|
|
940
999
|
appearance: none;
|
|
941
|
-
border:
|
|
942
|
-
border-radius:
|
|
943
|
-
background:
|
|
944
|
-
color:
|
|
945
|
-
padding:
|
|
1000
|
+
border: 2px solid var(--mf-border);
|
|
1001
|
+
border-radius: var(--mf-radius-full);
|
|
1002
|
+
background: var(--mf-bg-secondary);
|
|
1003
|
+
color: var(--mf-text-primary);
|
|
1004
|
+
padding: 0.6rem 1rem;
|
|
946
1005
|
font-size: 14px;
|
|
1006
|
+
font-weight: 700;
|
|
947
1007
|
cursor: pointer;
|
|
1008
|
+
box-shadow: var(--mf-shadow-sm);
|
|
948
1009
|
}
|
|
949
1010
|
|
|
950
1011
|
.magicfeedback-button:hover {
|
|
951
|
-
background:
|
|
1012
|
+
background: var(--mf-bg-hover);
|
|
1013
|
+
border-color: var(--mf-primary);
|
|
952
1014
|
}
|
|
953
1015
|
|
|
954
1016
|
.magicfeedback-button:active {
|
|
955
|
-
|
|
1017
|
+
transform: translateY(1px);
|
|
956
1018
|
}
|
|
957
1019
|
|
|
958
1020
|
.magicfeedback-button-primary {
|
|
959
|
-
border-color:
|
|
960
|
-
background:
|
|
1021
|
+
border-color: var(--mf-primary);
|
|
1022
|
+
background: var(--mf-primary);
|
|
961
1023
|
color: #fff;
|
|
1024
|
+
box-shadow: var(--mf-shadow-md);
|
|
962
1025
|
}
|
|
963
1026
|
|
|
964
1027
|
.magicfeedback-button-primary:hover {
|
|
965
|
-
background:
|
|
1028
|
+
background: var(--mf-primary-hover);
|
|
966
1029
|
}
|
|
967
1030
|
|
|
968
1031
|
.magicfeedback-button-primary:active {
|
|
969
|
-
background:
|
|
1032
|
+
background: var(--mf-primary-hover);
|
|
970
1033
|
}
|
|
971
1034
|
|
|
972
1035
|
/* Warning flash */
|
|
@@ -977,17 +1040,19 @@ textarea.error {
|
|
|
977
1040
|
/* Start message button */
|
|
978
1041
|
.magicfeedback-start-message-button {
|
|
979
1042
|
appearance: none;
|
|
980
|
-
border:
|
|
981
|
-
border-radius:
|
|
982
|
-
background:
|
|
1043
|
+
border: 2px solid var(--mf-primary);
|
|
1044
|
+
border-radius: var(--mf-radius-full);
|
|
1045
|
+
background: var(--mf-primary);
|
|
983
1046
|
color: #fff;
|
|
984
|
-
padding:
|
|
1047
|
+
padding: 0.8rem 1.4rem;
|
|
985
1048
|
font-size: 15px;
|
|
1049
|
+
font-weight: 800;
|
|
986
1050
|
cursor: pointer;
|
|
1051
|
+
box-shadow: var(--mf-shadow-md);
|
|
987
1052
|
}
|
|
988
1053
|
|
|
989
1054
|
.magicfeedback-start-message-button:hover {
|
|
990
|
-
background:
|
|
1055
|
+
background: var(--mf-primary-hover);
|
|
991
1056
|
}
|
|
992
1057
|
|
|
993
1058
|
/* ========================================
|
|
@@ -999,12 +1064,64 @@ textarea.error {
|
|
|
999
1064
|
--mf-space-xl: 1.5rem;
|
|
1000
1065
|
}
|
|
1001
1066
|
|
|
1067
|
+
.magicfeedback-container {
|
|
1068
|
+
padding: 12px;
|
|
1069
|
+
border-radius: var(--mf-radius-md);
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
.magicfeedback-form {
|
|
1073
|
+
padding: 14px;
|
|
1074
|
+
border-radius: var(--mf-radius-md);
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1077
|
+
.magicfeedback-div {
|
|
1078
|
+
padding: 12px;
|
|
1079
|
+
gap: var(--mf-space-lg)
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1002
1082
|
.magicfeedback-label {
|
|
1003
1083
|
font-size: var(--mf-font-size-base);
|
|
1004
1084
|
}
|
|
1005
1085
|
|
|
1086
|
+
input[type="date"],
|
|
1087
|
+
input[type="text"],
|
|
1088
|
+
input[type="number"],
|
|
1089
|
+
input[type="email"],
|
|
1090
|
+
input[type="password"],
|
|
1091
|
+
textarea,
|
|
1092
|
+
select {
|
|
1093
|
+
padding: 0.85rem 0.95rem;
|
|
1094
|
+
font-size: 1rem;
|
|
1095
|
+
min-height: 46px;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
/*
|
|
1099
|
+
.magicfeedback-radio-container,
|
|
1100
|
+
.magicfeedback-checkbox-container,
|
|
1101
|
+
.magicfeedback-boolean-container,
|
|
1102
|
+
.magicfeedback-consent-container {
|
|
1103
|
+
width: 100%;
|
|
1104
|
+
}
|
|
1105
|
+
*/
|
|
1106
|
+
|
|
1107
|
+
.magicfeedback-radio-container,
|
|
1108
|
+
.magicfeedback-checkbox-container {
|
|
1109
|
+
padding: 10px 12px;
|
|
1110
|
+
border-radius: var(--mf-radius-md);
|
|
1111
|
+
background: var(--mf-surface-alt);
|
|
1112
|
+
border: 1px solid var(--mf-border);
|
|
1113
|
+
gap: 10px;
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
.magicfeedback-rating-container,
|
|
1117
|
+
.magicfeedback-rating-number-container,
|
|
1118
|
+
.magicfeedback-rating-star-container {
|
|
1119
|
+
gap: 10px;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1006
1122
|
.magicfeedback-boolean-container {
|
|
1007
1123
|
flex-direction: column;
|
|
1124
|
+
gap: 10px;
|
|
1008
1125
|
}
|
|
1009
1126
|
|
|
1010
1127
|
.magicfeedback-rating-number-container {
|
|
@@ -1023,6 +1140,7 @@ textarea.error {
|
|
|
1023
1140
|
.magicfeedback-back {
|
|
1024
1141
|
width: 100%;
|
|
1025
1142
|
text-align: center;
|
|
1143
|
+
min-height: 48px;
|
|
1026
1144
|
}
|
|
1027
1145
|
}
|
|
1028
1146
|
|
|
@@ -1039,11 +1157,6 @@ textarea.error {
|
|
|
1039
1157
|
}
|
|
1040
1158
|
}
|
|
1041
1159
|
|
|
1042
|
-
/* Focus visible for keyboard navigation */
|
|
1043
|
-
*:focus-visible {
|
|
1044
|
-
outline: 2px solid var(--mf-primary);
|
|
1045
|
-
outline-offset: 2px;
|
|
1046
|
-
}
|
|
1047
1160
|
|
|
1048
1161
|
/* ========================================
|
|
1049
1162
|
UTILITY CLASSES
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { Page } from "./page";
|
|
2
|
+
import { PageNode } from "./pageNode";
|
|
3
|
+
import { NativeAnswer } from "./types";
|
|
4
|
+
export declare class PageGraph {
|
|
5
|
+
private nodes;
|
|
6
|
+
constructor(pages: Page[]);
|
|
7
|
+
/**
|
|
8
|
+
* Build the graph from the list of pages
|
|
9
|
+
* @param pages
|
|
10
|
+
* @private
|
|
11
|
+
* */
|
|
12
|
+
private buildGraph;
|
|
13
|
+
getNodeById(id: string): PageNode | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* Get the next page position of the graph given the current page and the answer
|
|
16
|
+
* @param node
|
|
17
|
+
*/
|
|
18
|
+
getNextEdgeByDefault(node: PageNode): string | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* Get the first page of the graph
|
|
21
|
+
* @returns first page
|
|
22
|
+
**/
|
|
23
|
+
getFirstPage(): PageNode | undefined;
|
|
24
|
+
/**
|
|
25
|
+
* Get the next page of the graph given the current page and the answer
|
|
26
|
+
* @param currentNode
|
|
27
|
+
* @param answer - answer to the question in the current page
|
|
28
|
+
* @returns page
|
|
29
|
+
**/
|
|
30
|
+
getNextPage(currentNode: PageNode, answer: NativeAnswer[]): PageNode | undefined;
|
|
31
|
+
/**
|
|
32
|
+
* Get the number deep (DFS) of this node
|
|
33
|
+
* @param id - node id
|
|
34
|
+
* @returns DFS number
|
|
35
|
+
*/
|
|
36
|
+
findDepth(id: string): number;
|
|
37
|
+
/**
|
|
38
|
+
* Get the max depth of the graph
|
|
39
|
+
* @param n - node
|
|
40
|
+
* @returns max depth
|
|
41
|
+
*/
|
|
42
|
+
findMaxDepth(n?: PageNode): number;
|
|
43
|
+
/**
|
|
44
|
+
* A function used by DFS
|
|
45
|
+
* @param v - node
|
|
46
|
+
* @param visited - set of visited nodes
|
|
47
|
+
* @param depth - current depth
|
|
48
|
+
*/
|
|
49
|
+
DFSUtil(v: PageNode, visited: Set<PageNode>, depth: number): number;
|
|
50
|
+
private parseMatrixAnswer;
|
|
51
|
+
private evaluateMatrixCondition;
|
|
52
|
+
}
|
|
@@ -2,6 +2,7 @@ export type Key = string;
|
|
|
2
2
|
export type InitOptions = {
|
|
3
3
|
env?: 'dev' | 'prod';
|
|
4
4
|
debug?: boolean;
|
|
5
|
+
dryRun?: boolean;
|
|
5
6
|
};
|
|
6
7
|
export type NativeFeedbackAnswer = {
|
|
7
8
|
id: string;
|
|
@@ -38,10 +39,98 @@ export declare enum FEEDBACKAPPANSWERTYPE {
|
|
|
38
39
|
export declare class QuestionType {
|
|
39
40
|
conf: any;
|
|
40
41
|
}
|
|
41
|
-
export type
|
|
42
|
+
export type QuestionAssetsBase = {
|
|
43
|
+
[key: string]: any;
|
|
44
|
+
placeholder?: string;
|
|
45
|
+
subtitle?: string | Record<string, string>;
|
|
46
|
+
subtitleStyle?: string | string[];
|
|
47
|
+
titleSize?: string;
|
|
48
|
+
titleAlign?: string;
|
|
49
|
+
titleStyle?: string | string[];
|
|
50
|
+
maxCharacters?: number;
|
|
51
|
+
randomPosition?: boolean;
|
|
52
|
+
direction?: "row" | "column" | string;
|
|
53
|
+
order?: "ltr" | "rtl" | string;
|
|
54
|
+
min?: number;
|
|
55
|
+
max?: number;
|
|
56
|
+
minPlaceholder?: string;
|
|
57
|
+
maxPlaceholder?: string;
|
|
58
|
+
extraOption?: boolean;
|
|
59
|
+
extraOptionText?: string;
|
|
60
|
+
extraOptionPlaceholder?: string;
|
|
61
|
+
};
|
|
62
|
+
export type QuestionAssetsByType = {
|
|
63
|
+
[FEEDBACKAPPANSWERTYPE.TEXT]: QuestionAssetsBase;
|
|
64
|
+
[FEEDBACKAPPANSWERTYPE.LONGTEXT]: QuestionAssetsBase & {
|
|
65
|
+
maxCharacters?: number;
|
|
66
|
+
};
|
|
67
|
+
[FEEDBACKAPPANSWERTYPE.NUMBER]: QuestionAssetsBase;
|
|
68
|
+
[FEEDBACKAPPANSWERTYPE.RADIO]: QuestionAssetsBase & {
|
|
69
|
+
exclusiveAnswers?: string[];
|
|
70
|
+
maxOptions?: number;
|
|
71
|
+
extraOption?: boolean;
|
|
72
|
+
extraOptionText?: string;
|
|
73
|
+
extraOptionPlaceholder?: string;
|
|
74
|
+
};
|
|
75
|
+
[FEEDBACKAPPANSWERTYPE.MULTIPLECHOICE]: QuestionAssetsByType[FEEDBACKAPPANSWERTYPE.RADIO];
|
|
76
|
+
[FEEDBACKAPPANSWERTYPE.SELECT]: QuestionAssetsBase;
|
|
77
|
+
[FEEDBACKAPPANSWERTYPE.DATE]: QuestionAssetsBase;
|
|
78
|
+
[FEEDBACKAPPANSWERTYPE.EMAIL]: QuestionAssetsBase;
|
|
79
|
+
[FEEDBACKAPPANSWERTYPE.PASSWORD]: QuestionAssetsBase;
|
|
80
|
+
[FEEDBACKAPPANSWERTYPE.BOOLEAN]: QuestionAssetsBase & {
|
|
81
|
+
addIcon?: boolean;
|
|
82
|
+
};
|
|
83
|
+
[FEEDBACKAPPANSWERTYPE.CONSENT]: QuestionAssetsBase;
|
|
84
|
+
[FEEDBACKAPPANSWERTYPE.RATING_EMOJI]: QuestionAssetsBase & {
|
|
85
|
+
min?: number;
|
|
86
|
+
max?: number;
|
|
87
|
+
minPlaceholder?: string;
|
|
88
|
+
maxPlaceholder?: string;
|
|
89
|
+
extraOption?: boolean;
|
|
90
|
+
extraOptionText?: string;
|
|
91
|
+
};
|
|
92
|
+
[FEEDBACKAPPANSWERTYPE.RATING_NUMBER]: QuestionAssetsBase & {
|
|
93
|
+
min?: number;
|
|
94
|
+
max?: number;
|
|
95
|
+
minPlaceholder?: string;
|
|
96
|
+
maxPlaceholder?: string;
|
|
97
|
+
numberPlaceholders?: Record<number, string>;
|
|
98
|
+
extraOption?: boolean;
|
|
99
|
+
extraOptionText?: string;
|
|
100
|
+
ariaLabel?: string;
|
|
101
|
+
};
|
|
102
|
+
[FEEDBACKAPPANSWERTYPE.RATING_STAR]: QuestionAssetsBase & {
|
|
103
|
+
minPlaceholder?: string;
|
|
104
|
+
maxPlaceholder?: string;
|
|
105
|
+
};
|
|
106
|
+
[FEEDBACKAPPANSWERTYPE.MULTIPLECHOISE_IMAGE]: QuestionAssetsBase & {
|
|
107
|
+
addTitle?: boolean;
|
|
108
|
+
multiOption?: boolean;
|
|
109
|
+
extraOption?: boolean;
|
|
110
|
+
extraOptionValue?: any[];
|
|
111
|
+
};
|
|
112
|
+
[FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX]: QuestionAssetsBase & {
|
|
113
|
+
options?: string[];
|
|
114
|
+
exclusiveAnswers?: string[];
|
|
115
|
+
};
|
|
116
|
+
[FEEDBACKAPPANSWERTYPE.PRIORITY_LIST]: QuestionAssetsBase & {
|
|
117
|
+
limitPriority?: boolean;
|
|
118
|
+
maxPriority?: number;
|
|
119
|
+
};
|
|
120
|
+
[FEEDBACKAPPANSWERTYPE.POINT_SYSTEM]: QuestionAssetsBase;
|
|
121
|
+
[FEEDBACKAPPANSWERTYPE.INFO_PAGE]: QuestionAssetsBase;
|
|
122
|
+
[FEEDBACKAPPANSWERTYPE.UPLOAD_FILE]: QuestionAssetsBase & {
|
|
123
|
+
multiple?: boolean;
|
|
124
|
+
maxFiles?: number;
|
|
125
|
+
};
|
|
126
|
+
[FEEDBACKAPPANSWERTYPE.UPLOAD_IMAGE]: QuestionAssetsByType[FEEDBACKAPPANSWERTYPE.UPLOAD_FILE];
|
|
127
|
+
[FEEDBACKAPPANSWERTYPE.CONTACT]: QuestionAssetsBase;
|
|
128
|
+
};
|
|
129
|
+
export type QuestionAssetsFor<T extends FEEDBACKAPPANSWERTYPE | string> = T extends FEEDBACKAPPANSWERTYPE ? QuestionAssetsByType[T] & QuestionAssetsBase : QuestionAssetsBase;
|
|
130
|
+
export type NativeQuestion<T extends FEEDBACKAPPANSWERTYPE | string = FEEDBACKAPPANSWERTYPE | string> = {
|
|
42
131
|
id: string;
|
|
43
132
|
title: string;
|
|
44
|
-
type:
|
|
133
|
+
type: T;
|
|
45
134
|
questionType: QuestionType;
|
|
46
135
|
ref: string;
|
|
47
136
|
require: boolean;
|
|
@@ -51,7 +140,7 @@ export type NativeQuestion = {
|
|
|
51
140
|
appId?: string;
|
|
52
141
|
followup: boolean;
|
|
53
142
|
position: number;
|
|
54
|
-
assets:
|
|
143
|
+
assets: QuestionAssetsFor<T>;
|
|
55
144
|
refMetric: string;
|
|
56
145
|
integrationId: string;
|
|
57
146
|
integrationPageId: string;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare function createRatingPlaceholder(min: number, max: number, minPlaceholder?: string, maxPlaceholder?: string, extraOption?: boolean, mobile?: boolean, order?: string, direction?: string): HTMLDivElement;
|
|
2
|
+
export declare function createStarRating(ref: string, minPlaceholder?: string, maxPlaceholder?: string, send?: () => void, urlParamValue?: string | null): HTMLDivElement;
|
|
3
|
+
export declare function createRatingNumberElement(ref: string, assets: any, order: string, direction: string, isPhone: boolean, elementTypeClass: string, send?: () => void, urlParamValue?: string | null): HTMLElement;
|