survey-react 1.10.2 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "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.10.2
+ * surveyjs - Survey JavaScript library v1.10.3
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -505,6 +505,392 @@ sv-brand-info, .sv-brand-info {
   font-weight: 600;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
+.sv-ranking {
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.sv-ranking-item {
+  cursor: pointer;
+  position: relative;
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  opacity: 1;
+}
+
+.sv-ranking-item:focus .sv-ranking-item__icon--hover {
+  visibility: hidden;
+}
+
+.sv-ranking-item:hover:not(:focus) .sv-ranking-item__icon--hover {
+  visibility: visible;
+}
+
+.sv-question--disabled .sv-ranking-item:hover .sv-ranking-item__icon--hover {
+  visibility: hidden;
+}
+
+.sv-ranking-item:focus {
+  outline: none;
+}
+
+.sv-ranking-item:focus .sv-ranking-item__icon--focus {
+  visibility: visible;
+  top: calc(0.6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-ranking-item:focus .sv-ranking-item__index {
+  background: var(--sjs-general-backcolor, var(--background, #fff));
+  outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+
+.sv-ranking-item__content.sv-ranking-item__content {
+  display: flex;
+  align-items: center;
+  line-height: 1em;
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-ranking-item__icon-container {
+  position: relative;
+  left: 0;
+  top: 0;
+  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))));
+}
+
+.sv-ranking-item--disabled.sv-ranking-item--disabled,
+.sv-ranking-item--readonly.sv-ranking-item--readonly,
+.sv-ranking-item--preview.sv-ranking-item--preview {
+  cursor: initial;
+  user-select: initial;
+  -webkit-user-select: initial;
+}
+.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,
+.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,
+.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 {
+  visibility: hidden;
+}
+
+.sv-ranking-item__icon.sv-ranking-item__icon {
+  visibility: hidden;
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  position: absolute;
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
+  width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-ranking-item__index.sv-ranking-item__index {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  border-radius: 100%;
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  box-sizing: border-box;
+  font-weight: 600;
+  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;
+}
+.sv-ranking-item__index.sv-ranking-item__index svg {
+  fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  width: var(--sjs-internal-font-editorfont-size);
+  height: var(--sjs-internal-font-editorfont-size);
+}
+
+.sv-ranking-item__text {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  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))));
+}
+
+.sd-ranking--disabled .sv-ranking-item__text {
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  opacity: 0.25;
+}
+
+.sv-ranking-item--disabled .sv-ranking-item__text {
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  opacity: 0.25;
+}
+
+.sv-ranking-item--readonly .sv-ranking-item__index {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+
+.sv-ranking-item--preview .sv-ranking-item__index {
+  background-color: transparent;
+  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
+  box-sizing: border-box;
+}
+
+.sv-ranking-item__ghost.sv-ranking-item__ghost {
+  display: none;
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+[dir=rtl] .sv-ranking-item__ghost {
+  left: initilal;
+  right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-ranking-item--ghost .sv-ranking-item__ghost {
+  display: block;
+}
+
+.sv-ranking-item--ghost .sv-ranking-item__content {
+  visibility: hidden;
+}
+
+.sv-ranking-item--drag .sv-ranking-item__content {
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-ranking--drag .sv-ranking-item:hover .sv-ranking-item__icon {
+  visibility: hidden;
+}
+
+.sv-ranking-item--drag .sv-ranking-item__icon--hover {
+  visibility: visible;
+}
+
+.sv-ranking--mobile .sv-ranking-item__icon--hover {
+  visibility: visible;
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
+.sv-ranking--mobile.sv-ranking--drag .sv-ranking-item--ghost .sv-ranking-item__icon.sv-ranking-item__icon--hover {
+  visibility: hidden;
+}
+
+.sv-ranking--mobile.sv-ranking-shortcut {
+  max-width: 80%;
+}
+
+.sv-ranking--mobile .sv-ranking-item__index.sv-ranking-item__index {
+  margin-left: 0;
+}
+.sv-ranking--mobile .sd-element--with-frame .sv-ranking-item__icon {
+  margin-left: 0;
+}
+
+.sv-ranking--design-mode .sv-ranking-item:hover .sv-ranking-item__icon {
+  visibility: hidden;
+}
+
+.sv-ranking--disabled {
+  opacity: 0.8;
+}
+
+.sv-ranking-shortcut[hidden] {
+  display: none;
+}
+
+.sv-ranking-shortcut .sv-ranking-item__icon {
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+
+.sv-ranking-shortcut .sv-ranking-item__text {
+  margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-ranking-shortcut .sv-ranking-item__icon--hover {
+  visibility: visible;
+}
+
+.sv-ranking-shortcut .sv-ranking-item__icon {
+  width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sv-ranking-shortcut .sv-ranking-item__content {
+  padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-ranking-shortcut .sv-ranking-item__icon-container {
+  margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sv-ranking-shortcut {
+  cursor: grabbing;
+  position: absolute;
+  z-index: 10000;
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: 100px;
+  max-width: 400px;
+  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));
+  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--select-to-rank {
+  display: flex;
+}
+
+.sv-ranking--select-to-rank-vertical {
+  flex-direction: column-reverse;
+}
+.sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
+  margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+  height: 1px;
+}
+.sv-ranking--select-to-rank-vertical .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-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;
+  animation-timing-function: linear;
+  animation-duration: var(--sjs-ranking-move-out-duration, 150ms), var(--sjs-ranking-fade-out-duration, 100ms);
+  animation-delay: var(--sjs-ranking-move-out-delay, 0ms), 0s;
+}
+
+.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;
+  animation-timing-function: linear;
+  animation-duration: var(--sjs-ranking-move-in-duration, 150ms), var(--sjs-ranking-fade-in-duration, 100ms);
+  animation-delay: 0s, var(--sjs-ranking-fade-in-delay, 150ms);
+}
+
+.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;
+  animation-duration: var(--sjs-ranking-fade-in-duration, 100ms);
+  animation-delay: 0;
+}
+
+.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;
+  animation-duration: var(--sjs-ranking-fade-out-duration, 100ms);
+  animation-delay: 0;
+}
+
+@keyframes sv-animate-item-opacity-reverse-keyframes {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes sv-animate-item-opacity-keyframes {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container {
+  max-width: calc(50% - 1px);
+}
+.sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
+  width: 1px;
+}
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
+  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.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(5 * (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: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-ranking__container-placeholder {
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-style: normal;
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  white-space: normal;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  box-sizing: border-box;
+}
+
+.sv-ranking__container {
+  flex: 1;
+}
+
+.sv-ranking__container--empty {
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.sv-ranking__containers-divider {
+  background: var(--sjs-border-default, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
+}
+
+.sv-ranking__container--from .sv-ranking-item__icon--focus {
+  display: none;
+}
+
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
+  left: 0 !important;
+  padding-left: 16px;
+}
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item .sv-ranking-item__ghost {
+  left: initial;
+}
+
 body {
   --sv-default-mark: true;
 }