@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.
Files changed (31) hide show
  1. package/dist/magicfeedback-sdk.browser.js +1 -1
  2. package/dist/magicfeedback-sdk.node.js +1 -1
  3. package/dist/styles/magicfeedback-default.css +160 -81
  4. package/dist/types/src/models/pageGraphs.d.ts +52 -0
  5. package/dist/types/src/models/types.d.ts +88 -3
  6. package/dist/types/src/render/helpers.d.ts +3 -0
  7. package/dist/types/src/render/ratingHelpers.d.ts +3 -0
  8. package/dist/types/src/render/registry.d.ts +3 -0
  9. package/dist/types/src/render/renderBoolean.d.ts +2 -0
  10. package/dist/types/src/render/renderChoice.d.ts +2 -0
  11. package/dist/types/src/render/renderConsent.d.ts +2 -0
  12. package/dist/types/src/render/renderDate.d.ts +2 -0
  13. package/dist/types/src/render/renderEmail.d.ts +2 -0
  14. package/dist/types/src/render/renderInfoPage.d.ts +2 -0
  15. package/dist/types/src/render/renderLongText.d.ts +2 -0
  16. package/dist/types/src/render/renderMatrix.d.ts +2 -0
  17. package/dist/types/src/render/renderMultipleChoiceImage.d.ts +2 -0
  18. package/dist/types/src/render/renderNumber.d.ts +2 -0
  19. package/dist/types/src/render/renderPassword.d.ts +2 -0
  20. package/dist/types/src/render/renderPointSystem.d.ts +2 -0
  21. package/dist/types/src/render/renderPriorityList.d.ts +2 -0
  22. package/dist/types/src/render/renderRatingEmoji.d.ts +2 -0
  23. package/dist/types/src/render/renderRatingNumber.d.ts +2 -0
  24. package/dist/types/src/render/renderRatingStar.d.ts +2 -0
  25. package/dist/types/src/render/renderSelect.d.ts +2 -0
  26. package/dist/types/src/render/renderText.d.ts +2 -0
  27. package/dist/types/src/render/renderUploadFile.d.ts +2 -0
  28. package/dist/types/src/render/renderUploadImage.d.ts +2 -0
  29. package/dist/types/src/render/types.d.ts +20 -0
  30. package/dist/types/src/services/placeholder.d.ts +2 -2
  31. 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 - Neutral Palette */
11
- --mf-primary: #2563eb;
12
- --mf-primary-hover: #1d4ed8;
13
- --mf-primary-light: #dbeafe;
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-text-primary: #0f172a;
16
- --mf-text-secondary: #64748b;
17
- --mf-text-muted: #94a3b8;
21
+ --mf-bg-primary: #F8FAFC;
22
+ --mf-bg-secondary: #FFFFFF;
23
+ --mf-bg-hover: #EEF2F6;
18
24
 
19
- --mf-bg-primary: #ffffff;
20
- --mf-bg-secondary: #f8fafc;
21
- --mf-bg-hover: #f1f5f9;
25
+ --mf-border: #E2E8F0;
26
+ --mf-border-focus: #1E293B;
22
27
 
23
- --mf-border: #e2e8f0;
24
- --mf-border-focus: #2563eb;
28
+ --mf-success: #16A34A;
29
+ --mf-error: #EF4444;
30
+ --mf-warning: #F59E0B;
25
31
 
26
- --mf-success: #10b981;
27
- --mf-error: #ef4444;
28
- --mf-warning: #f59e0b;
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.375rem;
39
- --mf-radius-md: 0.5rem;
40
- --mf-radius-lg: 0.75rem;
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(0, 0, 0, 0.05);
45
- --mf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
46
- --mf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
47
- --mf-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.1);
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: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
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-bg-secondary);
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
- width: 100%;
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: 500;
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
- width: auto;
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-bg-primary);
228
- border: 1.5px solid var(--mf-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: 60px;
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
- align-items: flex-start;
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: var(--mf-space-sm) var(--mf-space-xl);
788
+ padding: 0.8rem 1.6rem;
765
789
  font-size: var(--mf-font-size-base);
766
- font-weight: 500;
767
- color: white;
790
+ font-weight: 800;
791
+ color: #FFFFFF;
768
792
  background-color: var(--mf-primary);
769
- border: none;
770
- border-radius: var(--mf-radius-md);
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-sm);
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-md);
779
- transform: translateY(-1px);
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: var(--mf-space-sm) var(--mf-space-md);
818
+ padding: 0.65rem 1rem;
795
819
  font-size: var(--mf-font-size-base);
796
- font-weight: 500;
797
- color: var(--mf-text-secondary);
798
- background-color: transparent;
799
- border: none;
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, 0, 0, 0.4);
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, 0, 0, 0.2);
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: 1px solid #ccc;
942
- border-radius: 6px;
943
- background: #f7f7f7;
944
- color: #222;
945
- padding: 8px 12px;
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: #efefef;
978
+ background: var(--mf-bg-hover);
979
+ border-color: var(--mf-primary);
952
980
  }
953
981
 
954
982
  .magicfeedback-button:active {
955
- background: #e8e8e8;
983
+ transform: translateY(1px);
956
984
  }
957
985
 
958
986
  .magicfeedback-button-primary {
959
- border-color: #2e6bf7;
960
- background: #2e6bf7;
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: #255bd6;
994
+ background: var(--mf-primary-hover);
966
995
  }
967
996
 
968
997
  .magicfeedback-button-primary:active {
969
- background: #1f4fb5;
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: 1px solid #2e6bf7;
981
- border-radius: 6px;
982
- background: #2e6bf7;
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: 10px 16px;
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: #255bd6;
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 NativeQuestion = {
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: FEEDBACKAPPANSWERTYPE | string;
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: any;
139
+ assets: QuestionAssetsFor<T>;
55
140
  refMetric: string;
56
141
  integrationId: string;
57
142
  integrationPageId: string;
@@ -0,0 +1,3 @@
1
+ export declare function parseTitle(title: string | Record<string, string> | undefined, lang: string): string;
2
+ export declare function getBooleanOptions(lang: string): string[];
3
+ export declare function getUrlParam(key: string): string | null;
@@ -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;
@@ -0,0 +1,3 @@
1
+ import { FEEDBACKAPPANSWERTYPE } from "../models/types";
2
+ import { QuestionRenderer } from "./types";
3
+ export declare function getQuestionRenderer(type: FEEDBACKAPPANSWERTYPE | string): QuestionRenderer | undefined;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderBoolean: QuestionRenderer;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderChoice: QuestionRenderer;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderConsent: QuestionRenderer;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderDate: QuestionRenderer;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderEmail: QuestionRenderer;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderInfoPage: QuestionRenderer;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderLongText: QuestionRenderer;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderMatrix: QuestionRenderer;
@@ -0,0 +1,2 @@
1
+ import { QuestionRenderer } from "./types";
2
+ export declare const renderMultipleChoiceImage: QuestionRenderer;