survey-react 1.9.95 → 1.9.97

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 (14) hide show
  1. package/defaultV2.css +249 -166
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +123 -74
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +49 -28
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +191 -94
  12. package/survey.react.js +512 -192
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/survey.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.95
2
+ * surveyjs - Survey JavaScript library v1.9.97
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -20,7 +20,7 @@
20
20
  display: inline-block;
21
21
  vertical-align: top;
22
22
  margin-top: 22px;
23
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
23
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
24
24
  width: 16px;
25
25
  height: 16px;
26
26
  cursor: pointer;
@@ -31,7 +31,7 @@
31
31
  display: inline-block;
32
32
  vertical-align: top;
33
33
  margin-top: 22px;
34
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
34
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
35
35
  width: 16px;
36
36
  height: 16px;
37
37
  cursor: pointer;
@@ -59,7 +59,7 @@
59
59
 
60
60
  .sv_progress-buttons__list li {
61
61
  width: 138px;
62
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
62
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
63
63
  font-family: var(--font-family, var(--font-family));
64
64
  position: relative;
65
65
  text-align: center;
@@ -113,12 +113,12 @@
113
113
  }
114
114
 
115
115
  .sv_progress-toc {
116
- padding: 8px;
116
+ padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
117
117
  max-width: 336px;
118
118
  height: 100%;
119
119
  background: #FFFFFF;
120
120
  box-sizing: border-box;
121
- min-width: 256px;
121
+ min-width: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
122
122
  }
123
123
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
124
124
  background: rgba(25, 179, 148, 0.1);
@@ -129,11 +129,11 @@
129
129
  white-space: break-spaces;
130
130
  }
131
131
  .sv_progress-toc .sv-list__item-body {
132
- padding-inline-start: 16px;
133
- padding-inline-end: 16px;
132
+ padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
133
+ padding-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
134
134
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
135
- padding-top: 12px;
136
- padding-bottom: 12px;
135
+ padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
136
+ padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
137
137
  }
138
138
 
139
139
  .sv_progress-toc--left {
@@ -144,6 +144,25 @@
144
144
  border-left: 1px solid #D6D6D6;
145
145
  }
146
146
 
147
+ .sv_progress-toc--mobile {
148
+ position: fixed;
149
+ top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
150
+ right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
151
+ width: auto;
152
+ min-width: auto;
153
+ height: auto;
154
+ background-color: transparent;
155
+ z-index: 15;
156
+ border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
157
+ }
158
+ .sv_progress-toc--mobile > div {
159
+ width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
160
+ height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
161
+ }
162
+ .sv_progress-toc--mobile:hover {
163
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
164
+ }
165
+
147
166
  .sv_window {
148
167
  position: fixed;
149
168
  bottom: 3px;
@@ -151,7 +170,7 @@
151
170
  background-color: cadetblue;
152
171
  padding: 1px;
153
172
  font-family: var(--font-family, var(--font-family));
154
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
173
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
155
174
  font-style: normal;
156
175
  font-weight: 400;
157
176
  line-height: 1.42857143;
@@ -180,7 +199,7 @@
180
199
  .sv_window_title {
181
200
  padding: 8px 14px;
182
201
  margin: 0;
183
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
202
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
184
203
  background-color: #f7f7f7;
185
204
  border-bottom: 1px solid #ebebeb;
186
205
  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
@@ -197,7 +216,7 @@
197
216
  .sv_window_title a:link,
198
217
  .sv_window_title a:visited {
199
218
  text-decoration: none;
200
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
219
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
201
220
  font-style: normal;
202
221
  color: black;
203
222
  }
@@ -218,8 +237,8 @@
218
237
 
219
238
  .sv-brand-info__text {
220
239
  font-weight: 600;
221
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
222
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
240
+ font-size: calc(1 * var(--sjs-font-size, 16px));
241
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
223
242
  color: #161616;
224
243
  }
225
244
 
@@ -232,8 +251,8 @@
232
251
 
233
252
  .sv-brand-info__terms {
234
253
  font-weight: 400;
235
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
236
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
254
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
255
+ line-height: calc(1 * var(--sjs-font-size, 16px));
237
256
  }
238
257
  .sv-brand-info__terms a {
239
258
  color: #909090;
@@ -250,9 +269,9 @@
250
269
  z-index: 10000;
251
270
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
252
271
  font-family: var(--font-family, var(--font-family));
253
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
272
+ font-size: calc(1 * var(--sjs-font-size, 16px));
254
273
  padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
255
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
274
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
256
275
  }
257
276
 
258
277
  .sv-matrixdynamic__drag-icon {
@@ -280,21 +299,21 @@
280
299
  }
281
300
 
282
301
  .sv-save-data_root {
283
- position: absolute;
302
+ position: fixed;
284
303
  left: 50%;
285
304
  bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
286
305
  background: var(--sjs-general-backcolor, var(--background, #fff));
287
306
  opacity: 0;
288
307
  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
289
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
308
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
290
309
  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
291
310
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
292
311
  min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
293
312
  text-align: center;
294
313
  z-index: 1600;
295
314
  font-family: var(--font-family, var(--font-family));
296
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
297
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
315
+ font-size: calc(1 * var(--sjs-font-size, 16px));
316
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
298
317
  display: flex;
299
318
  flex-direction: row;
300
319
  justify-content: center;
@@ -339,8 +358,8 @@
339
358
 
340
359
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
341
360
  font-weight: 600;
342
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
343
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
361
+ font-size: calc(1 * var(--sjs-font-size, 16px));
362
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
344
363
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
345
364
  color: #ffffff;
346
365
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
@@ -2172,6 +2191,7 @@ body .sv-ranking-shortcut .sv-ranking-item__icon {
2172
2191
  background-color: transparent;
2173
2192
  position: absolute;
2174
2193
  inset-inline-start: 0;
2194
+ inset-block-start: 0;
2175
2195
  }
2176
2196
 
2177
2197
  .sv_q_dropdown_clean-button {
@@ -2930,7 +2950,7 @@ sv-popup {
2930
2950
  display: flex;
2931
2951
  flex-direction: column;
2932
2952
  max-height: 90vh;
2933
- max-width: 90vw;
2953
+ max-width: 100vw;
2934
2954
  }
2935
2955
 
2936
2956
  .sv-popup--modal .sv-list__filter {
@@ -3052,7 +3072,7 @@ sv-popup {
3052
3072
  transform: translate(calc(-1 * var(--base-unit, 8px)), calc(-1 * var(--base-unit, 8px)));
3053
3073
  }
3054
3074
 
3055
- .sv-popup--show-pointer.sv-popup--right {
3075
+ .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
3056
3076
  transform: translate(calc(1 * var(--base-unit, 8px)));
3057
3077
  }
3058
3078
 
@@ -3060,7 +3080,7 @@ sv-popup {
3060
3080
  transform: translate(-12px, -4px) rotate(-90deg);
3061
3081
  }
3062
3082
 
3063
- .sv-popup--show-pointer.sv-popup--left {
3083
+ .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
3064
3084
  transform: translate(calc(-1 * var(--base-unit, 8px)));
3065
3085
  }
3066
3086
 
@@ -3176,6 +3196,7 @@ sv-popup {
3176
3196
  padding-inline-start: calc(2 * var(--base-unit, 8px));
3177
3197
  cursor: pointer;
3178
3198
  overflow: hidden;
3199
+ text-align: left;
3179
3200
  text-overflow: ellipsis;
3180
3201
  white-space: nowrap;
3181
3202
  display: flex;