survey-react 1.12.2 → 1.12.4

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 +65 -50
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +69 -84
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +59 -24
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +102 -42
  12. package/survey.react.js +624 -279
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.12.2
2
+ * surveyjs - Survey JavaScript library v1.12.4
3
3
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -116,18 +116,12 @@ sv-popup {
116
116
 
117
117
  .sv-popup__container {
118
118
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
119
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
119
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
120
120
  border-radius: var(--sjs-corner-radius, 4px);
121
121
  position: absolute;
122
122
  padding: 0;
123
123
  }
124
124
 
125
- .sv-popup__shadow {
126
- width: 100%;
127
- height: 100%;
128
- border-radius: var(--sjs-corner-radius, 4px);
129
- }
130
-
131
125
  .sv-popup__body-content {
132
126
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
133
127
  border-radius: var(--sjs-corner-radius, 4px);
@@ -154,23 +148,17 @@ sv-popup {
154
148
  display: flex;
155
149
  }
156
150
 
157
- .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
158
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
151
+ .sv-popup--modal > .sv-popup__container > .sv-popup__body-content {
159
152
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
160
153
  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
161
154
  height: auto;
162
- }
163
- .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
164
- padding-bottom: 2px;
155
+ gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
165
156
  }
166
157
 
167
158
  .sv-popup--modal .sv-popup__body-footer .sv-footer-action-bar {
168
159
  overflow: visible;
169
160
  }
170
161
 
171
- .sv-popup--confirm-delete .sv-popup__shadow {
172
- height: initial;
173
- }
174
162
  .sv-popup--confirm-delete .sv-popup__container {
175
163
  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
176
164
  }
@@ -182,7 +170,6 @@ sv-popup {
182
170
  }
183
171
  .sv-popup--confirm-delete .sv-popup__body-header {
184
172
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
185
- margin-bottom: 0;
186
173
  align-self: self-start;
187
174
  /* UI/Default */
188
175
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -196,7 +183,6 @@ sv-popup {
196
183
  display: none;
197
184
  }
198
185
  .sv-popup--confirm-delete .sv-popup__body-footer {
199
- padding-bottom: 0;
200
186
  max-width: max-content;
201
187
  }
202
188
  .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
@@ -215,6 +201,7 @@ sv-popup {
215
201
  width: 100%;
216
202
  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
217
203
  border: unset;
204
+ box-shadow: unset;
218
205
  box-sizing: content-box;
219
206
  }
220
207
  .sv-popup--overlay .sv-popup__body-content {
@@ -222,32 +209,27 @@ sv-popup {
222
209
  max-width: 100vw;
223
210
  border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
224
211
  background: var(--sjs-general-backcolor, var(--background, #fff));
225
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
226
212
  padding: calc(3 * (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))));
227
213
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
228
214
  }
229
215
  .sv-popup--overlay .sv-popup__scrolling-content {
230
216
  height: calc(100% - 10 * var(--base-unit, 8px));
231
217
  }
232
- .sv-popup--overlay .sv-popup__body-footer {
233
- margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
234
- }
235
218
  .sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
236
219
  width: 100%;
237
220
  }
238
221
  .sv-popup--overlay .sv-popup__body-footer-item {
239
222
  width: 100%;
240
223
  }
224
+ .sv-popup--overlay .sv-popup__body-footer .sv-action {
225
+ flex: 1 0 0;
226
+ }
241
227
  .sv-popup--overlay .sv-popup__button.sv-popup__button {
242
228
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
243
229
  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
244
230
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
245
231
  }
246
232
 
247
- .sv-popup--overlay .sv-popup__body-footer .sv-action {
248
- flex: 1 0 0;
249
- }
250
-
251
233
  .sv-popup--modal .sv-popup__scrolling-content {
252
234
  padding: 2px;
253
235
  margin: -2px;
@@ -322,23 +304,17 @@ sv-popup {
322
304
  line-height: calc(2 * (var(--sjs-font-size, 16px)));
323
305
  font-style: normal;
324
306
  font-weight: 700;
325
- margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
326
307
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
327
308
  }
328
309
 
329
310
  .sv-popup__body-footer {
330
311
  display: flex;
331
- margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
332
312
  }
333
313
 
334
314
  .sv-popup__body-footer .sv-action-bar {
335
315
  gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
336
316
  }
337
317
 
338
- .sv-popup__button {
339
- margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
340
- }
341
-
342
318
  .sv-popup--modal .sv-list__filter,
343
319
  .sv-popup--overlay .sv-list__filter {
344
320
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -351,16 +327,13 @@ sv-popup {
351
327
  .sv-popup--dropdown .sv-list__filter {
352
328
  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
353
329
  }
354
- .sv-popup--dropdown .sv-popup__shadow {
355
- box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
356
- }
357
330
  .sv-popup--dropdown .sv-popup__body-content {
358
331
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
359
332
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
360
333
  height: 100%;
361
334
  }
362
335
 
363
- .sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
336
+ .sv-popup--dropdown > .sv-popup__container > .sv-popup__body-content .sv-list {
364
337
  background-color: transparent;
365
338
  }
366
339
 
@@ -373,6 +346,7 @@ sv-popup {
373
346
 
374
347
  .sv-popup--overlay .sv-popup__body-content {
375
348
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
349
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
376
350
  }
377
351
 
378
352
  .sv-popup--dropdown-overlay {
@@ -393,7 +367,6 @@ sv-popup {
393
367
  box-shadow: none;
394
368
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
395
369
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
396
- margin: 0;
397
370
  }
398
371
  .sv-popup--dropdown-overlay .sv-popup__container {
399
372
  max-height: calc(var(--sv-popup-overlay-height, 100vh));
@@ -402,10 +375,10 @@ sv-popup {
402
375
  }
403
376
  .sv-popup--dropdown-overlay .sv-popup__body-content {
404
377
  height: calc(var(--sv-popup-overlay-height, 100vh));
378
+ gap: 0;
405
379
  }
406
380
  .sv-popup--dropdown-overlay .sv-popup__body-footer {
407
381
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
408
- margin-top: 0;
409
382
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
410
383
  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
411
384
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -534,7 +507,7 @@ sv-popup {
534
507
  max-width: var(--sv-popup-overlay-max-width);
535
508
  border-radius: var(--sjs-corner-radius, 4px);
536
509
  overflow: hidden;
537
- margin: 0;
510
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
538
511
  }
539
512
  .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
540
513
  .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -1741,7 +1714,7 @@ sv-popup {
1741
1714
  font-weight: bold;
1742
1715
  outline: none;
1743
1716
  padding: 0.5em 2.786em 0.6em;
1744
- text-align: left;
1717
+ text-align: start;
1745
1718
  }
1746
1719
 
1747
1720
  .sv-btn--navigation {
@@ -2232,7 +2205,7 @@ sv-popup {
2232
2205
  max-width: 100%;
2233
2206
  width: auto;
2234
2207
  height: 100%;
2235
- text-align: left;
2208
+ text-align: start;
2236
2209
  cursor: text;
2237
2210
  pointer-events: none;
2238
2211
  color: var(--main-hover-color, #9f9f9f);
@@ -2896,6 +2869,16 @@ button.sv-action-bar-item {
2896
2869
  position: absolute;
2897
2870
  z-index: 10000;
2898
2871
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2872
+ min-width: 100px;
2873
+ max-width: 400px;
2874
+ }
2875
+ .sv-drag-drop-choices-shortcut .sv-ranking-item {
2876
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2877
+ }
2878
+ .sv-drag-drop-choices-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-viewer,
2879
+ .sv-drag-drop-choices-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-editor {
2880
+ overflow: hidden;
2881
+ white-space: nowrap;
2899
2882
  }
2900
2883
 
2901
2884
  .sv-drag-drop-choices-shortcut__content.sv-drag-drop-choices-shortcut__content {
@@ -2944,18 +2927,12 @@ sv-popup {
2944
2927
 
2945
2928
  .sv-popup__container {
2946
2929
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
2947
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2930
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2948
2931
  border-radius: var(--sjs-corner-radius, 4px);
2949
2932
  position: absolute;
2950
2933
  padding: 0;
2951
2934
  }
2952
2935
 
2953
- .sv-popup__shadow {
2954
- width: 100%;
2955
- height: 100%;
2956
- border-radius: var(--sjs-corner-radius, 4px);
2957
- }
2958
-
2959
2936
  .sv-popup__body-content {
2960
2937
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2961
2938
  border-radius: var(--sjs-corner-radius, 4px);
@@ -2982,23 +2959,17 @@ sv-popup {
2982
2959
  display: flex;
2983
2960
  }
2984
2961
 
2985
- .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
2986
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2962
+ .sv-popup--modal > .sv-popup__container > .sv-popup__body-content {
2987
2963
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
2988
2964
  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2989
2965
  height: auto;
2990
- }
2991
- .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
2992
- padding-bottom: 2px;
2966
+ gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2993
2967
  }
2994
2968
 
2995
2969
  .sv-popup--modal .sv-popup__body-footer .sv-footer-action-bar {
2996
2970
  overflow: visible;
2997
2971
  }
2998
2972
 
2999
- .sv-popup--confirm-delete .sv-popup__shadow {
3000
- height: initial;
3001
- }
3002
2973
  .sv-popup--confirm-delete .sv-popup__container {
3003
2974
  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
3004
2975
  }
@@ -3010,7 +2981,6 @@ sv-popup {
3010
2981
  }
3011
2982
  .sv-popup--confirm-delete .sv-popup__body-header {
3012
2983
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3013
- margin-bottom: 0;
3014
2984
  align-self: self-start;
3015
2985
  /* UI/Default */
3016
2986
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -3024,7 +2994,6 @@ sv-popup {
3024
2994
  display: none;
3025
2995
  }
3026
2996
  .sv-popup--confirm-delete .sv-popup__body-footer {
3027
- padding-bottom: 0;
3028
2997
  max-width: max-content;
3029
2998
  }
3030
2999
  .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
@@ -3043,6 +3012,7 @@ sv-popup {
3043
3012
  width: 100%;
3044
3013
  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3045
3014
  border: unset;
3015
+ box-shadow: unset;
3046
3016
  box-sizing: content-box;
3047
3017
  }
3048
3018
  .sv-popup--overlay .sv-popup__body-content {
@@ -3050,32 +3020,27 @@ sv-popup {
3050
3020
  max-width: 100vw;
3051
3021
  border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
3052
3022
  background: var(--sjs-general-backcolor, var(--background, #fff));
3053
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3054
3023
  padding: calc(3 * (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))));
3055
3024
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3056
3025
  }
3057
3026
  .sv-popup--overlay .sv-popup__scrolling-content {
3058
3027
  height: calc(100% - 10 * var(--base-unit, 8px));
3059
3028
  }
3060
- .sv-popup--overlay .sv-popup__body-footer {
3061
- margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3062
- }
3063
3029
  .sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
3064
3030
  width: 100%;
3065
3031
  }
3066
3032
  .sv-popup--overlay .sv-popup__body-footer-item {
3067
3033
  width: 100%;
3068
3034
  }
3035
+ .sv-popup--overlay .sv-popup__body-footer .sv-action {
3036
+ flex: 1 0 0;
3037
+ }
3069
3038
  .sv-popup--overlay .sv-popup__button.sv-popup__button {
3070
3039
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3071
3040
  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
3072
3041
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
3073
3042
  }
3074
3043
 
3075
- .sv-popup--overlay .sv-popup__body-footer .sv-action {
3076
- flex: 1 0 0;
3077
- }
3078
-
3079
3044
  .sv-popup--modal .sv-popup__scrolling-content {
3080
3045
  padding: 2px;
3081
3046
  margin: -2px;
@@ -3150,23 +3115,17 @@ sv-popup {
3150
3115
  line-height: calc(2 * (var(--sjs-font-size, 16px)));
3151
3116
  font-style: normal;
3152
3117
  font-weight: 700;
3153
- margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3154
3118
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3155
3119
  }
3156
3120
 
3157
3121
  .sv-popup__body-footer {
3158
3122
  display: flex;
3159
- margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3160
3123
  }
3161
3124
 
3162
3125
  .sv-popup__body-footer .sv-action-bar {
3163
3126
  gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3164
3127
  }
3165
3128
 
3166
- .sv-popup__button {
3167
- margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3168
- }
3169
-
3170
3129
  .sv-popup--modal .sv-list__filter,
3171
3130
  .sv-popup--overlay .sv-list__filter {
3172
3131
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -3179,16 +3138,13 @@ sv-popup {
3179
3138
  .sv-popup--dropdown .sv-list__filter {
3180
3139
  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3181
3140
  }
3182
- .sv-popup--dropdown .sv-popup__shadow {
3183
- box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3184
- }
3185
3141
  .sv-popup--dropdown .sv-popup__body-content {
3186
3142
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3187
3143
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
3188
3144
  height: 100%;
3189
3145
  }
3190
3146
 
3191
- .sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
3147
+ .sv-popup--dropdown > .sv-popup__container > .sv-popup__body-content .sv-list {
3192
3148
  background-color: transparent;
3193
3149
  }
3194
3150
 
@@ -3201,6 +3157,7 @@ sv-popup {
3201
3157
 
3202
3158
  .sv-popup--overlay .sv-popup__body-content {
3203
3159
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3160
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3204
3161
  }
3205
3162
 
3206
3163
  .sv-popup--dropdown-overlay {
@@ -3221,7 +3178,6 @@ sv-popup {
3221
3178
  box-shadow: none;
3222
3179
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3223
3180
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3224
- margin: 0;
3225
3181
  }
3226
3182
  .sv-popup--dropdown-overlay .sv-popup__container {
3227
3183
  max-height: calc(var(--sv-popup-overlay-height, 100vh));
@@ -3230,10 +3186,10 @@ sv-popup {
3230
3186
  }
3231
3187
  .sv-popup--dropdown-overlay .sv-popup__body-content {
3232
3188
  height: calc(var(--sv-popup-overlay-height, 100vh));
3189
+ gap: 0;
3233
3190
  }
3234
3191
  .sv-popup--dropdown-overlay .sv-popup__body-footer {
3235
3192
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3236
- margin-top: 0;
3237
3193
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
3238
3194
  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3239
3195
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -3362,7 +3318,7 @@ sv-popup {
3362
3318
  max-width: var(--sv-popup-overlay-max-width);
3363
3319
  border-radius: var(--sjs-corner-radius, 4px);
3364
3320
  overflow: hidden;
3365
- margin: 0;
3321
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3366
3322
  }
3367
3323
  .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
3368
3324
  .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -3908,12 +3864,13 @@ sv-brand-info,
3908
3864
  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3909
3865
  margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3910
3866
  overflow-wrap: break-word;
3911
- word-break: break-all;
3867
+ word-break: normal;
3912
3868
  align-self: self-start;
3913
3869
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
3914
3870
  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3915
3871
  }
3916
- .sv-ranking-item__text .sv-string-viewer {
3872
+ .sv-ranking-item__text .sv-string-viewer,
3873
+ .sv-ranking-item__text .sv-string-editor {
3917
3874
  overflow: initial;
3918
3875
  white-space: pre-line;
3919
3876
  }
@@ -3958,7 +3915,8 @@ sv-brand-info,
3958
3915
  .sv-ranking-item--ghost {
3959
3916
  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3960
3917
  }
3961
- .sv-ranking-item--ghost .sv-ranking-item__text .sv-string-viewer {
3918
+ .sv-ranking-item--ghost .sv-ranking-item__text .sv-string-viewer,
3919
+ .sv-ranking-item--ghost .sv-ranking-item__text .sv-string-editor {
3962
3920
  white-space: unset;
3963
3921
  }
3964
3922
 
@@ -4054,7 +4012,8 @@ sv-brand-info,
4054
4012
  .sv-ranking-shortcut .sv-ranking-item {
4055
4013
  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4056
4014
  }
4057
- .sv-ranking-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-viewer {
4015
+ .sv-ranking-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-viewer,
4016
+ .sv-ranking-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-editor {
4058
4017
  overflow: hidden;
4059
4018
  white-space: nowrap;
4060
4019
  }
@@ -4188,6 +4147,32 @@ sv-brand-info,
4188
4147
  left: initial;
4189
4148
  }
4190
4149
 
4150
+ .sv-ranking--select-to-rank-swap-areas {
4151
+ flex-direction: row-reverse;
4152
+ }
4153
+ .sv-ranking--select-to-rank-swap-areas .sv-ranking__container--to .sv-ranking-item {
4154
+ padding-left: 0;
4155
+ left: -24px !important;
4156
+ }
4157
+ .sv-ranking--select-to-rank-swap-areas .sv-ranking__container--from .sv-ranking-item {
4158
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4159
+ left: 0;
4160
+ }
4161
+ .sv-ranking--select-to-rank-swap-areas .sv-ranking__container--from .sv-ranking-item__ghost.sv-ranking-item__ghost {
4162
+ left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4163
+ }
4164
+ .sv-ranking--select-to-rank-swap-areas .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
4165
+ padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4166
+ padding-left: 0;
4167
+ }
4168
+ .sv-ranking--select-to-rank-swap-areas .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item__ghost.sv-ranking-item__ghost {
4169
+ right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4170
+ }
4171
+ .sv-ranking--select-to-rank-swap-areas .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
4172
+ padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4173
+ padding-right: 0;
4174
+ }
4175
+
4191
4176
  :root {
4192
4177
  --sjs-transition-duration: 150ms;
4193
4178
  }
@@ -4244,7 +4229,7 @@ sv-brand-info,
4244
4229
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
4245
4230
  cursor: pointer;
4246
4231
  overflow: hidden;
4247
- text-align: left;
4232
+ text-align: start;
4248
4233
  text-overflow: ellipsis;
4249
4234
  white-space: nowrap;
4250
4235
  transition: background-color var(--sjs-transition-duration, 150ms), color var(--sjs-transition-duration, 150ms);