@magicfeedback/native 2.1.7-alpha.9 → 2.2.0-alpha.1
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/magicfeedback-sdk.browser.js +1 -1
- package/dist/magicfeedback-sdk.node.js +1 -1
- package/dist/styles/magicfeedback-default.css +160 -81
- package/dist/types/src/models/pageGraphs.d.ts +52 -0
- package/dist/types/src/models/types.d.ts +88 -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/dist/types/src/services/placeholder.d.ts +2 -2
- 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 {
|
|
@@ -683,7 +705,7 @@ textarea.error {
|
|
|
683
705
|
background-color: var(--mf-bg-primary);
|
|
684
706
|
border: 1.5px solid var(--mf-border);
|
|
685
707
|
border-radius: var(--mf-radius-md);
|
|
686
|
-
min-height:
|
|
708
|
+
min-height: 45px;
|
|
687
709
|
}
|
|
688
710
|
|
|
689
711
|
.magicfeedback-point-system-item label {
|
|
@@ -724,7 +746,8 @@ textarea.error {
|
|
|
724
746
|
======================================== */
|
|
725
747
|
.magicfeedback-consent-container {
|
|
726
748
|
display: flex;
|
|
727
|
-
|
|
749
|
+
flex-direction: row;
|
|
750
|
+
align-items: center;
|
|
728
751
|
gap: var(--mf-space-sm);
|
|
729
752
|
padding: var(--mf-space-md);
|
|
730
753
|
background-color: var(--mf-bg-secondary);
|
|
@@ -745,6 +768,7 @@ textarea.error {
|
|
|
745
768
|
color: var(--mf-text-secondary);
|
|
746
769
|
line-height: var(--mf-line-height);
|
|
747
770
|
cursor: pointer;
|
|
771
|
+
margin-bottom: 0;
|
|
748
772
|
}
|
|
749
773
|
|
|
750
774
|
/* ========================================
|
|
@@ -761,22 +785,22 @@ textarea.error {
|
|
|
761
785
|
}
|
|
762
786
|
|
|
763
787
|
.magicfeedback-submit {
|
|
764
|
-
padding:
|
|
788
|
+
padding: 0.8rem 1.6rem;
|
|
765
789
|
font-size: var(--mf-font-size-base);
|
|
766
|
-
font-weight:
|
|
767
|
-
color:
|
|
790
|
+
font-weight: 800;
|
|
791
|
+
color: #FFFFFF;
|
|
768
792
|
background-color: var(--mf-primary);
|
|
769
|
-
border:
|
|
770
|
-
border-radius: var(--mf-radius-
|
|
793
|
+
border: 2px solid var(--mf-primary);
|
|
794
|
+
border-radius: var(--mf-radius-full);
|
|
771
795
|
cursor: pointer;
|
|
772
796
|
transition: var(--mf-transition-fast);
|
|
773
|
-
box-shadow: var(--mf-shadow-
|
|
797
|
+
box-shadow: var(--mf-shadow-md);
|
|
774
798
|
}
|
|
775
799
|
|
|
776
800
|
.magicfeedback-submit:hover {
|
|
777
801
|
background-color: var(--mf-primary-hover);
|
|
778
|
-
box-shadow: var(--mf-shadow-
|
|
779
|
-
transform: translateY(-
|
|
802
|
+
box-shadow: var(--mf-shadow-lg);
|
|
803
|
+
transform: translateY(-2px);
|
|
780
804
|
}
|
|
781
805
|
|
|
782
806
|
.magicfeedback-submit:active {
|
|
@@ -791,18 +815,20 @@ textarea.error {
|
|
|
791
815
|
}
|
|
792
816
|
|
|
793
817
|
.magicfeedback-back {
|
|
794
|
-
padding:
|
|
818
|
+
padding: 0.65rem 1rem;
|
|
795
819
|
font-size: var(--mf-font-size-base);
|
|
796
|
-
font-weight:
|
|
797
|
-
color: var(--mf-
|
|
798
|
-
background-color:
|
|
799
|
-
border:
|
|
820
|
+
font-weight: 700;
|
|
821
|
+
color: var(--mf-primary);
|
|
822
|
+
background-color: var(--mf-bg-secondary);
|
|
823
|
+
border: 2px solid var(--mf-border);
|
|
824
|
+
border-radius: var(--mf-radius-full);
|
|
800
825
|
cursor: pointer;
|
|
801
826
|
transition: var(--mf-transition-fast);
|
|
802
827
|
}
|
|
803
828
|
|
|
804
829
|
.magicfeedback-back:hover {
|
|
805
|
-
color: var(--mf-primary);
|
|
830
|
+
border-color: var(--mf-primary);
|
|
831
|
+
background-color: var(--mf-bg-hover);
|
|
806
832
|
}
|
|
807
833
|
|
|
808
834
|
/* ========================================
|
|
@@ -850,7 +876,7 @@ textarea.error {
|
|
|
850
876
|
left: 0;
|
|
851
877
|
width: 100vw;
|
|
852
878
|
height: 100vh;
|
|
853
|
-
background: rgba(0,
|
|
879
|
+
background: rgba(0,0,0,0.4);
|
|
854
880
|
display: none; /* toggled to flex when open */
|
|
855
881
|
align-items: center;
|
|
856
882
|
justify-content: center;
|
|
@@ -861,7 +887,7 @@ textarea.error {
|
|
|
861
887
|
.magicfeedback-modal {
|
|
862
888
|
background: #fff;
|
|
863
889
|
border-radius: 8px;
|
|
864
|
-
box-shadow: 0 8px 24px rgba(0,
|
|
890
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
|
865
891
|
max-width: 520px;
|
|
866
892
|
width: 90%;
|
|
867
893
|
max-height: 80vh;
|
|
@@ -902,7 +928,6 @@ textarea.error {
|
|
|
902
928
|
/* Priority list header */
|
|
903
929
|
.magicfeedback-priority-list-header {
|
|
904
930
|
display: flex;
|
|
905
|
-
flex-direction: row-reverse;
|
|
906
931
|
align-items: center;
|
|
907
932
|
justify-content: space-between;
|
|
908
933
|
gap: 12px;
|
|
@@ -938,35 +963,39 @@ textarea.error {
|
|
|
938
963
|
/* Buttons */
|
|
939
964
|
.magicfeedback-button {
|
|
940
965
|
appearance: none;
|
|
941
|
-
border:
|
|
942
|
-
border-radius:
|
|
943
|
-
background:
|
|
944
|
-
color:
|
|
945
|
-
padding:
|
|
966
|
+
border: 2px solid var(--mf-border);
|
|
967
|
+
border-radius: var(--mf-radius-full);
|
|
968
|
+
background: var(--mf-bg-secondary);
|
|
969
|
+
color: var(--mf-text-primary);
|
|
970
|
+
padding: 0.6rem 1rem;
|
|
946
971
|
font-size: 14px;
|
|
972
|
+
font-weight: 700;
|
|
947
973
|
cursor: pointer;
|
|
974
|
+
box-shadow: var(--mf-shadow-sm);
|
|
948
975
|
}
|
|
949
976
|
|
|
950
977
|
.magicfeedback-button:hover {
|
|
951
|
-
background:
|
|
978
|
+
background: var(--mf-bg-hover);
|
|
979
|
+
border-color: var(--mf-primary);
|
|
952
980
|
}
|
|
953
981
|
|
|
954
982
|
.magicfeedback-button:active {
|
|
955
|
-
|
|
983
|
+
transform: translateY(1px);
|
|
956
984
|
}
|
|
957
985
|
|
|
958
986
|
.magicfeedback-button-primary {
|
|
959
|
-
border-color:
|
|
960
|
-
background:
|
|
987
|
+
border-color: var(--mf-primary);
|
|
988
|
+
background: var(--mf-primary);
|
|
961
989
|
color: #fff;
|
|
990
|
+
box-shadow: var(--mf-shadow-md);
|
|
962
991
|
}
|
|
963
992
|
|
|
964
993
|
.magicfeedback-button-primary:hover {
|
|
965
|
-
background:
|
|
994
|
+
background: var(--mf-primary-hover);
|
|
966
995
|
}
|
|
967
996
|
|
|
968
997
|
.magicfeedback-button-primary:active {
|
|
969
|
-
background:
|
|
998
|
+
background: var(--mf-primary-hover);
|
|
970
999
|
}
|
|
971
1000
|
|
|
972
1001
|
/* Warning flash */
|
|
@@ -977,17 +1006,19 @@ textarea.error {
|
|
|
977
1006
|
/* Start message button */
|
|
978
1007
|
.magicfeedback-start-message-button {
|
|
979
1008
|
appearance: none;
|
|
980
|
-
border:
|
|
981
|
-
border-radius:
|
|
982
|
-
background:
|
|
1009
|
+
border: 2px solid var(--mf-primary);
|
|
1010
|
+
border-radius: var(--mf-radius-full);
|
|
1011
|
+
background: var(--mf-primary);
|
|
983
1012
|
color: #fff;
|
|
984
|
-
padding:
|
|
1013
|
+
padding: 0.8rem 1.4rem;
|
|
985
1014
|
font-size: 15px;
|
|
1015
|
+
font-weight: 800;
|
|
986
1016
|
cursor: pointer;
|
|
1017
|
+
box-shadow: var(--mf-shadow-md);
|
|
987
1018
|
}
|
|
988
1019
|
|
|
989
1020
|
.magicfeedback-start-message-button:hover {
|
|
990
|
-
background:
|
|
1021
|
+
background: var(--mf-primary-hover);
|
|
991
1022
|
}
|
|
992
1023
|
|
|
993
1024
|
/* ========================================
|
|
@@ -999,12 +1030,64 @@ textarea.error {
|
|
|
999
1030
|
--mf-space-xl: 1.5rem;
|
|
1000
1031
|
}
|
|
1001
1032
|
|
|
1033
|
+
.magicfeedback-container {
|
|
1034
|
+
padding: 12px;
|
|
1035
|
+
border-radius: var(--mf-radius-md);
|
|
1036
|
+
}
|
|
1037
|
+
|
|
1038
|
+
.magicfeedback-form {
|
|
1039
|
+
padding: 14px;
|
|
1040
|
+
border-radius: var(--mf-radius-md);
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
.magicfeedback-div {
|
|
1044
|
+
padding: 12px;
|
|
1045
|
+
gap: var(--mf-space-lg)
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1002
1048
|
.magicfeedback-label {
|
|
1003
1049
|
font-size: var(--mf-font-size-base);
|
|
1004
1050
|
}
|
|
1005
1051
|
|
|
1052
|
+
input[type="date"],
|
|
1053
|
+
input[type="text"],
|
|
1054
|
+
input[type="number"],
|
|
1055
|
+
input[type="email"],
|
|
1056
|
+
input[type="password"],
|
|
1057
|
+
textarea,
|
|
1058
|
+
select {
|
|
1059
|
+
padding: 0.85rem 0.95rem;
|
|
1060
|
+
font-size: 1rem;
|
|
1061
|
+
min-height: 46px;
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
/*
|
|
1065
|
+
.magicfeedback-radio-container,
|
|
1066
|
+
.magicfeedback-checkbox-container,
|
|
1067
|
+
.magicfeedback-boolean-container,
|
|
1068
|
+
.magicfeedback-consent-container {
|
|
1069
|
+
width: 100%;
|
|
1070
|
+
}
|
|
1071
|
+
*/
|
|
1072
|
+
|
|
1073
|
+
.magicfeedback-radio-container,
|
|
1074
|
+
.magicfeedback-checkbox-container {
|
|
1075
|
+
padding: 10px 12px;
|
|
1076
|
+
border-radius: var(--mf-radius-md);
|
|
1077
|
+
background: var(--mf-surface-alt);
|
|
1078
|
+
border: 1px solid var(--mf-border);
|
|
1079
|
+
gap: 10px;
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
.magicfeedback-rating-container,
|
|
1083
|
+
.magicfeedback-rating-number-container,
|
|
1084
|
+
.magicfeedback-rating-star-container {
|
|
1085
|
+
gap: 10px;
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1006
1088
|
.magicfeedback-boolean-container {
|
|
1007
1089
|
flex-direction: column;
|
|
1090
|
+
gap: 10px;
|
|
1008
1091
|
}
|
|
1009
1092
|
|
|
1010
1093
|
.magicfeedback-rating-number-container {
|
|
@@ -1023,6 +1106,7 @@ textarea.error {
|
|
|
1023
1106
|
.magicfeedback-back {
|
|
1024
1107
|
width: 100%;
|
|
1025
1108
|
text-align: center;
|
|
1109
|
+
min-height: 48px;
|
|
1026
1110
|
}
|
|
1027
1111
|
}
|
|
1028
1112
|
|
|
@@ -1039,11 +1123,6 @@ textarea.error {
|
|
|
1039
1123
|
}
|
|
1040
1124
|
}
|
|
1041
1125
|
|
|
1042
|
-
/* Focus visible for keyboard navigation */
|
|
1043
|
-
*:focus-visible {
|
|
1044
|
-
outline: 2px solid var(--mf-primary);
|
|
1045
|
-
outline-offset: 2px;
|
|
1046
|
-
}
|
|
1047
1126
|
|
|
1048
1127
|
/* ========================================
|
|
1049
1128
|
UTILITY CLASSES
|
|
@@ -1076,4 +1155,4 @@ textarea.error {
|
|
|
1076
1155
|
.magicfeedback-modal-close:focus {
|
|
1077
1156
|
color: #000;
|
|
1078
1157
|
outline: none;
|
|
1079
|
-
}
|
|
1158
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -38,10 +38,95 @@ export declare enum FEEDBACKAPPANSWERTYPE {
|
|
|
38
38
|
export declare class QuestionType {
|
|
39
39
|
conf: any;
|
|
40
40
|
}
|
|
41
|
-
export type
|
|
41
|
+
export type QuestionAssetsBase = {
|
|
42
|
+
[key: string]: any;
|
|
43
|
+
placeholder?: string;
|
|
44
|
+
subtitle?: string | Record<string, string>;
|
|
45
|
+
subtitleStyle?: string | string[];
|
|
46
|
+
maxCharacters?: number;
|
|
47
|
+
randomPosition?: boolean;
|
|
48
|
+
direction?: "row" | "column" | string;
|
|
49
|
+
order?: "ltr" | "rtl" | string;
|
|
50
|
+
min?: number;
|
|
51
|
+
max?: number;
|
|
52
|
+
minPlaceholder?: string;
|
|
53
|
+
maxPlaceholder?: string;
|
|
54
|
+
extraOption?: boolean;
|
|
55
|
+
extraOptionText?: string;
|
|
56
|
+
extraOptionPlaceholder?: string;
|
|
57
|
+
};
|
|
58
|
+
export type QuestionAssetsByType = {
|
|
59
|
+
[FEEDBACKAPPANSWERTYPE.TEXT]: QuestionAssetsBase;
|
|
60
|
+
[FEEDBACKAPPANSWERTYPE.LONGTEXT]: QuestionAssetsBase & {
|
|
61
|
+
maxCharacters?: number;
|
|
62
|
+
};
|
|
63
|
+
[FEEDBACKAPPANSWERTYPE.NUMBER]: QuestionAssetsBase;
|
|
64
|
+
[FEEDBACKAPPANSWERTYPE.RADIO]: QuestionAssetsBase & {
|
|
65
|
+
exclusiveAnswers?: string[];
|
|
66
|
+
maxOptions?: number;
|
|
67
|
+
extraOption?: boolean;
|
|
68
|
+
extraOptionText?: string;
|
|
69
|
+
extraOptionPlaceholder?: string;
|
|
70
|
+
};
|
|
71
|
+
[FEEDBACKAPPANSWERTYPE.MULTIPLECHOICE]: QuestionAssetsByType[FEEDBACKAPPANSWERTYPE.RADIO];
|
|
72
|
+
[FEEDBACKAPPANSWERTYPE.SELECT]: QuestionAssetsBase;
|
|
73
|
+
[FEEDBACKAPPANSWERTYPE.DATE]: QuestionAssetsBase;
|
|
74
|
+
[FEEDBACKAPPANSWERTYPE.EMAIL]: QuestionAssetsBase;
|
|
75
|
+
[FEEDBACKAPPANSWERTYPE.PASSWORD]: QuestionAssetsBase;
|
|
76
|
+
[FEEDBACKAPPANSWERTYPE.BOOLEAN]: QuestionAssetsBase & {
|
|
77
|
+
addIcon?: boolean;
|
|
78
|
+
};
|
|
79
|
+
[FEEDBACKAPPANSWERTYPE.CONSENT]: QuestionAssetsBase;
|
|
80
|
+
[FEEDBACKAPPANSWERTYPE.RATING_EMOJI]: QuestionAssetsBase & {
|
|
81
|
+
min?: number;
|
|
82
|
+
max?: number;
|
|
83
|
+
minPlaceholder?: string;
|
|
84
|
+
maxPlaceholder?: string;
|
|
85
|
+
extraOption?: boolean;
|
|
86
|
+
extraOptionText?: string;
|
|
87
|
+
};
|
|
88
|
+
[FEEDBACKAPPANSWERTYPE.RATING_NUMBER]: QuestionAssetsBase & {
|
|
89
|
+
min?: number;
|
|
90
|
+
max?: number;
|
|
91
|
+
minPlaceholder?: string;
|
|
92
|
+
maxPlaceholder?: string;
|
|
93
|
+
numberPlaceholders?: Record<number, string>;
|
|
94
|
+
extraOption?: boolean;
|
|
95
|
+
extraOptionText?: string;
|
|
96
|
+
ariaLabel?: string;
|
|
97
|
+
};
|
|
98
|
+
[FEEDBACKAPPANSWERTYPE.RATING_STAR]: QuestionAssetsBase & {
|
|
99
|
+
minPlaceholder?: string;
|
|
100
|
+
maxPlaceholder?: string;
|
|
101
|
+
};
|
|
102
|
+
[FEEDBACKAPPANSWERTYPE.MULTIPLECHOISE_IMAGE]: QuestionAssetsBase & {
|
|
103
|
+
addTitle?: boolean;
|
|
104
|
+
multiOption?: boolean;
|
|
105
|
+
extraOption?: boolean;
|
|
106
|
+
extraOptionValue?: any[];
|
|
107
|
+
};
|
|
108
|
+
[FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX]: QuestionAssetsBase & {
|
|
109
|
+
options?: string[];
|
|
110
|
+
exclusiveAnswers?: string[];
|
|
111
|
+
};
|
|
112
|
+
[FEEDBACKAPPANSWERTYPE.PRIORITY_LIST]: QuestionAssetsBase & {
|
|
113
|
+
limitPriority?: boolean;
|
|
114
|
+
maxPriority?: number;
|
|
115
|
+
};
|
|
116
|
+
[FEEDBACKAPPANSWERTYPE.POINT_SYSTEM]: QuestionAssetsBase;
|
|
117
|
+
[FEEDBACKAPPANSWERTYPE.INFO_PAGE]: QuestionAssetsBase;
|
|
118
|
+
[FEEDBACKAPPANSWERTYPE.UPLOAD_FILE]: QuestionAssetsBase & {
|
|
119
|
+
multiple?: boolean;
|
|
120
|
+
maxFiles?: number;
|
|
121
|
+
};
|
|
122
|
+
[FEEDBACKAPPANSWERTYPE.UPLOAD_IMAGE]: QuestionAssetsByType[FEEDBACKAPPANSWERTYPE.UPLOAD_FILE];
|
|
123
|
+
[FEEDBACKAPPANSWERTYPE.CONTACT]: QuestionAssetsBase;
|
|
124
|
+
};
|
|
125
|
+
export type QuestionAssetsFor<T extends FEEDBACKAPPANSWERTYPE | string> = T extends FEEDBACKAPPANSWERTYPE ? QuestionAssetsByType[T] & QuestionAssetsBase : QuestionAssetsBase;
|
|
126
|
+
export type NativeQuestion<T extends FEEDBACKAPPANSWERTYPE | string = FEEDBACKAPPANSWERTYPE | string> = {
|
|
42
127
|
id: string;
|
|
43
128
|
title: string;
|
|
44
|
-
type:
|
|
129
|
+
type: T;
|
|
45
130
|
questionType: QuestionType;
|
|
46
131
|
ref: string;
|
|
47
132
|
require: boolean;
|
|
@@ -51,7 +136,7 @@ export type NativeQuestion = {
|
|
|
51
136
|
appId?: string;
|
|
52
137
|
followup: boolean;
|
|
53
138
|
position: number;
|
|
54
|
-
assets:
|
|
139
|
+
assets: QuestionAssetsFor<T>;
|
|
55
140
|
refMetric: string;
|
|
56
141
|
integrationId: string;
|
|
57
142
|
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;
|