survey-creator-core 2.0.6 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-core",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "keywords": [
     "Survey",
@@ -28,7 +28,7 @@
   "typings": "./typings/entries/index.d.ts",
   "peerDependencies": {
     "ace-builds": "^1.4.12",
-    "survey-core": "2.0.6"
+    "survey-core": "2.0.7"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v2.0.6
+ * SurveyJS Creator v2.0.7
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -228,7 +228,7 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v2.0.6
+ * SurveyJS Creator v2.0.7
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -2555,7 +2555,7 @@ svc-tab-designer {
 }
 .svc-creator-popup.sv-popup--modal-overlay > .sv-popup__container {
   width: 100vw;
-  max-height: calc(100vh- var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
+  max-height: calc(100vh - var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
   height: calc(100vh - var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
   display: flex;
   border-radius: var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) 0px 0px;
@@ -5220,14 +5220,24 @@ svc-question .sv-action-bar,
 .sd-panel .svc-question__content {
   border-radius: 0;
   box-shadow: none;
+}
+.sd-panel .svc-question__content::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
   outline: var(--ctr-survey-question-panel-border-width-nested, var(--lbr-stroke-x1)) dashed var(--ctr-survey-question-panel-border-color-nested, var(--sjs-border-25, #d4d4d4));
   outline-offset: calc(-1 * var(--ctr-survey-question-panel-border-width-nested, var(--lbr-stroke-x1)));
+  z-index: 10;
 }
-.sd-panel .svc-hovered > .svc-question__content:not(.svc-question__content--dragged) {
-  box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-hovered, var(--lbr-stroke-x2)) var(--ctr-survey-question-panel-border-color-hovered, var(--sjs-secondary-background-25, rgba(25, 179, 148, 0.2509803922))) inset;
+.sd-panel .svc-hovered > .svc-question__content:not(.svc-question__content--dragged)::after {
+  box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-hovered, var(--lbr-stroke-x2)) var(--ctr-survey-question-panel-border-color-hovered, var(--sjs-secondary-background-25, rgba(25, 179, 148, 0.2509803922))) inset, 0 0 0 var(--ctr-survey-question-panel-border-width-hovered, var(--lbr-stroke-x2)) var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, white)) inset;
   outline: none;
 }
-.sd-panel .svc-question__content.svc-question__content--selected:not(.svc-question__content--dragged) {
+.sd-panel .svc-question__content.svc-question__content--selected:not(.svc-question__content--dragged)::after {
   box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-selected, var(--lbr-stroke-x2)) var(--ctr-survey-question-panel-border-color-selected, var(--sjs-secondary-background-500, #19b394)) inset;
   outline: none;
 }
@@ -6061,7 +6071,6 @@ svc-question .sv-action-bar,
 }
 
 .svc-image-item-value--new {
-  display: none;
   height: max-content;
 }
 .svc-image-item-value--new .sd-imagepicker__image {
@@ -6075,10 +6084,6 @@ svc-question .sv-action-bar,
   border: var(--ctr-survey-image-picker-item-border-width-hovered-placeholder, var(--lbr-stroke-x2)) solid var(--ctr-survey-image-picker-item-border-color-hovered-placeholder, var(--sjs-primary-background-500, #19b394));
   background: var(--ctr-survey-image-picker-item-background-color-hovered-placeholder, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
 }
-.svc-image-item-value--file-dragging .svc-image-item-value__item {
-  position: relative;
-  z-index: 2;
-}
 
 .svc-question__content--selected .svc-image-item-value--new {
   display: inline-block;
@@ -6092,8 +6097,44 @@ svc-question .sv-action-bar,
 }
 
 .svc-image-item-value--new .svc-image-item-value-controls {
-  top: calc(50% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(50% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sd-imagepicker {
+  container-type: inline-size;
+}
+
+.svc-image-item-value--new.svc-image-item-value--single .svc-image-item-value-controls {
+  padding: 0 calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+@container (max-width: 496px) {
+  .svc-image-item-value--new.svc-image-item-value--single .svc-image-item-value-controls {
+    padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
+  }
+}
+@container (max-width: 176px) {
+  .svc-image-item-value__placeholder {
+    display: none;
+  }
+}
+.svc-image-item-value__placeholder {
+  font-family: var(--lbr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--lbr-font-default-size, var(--lbr-font-size-x2));
+  font-style: normal;
+  line-height: var(--lbr-font-default-line-height, var(--lbr-line-height-x3));
+  color: var(--ctr-survey-placeholder-text-color, rgba(0, 0, 0, 0.5));
+  text-align: center;
+  font-weight: 400;
+  white-space: normal;
 }
 
 .svc-image-item-value--new .svc-image-item-value-controls__button {
@@ -6156,7 +6197,7 @@ svc-question .sv-action-bar,
   width: 100%;
 }
 .svc-image-item-value--single .sd-imagepicker__image {
-  height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(36 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-image-item-value__loading {
@@ -9503,6 +9544,8 @@ input.spg-input:read-only::placeholder {
   padding: var(--ctr-button-group-padding, var(--sjs-spacing-x05));
   align-items: center;
   align-self: stretch;
+  box-sizing: border-box;
+  overflow-x: auto;
   border-radius: var(--ctr-button-group-corner-radius, var(--sjs-corner-radius-x075));
   box-shadow: inset 0 0 0 var(--ctr-button-group-border-width, var(--sjs-stroke-x1)) var(--ctr-button-group-border-color, var(--sjs-border-10, gainsboro));
   background-color: var(--ctr-button-group-background-color, var(--sjs-layer-3-background-500, #f4f4f4));
@@ -9538,7 +9581,6 @@ input.spg-input:read-only::placeholder {
   align-self: stretch;
   flex-basis: 0;
   flex-grow: 1;
-  width: 0;
   border-radius: var(--ctr-button-group-item-corner-radius, var(--sjs-corner-radius-x075));
   box-shadow: inset 0 0 0 var(--ctr-button-group-item-border-width, 0px) var(--ctr-button-group-item-border-color, var(--sjs-border-10, gainsboro));
   background-color: var(--ctr-button-group-item-background-color, var(--sjs-layer-3-background-500, #f4f4f4));
@@ -9572,15 +9614,13 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-button-group__item-decorator {
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 
 .spg-button-group__item-caption {
   display: block;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .spg-question--disabled .spg-button-group {

package/survey-creator-core.fontless.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v2.0.6
+ * SurveyJS Creator v2.0.7
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -2326,7 +2326,7 @@ svc-tab-designer {
 }
 .svc-creator-popup.sv-popup--modal-overlay > .sv-popup__container {
   width: 100vw;
-  max-height: calc(100vh- var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
+  max-height: calc(100vh - var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
   height: calc(100vh - var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
   display: flex;
   border-radius: var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) 0px 0px;
@@ -4991,14 +4991,24 @@ svc-question .sv-action-bar,
 .sd-panel .svc-question__content {
   border-radius: 0;
   box-shadow: none;
+}
+.sd-panel .svc-question__content::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
   outline: var(--ctr-survey-question-panel-border-width-nested, var(--lbr-stroke-x1)) dashed var(--ctr-survey-question-panel-border-color-nested, var(--sjs-border-25, #d4d4d4));
   outline-offset: calc(-1 * var(--ctr-survey-question-panel-border-width-nested, var(--lbr-stroke-x1)));
+  z-index: 10;
 }
-.sd-panel .svc-hovered > .svc-question__content:not(.svc-question__content--dragged) {
-  box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-hovered, var(--lbr-stroke-x2)) var(--ctr-survey-question-panel-border-color-hovered, var(--sjs-secondary-background-25, rgba(25, 179, 148, 0.2509803922))) inset;
+.sd-panel .svc-hovered > .svc-question__content:not(.svc-question__content--dragged)::after {
+  box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-hovered, var(--lbr-stroke-x2)) var(--ctr-survey-question-panel-border-color-hovered, var(--sjs-secondary-background-25, rgba(25, 179, 148, 0.2509803922))) inset, 0 0 0 var(--ctr-survey-question-panel-border-width-hovered, var(--lbr-stroke-x2)) var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, white)) inset;
   outline: none;
 }
-.sd-panel .svc-question__content.svc-question__content--selected:not(.svc-question__content--dragged) {
+.sd-panel .svc-question__content.svc-question__content--selected:not(.svc-question__content--dragged)::after {
   box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-selected, var(--lbr-stroke-x2)) var(--ctr-survey-question-panel-border-color-selected, var(--sjs-secondary-background-500, #19b394)) inset;
   outline: none;
 }
@@ -5832,7 +5842,6 @@ svc-question .sv-action-bar,
 }
 
 .svc-image-item-value--new {
-  display: none;
   height: max-content;
 }
 .svc-image-item-value--new .sd-imagepicker__image {
@@ -5846,10 +5855,6 @@ svc-question .sv-action-bar,
   border: var(--ctr-survey-image-picker-item-border-width-hovered-placeholder, var(--lbr-stroke-x2)) solid var(--ctr-survey-image-picker-item-border-color-hovered-placeholder, var(--sjs-primary-background-500, #19b394));
   background: var(--ctr-survey-image-picker-item-background-color-hovered-placeholder, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
 }
-.svc-image-item-value--file-dragging .svc-image-item-value__item {
-  position: relative;
-  z-index: 2;
-}
 
 .svc-question__content--selected .svc-image-item-value--new {
   display: inline-block;
@@ -5863,8 +5868,44 @@ svc-question .sv-action-bar,
 }
 
 .svc-image-item-value--new .svc-image-item-value-controls {
-  top: calc(50% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(50% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sd-imagepicker {
+  container-type: inline-size;
+}
+
+.svc-image-item-value--new.svc-image-item-value--single .svc-image-item-value-controls {
+  padding: 0 calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+@container (max-width: 496px) {
+  .svc-image-item-value--new.svc-image-item-value--single .svc-image-item-value-controls {
+    padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
+  }
+}
+@container (max-width: 176px) {
+  .svc-image-item-value__placeholder {
+    display: none;
+  }
+}
+.svc-image-item-value__placeholder {
+  font-family: var(--lbr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--lbr-font-default-size, var(--lbr-font-size-x2));
+  font-style: normal;
+  line-height: var(--lbr-font-default-line-height, var(--lbr-line-height-x3));
+  color: var(--ctr-survey-placeholder-text-color, rgba(0, 0, 0, 0.5));
+  text-align: center;
+  font-weight: 400;
+  white-space: normal;
 }
 
 .svc-image-item-value--new .svc-image-item-value-controls__button {
@@ -5927,7 +5968,7 @@ svc-question .sv-action-bar,
   width: 100%;
 }
 .svc-image-item-value--single .sd-imagepicker__image {
-  height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(36 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-image-item-value__loading {
@@ -9274,6 +9315,8 @@ input.spg-input:read-only::placeholder {
   padding: var(--ctr-button-group-padding, var(--sjs-spacing-x05));
   align-items: center;
   align-self: stretch;
+  box-sizing: border-box;
+  overflow-x: auto;
   border-radius: var(--ctr-button-group-corner-radius, var(--sjs-corner-radius-x075));
   box-shadow: inset 0 0 0 var(--ctr-button-group-border-width, var(--sjs-stroke-x1)) var(--ctr-button-group-border-color, var(--sjs-border-10, gainsboro));
   background-color: var(--ctr-button-group-background-color, var(--sjs-layer-3-background-500, #f4f4f4));
@@ -9309,7 +9352,6 @@ input.spg-input:read-only::placeholder {
   align-self: stretch;
   flex-basis: 0;
   flex-grow: 1;
-  width: 0;
   border-radius: var(--ctr-button-group-item-corner-radius, var(--sjs-corner-radius-x075));
   box-shadow: inset 0 0 0 var(--ctr-button-group-item-border-width, 0px) var(--ctr-button-group-item-border-color, var(--sjs-border-10, gainsboro));
   background-color: var(--ctr-button-group-item-background-color, var(--sjs-layer-3-background-500, #f4f4f4));
@@ -9343,15 +9385,13 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-button-group__item-decorator {
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 
 .spg-button-group__item-caption {
   display: block;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .spg-question--disabled .spg-button-group {