survey-react 1.9.138 → 1.10.1

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.
package/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.138
2
+ * surveyjs - Survey JavaScript library v1.10.1
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
  */
@@ -1369,10 +1369,16 @@ sv-brand-info, .sv-brand-info {
1369
1369
  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1370
1370
  }
1371
1371
 
1372
- .sv-ranking-item--disabled.sv-ranking-item--disabled {
1372
+ .sv-ranking-item--disabled.sv-ranking-item--disabled,
1373
+ .sv-ranking-item--readonly.sv-ranking-item--readonly,
1374
+ .sv-ranking-item--preview.sv-ranking-item--preview {
1373
1375
  cursor: initial;
1376
+ user-select: initial;
1377
+ -webkit-user-select: initial;
1374
1378
  }
1375
- .sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
1379
+ .sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon,
1380
+ .sv-ranking-item--readonly.sv-ranking-item--readonly .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon,
1381
+ .sv-ranking-item--preview.sv-ranking-item--preview .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
1376
1382
  visibility: hidden;
1377
1383
  }
1378
1384
 
@@ -1433,6 +1439,16 @@ sv-brand-info, .sv-brand-info {
1433
1439
  opacity: 0.25;
1434
1440
  }
1435
1441
 
1442
+ .sv-ranking-item--readonly .sv-ranking-item__index {
1443
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
1444
+ }
1445
+
1446
+ .sv-ranking-item--preview .sv-ranking-item__index {
1447
+ background-color: transparent;
1448
+ border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
1449
+ box-sizing: border-box;
1450
+ }
1451
+
1436
1452
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
1437
1453
  display: none;
1438
1454
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -1859,6 +1875,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1859
1875
  background: var(--sjs-general-backcolor, var(--background, #fff));
1860
1876
  box-sizing: border-box;
1861
1877
  width: 100%;
1878
+ min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1862
1879
  outline: none;
1863
1880
  font-size: var(--sjs-font-size, 16px);
1864
1881
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -1988,23 +2005,44 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1988
2005
  opacity: 1;
1989
2006
  }
1990
2007
  }
1991
- @keyframes moveIn {
2008
+ @keyframes changeHeight {
1992
2009
  from {
1993
- height: 0;
2010
+ height: var(--animation-height-from);
1994
2011
  }
1995
2012
  to {
1996
- height: var(--animation-height);
2013
+ height: var(--animation-height-to);
1997
2014
  }
1998
2015
  }
1999
- @keyframes overflowIn {
2000
- 0% {
2016
+ @keyframes moveInWithOverflow {
2017
+ from {
2001
2018
  overflow: hidden;
2019
+ height: 0;
2002
2020
  }
2003
2021
  99% {
2004
2022
  overflow: hidden;
2023
+ height: var(--animation-height);
2005
2024
  }
2006
- 100% {
2025
+ to {
2007
2026
  overflow: visible;
2027
+ height: var(--animation-height);
2028
+ }
2029
+ }
2030
+ @keyframes moveIn {
2031
+ from {
2032
+ height: 0;
2033
+ }
2034
+ to {
2035
+ height: var(--animation-height);
2036
+ }
2037
+ }
2038
+ @keyframes paddingFadeIn {
2039
+ from {
2040
+ padding-top: 0;
2041
+ padding-bottom: 0;
2042
+ }
2043
+ to {
2044
+ padding-bottom: var(--animation-padding-bottom);
2045
+ padding-top: var(--animation-padding-top);
2008
2046
  }
2009
2047
  }
2010
2048
  .sd-element {
@@ -2064,6 +2102,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2064
2102
  .sd-element__title .sv-string-viewer {
2065
2103
  white-space: normal;
2066
2104
  }
2105
+ .sd-element__title .sv-string-viewer.sv-string-viewer--multiline {
2106
+ white-space: pre-wrap;
2107
+ }
2067
2108
 
2068
2109
  .sd-element__num {
2069
2110
  float: left;
@@ -2091,6 +2132,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2091
2132
  [style*="direction: rtl"] .sd-element__num {
2092
2133
  float: right;
2093
2134
  }
2135
+ [dir=rtl] .sd-element__title--expandable:before,
2136
+ [style*="direction:rtl"] .sd-element__title--expandable:before,
2137
+ [style*="direction: rtl"] .sd-element__title--expandable:before {
2138
+ transform: rotate(180deg);
2139
+ }
2094
2140
 
2095
2141
  .sd-element__title--num-inline .sd-element__num {
2096
2142
  float: none;
@@ -2118,7 +2164,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2118
2164
  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2119
2165
  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2120
2166
  position: absolute;
2121
- left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2167
+ inset-inline-start: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2122
2168
  top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2123
2169
  transition-property: transform;
2124
2170
  }
@@ -2183,16 +2229,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2183
2229
  animation-delay: var(--sjs-element-move-out-delay, 0ms), 0s;
2184
2230
  }
2185
2231
 
2186
- @keyframes paddingFadeIn {
2187
- from {
2188
- padding-top: 0;
2189
- padding-bottom: 0;
2190
- }
2191
- to {
2192
- padding-bottom: var(--animation-padding-bottom);
2193
- padding-top: var(--animation-padding-top);
2194
- }
2195
- }
2196
2232
  .sd-element__content {
2197
2233
  box-sizing: border-box;
2198
2234
  }
@@ -2204,23 +2240,23 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2204
2240
  }
2205
2241
 
2206
2242
  .sd-element__content--fade-in {
2207
- animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
2243
+ animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
2208
2244
  min-height: 0 !important;
2209
2245
  opacity: 0;
2210
2246
  animation-fill-mode: forwards;
2211
2247
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
2212
- animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms), var(--sjs-expand-move-in-duration, 150ms), var(--sjs-expand-move-in-duration, 150ms);
2213
- animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s, 0s, 0s;
2248
+ animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms), var(--sjs-expand-move-in-duration, 150ms);
2249
+ animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s, 0s;
2214
2250
  }
2215
2251
 
2216
2252
  .sd-element__content--fade-out {
2217
- animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
2253
+ animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
2218
2254
  min-height: 0 !important;
2219
2255
  animation-direction: reverse;
2220
2256
  animation-fill-mode: forwards;
2221
2257
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
2222
- animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-expand-move-in-duration, 150ms);
2223
- animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms);
2258
+ animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms);
2259
+ animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms);
2224
2260
  }
2225
2261
 
2226
2262
  .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:focus-within, .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:hover {
@@ -2258,14 +2294,24 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2258
2294
  transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
2259
2295
  transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
2260
2296
  }
2261
- .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex > .sd-element__header--location-top:after {
2297
+ .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex:not(.sd-question--empty) > .sd-element__header--location-top:after {
2262
2298
  display: block;
2263
- animation-name: fadeIn;
2299
+ opacity: 0;
2300
+ height: 0;
2301
+ --animation-height: 1px;
2302
+ animation-name: fadeIn, moveIn;
2264
2303
  animation-fill-mode: forwards;
2265
- animation-duration: var(--sjs-transition-duration, 150ms);
2304
+ animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
2305
+ animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s;
2306
+ animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms);
2266
2307
  }
2267
- .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex.sd-element--collapsed .sd-element__header--location-top:after {
2308
+ .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex:not(.sd-question--empty).sd-element--collapsed .sd-element__header--location-top:after {
2268
2309
  animation-direction: reverse;
2310
+ opacity: 1;
2311
+ height: 1px;
2312
+ animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
2313
+ animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms);
2314
+ animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms);
2269
2315
  }
2270
2316
 
2271
2317
  .sd-question {
@@ -2425,6 +2471,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2425
2471
  height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
2426
2472
  }
2427
2473
 
2474
+ .sd-question__content {
2475
+ box-sizing: border-box;
2476
+ }
2477
+
2428
2478
  .sd-error {
2429
2479
  display: block;
2430
2480
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2449,7 +2499,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2449
2499
  padding: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sd-base-padding);
2450
2500
  box-sizing: border-box;
2451
2501
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2452
- margin-left: calc(-1 * var(--sd-base-padding));
2502
+ margin-inline-start: calc(-1 * var(--sd-base-padding));
2453
2503
  width: calc(100% + 2 * var(--sd-base-padding));
2454
2504
  }
2455
2505
  .sd-element--collapsed.sd-element--with-frame {
@@ -2528,7 +2578,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2528
2578
  .sd-element--nested-with-borders > .sd-element__header--location-top:after,
2529
2579
  .sd-element--complex.sd-element--with-frame > .sd-element__header--location-top:after {
2530
2580
  bottom: calc(-1 * var(--sd-base-vertical-padding));
2531
- left: calc(-1 * var(--sd-base-padding));
2581
+ inset-inline-start: calc(-1 * var(--sd-base-padding));
2532
2582
  width: calc(100% + 2 * var(--sd-base-padding));
2533
2583
  }
2534
2584
 
@@ -2593,6 +2643,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2593
2643
  user-select: none;
2594
2644
  }
2595
2645
 
2646
+ .sd-input--readonly {
2647
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
2648
+ }
2649
+
2650
+ .sd-input.sd-input--preview {
2651
+ background: none;
2652
+ box-shadow: none;
2653
+ transition: none;
2654
+ border-bottom: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
2655
+ border-radius: 0;
2656
+ padding-left: 0;
2657
+ padding-right: 0;
2658
+ }
2659
+
2596
2660
  .sd-input::placeholder {
2597
2661
  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
2598
2662
  -webkit-user-select: none;
@@ -2607,6 +2671,16 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2607
2671
  opacity: 0.25;
2608
2672
  }
2609
2673
 
2674
+ .sd-input.sd-input--readonly {
2675
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2676
+ box-shadow: none;
2677
+ transition: none;
2678
+ }
2679
+
2680
+ .sd-input.sd-input--readonly::placeholder {
2681
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2682
+ }
2683
+
2610
2684
  .sd-root--readonly .sd-input--disabled,
2611
2685
  .sd-root--readonly .sd-input--disabled::placeholder {
2612
2686
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -2820,6 +2894,15 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2820
2894
  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
2821
2895
  }
2822
2896
 
2897
+ .sd-question--readonly .sjs_sp_container,
2898
+ .sd-question--preview .sjs_sp_container {
2899
+ border: none;
2900
+ }
2901
+ .sd-question--readonly .sjs_sp_placeholder,
2902
+ .sd-question--preview .sjs_sp_placeholder {
2903
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2904
+ }
2905
+
2823
2906
  .sjs_sp_controls.sd-signaturepad__controls {
2824
2907
  right: var(--sjs-base-unit, var(--base-unit, 8px));
2825
2908
  top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -2877,6 +2960,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2877
2960
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
2878
2961
  }
2879
2962
 
2963
+ .sd-checkbox--checked.sd-checkbox--readonly .sd-checkbox__svg use {
2964
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
2965
+ }
2966
+
2967
+ .sd-checkbox--checked.sd-checkbox--preview .sd-checkbox__svg use {
2968
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
2969
+ }
2970
+
2880
2971
  .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
2881
2972
  position: sticky;
2882
2973
  left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2942,6 +3033,99 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2942
3033
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2943
3034
  }
2944
3035
 
3036
+ @keyframes borderAnimation {
3037
+ from {
3038
+ border-width: 0px;
3039
+ }
3040
+ to {
3041
+ border-width: 8px;
3042
+ }
3043
+ }
3044
+ @keyframes paddingAnimation {
3045
+ from {
3046
+ padding-top: 0;
3047
+ padding-bottom: 0;
3048
+ }
3049
+ to {
3050
+ padding-top: 24px;
3051
+ padding-bottom: 32px;
3052
+ }
3053
+ }
3054
+ @keyframes empty {}
3055
+ .sd-table__row--fade-out,
3056
+ .sd-table__row--fade-in {
3057
+ animation-name: empty;
3058
+ animation-fill-mode: forwards;
3059
+ --fade-in-animation-duration: calc(var(--sjs-matrix-row-fade-in-duration, 250ms) + var(--sjs-matrix-row-fade-in-delay, 150ms));
3060
+ animation-duration: max(var(--fade-in-animation-duration), var(--sjs-matrix-row-move-in-duration, 150ms));
3061
+ }
3062
+ .sd-table__row--fade-out > td,
3063
+ .sd-table__row--fade-in > td {
3064
+ animation-name: borderAnimation;
3065
+ animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
3066
+ animation-duration: var(--sjs-matrix-row-move-in-duration, 150ms);
3067
+ animation-fill-mode: forwards;
3068
+ }
3069
+ .sd-table__row--fade-out > td > div,
3070
+ .sd-table__row--fade-in > td > div {
3071
+ animation-name: fadeIn, moveInWithOverflow;
3072
+ opacity: 0;
3073
+ animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
3074
+ animation-fill-mode: forwards;
3075
+ animation-duration: var(--sjs-matrix-row-fade-in-duration, 250ms), var(--sjs-matrix-row-move-in-duration, 150ms);
3076
+ animation-delay: var(--sjs-matrix-row-fade-in-delay, 150ms), 0s;
3077
+ }
3078
+
3079
+ .sd-table__row--fade-out {
3080
+ animation-direction: reverse;
3081
+ --move-out-animation-duration: calc(var(--sjs-matrix-row-move-out-duration, 250ms) + var(--sjs-matrix-row-move-out-delay, 100ms));
3082
+ animation-duration: max(var(--move-out-animation-duration), var(--sjs-matrix-row-fade-out-duration, 100ms));
3083
+ }
3084
+ .sd-table__row--fade-out > td {
3085
+ animation-duration: var(--sjs-matrix-row-move-out-duration, 250ms);
3086
+ animation-delay: var(--sjs-matrix-row-move-out-delay, 100ms);
3087
+ animation-direction: reverse;
3088
+ animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
3089
+ }
3090
+ .sd-table__row--fade-out > td > div {
3091
+ animation-direction: reverse;
3092
+ animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
3093
+ animation-duration: var(--sjs-matrix-row-fade-out-duration, 100ms), var(--sjs-matrix-row-move-out-duration, 250ms);
3094
+ animation-delay: 0s, var(--sjs-matrix-row-move-out-delay, 100ms);
3095
+ }
3096
+
3097
+ .sd-table__row--detail.sd-table__row--fade-in > td, .sd-table__row--detail.sd-table__row--fade-out > td {
3098
+ animation-name: borderAnimation, paddingAnimation;
3099
+ animation-duration: var(--sjs-matrix-row-move-in-duration, 150ms);
3100
+ animation-fill-mode: forwards;
3101
+ }
3102
+ .sd-table__row--detail.sd-table__row--fade-in {
3103
+ --fade-in-animation-duration: calc(var(--sjs--fade-in-duration, 500ms) + var(--sjs-matrix-detail-row-fade-in-delay, 150ms));
3104
+ animation-duration: max(var(--fade-in-animation-duration), var(--sjs-matrix-detail-row-move-in-duration, 150ms));
3105
+ }
3106
+ .sd-table__row--detail.sd-table__row--fade-in > td {
3107
+ animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
3108
+ animation-duration: var(--sjs-matrix-detail-row-move-in-duration, 150ms);
3109
+ }
3110
+ .sd-table__row--detail.sd-table__row--fade-in > td > div {
3111
+ animation-duration: var(--sjs--fade-in-duration, 500ms), var(--sjs-matrix-detail-row-move-in-duration, 150ms);
3112
+ animation-delay: var(--sjs-matrix-detail-row-fade-in-delay, 150ms), 0s;
3113
+ }
3114
+ .sd-table__row--detail.sd-table__row--fade-out {
3115
+ --move-out-animation-duration: calc(var(--sjs-matrix-detail-row-move-out-duration, 250ms) + var(--sjs-matrix-detail-row-move-out-delay, 100ms));
3116
+ animation-duration: max(var(--move-out-animation-duration), var(--sjs-matrix-detail-row-fade-out-duration, 150ms));
3117
+ }
3118
+ .sd-table__row--detail.sd-table__row--fade-out > td {
3119
+ animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
3120
+ animation-duration: var(--sjs-matrix-detail-row-move-out-duration, 250ms);
3121
+ animation-delay: var(--sjs-matrix-detail-row-move-out-delay, 100ms);
3122
+ animation-direction: reverse;
3123
+ }
3124
+ .sd-table__row--detail.sd-table__row--fade-out > td > div {
3125
+ animation-duration: var(--sjs-matrix-detail-row-fade-out-duration, 150ms), var(--sjs-matrix-detail-row-move-out-duration, 250ms);
3126
+ animation-delay: 0s, var(--sjs-matrix-detail-row-move-out-delay, 100ms);
3127
+ }
3128
+
2945
3129
  .sd-table {
2946
3130
  width: 100%;
2947
3131
  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
@@ -2991,6 +3175,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2991
3175
  }
2992
3176
  .sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table > .sd-question__header ~ .sd-question__content {
2993
3177
  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3178
+ --animation-padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2994
3179
  }
2995
3180
  .sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table > .sd-question__header ~ .sd-question__content .sd-table--no-header {
2996
3181
  padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3033,9 +3218,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3033
3218
  }
3034
3219
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions),
3035
3220
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
3036
- border-top-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3037
- border-bottom-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3038
- background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3221
+ border-top-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3222
+ border-bottom-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3223
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3039
3224
  }
3040
3225
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions).sd-matrix__text--checked,
3041
3226
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type.sd-matrix__text--checked {
@@ -3053,6 +3238,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3053
3238
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
3054
3239
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3055
3240
  }
3241
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator,
3242
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator {
3243
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3244
+ }
3245
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--preview.sd-item--preview .sd-item__decorator,
3246
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--preview.sd-item--preview .sd-item__decorator {
3247
+ background-color: transparent;
3248
+ }
3056
3249
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
3057
3250
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
3058
3251
  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
@@ -3263,6 +3456,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3263
3456
  overflow-x: auto;
3264
3457
  }
3265
3458
 
3459
+ .sd-question--table.sd-element--collapsed,
3266
3460
  .sd-question--table.sd-element--nested {
3267
3461
  overflow-x: visible;
3268
3462
  }
@@ -3293,6 +3487,24 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3293
3487
  flex-basis: 100%;
3294
3488
  }
3295
3489
 
3490
+ .sd-element--with-frame.sd-element--compact .sd-table {
3491
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3492
+ }
3493
+ .sd-element--with-frame.sd-element--compact .sd-table-wrapper:before, .sd-element--with-frame.sd-element--compact .sd-table-wrapper:after {
3494
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3495
+ }
3496
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
3497
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3498
+ }
3499
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--actions:not(.sd-table__cell--vertical),
3500
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--empty,
3501
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--row-text,
3502
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--footer-total,
3503
+ .sd-element--with-frame.sd-element--compact .sd-matrix__cell:first-of-type,
3504
+ .sd-element--with-frame.sd-element--compact .sd-matrix tr > td:first-of-type {
3505
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3506
+ }
3507
+
3296
3508
  .sd-question--table > .sd-question__header,
3297
3509
  .sd-question--table .sd-question__description--under-input .sv-string-viewer {
3298
3510
  position: sticky;
@@ -3300,6 +3512,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3300
3512
  }
3301
3513
  .sd-question--table > .sd-question__content {
3302
3514
  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3515
+ --animation-padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3303
3516
  min-width: min-content;
3304
3517
  }
3305
3518
  .sd-question--table.sd-element--nested > .sd-question__content {
@@ -3459,6 +3672,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3459
3672
  align-items: stretch;
3460
3673
  }
3461
3674
 
3675
+ .sd-panel.sd-panel--as-page > .sd-panel__content > .sd-row--multiple:not(.sd-row--compact) {
3676
+ margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3677
+ width: calc(100% + var(--base-unit) * 2);
3678
+ }
3679
+
3462
3680
  .sd-panel:not(.sd-panel--as-page) .sd-row--multiple {
3463
3681
  row-gap: var(--sd-base-vertical-padding);
3464
3682
  }
@@ -3504,22 +3722,22 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3504
3722
  }
3505
3723
  .sd-row--fade-in {
3506
3724
  animation-fill-mode: forwards;
3507
- animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
3725
+ animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
3508
3726
  min-height: 0 !important;
3509
3727
  opacity: 0;
3510
3728
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
3511
- animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s, 0s;
3512
- animation-duration: var(--sjs-row-fade-in-duration, 500ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms);
3729
+ animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s;
3730
+ animation-duration: var(--sjs-row-fade-in-duration, 500ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms);
3513
3731
  }
3514
3732
 
3515
3733
  .sd-row--fade-out {
3516
- animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
3734
+ animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
3517
3735
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
3518
3736
  animation-fill-mode: forwards;
3519
3737
  animation-direction: reverse;
3520
3738
  min-height: 0 !important;
3521
- animation-delay: 0s, var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms);
3522
- animation-duration: var(--sjs-row-fade-out-duration, 150ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
3739
+ animation-delay: 0s, var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms);
3740
+ animation-duration: var(--sjs-row-fade-out-duration, 150ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
3523
3741
  }
3524
3742
 
3525
3743
  .sd-row--fade-in .sd-element-wrapper--fade-in {
@@ -3668,6 +3886,18 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3668
3886
  transition: box-shadow var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
3669
3887
  }
3670
3888
 
3889
+ .sd-item--readonly.sd-item--readonly .sd-item__decorator {
3890
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3891
+ box-shadow: none;
3892
+ transition: none;
3893
+ }
3894
+
3895
+ .sd-item--preview.sd-item--preview .sd-item__decorator {
3896
+ background-color: transparent;
3897
+ box-shadow: none;
3898
+ transition: none;
3899
+ }
3900
+
3671
3901
  .sd-item--checked .sd-item__decorator {
3672
3902
  box-shadow: none;
3673
3903
  }
@@ -3795,6 +4025,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3795
4025
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3796
4026
  }
3797
4027
 
4028
+ .sd-checkbox--checked.sd-checkbox--readonly .sd-checkbox__svg use {
4029
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4030
+ }
4031
+
4032
+ .sd-checkbox--checked.sd-checkbox--preview .sd-checkbox__svg use {
4033
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4034
+ }
4035
+
3798
4036
  .sd-radio__decorator {
3799
4037
  border-radius: 50%;
3800
4038
  }
@@ -3821,6 +4059,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3821
4059
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
3822
4060
  }
3823
4061
 
4062
+ .sd-radio--checked.sd-radio--readonly .sd-radio__decorator:after {
4063
+ background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4064
+ }
4065
+
4066
+ .sd-radio--checked.sd-radio--preview .sd-radio__decorator:after {
4067
+ display: none;
4068
+ }
4069
+ .sd-radio--checked.sd-radio--preview .sd-radio__decorator .sd-radio__svg {
4070
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4071
+ display: block;
4072
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4073
+ height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4074
+ }
4075
+
3824
4076
  .sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
3825
4077
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3826
4078
  }
@@ -4005,6 +4257,43 @@ legend + sv-ng-rating-item + .sd-rating__item {
4005
4257
  border: none;
4006
4258
  }
4007
4259
 
4260
+ .sd-rating__item.sd-rating__item--readonly {
4261
+ fill: transparent;
4262
+ background-color: transparent;
4263
+ border: 2px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4264
+ box-shadow: none;
4265
+ transform: none;
4266
+ }
4267
+ .sd-rating__item.sd-rating__item--readonly .sd-rating__item-text.sd-rating__item-text {
4268
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4269
+ }
4270
+
4271
+ .sd-rating__item.sd-rating__item--selected.sd-rating__item--readonly {
4272
+ border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4273
+ }
4274
+ .sd-rating__item.sd-rating__item--selected.sd-rating__item--readonly .sd-rating__item-text.sd-rating__item-text {
4275
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
4276
+ }
4277
+
4278
+ .sd-rating__item.sd-rating__item--preview {
4279
+ fill: transparent;
4280
+ background-color: transparent;
4281
+ border: 1px solid transparent;
4282
+ box-shadow: none;
4283
+ transform: none;
4284
+ }
4285
+ .sd-rating__item.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
4286
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
4287
+ }
4288
+
4289
+ .sd-rating__item.sd-rating__item--selected.sd-rating__item--preview {
4290
+ border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4291
+ border-width: 1px;
4292
+ }
4293
+ .sd-rating__item.sd-rating__item--selected.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
4294
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
4295
+ }
4296
+
4008
4297
  .sd-question--disabled .sd-rating__item-text {
4009
4298
  opacity: 0.25;
4010
4299
  }
@@ -4090,6 +4379,26 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4090
4379
  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
4091
4380
  }
4092
4381
 
4382
+ .sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--readonly {
4383
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4384
+ border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4385
+ background-color: unset;
4386
+ }
4387
+
4388
+ .sd-rating__item-smiley.sd-rating__item-smiley--preview {
4389
+ border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4390
+ border-width: 1px;
4391
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4392
+ }
4393
+ .sd-rating__item-smiley.sd-rating__item-smiley--preview svg {
4394
+ margin: 1px;
4395
+ }
4396
+
4397
+ .sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview {
4398
+ fill: var(--sjs-general-backcolor, var(--background, #fff));
4399
+ background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4400
+ }
4401
+
4093
4402
  .sd-rating__item-smiley--allowhover:hover {
4094
4403
  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
4095
4404
  border-color: var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4125,6 +4434,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4125
4434
  opacity: 1;
4126
4435
  }
4127
4436
 
4437
+ .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--selected, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--readonly, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--preview {
4438
+ opacity: 1;
4439
+ }
4440
+
4128
4441
  .sd-rating__item-star {
4129
4442
  position: relative;
4130
4443
  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4140,6 +4453,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4140
4453
  }
4141
4454
  .sd-rating__item-star svg {
4142
4455
  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
4456
+ stroke-width: 2px;
4143
4457
  fill: transparent;
4144
4458
  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4145
4459
  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4162,6 +4476,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4162
4476
  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4163
4477
  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4164
4478
  }
4479
+ .sd-rating__item-star--small.sd-rating__item-star--selected svg {
4480
+ stroke-width: 1px;
4481
+ }
4165
4482
 
4166
4483
  .sd-rating__item-star--selected svg {
4167
4484
  stroke: transparent;
@@ -4186,6 +4503,27 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4186
4503
  fill: var(--sjs-border-default, var(--border, #d6d6d6));
4187
4504
  }
4188
4505
 
4506
+ .sd-rating__item-star--readonly svg {
4507
+ stroke: var(--sjs-border-default, var(--border, #d6d6d6));
4508
+ fill: none;
4509
+ }
4510
+
4511
+ .sd-rating__item-star--selected.sd-rating__item-star--readonly svg {
4512
+ stroke: none;
4513
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4514
+ }
4515
+
4516
+ .sd-rating__item-star--preview svg {
4517
+ stroke: var(--sjs-general-forecolor, var(--foreground, #161616));
4518
+ stroke-width: 1px;
4519
+ fill: none;
4520
+ }
4521
+
4522
+ .sd-rating__item-star--selected.sd-rating__item-star--preview svg {
4523
+ stroke: none;
4524
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4525
+ }
4526
+
4189
4527
  .sd-rating__item-star:focus-within svg {
4190
4528
  stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
4191
4529
  fill: transparent;
@@ -4300,6 +4638,28 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4300
4638
  left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4301
4639
  }
4302
4640
 
4641
+ .sv-ranking.sd-ranking--readonly {
4642
+ user-select: initial;
4643
+ -webkit-user-select: initial;
4644
+ }
4645
+ .sv-ranking.sd-ranking--readonly.sv-ranking--select-to-rank-empty-value .sv-ranking__containers-divider {
4646
+ visibility: hidden;
4647
+ }
4648
+ .sv-ranking.sd-ranking--readonly .sv-ranking__container--empty {
4649
+ visibility: hidden;
4650
+ }
4651
+
4652
+ .sv-ranking.sd-ranking--preview {
4653
+ user-select: initial;
4654
+ -webkit-user-select: initial;
4655
+ }
4656
+ .sv-ranking.sd-ranking--preview.sv-ranking--select-to-rank-empty-value .sv-ranking__containers-divider {
4657
+ visibility: hidden;
4658
+ }
4659
+ .sv-ranking.sd-ranking--preview .sv-ranking__container--empty {
4660
+ visibility: hidden;
4661
+ }
4662
+
4303
4663
  @container (max-width: 496px) {
4304
4664
  .sv-ranking--select-to-rank-horizontal {
4305
4665
  flex-direction: column-reverse;
@@ -4468,10 +4828,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4468
4828
  box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
4469
4829
  }
4470
4830
 
4471
- .sd-input.sd-dropdown:focus-within .sd-dropdown__filter-string-input {
4472
- z-index: 2000;
4473
- }
4474
-
4475
4831
  .sd-dropdown__filter-string-input {
4476
4832
  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4477
4833
  position: absolute;
@@ -4526,12 +4882,22 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4526
4882
  white-space: pre;
4527
4883
  }
4528
4884
 
4529
- .sd-input--disabled .sv-string-viewer {
4885
+ .sd-input--disabled .sv-string-viewer,
4886
+ .sd-input--readonly .sv-string-viewer,
4887
+ .sd-input--preview .sv-string-viewer {
4530
4888
  max-width: 100%;
4531
4889
  overflow: hidden;
4532
4890
  text-overflow: ellipsis;
4533
4891
  }
4534
4892
 
4893
+ .sd-question--readonly .sd-dropdown_chevron-button use {
4894
+ opacity: 0.24;
4895
+ }
4896
+
4897
+ .sd-question--preview .sd-dropdown_chevron-button {
4898
+ display: none;
4899
+ }
4900
+
4535
4901
  .sv-dropdown-popup .sd-list__item-body {
4536
4902
  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4537
4903
  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
@@ -4575,14 +4941,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4575
4941
  background-position: left calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
4576
4942
  }
4577
4943
 
4578
- .sd-input.sd-tagbox:not(.sd-tagbox--empty):not(.sd-input--disabled) {
4944
+ .sd-input.sd-tagbox:not(.sd-tagbox--empty).sd-input--editable {
4579
4945
  height: auto;
4580
4946
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4581
4947
  padding-inline-end: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4582
4948
  padding-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4583
4949
  }
4584
4950
 
4585
- .sd-tagbox.sd-input--disabled {
4951
+ .sd-tagbox.sd-input--disabled, .sd-tagbox.sd-input--readonly, .sd-tagbox.sd-input--preview {
4586
4952
  white-space: normal;
4587
4953
  }
4588
4954
 
@@ -4849,11 +5215,41 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4849
5215
  align-items: flex-start;
4850
5216
  padding-right: 0;
4851
5217
  }
5218
+ .sd-imagepicker__column .sd-imagepicker__item {
5219
+ width: 100%;
5220
+ }
5221
+ .sd-imagepicker__column .sd-imagepicker__text {
5222
+ width: 100%;
5223
+ display: inline-block;
5224
+ overflow: hidden;
5225
+ text-overflow: ellipsis;
5226
+ text-align: center;
5227
+ }
4852
5228
 
4853
5229
  .sd-selectbase__column.sd-imagepicker__column:not(:last-child) {
4854
5230
  padding-right: 0;
4855
5231
  }
4856
5232
 
5233
+ .sd-imagepicker__item--readonly .sd-imagepicker__check-icon {
5234
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
5235
+ }
5236
+
5237
+ .sd-imagepicker__item--preview .sd-imagepicker__check-decorator {
5238
+ display: none;
5239
+ }
5240
+ .sd-imagepicker__item--preview .sd-imagepicker__image {
5241
+ /* Safari 6.0 - 9.0 */
5242
+ -webkit-filter: grayscale(100%);
5243
+ filter: grayscale(100%);
5244
+ opacity: 0.25;
5245
+ }
5246
+ .sd-imagepicker__item--preview.sd-imagepicker__item--checked .sd-imagepicker__image {
5247
+ /* Safari 6.0 - 9.0 */
5248
+ -webkit-filter: grayscale(0%);
5249
+ filter: grayscale(0%);
5250
+ opacity: 1;
5251
+ }
5252
+
4857
5253
  .sd-image__image {
4858
5254
  display: block;
4859
5255
  max-width: 100%;
@@ -5158,6 +5554,37 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5158
5554
  opacity: 0.25;
5159
5555
  }
5160
5556
 
5557
+ .sd-boolean--readonly {
5558
+ pointer-events: none;
5559
+ box-shadow: none;
5560
+ transition: none;
5561
+ background: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
5562
+ }
5563
+ .sd-boolean--readonly .sd-boolean__thumb {
5564
+ box-shadow: inset 0px 0px 0px 2px var(--sjs-general-forecolor, var(--foreground, #161616));
5565
+ transition: none;
5566
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
5567
+ }
5568
+
5569
+ .sd-boolean--preview {
5570
+ pointer-events: none;
5571
+ box-shadow: none;
5572
+ transition: none;
5573
+ background: transparent;
5574
+ }
5575
+ .sd-boolean--preview .sd-boolean__thumb {
5576
+ border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
5577
+ box-shadow: none;
5578
+ transition: none;
5579
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
5580
+ }
5581
+ .sd-boolean--preview.sd-boolean--checked .sd-boolean__thumb, .sd-boolean--preview.sd-boolean--indeterminate .sd-boolean__thumb {
5582
+ margin-left: auto;
5583
+ }
5584
+ .sd-boolean--preview .sd-checkbox__label--preview {
5585
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
5586
+ }
5587
+
5161
5588
  .sd-boolean__thumb-ghost {
5162
5589
  z-index: 1;
5163
5590
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -5196,7 +5623,29 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5196
5623
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
5197
5624
  }
5198
5625
 
5626
+ .sd-question--readonly .sd-paneldynamic .sd-question__placeholder,
5627
+ .sd-question--preview .sd-paneldynamic .sd-question__placeholder {
5628
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
5629
+ }
5630
+
5199
5631
  .sd-paneldynamic__separator {
5632
+ display: none;
5633
+ }
5634
+
5635
+ .sd-paneldynamic__panel-wrapper {
5636
+ box-sizing: border-box;
5637
+ padding-bottom: calc(1 * var(--sd-base-padding));
5638
+ }
5639
+
5640
+ .sd-paneldynamic__panel-wrapper:after {
5641
+ display: table;
5642
+ clear: both;
5643
+ content: " ";
5644
+ }
5645
+
5646
+ .sd-paneldynamic__footer .sd-paneldynamic__separator,
5647
+ .sd-paneldynamic__panel-wrapper--list ~ .sd-paneldynamic__panel-wrapper--list:before {
5648
+ content: " ";
5200
5649
  display: block;
5201
5650
  position: absolute;
5202
5651
  left: 0;
@@ -5212,16 +5661,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5212
5661
  display: none;
5213
5662
  }
5214
5663
 
5215
- .sd-paneldynamic__panel-wrapper {
5216
- padding-bottom: calc(1 * var(--sd-base-padding));
5217
- }
5218
-
5219
- .sd-paneldynamic__panel-wrapper:after {
5220
- display: table;
5221
- clear: both;
5222
- content: " ";
5223
- }
5224
-
5225
5664
  .sd-paneldynamic__panel-wrapper--in-row {
5226
5665
  display: flex;
5227
5666
  flex-direction: row;
@@ -5294,6 +5733,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5294
5733
 
5295
5734
  .sd-question--empty.sd-question--paneldynamic > .sd-question__content {
5296
5735
  padding-bottom: var(--sd-base-padding);
5736
+ --animation-padding-bottom: var(--sd-base-padding);
5297
5737
  }
5298
5738
 
5299
5739
  .sd-question--paneldynamic:not(.sd-question--empty) > .sd-question__content > .sd-question__comment-area {
@@ -5427,6 +5867,96 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5427
5867
  padding-bottom: 0;
5428
5868
  }
5429
5869
 
5870
+ .sd-paneldynamic__panels-container {
5871
+ position: relative;
5872
+ overflow: hidden;
5873
+ margin-left: calc(-1 * var(--sd-base-padding));
5874
+ padding-left: var(--sd-base-padding);
5875
+ margin-right: calc(-1 * var(--sd-base-padding));
5876
+ padding-right: var(--sd-base-padding);
5877
+ }
5878
+
5879
+ .sd-paneldynamic__panel-wrapper {
5880
+ box-sizing: border-box;
5881
+ }
5882
+
5883
+ @keyframes movePanel {
5884
+ from {
5885
+ transform: translateX(var(--sjs-pd-tab-move-margin));
5886
+ }
5887
+ to {
5888
+ transform: translateX(0);
5889
+ }
5890
+ }
5891
+ .sd-paneldynamic__panel-wrapper--fade-in-left,
5892
+ .sd-paneldynamic__panel-wrapper--fade-in-right {
5893
+ animation-name: movePanel, changeHeight, paddingFadeIn, fadeIn;
5894
+ animation-duration: var(--sjs-pd-tab-move-in-duration, 250ms), var(--sjs-pd-tab-height-change-duration, 250ms), var(--sjs-pd-tab-height-change-duration, 250ms), var(--sjs-pd-tab-fade-in-duration, 250ms);
5895
+ animation-delay: var(--sjs-pd-tab-move-in-delay, 100ms), var(--sjs-pd-tab-height-change-delay, 0ms), var(--sjs-pd-tab-height-change-delay, 0ms), var(--sjs-pd-tab-fade-in-delay, 100ms);
5896
+ animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
5897
+ animation-fill-mode: forwards;
5898
+ opacity: 0;
5899
+ padding-bottom: 0;
5900
+ transform: translateX(var(--sjs-pd-tab-move-margin));
5901
+ height: var(--animation-height-from);
5902
+ --animation-padding-top: 0;
5903
+ --animation-padding-bottom: calc(1 * var(--sd-base-padding));
5904
+ }
5905
+
5906
+ .sd-paneldynamic__panel-wrapper--fade-in-left {
5907
+ --sjs-pd-tab-move-margin: calc(1 * var(--sjs-pd-tab-move-in-margin, 50%));
5908
+ }
5909
+
5910
+ .sd-paneldynamic__panel-wrapper--fade-in-right {
5911
+ --sjs-pd-tab-move-margin: calc(-1 * var(--sjs-pd-tab-move-in-margin, 50%));
5912
+ }
5913
+
5914
+ .sd-paneldynamic__panel-wrapper--fade-out-left,
5915
+ .sd-paneldynamic__panel-wrapper--fade-out-right {
5916
+ animation-name: fadeIn, movePanel;
5917
+ animation-duration: var(--sjs-pd-tab-fade-out-duration, 250ms), var(--sjs-pd-tab-move-out-duration, 250ms);
5918
+ animation-delay: var(--sjs-pd-tab-fade-out-delay, 0ms), var(--sjs-pd-tab-move-out-delay, 0ms);
5919
+ animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
5920
+ animation-direction: reverse;
5921
+ animation-fill-mode: forwards;
5922
+ position: absolute;
5923
+ left: var(--sd-base-padding);
5924
+ top: 0;
5925
+ width: calc(100% - 2 * var(--sd-base-padding));
5926
+ }
5927
+
5928
+ .sd-paneldynamic__panel-wrapper--fade-out-left {
5929
+ --sjs-pd-tab-move-margin: calc(-1 * var(--sjs-pd-tab-move-out-margin, 50%));
5930
+ }
5931
+
5932
+ .sd-paneldynamic__panel-wrapper--fade-out-right {
5933
+ --sjs-pd-tab-move-margin: calc(1 * var(--sjs-pd-tab-move-out-margin, 50%));
5934
+ }
5935
+
5936
+ .sd-paneldynamic__panel-wrapper--fade-in,
5937
+ .sd-paneldynamic__panel-wrapper--fade-out {
5938
+ animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
5939
+ animation-fill-mode: forwards;
5940
+ --animation-padding-top: 0;
5941
+ --animation-padding-bottom: calc(1 * var(--sd-base-padding));
5942
+ min-height: 0 !important;
5943
+ }
5944
+
5945
+ .sd-paneldynamic__panel-wrapper--fade-in {
5946
+ opacity: 0;
5947
+ animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
5948
+ animation-duration: var(--sjs-pd-list-fade-in-duration, 500ms), var(--sjs-pd-list-move-in-duration, 250ms), var(--sjs-pd-list-move-in-duration, 250ms);
5949
+ animation-delay: var(--sjs-pd-list-fade-in-delay, 250ms), 0s, 0s;
5950
+ }
5951
+
5952
+ .sd-paneldynamic__panel-wrapper--fade-out {
5953
+ animation-direction: reverse;
5954
+ animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
5955
+ animation-duration: var(--sjs-pd-list-fade-out-duration, 150ms), var(--sjs-pd-list-move-out-duration, 250ms), var(--sjs-pd-list-move-out-duration, 250ms);
5956
+ animation-delay: 0s, var(--sjs-pd-list-move-out-delay, 100ms), var(--sjs-pd-list-move-out-delay, 100ms);
5957
+ --animation-padding-bottom: calc(1 * var(--sd-base-padding));
5958
+ }
5959
+
5430
5960
  :root {
5431
5961
  --sjs-transition-duration: 150ms;
5432
5962
  }
@@ -5594,7 +6124,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5594
6124
  width: 100%;
5595
6125
  }
5596
6126
 
5597
- .sd-file__preview {
6127
+ .sd-file__preview-item {
5598
6128
  position: relative;
5599
6129
  display: flex;
5600
6130
  align-items: stretch;
@@ -5603,13 +6133,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5603
6133
  width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5604
6134
  margin: 0;
5605
6135
  }
5606
- .sd-file__preview .sd-file__default-image {
6136
+ .sd-file__preview-item .sd-file__default-image {
5607
6137
  width: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5608
- height: 90px;
6138
+ height: calc(8.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5609
6139
  }
5610
- .sd-file__preview img:hover + .sd-file__remove-file-button,
5611
- .sd-file__preview svg:hover + .sd-file__remove-file-button,
5612
- .sd-file__preview .sd-file__remove-file-button:hover {
6140
+ .sd-file__preview-item img:hover + .sd-file__remove-file-button,
6141
+ .sd-file__preview-item svg:hover + .sd-file__remove-file-button,
6142
+ .sd-file__preview-item .sd-file__remove-file-button:hover {
5613
6143
  opacity: 1;
5614
6144
  }
5615
6145
 
@@ -5682,7 +6212,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5682
6212
  .sd-file--single-image {
5683
6213
  height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
5684
6214
  }
5685
- .sd-file--single-image .sd-file__preview {
6215
+ .sd-file--single-image .sd-file__preview-item {
5686
6216
  width: 100%;
5687
6217
  margin: 0;
5688
6218
  }
@@ -5798,6 +6328,38 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5798
6328
  cursor: default;
5799
6329
  }
5800
6330
 
6331
+ .sd-file--readonly .sd-context-btn {
6332
+ display: none;
6333
+ }
6334
+ .sd-file--readonly .sd-file__decorator {
6335
+ border-color: transparent;
6336
+ }
6337
+ .sd-file--readonly .sd-file__actions-container {
6338
+ display: none;
6339
+ }
6340
+ .sd-file--readonly .sd-file__image-wrapper {
6341
+ background: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
6342
+ }
6343
+ .sd-file--readonly .sd-file__drag-area-placeholder {
6344
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
6345
+ }
6346
+
6347
+ .sd-file--preview .sd-context-btn {
6348
+ display: none;
6349
+ }
6350
+ .sd-file--preview .sd-file__decorator {
6351
+ border-color: transparent;
6352
+ }
6353
+ .sd-file--preview .sd-file__image-wrapper {
6354
+ background: transparent;
6355
+ }
6356
+ .sd-file--preview .sd-file__actions-container {
6357
+ display: none;
6358
+ }
6359
+ .sd-file--preview .sd-file__drag-area-placeholder {
6360
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
6361
+ }
6362
+
5801
6363
  .sd-hidden {
5802
6364
  display: none !important;
5803
6365
  }
@@ -6192,6 +6754,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
6192
6754
  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
6193
6755
  }
6194
6756
 
6757
+ .sd-question--preview .sd-multipletext__item-title {
6758
+ border: none;
6759
+ }
6760
+
6195
6761
  .sd-multipletext__item {
6196
6762
  flex-grow: 1;
6197
6763
  }
@@ -6764,6 +7330,19 @@ svg.sd-action--icon {
6764
7330
  margin: auto;
6765
7331
  }
6766
7332
 
7333
+ [dir=rtl] .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector,
7334
+ [style*="direction:rtl"] .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector,
7335
+ [style*="direction: rtl"] .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
7336
+ right: unset;
7337
+ left: calc(50% + 4px);
7338
+ }
7339
+ [dir=rtl] .sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector,
7340
+ [style*="direction:rtl"] .sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector,
7341
+ [style*="direction: rtl"] .sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
7342
+ right: unset;
7343
+ left: calc(50% + 8px);
7344
+ }
7345
+
6767
7346
  .sv_progress-toc {
6768
7347
  padding: var(--sjs-base-unit, var(--base-unit, 8px));
6769
7348
  max-width: calc(42 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -7181,7 +7760,7 @@ sv-components-container,
7181
7760
  width: auto;
7182
7761
  }
7183
7762
  .sd-root-modern.sd-root-modern--mobile .sd-element__title--expandable:before {
7184
- left: calc(-2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
7763
+ inset-inline-start: calc(-2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
7185
7764
  }
7186
7765
  .sd-root-modern.sd-root-modern--mobile .sd-title.sd-container-modern__title {
7187
7766
  flex-direction: column;
@@ -7191,6 +7770,7 @@ sv-components-container,
7191
7770
  }
7192
7771
  .sd-root-modern.sd-root-modern--mobile .sd-question.sd-question--table > .sd-question__content {
7193
7772
  padding-top: 0;
7773
+ --animation-padding-top: 0;
7194
7774
  }
7195
7775
  .sd-root-modern.sd-root-modern--mobile .sd-question--table,
7196
7776
  .sd-root-modern.sd-root-modern--mobile .sd-question--scroll {