survey-react 1.9.110 → 1.9.112

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 +784 -675
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +310 -241
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +66 -53
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +360 -207
  12. package/survey.react.js +770 -394
  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.110
2
+ * surveyjs - Survey JavaScript library v1.9.112
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, 16px));
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, 16px));
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, 16px));
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: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
116
+ padding: 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: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
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: 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
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
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)));
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
+ border-radius: var(--sjs-corner-radius, 4px);
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 {
@@ -146,18 +146,18 @@
146
146
 
147
147
  .sv_progress-toc--mobile {
148
148
  position: fixed;
149
- top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
150
- right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
149
+ top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
150
+ right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
151
151
  width: auto;
152
152
  min-width: auto;
153
153
  height: auto;
154
154
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
155
155
  z-index: 15;
156
- border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
156
+ border-radius: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
157
157
  }
158
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)));
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
161
  }
162
162
  .sv_progress-toc--mobile:hover {
163
163
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -170,7 +170,7 @@
170
170
  background-color: cadetblue;
171
171
  padding: 1px;
172
172
  font-family: var(--font-family, var(--font-family));
173
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
173
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
174
174
  font-style: normal;
175
175
  font-weight: 400;
176
176
  line-height: 1.42857143;
@@ -189,7 +189,7 @@
189
189
  background-clip: padding-box;
190
190
  border: 1px solid #ccc;
191
191
  border: 1px solid rgba(0, 0, 0, 0.2);
192
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
192
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
193
193
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
194
194
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
195
195
  line-break: auto;
@@ -199,10 +199,10 @@
199
199
  .sv_window_title {
200
200
  padding: 8px 14px;
201
201
  margin: 0;
202
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
202
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
203
203
  background-color: #f7f7f7;
204
204
  border-bottom: 1px solid #ebebeb;
205
- border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
205
+ border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
206
206
  display: flex;
207
207
  }
208
208
 
@@ -217,7 +217,7 @@
217
217
  .sv_window_title a:link,
218
218
  .sv_window_title a:visited {
219
219
  text-decoration: none;
220
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
220
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
221
221
  font-style: normal;
222
222
  color: black;
223
223
  }
@@ -242,8 +242,8 @@
242
242
 
243
243
  .sv-brand-info__text {
244
244
  font-weight: 600;
245
- font-size: calc(1 * var(--sjs-font-size, 16px));
246
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
245
+ font-size: var(--sjs-font-size, 16px);
246
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
247
247
  color: #161616;
248
248
  }
249
249
 
@@ -256,43 +256,43 @@
256
256
 
257
257
  .sv-brand-info__terms {
258
258
  font-weight: 400;
259
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
260
- line-height: calc(1 * var(--sjs-font-size, 16px));
259
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
260
+ line-height: var(--sjs-font-size, 16px);
261
261
  }
262
262
  .sv-brand-info__terms a {
263
263
  color: #909090;
264
264
  }
265
265
 
266
266
  .sv-dragged-element-shortcut {
267
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
268
- min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
269
- border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
267
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
268
+ min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
269
+ border-radius: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
270
270
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
271
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
271
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
272
272
  cursor: grabbing;
273
273
  position: absolute;
274
274
  z-index: 10000;
275
275
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
276
276
  font-family: var(--font-family, var(--font-family));
277
- font-size: calc(1 * var(--sjs-font-size, 16px));
278
- padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
279
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
277
+ font-size: var(--sjs-font-size, 16px);
278
+ padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
279
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
280
280
  }
281
281
 
282
282
  .sv-matrixdynamic__drag-icon {
283
- padding-top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
283
+ padding-top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
284
284
  }
285
285
 
286
286
  .sv-matrixdynamic__drag-icon:after {
287
287
  content: " ";
288
288
  display: block;
289
- height: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
290
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
289
+ height: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
290
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
291
291
  border: 1px solid #e7e7e7;
292
292
  box-sizing: border-box;
293
- border-radius: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
293
+ border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
294
294
  cursor: move;
295
- margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
295
+ margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
296
296
  }
297
297
 
298
298
  .sv-matrix-row--drag-drop-ghost-mod td {
@@ -306,24 +306,24 @@
306
306
  .sv-save-data_root {
307
307
  position: fixed;
308
308
  left: 50%;
309
- bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
309
+ bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
310
310
  background: var(--sjs-general-backcolor, var(--background, #fff));
311
311
  opacity: 0;
312
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
312
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
313
313
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
314
- border-radius: calc(2 * var(--sjs-corner-radius, 4px));
314
+ border-radius: calc(2 * (var(--sjs-corner-radius, 4px)));
315
315
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
316
- min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
316
+ min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
317
317
  text-align: center;
318
318
  z-index: 1600;
319
319
  font-family: var(--font-family, var(--font-family));
320
- font-size: calc(1 * var(--sjs-font-size, 16px));
321
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
320
+ font-size: var(--sjs-font-size, 16px);
321
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
322
322
  display: flex;
323
323
  flex-direction: row;
324
324
  justify-content: center;
325
325
  align-items: center;
326
- transform: translateX(-50%) translateY(calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))));
326
+ transform: translateX(-50%) translateY(calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
327
327
  transition-timing-function: ease-in;
328
328
  transition-property: transform, opacity;
329
329
  transition-delay: 0.25s;
@@ -357,20 +357,20 @@
357
357
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
358
358
  color: var(--sjs-general-backcolor, var(--background, #fff));
359
359
  font-weight: 600;
360
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
361
- gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
360
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
361
+ gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
362
362
  }
363
363
 
364
364
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
365
365
  font-weight: 600;
366
- font-size: calc(1 * var(--sjs-font-size, 16px));
367
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
368
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
366
+ font-size: var(--sjs-font-size, 16px);
367
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
368
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
369
369
  color: #ffffff;
370
370
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
371
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid #ffffff;
372
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
373
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
371
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid #ffffff;
372
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
373
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
374
374
  display: flex;
375
375
  align-items: center;
376
376
  }
@@ -1050,6 +1050,10 @@ body {
1050
1050
  flex: none !important;
1051
1051
  }
1052
1052
 
1053
+ .sv_q_dropdown_control input[readonly] {
1054
+ pointer-events: none;
1055
+ }
1056
+
1053
1057
  [dir=rtl] .sv_main input, [style*="direction:rtl"] .sv_main input {
1054
1058
  text-align: right;
1055
1059
  }
@@ -1393,6 +1397,10 @@ sv-components-container,
1393
1397
  flex-grow: 1;
1394
1398
  }
1395
1399
 
1400
+ .sv-components-row > .sv-components-column--expandable {
1401
+ width: 1px;
1402
+ }
1403
+
1396
1404
  .sv-dragdrop-movedown {
1397
1405
  transform: translate(0, 0);
1398
1406
  animation: svdragdropmovedown 0.1s;
@@ -3177,6 +3185,11 @@ sv-popup {
3177
3185
  background-color: var(--background-dim, #f3f3f3);
3178
3186
  }
3179
3187
 
3188
+ .sv-popup__button.sv-popup__button--danger {
3189
+ background-color: var(--sjs-special-red, #E50A3E);
3190
+ color: var(--primary-foreground, #fff);
3191
+ }
3192
+
3180
3193
  .sv-list {
3181
3194
  padding: 0;
3182
3195
  margin: 0;
@@ -3273,7 +3286,7 @@ sv-popup {
3273
3286
  .sv-list__filter {
3274
3287
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
3275
3288
  background: var(--background, #fff);
3276
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3289
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3277
3290
  }
3278
3291
 
3279
3292
  .sv-list__input {