survey-react 1.9.109 → 1.9.111

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 +935 -677
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +301 -240
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +67 -53
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +673 -183
  12. package/survey.react.js +2616 -589
  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.109
2
+ * surveyjs - Survey JavaScript library v1.9.111
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,11 @@
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
+ display: flex;
206
207
  }
207
208
 
208
209
  .sv_window_content {
@@ -216,7 +217,7 @@
216
217
  .sv_window_title a:link,
217
218
  .sv_window_title a:visited {
218
219
  text-decoration: none;
219
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
220
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
220
221
  font-style: normal;
221
222
  color: black;
222
223
  }
@@ -241,8 +242,8 @@
241
242
 
242
243
  .sv-brand-info__text {
243
244
  font-weight: 600;
244
- font-size: calc(1 * var(--sjs-font-size, 16px));
245
- 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)));
246
247
  color: #161616;
247
248
  }
248
249
 
@@ -255,43 +256,43 @@
255
256
 
256
257
  .sv-brand-info__terms {
257
258
  font-weight: 400;
258
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
259
- 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);
260
261
  }
261
262
  .sv-brand-info__terms a {
262
263
  color: #909090;
263
264
  }
264
265
 
265
266
  .sv-dragged-element-shortcut {
266
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
267
- min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
268
- 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))));
269
270
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
270
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
271
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
271
272
  cursor: grabbing;
272
273
  position: absolute;
273
274
  z-index: 10000;
274
275
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
275
276
  font-family: var(--font-family, var(--font-family));
276
- font-size: calc(1 * var(--sjs-font-size, 16px));
277
- padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
278
- 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)));
279
280
  }
280
281
 
281
282
  .sv-matrixdynamic__drag-icon {
282
- 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))));
283
284
  }
284
285
 
285
286
  .sv-matrixdynamic__drag-icon:after {
286
287
  content: " ";
287
288
  display: block;
288
- height: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
289
- 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))));
290
291
  border: 1px solid #e7e7e7;
291
292
  box-sizing: border-box;
292
- 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))));
293
294
  cursor: move;
294
- 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))));
295
296
  }
296
297
 
297
298
  .sv-matrix-row--drag-drop-ghost-mod td {
@@ -305,24 +306,24 @@
305
306
  .sv-save-data_root {
306
307
  position: fixed;
307
308
  left: 50%;
308
- bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
309
+ bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
309
310
  background: var(--sjs-general-backcolor, var(--background, #fff));
310
311
  opacity: 0;
311
- 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))));
312
313
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
313
- border-radius: calc(2 * var(--sjs-corner-radius, 4px));
314
+ border-radius: calc(2 * (var(--sjs-corner-radius, 4px)));
314
315
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
315
- 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))));
316
317
  text-align: center;
317
318
  z-index: 1600;
318
319
  font-family: var(--font-family, var(--font-family));
319
- font-size: calc(1 * var(--sjs-font-size, 16px));
320
- 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)));
321
322
  display: flex;
322
323
  flex-direction: row;
323
324
  justify-content: center;
324
325
  align-items: center;
325
- 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)))));
326
327
  transition-timing-function: ease-in;
327
328
  transition-property: transform, opacity;
328
329
  transition-delay: 0.25s;
@@ -356,20 +357,20 @@
356
357
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
357
358
  color: var(--sjs-general-backcolor, var(--background, #fff));
358
359
  font-weight: 600;
359
- 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)));
360
- 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))));
361
362
  }
362
363
 
363
364
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
364
365
  font-weight: 600;
365
- font-size: calc(1 * var(--sjs-font-size, 16px));
366
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
367
- 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))));
368
369
  color: #ffffff;
369
370
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
370
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid #ffffff;
371
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
372
- 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))));
373
374
  display: flex;
374
375
  align-items: center;
375
376
  }
@@ -1049,6 +1050,10 @@ body {
1049
1050
  flex: none !important;
1050
1051
  }
1051
1052
 
1053
+ .sv_q_dropdown_control input[readonly] {
1054
+ pointer-events: none;
1055
+ }
1056
+
1052
1057
  [dir=rtl] .sv_main input, [style*="direction:rtl"] .sv_main input {
1053
1058
  text-align: right;
1054
1059
  }
@@ -1392,6 +1397,10 @@ sv-components-container,
1392
1397
  flex-grow: 1;
1393
1398
  }
1394
1399
 
1400
+ .sv-components-row > .sv-components-column--expandable {
1401
+ width: 1px;
1402
+ }
1403
+
1395
1404
  .sv-dragdrop-movedown {
1396
1405
  transform: translate(0, 0);
1397
1406
  animation: svdragdropmovedown 0.1s;
@@ -3176,6 +3185,11 @@ sv-popup {
3176
3185
  background-color: var(--background-dim, #f3f3f3);
3177
3186
  }
3178
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
+
3179
3193
  .sv-list {
3180
3194
  padding: 0;
3181
3195
  margin: 0;
@@ -3272,7 +3286,7 @@ sv-popup {
3272
3286
  .sv-list__filter {
3273
3287
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
3274
3288
  background: var(--background, #fff);
3275
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3289
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3276
3290
  }
3277
3291
 
3278
3292
  .sv-list__input {