survey-react 1.11.10 → 1.11.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react",
-  "version": "1.11.10",
+  "version": "1.11.12",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

package/survey.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.10
+ * surveyjs - Survey JavaScript library v1.11.12
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -272,6 +272,7 @@
   border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
   display: flex;
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  box-sizing: content-box;
 }
 .sv_window--collapsed .sv_window_content {
   display: none;
@@ -339,26 +340,40 @@
   fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 }
 
-sv-brand-info, .sv-brand-info {
+sv-brand-info,
+.sv-brand-info {
   z-index: 1;
   position: relative;
   margin-top: 1px;
 }
 
 .sv-brand-info {
-  width: 100%;
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-  text-align: center;
+  text-align: right;
   color: #161616;
-  background: white;
-  padding: 32px 0;
-  box-shadow: 0px -1px 0px #D6D6D6;
+  padding: 24px 40px;
 }
 .sv-brand-info a {
   color: #161616;
   text-decoration-line: underline;
 }
 
+.sd-body--static .sv-brand-info {
+  padding-top: 0;
+  margin-top: 16px;
+}
+
+.sd-body--responsive .sv-brand-info {
+  padding-top: 16px;
+  margin-top: -8px;
+}
+
+.sd-root-modern--mobile .sv-brand-info {
+  padding: 48px 24px 8px 24px;
+  margin-top: 0;
+  text-align: center;
+}
+
 .sv-brand-info__text {
   font-weight: 600;
   font-size: var(--sjs-font-size, 16px);
@@ -377,11 +392,17 @@ sv-brand-info, .sv-brand-info {
   font-weight: 400;
   font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
   line-height: var(--sjs-font-size, 16px);
+  padding-top: 4px;
 }
 .sv-brand-info__terms a {
   color: #909090;
 }
 
+.sd-body--responsive .sv-brand-info {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 :root {
   --sjs-transition-duration: 150ms;
 }
@@ -550,7 +571,6 @@ sv-brand-info, .sv-brand-info {
 .sv-ranking-item {
   cursor: pointer;
   position: relative;
-  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 1;
 }
 
@@ -592,11 +612,12 @@ sv-brand-info, .sv-brand-info {
 .sv-ranking-item__icon-container {
   position: relative;
   left: 0;
-  top: 0;
+  top: 5px;
   bottom: 0;
   flex-shrink: 0;
   width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  align-self: flex-start;
 }
 
 .sv-ranking-item--disabled.sv-ranking-item--disabled,
@@ -640,6 +661,7 @@ sv-brand-info, .sv-brand-info {
   margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   transition: outline var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
   outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  align-self: self-start;
 }
 .sv-ranking-item__index.sv-ranking-item__index svg {
   fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
@@ -657,6 +679,15 @@ sv-brand-info, .sv-brand-info {
   font-size: var(--sjs-internal-font-editorfont-size);
   line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  overflow-wrap: break-word;
+  word-break: break-all;
+  align-self: self-start;
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sv-ranking-item__text .sv-string-viewer {
+  overflow: initial;
+  white-space: pre-line;
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
@@ -696,6 +727,13 @@ sv-brand-info, .sv-brand-info {
   right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sv-ranking-item--ghost {
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-ranking-item--ghost .sv-ranking-item__text .sv-string-viewer {
+  white-space: unset;
+}
+
 .sv-ranking-item--ghost .sv-ranking-item__ghost {
   display: block;
 }
@@ -785,6 +823,13 @@ sv-brand-info, .sv-brand-info {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
 }
+.sv-ranking-shortcut .sv-ranking-item {
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-ranking-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-viewer {
+  overflow: hidden;
+  white-space: nowrap;
+}
 
 .sv-ranking--select-to-rank {
   display: flex;
@@ -806,7 +851,6 @@ sv-brand-info, .sv-brand-info {
 }
 
 .sv-ranking-item--animate-item-removing {
-  --animation-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   animation-name: moveIn, fadeIn;
   animation-direction: reverse;
   animation-fill-mode: forwards;
@@ -816,7 +860,6 @@ sv-brand-info, .sv-brand-info {
 }
 
 .sv-ranking-item--animate-item-adding {
-  --animation-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   animation-name: moveIn, fadeIn;
   opacity: 0;
   animation-fill-mode: forwards;
@@ -826,7 +869,6 @@ sv-brand-info, .sv-brand-info {
 }
 
 .sv-ranking-item--animate-item-adding-empty {
-  --animation-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   animation-name: fadeIn;
   opacity: 0;
   animation-timing-function: linear;
@@ -835,7 +877,6 @@ sv-brand-info, .sv-brand-info {
 }
 
 .sv-ranking-item--animate-item-removing-empty {
-  --animation-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   animation-name: fadeIn;
   animation-direction: reverse;
   animation-timing-function: linear;
@@ -2952,10 +2993,11 @@ f-panel {
 
 .sv-ranking-item__icon-container {
   left: 0;
-  top: 0;
+  top: 5px;
   bottom: 0;
   width: calc(3 * var(--base-unit, 8px));
   flex-shrink: 0;
+  align-items: self-start;
 }
 .sv-ranking-item__icon-container svg:nth-of-type(1) {
   height: 16px;
@@ -2994,11 +3036,14 @@ f-panel {
 
 .sv-ranking-item__text {
   display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  word-break: break-all;
   margin: 0 calc(2 * var(--base-unit, 8px));
 }
+.sv-ranking-item__text .sv-string-viewer {
+  overflow: initial;
+  white-space: pre-line;
+}
 
 .sv-ranking-item__ghost {
   display: none;
@@ -3016,6 +3061,13 @@ f-panel {
   right: 25px;
 }
 
+.sv-ranking-item--ghost {
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-ranking-item--ghost .sv-ranking-item__text .sv-string-viewer {
+  white-space: unset;
+}
+
 .sv-ranking-item--ghost .sv-ranking-item__ghost {
   display: block;
 }