survey-react 1.9.125 → 1.9.127

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.125
+ * surveyjs - Survey JavaScript library v1.9.127
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1028,65 +1028,87 @@ sv-popup {
 
 .sv_window {
   position: fixed;
-  bottom: 3px;
-  right: 10px;
-  background-color: cadetblue;
-  padding: 1px;
-  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  white-space: normal;
-  background-color: #fff;
-  -webkit-background-clip: padding-box;
+  bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
   background-clip: padding-box;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  line-break: auto;
   z-index: 100;
+  max-height: 90vh;
+  overflow: auto;
+  box-sizing: border-box;
 }
 
-.sv_window_title {
-  padding: 8px 14px;
-  margin: 0;
-  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
-  background-color: #f7f7f7;
-  border-bottom: 1px solid #ebebeb;
-  border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
+.sv_window_content {
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+  overflow: hidden;
+}
+
+.sv_window--collapsed .sv_window_header {
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
   display: flex;
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+.sv_window--collapsed .sv_window_content {
+  display: none;
 }
 
-.sv_window_content {
-  padding: 0;
-  margin: 0;
-  max-height: 80vh;
-  overflow-y: auto;
+.sv_window_header_title_collapsed {
+  color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-style: normal;
+  font-weight: 600;
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  flex: 1;
+  display: flex;
+  justify-content: start;
+  align-items: center;
 }
 
-.sv_window_title a,
-.sv_window_title a:link,
-.sv_window_title a:visited {
-  text-decoration: none;
-  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
+.sv_window_header_description {
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  font-feature-settings: "salt" on;
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-style: normal;
-  color: black;
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.sv_window_buttons_container {
+  position: absolute;
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
+  right: var(--sjs-base-unit, var(--base-unit, 8px));
+  display: flex;
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
+  z-index: 1;
 }
 
-.sv_window_button .sv-svg-icon {
-  margin: 4px;
+.sv_window_button {
+  display: flex;
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  cursor: pointer;
+}
+.sv_window_button:hover, .sv_window_button:active {
+  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+}
+.sv_window_button:hover svg use, .sv_window_button:hover svg path, .sv_window_button:active svg use, .sv_window_button:active svg path {
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sv_window_button:active {
+  opacity: 0.5;
+}
+.sv_window_button svg use, .sv_window_button svg path {
+  fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 }
 
 sv-brand-info, .sv-brand-info {
@@ -1743,6 +1765,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
+.sd-element__header .sv-string-editor {
+  max-width: 100%;
+  white-space: normal;
+}
+
 .sd-element__title {
   font-size: 0;
   line-height: 0;
@@ -1762,10 +1789,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: 0;
   line-height: 0;
 }
-.sd-element__title .sv-string-editor {
-  max-width: 100%;
-  white-space: normal;
-}
 .sd-element__title .sv-title-actions__title {
   white-space: nowrap;
 }
@@ -1866,6 +1889,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
+.sd-question__content--support-container-queries {
+  container-type: inline-size;
+}
+
 .sd-question--title-top > .sd-question__erbox--above-question {
   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
@@ -2209,6 +2236,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sd-text__character-counter.sd-text__character-counter--big:focus-within {
+  padding-inline-end: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sd-remaining-character-counter {
   display: none;
   flex-direction: row;
@@ -2587,27 +2618,35 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__cell:last-of-type {
   padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:first-of-type > .sd-table__cell {
+  border-top: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
+}
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:last-of-type > .sd-table__cell {
+  border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
+}
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell,
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
+  border-top-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+  border-bottom-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-matrix__text--checked,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell.sd-matrix__text--checked,
 .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 {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-input,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .sd-input,
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input {
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error) .sd-item__decorator,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .sd-item:not(.sd-item--error) .sd-item__decorator,
 .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__decorator {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator,
 .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 {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
 .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 {
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
@@ -2863,6 +2902,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   overflow-x: scroll;
 }
 
+.sd-table__row-disabled > .sd-table__cell {
+  opacity: 0.25;
+}
+
 .sd-table__cell--detail-panel .sd-panel__content {
   padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
@@ -3752,6 +3795,45 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+@container (max-width: 496px) {
+  .sv-ranking--select-to-rank-horizontal {
+    flex-direction: column-reverse;
+  }
+  .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
+    margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+    height: 1px;
+    width: initial;
+  }
+  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty {
+    padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
+    padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .sv-ranking--select-to-rank-horizontal .sv-ranking__container {
+    max-width: initial;
+  }
+  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
+    left: initial;
+  }
+  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
+    left: initial;
+  }
+  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
+    padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+    padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  }
+  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
+    padding-right: initial;
+  }
+}
+@container (max-width: 176px) {
+  .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
+    margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+    margin-right: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  }
+}
 .sd-element--with-frame .sv-ranking--mobile .sv-ranking-item__icon-container {
   margin-left: 0;
   margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -3967,6 +4049,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sd-tagbox.sd-input--disabled {
+  white-space: normal;
+}
+
 .sd-tagbox_clean-button {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));