survey-react 1.9.92 → 1.9.94

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 +185 -148
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +89 -34
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +6 -7
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +763 -399
  12. package/survey.react.js +2187 -1417
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +5 -18
package/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.92
2
+ * surveyjs - Survey JavaScript library v1.9.94
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
  */
@@ -78,7 +78,6 @@
78
78
  sv-popup {
79
79
  display: block;
80
80
  position: absolute;
81
- z-index: -1;
82
81
  }
83
82
 
84
83
  .sv-popup {
@@ -127,14 +126,15 @@ sv-popup {
127
126
  padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
128
127
  box-sizing: border-box;
129
128
  }
130
- .sv-popup.sv-popup--modal .sv-popup__container {
131
- position: static;
132
- }
133
129
  .sv-popup.sv-popup--modal .sv-popup__body-content {
134
130
  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
135
131
  height: auto;
136
132
  }
137
133
 
134
+ .sv-popup.sv-popup--modal > .sv-popup__container {
135
+ position: static;
136
+ }
137
+
138
138
  .sv-popup--overlay.sv-popup--overlay {
139
139
  width: 100%;
140
140
  height: var(--sv-popup-overlay-height, 100vh);
@@ -166,9 +166,6 @@ sv-popup {
166
166
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
167
167
  width: 100%;
168
168
  }
169
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action {
170
- width: 100%;
171
- }
172
169
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer-item {
173
170
  width: 100%;
174
171
  }
@@ -178,6 +175,10 @@ sv-popup {
178
175
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
179
176
  }
180
177
 
178
+ .sv-popup--overlay.sv-popup--overlay:not(.sv-dropdown-popup) .sv-popup__body-footer .sv-action {
179
+ flex: 1 0 0;
180
+ }
181
+
181
182
  .sv-popup--modal .sv-popup__scrolling-content {
182
183
  padding: 2px;
183
184
  margin: -2px;
@@ -248,7 +249,7 @@ sv-popup {
248
249
  .sv-popup__body-header {
249
250
  font-family: Open Sans;
250
251
  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
251
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
252
+ line-height: calc(2 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
252
253
  font-style: normal;
253
254
  font-weight: 700;
254
255
  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -368,7 +369,7 @@ sv-popup {
368
369
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
369
370
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
370
371
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
371
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
372
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
372
373
  font-family: var(--font-family);
373
374
  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
374
375
  }
@@ -2485,14 +2486,14 @@ button.sv-action-bar-item {
2485
2486
  .sv-action-bar--default-size-mode .sv-action-bar-item {
2486
2487
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2487
2488
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2488
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2489
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2489
2490
  margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2490
2491
  }
2491
2492
 
2492
2493
  .sv-action-bar--small-size-mode .sv-action-bar-item {
2493
2494
  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2494
2495
  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2495
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2496
+ line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2496
2497
  margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2497
2498
  }
2498
2499
 
@@ -2564,7 +2565,7 @@ button.sv-action-bar-item {
2564
2565
  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2565
2566
  background-color: transparent;
2566
2567
  cursor: pointer;
2567
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2568
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2568
2569
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2569
2570
  font-family: var(--font-family, var(--font-family));
2570
2571
  }
@@ -2633,7 +2634,7 @@ button.sv-action-bar-item {
2633
2634
  font-family: var(--font-family, var(--font-family));
2634
2635
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2635
2636
  padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2636
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2637
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2637
2638
  }
2638
2639
 
2639
2640
  .sv-matrixdynamic__drag-icon {
@@ -2663,7 +2664,6 @@ button.sv-action-bar-item {
2663
2664
  sv-popup {
2664
2665
  display: block;
2665
2666
  position: absolute;
2666
- z-index: -1;
2667
2667
  }
2668
2668
 
2669
2669
  .sv-popup {
@@ -2712,14 +2712,15 @@ sv-popup {
2712
2712
  padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
2713
2713
  box-sizing: border-box;
2714
2714
  }
2715
- .sv-popup.sv-popup--modal .sv-popup__container {
2716
- position: static;
2717
- }
2718
2715
  .sv-popup.sv-popup--modal .sv-popup__body-content {
2719
2716
  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2720
2717
  height: auto;
2721
2718
  }
2722
2719
 
2720
+ .sv-popup.sv-popup--modal > .sv-popup__container {
2721
+ position: static;
2722
+ }
2723
+
2723
2724
  .sv-popup--overlay.sv-popup--overlay {
2724
2725
  width: 100%;
2725
2726
  height: var(--sv-popup-overlay-height, 100vh);
@@ -2751,9 +2752,6 @@ sv-popup {
2751
2752
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
2752
2753
  width: 100%;
2753
2754
  }
2754
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action {
2755
- width: 100%;
2756
- }
2757
2755
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer-item {
2758
2756
  width: 100%;
2759
2757
  }
@@ -2763,6 +2761,10 @@ sv-popup {
2763
2761
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2764
2762
  }
2765
2763
 
2764
+ .sv-popup--overlay.sv-popup--overlay:not(.sv-dropdown-popup) .sv-popup__body-footer .sv-action {
2765
+ flex: 1 0 0;
2766
+ }
2767
+
2766
2768
  .sv-popup--modal .sv-popup__scrolling-content {
2767
2769
  padding: 2px;
2768
2770
  margin: -2px;
@@ -2833,7 +2835,7 @@ sv-popup {
2833
2835
  .sv-popup__body-header {
2834
2836
  font-family: Open Sans;
2835
2837
  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2836
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2838
+ line-height: calc(2 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2837
2839
  font-style: normal;
2838
2840
  font-weight: 700;
2839
2841
  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2953,7 +2955,7 @@ sv-popup {
2953
2955
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
2954
2956
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2955
2957
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2956
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2958
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2957
2959
  font-family: var(--font-family);
2958
2960
  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2959
2961
  }
@@ -3022,7 +3024,7 @@ sv-popup {
3022
3024
  appearance: none;
3023
3025
  width: 100%;
3024
3026
  padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3025
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3027
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3026
3028
  outline: none;
3027
3029
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3028
3030
  font-weight: 400;
@@ -3209,7 +3211,7 @@ sv-popup {
3209
3211
  .sv-brand-info__text {
3210
3212
  font-weight: 600;
3211
3213
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3212
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3214
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3213
3215
  color: #161616;
3214
3216
  }
3215
3217
 
@@ -3223,7 +3225,7 @@ sv-popup {
3223
3225
  .sv-brand-info__terms {
3224
3226
  font-weight: 400;
3225
3227
  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3226
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3228
+ line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3227
3229
  }
3228
3230
  .sv-brand-info__terms a {
3229
3231
  color: #909090;
@@ -3306,12 +3308,12 @@ sv-popup {
3306
3308
  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
3307
3309
  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3308
3310
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3309
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3311
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3310
3312
  box-sizing: border-box;
3311
3313
  font-weight: 600;
3312
3314
  margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3313
3315
  }
3314
- .sv-ranking-item__index.sv-ranking-item__index.sv-ranking-item__index--empty:empty {
3316
+ .sv-ranking-item__index.sv-ranking-item__index:empty {
3315
3317
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
3316
3318
  background-position: center;
3317
3319
  background-repeat: no-repeat;
@@ -3324,7 +3326,7 @@ sv-popup {
3324
3326
  white-space: nowrap;
3325
3327
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3326
3328
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3327
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3329
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3328
3330
  margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3329
3331
  }
3330
3332
 
@@ -3425,6 +3427,54 @@ sv-popup {
3425
3427
  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3426
3428
  }
3427
3429
 
3430
+ .sv-ranking--select-to-rank {
3431
+ display: flex;
3432
+ }
3433
+
3434
+ .sv-ranking--select-to-rank-vertical {
3435
+ flex-direction: column;
3436
+ }
3437
+ .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
3438
+ margin: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3439
+ height: 1px;
3440
+ }
3441
+
3442
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
3443
+ width: 1px;
3444
+ }
3445
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
3446
+ left: initial;
3447
+ }
3448
+
3449
+ .sv-ranking__container-placeholder {
3450
+ color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
3451
+ font-family: var(--font-family, var(--font-family));
3452
+ font-style: normal;
3453
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3454
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3455
+ white-space: break-spaces;
3456
+ display: flex;
3457
+ justify-content: center;
3458
+ align-items: center;
3459
+ width: 100%;
3460
+ height: 100%;
3461
+ }
3462
+
3463
+ .sv-ranking__container {
3464
+ flex: 1;
3465
+ max-width: 100%;
3466
+ }
3467
+
3468
+ .sv-ranking__container--empty {
3469
+ padding: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3470
+ box-sizing: border-box;
3471
+ text-align: center;
3472
+ }
3473
+
3474
+ .sv-ranking__containers-divider {
3475
+ background: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
3476
+ }
3477
+
3428
3478
  .sv-list {
3429
3479
  padding: 0;
3430
3480
  margin: 0;
@@ -3445,7 +3495,7 @@ sv-popup {
3445
3495
  }
3446
3496
 
3447
3497
  .sv-list__empty-text {
3448
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3498
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3449
3499
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3450
3500
  font-weight: 400;
3451
3501
  text-align: center;
@@ -3471,8 +3521,9 @@ sv-popup {
3471
3521
  padding-inline-end: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3472
3522
  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3473
3523
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3524
+ font-weight: normal;
3474
3525
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3475
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3526
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3476
3527
  cursor: pointer;
3477
3528
  overflow: hidden;
3478
3529
  text-overflow: ellipsis;
@@ -3536,6 +3587,10 @@ sv-popup {
3536
3587
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
3537
3588
  }
3538
3589
 
3590
+ .sv-list--filtering .sv-list__item-separator {
3591
+ display: none;
3592
+ }
3593
+
3539
3594
  .sv-list__item.sv-list__item--selected .sv-list__item-body,
3540
3595
  .sv-list__item.sv-list__item--selected:hover .sv-list__item-body,
3541
3596
  .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
@@ -3611,7 +3666,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3611
3666
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3612
3667
  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3613
3668
  padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
3614
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3669
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3615
3670
  border: none;
3616
3671
  }
3617
3672
 
@@ -3647,7 +3702,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3647
3702
  z-index: 1600;
3648
3703
  font-family: var(--font-family, var(--font-family));
3649
3704
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3650
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3705
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3651
3706
  display: flex;
3652
3707
  flex-direction: row;
3653
3708
  justify-content: center;
@@ -3693,7 +3748,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3693
3748
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
3694
3749
  font-weight: 600;
3695
3750
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3696
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3751
+ line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3697
3752
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3698
3753
  color: #ffffff;
3699
3754
  background-color: var(--sjs-special-red, var(--red, #e60a3e));