survey-creator-core 1.12.9 → 1.12.10

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.
Files changed (110) hide show
  1. package/fonts.fontless.css +1 -1
  2. package/fonts.fontless.min.css +1 -1
  3. package/i18n/arabic.js +2 -2
  4. package/i18n/arabic.min.js.LICENSE.txt +1 -1
  5. package/i18n/bulgarian.js +2 -2
  6. package/i18n/bulgarian.min.js.LICENSE.txt +1 -1
  7. package/i18n/croatian.js +2 -2
  8. package/i18n/croatian.min.js.LICENSE.txt +1 -1
  9. package/i18n/czech.js +2 -2
  10. package/i18n/czech.min.js.LICENSE.txt +1 -1
  11. package/i18n/danish.js +2 -2
  12. package/i18n/danish.min.js.LICENSE.txt +1 -1
  13. package/i18n/dutch.js +2 -2
  14. package/i18n/dutch.min.js.LICENSE.txt +1 -1
  15. package/i18n/english.js +1 -1
  16. package/i18n/english.min.js.LICENSE.txt +1 -1
  17. package/i18n/finnish.js +2 -2
  18. package/i18n/finnish.min.js.LICENSE.txt +1 -1
  19. package/i18n/french.js +2 -2
  20. package/i18n/french.min.js.LICENSE.txt +1 -1
  21. package/i18n/german.js +2 -2
  22. package/i18n/german.min.js.LICENSE.txt +1 -1
  23. package/i18n/hebrew.js +2 -2
  24. package/i18n/hebrew.min.js.LICENSE.txt +1 -1
  25. package/i18n/hungarian.js +2 -2
  26. package/i18n/hungarian.min.js.LICENSE.txt +1 -1
  27. package/i18n/index.js +2 -2
  28. package/i18n/index.min.js.LICENSE.txt +1 -1
  29. package/i18n/indonesian.js +2 -2
  30. package/i18n/indonesian.min.js.LICENSE.txt +1 -1
  31. package/i18n/italian.js +2 -2
  32. package/i18n/italian.min.js.LICENSE.txt +1 -1
  33. package/i18n/japanese.js +2 -2
  34. package/i18n/japanese.min.js.LICENSE.txt +1 -1
  35. package/i18n/korean.js +2 -2
  36. package/i18n/korean.min.js.LICENSE.txt +1 -1
  37. package/i18n/malay.js +2 -2
  38. package/i18n/malay.min.js.LICENSE.txt +1 -1
  39. package/i18n/mongolian.js +2 -2
  40. package/i18n/mongolian.min.js.LICENSE.txt +1 -1
  41. package/i18n/norwegian.js +2 -2
  42. package/i18n/norwegian.min.js.LICENSE.txt +1 -1
  43. package/i18n/persian.js +2 -2
  44. package/i18n/persian.min.js.LICENSE.txt +1 -1
  45. package/i18n/polish.js +2 -2
  46. package/i18n/polish.min.js.LICENSE.txt +1 -1
  47. package/i18n/portuguese.js +2 -2
  48. package/i18n/portuguese.min.js.LICENSE.txt +1 -1
  49. package/i18n/romanian.js +2 -2
  50. package/i18n/romanian.min.js.LICENSE.txt +1 -1
  51. package/i18n/russian.js +2 -2
  52. package/i18n/russian.min.js.LICENSE.txt +1 -1
  53. package/i18n/simplified-chinese.js +2 -2
  54. package/i18n/simplified-chinese.min.js.LICENSE.txt +1 -1
  55. package/i18n/slovak.js +2 -2
  56. package/i18n/slovak.min.js.LICENSE.txt +1 -1
  57. package/i18n/spanish.js +2 -2
  58. package/i18n/spanish.min.js.LICENSE.txt +1 -1
  59. package/i18n/swedish.js +2 -2
  60. package/i18n/swedish.min.js.LICENSE.txt +1 -1
  61. package/i18n/tajik.js +2 -2
  62. package/i18n/tajik.min.js.LICENSE.txt +1 -1
  63. package/i18n/thai.js +2 -2
  64. package/i18n/thai.min.js.LICENSE.txt +1 -1
  65. package/i18n/traditional-chinese.js +2 -2
  66. package/i18n/traditional-chinese.min.js.LICENSE.txt +1 -1
  67. package/i18n/turkish.js +2 -2
  68. package/i18n/turkish.min.js.LICENSE.txt +1 -1
  69. package/package.json +2 -2
  70. package/survey-creator-core.css +691 -276
  71. package/survey-creator-core.fontless.css +690 -275
  72. package/survey-creator-core.fontless.css.map +1 -1
  73. package/survey-creator-core.fontless.min.css +20 -18
  74. package/survey-creator-core.i18n.js +2 -2
  75. package/survey-creator-core.i18n.min.js.LICENSE.txt +1 -1
  76. package/survey-creator-core.js +699 -414
  77. package/survey-creator-core.js.map +1 -1
  78. package/survey-creator-core.min.css +21 -19
  79. package/survey-creator-core.min.js +1 -1
  80. package/survey-creator-core.min.js.LICENSE.txt +1 -1
  81. package/themes/default-contrast.js +77 -5
  82. package/themes/default-contrast.js.map +1 -1
  83. package/themes/default-contrast.min.js +1 -1
  84. package/themes/default-contrast.min.js.LICENSE.txt +1 -1
  85. package/themes/default-dark.js +77 -5
  86. package/themes/default-dark.js.map +1 -1
  87. package/themes/default-dark.min.js +1 -1
  88. package/themes/default-dark.min.js.LICENSE.txt +1 -1
  89. package/themes/default-light.js +77 -5
  90. package/themes/default-light.js.map +1 -1
  91. package/themes/default-light.min.js +1 -1
  92. package/themes/default-light.min.js.LICENSE.txt +1 -1
  93. package/themes/index.js +77 -5
  94. package/themes/index.js.map +1 -1
  95. package/themes/index.min.js +1 -1
  96. package/themes/index.min.js.LICENSE.txt +1 -1
  97. package/themes/themes/default.d.ts +150 -6
  98. package/typings/components/action-container-view-model.d.ts +1 -0
  99. package/typings/components/page.d.ts +2 -2
  100. package/typings/components/search-manager.d.ts +16 -0
  101. package/typings/components/tabs/designer-plugin.d.ts +1 -0
  102. package/typings/components/tabs/designer.d.ts +6 -0
  103. package/typings/components/toolbox/toolbox-search-manager.d.ts +8 -0
  104. package/typings/creator-base.d.ts +1 -0
  105. package/typings/creator-events-api.d.ts +1 -1
  106. package/typings/creator-theme/creator-theme-model.d.ts +1 -0
  107. package/typings/entries/index.d.ts +2 -0
  108. package/typings/property-grid/search-manager.d.ts +2 -23
  109. package/typings/themes/default.d.ts +150 -6
  110. package/typings/toolbox.d.ts +1 -1
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * SurveyJS Creator v1.12.9
2
+ * SurveyJS Creator v1.12.10
3
3
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * Github: https://github.com/surveyjs/survey-creator
5
5
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -228,7 +228,7 @@
228
228
  }
229
229
 
230
230
  /*# sourceMappingURL=fonts.fontless.css.map*//*!
231
- * SurveyJS Creator v1.12.9
231
+ * SurveyJS Creator v1.12.10
232
232
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
233
233
  * Github: https://github.com/surveyjs/survey-creator
234
234
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -268,12 +268,16 @@
268
268
  box-sizing: border-box;
269
269
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
270
270
  border-radius: 50%;
271
- width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
272
- height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
271
+ width: var(--ctr-survey-contextual-button-width, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
272
+ height: var(--ctr-survey-contextual-button-height, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
273
+ padding: var(--ctr-survey-contextual-button-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-contextual-button-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-contextual-button-padding-bottom, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-contextual-button-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
273
274
  cursor: pointer;
274
- padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
275
275
  outline: none;
276
276
  }
277
+ .svc-context-button .sv-svg-icon {
278
+ width: var(--ctr-button-contextual-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
279
+ height: var(--ctr-button-contextual-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
280
+ }
277
281
  .svc-context-button use {
278
282
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
279
283
  transition: fill var(--sjs-creator-transition-duration, 150ms);
@@ -456,6 +460,8 @@ svc-tab-json-editor-textarea {
456
460
 
457
461
  .svc-json-error__icon {
458
462
  fill: var(--sjs-special-red, var(--red, #e60a3e));
463
+ width: var(--ctr-code-viewer-code-error-row-icon-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
464
+ height: var(--ctr-code-viewer-code-error-row-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
459
465
  }
460
466
 
461
467
  .svc-json-error__container {
@@ -1697,16 +1703,6 @@ td.st-table__cell:first-of-type span {
1697
1703
  outline: none;
1698
1704
  }
1699
1705
 
1700
- .svc-logic-condition-remove.svc-icon-remove {
1701
- display: none;
1702
- width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1703
- height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1704
- background-repeat: no-repeat;
1705
- background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z%27 fill=%27%23E60A3E%27/%3E%3C/svg%3E%0A");
1706
- background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1707
- background-position: center;
1708
- }
1709
-
1710
1706
  .svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove {
1711
1707
  display: none;
1712
1708
  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1716,6 +1712,10 @@ td.st-table__cell:first-of-type span {
1716
1712
  align-items: center;
1717
1713
  padding: 0;
1718
1714
  }
1715
+ .svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove .sv-svg-icon {
1716
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1717
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1718
+ }
1719
1719
  .svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove use {
1720
1720
  fill: var(--ctr-survey-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
1721
1721
  }
@@ -2178,16 +2178,16 @@ svc-tab-designer {
2178
2178
  .svc-creator--mobile .svc-question__content-actions {
2179
2179
  width: calc(100% + 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2180
2180
  }
2181
- .svc-creator--mobile .svc-question__content-actions .sv-action-bar-item {
2181
+ .svc-creator--mobile .svc-question__content-actions .svc-survey-element-toolbar__item {
2182
2182
  border: 0;
2183
2183
  }
2184
- .svc-creator--mobile .svc-page__content-actions .sv-action-bar {
2184
+ .svc-creator--mobile .svc-page__content-actions .svc-page-toolbar {
2185
2185
  padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
2186
2186
  }
2187
- .svc-creator--mobile .svc-page__content-actions .sv-action-bar .sv-action .sv-action__content {
2187
+ .svc-creator--mobile .svc-page__content-actions .svc-page-toolbar .sv-action .sv-action__content {
2188
2188
  padding-right: 0;
2189
2189
  }
2190
- .svc-creator--mobile .svc-page__content-actions .sv-action-bar .sv-action .sv-action__content .sv-action-bar-item__title--with-icon {
2190
+ .svc-creator--mobile .svc-page-toolbar-item__title--with-icon {
2191
2191
  display: none;
2192
2192
  }
2193
2193
  /*!****************************************************************************************************************************************************************************************!*\
@@ -2512,13 +2512,17 @@ svc-tab-designer {
2512
2512
  }
2513
2513
  .svc-creator-popup .sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
2514
2514
  .svc-creator-popup .sv-list__item.sv-list__item--selected:hover.sv-list__item--group > .sv-list__item-body {
2515
- background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
2516
- color: var(--ctr-list-item-text-color-selected, var(--sjs-general-forecolor, var(--foreground, #161616)));
2515
+ background: var(--ctr-list-item-background-color-selected-submenu, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
2516
+ color: var(--ctr-list-item-text-color-selected-submenu, var(--sjs-general-forecolor, var(--foreground, #161616)));
2517
2517
  font-weight: 400;
2518
2518
  }
2519
2519
  .svc-creator-popup .sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
2520
2520
  .svc-creator-popup .sv-list__item.sv-list__item--selected:hover.sv-list__item--group .sv-list__item-icon use {
2521
- fill: var(--ctr-list-item-icon-color-hovered, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
2521
+ fill: var(--ctr-list-item-icon-color-selected-submenu, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
2522
+ }
2523
+ .svc-creator-popup .sv-list__item--selected.sv-list__item--group .sv-list-item__marker-icon use,
2524
+ .svc-creator-popup .sv-list__item.sv-list__item--selected:hover.sv-list__item--group .sv-list-item__marker-icon use {
2525
+ fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
2522
2526
  }
2523
2527
  .svc-creator-popup.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
2524
2528
  color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
@@ -3383,13 +3387,17 @@ svc-page-navigator,
3383
3387
 
3384
3388
  .svc-page-navigator__navigator-icon {
3385
3389
  display: block;
3386
- height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3387
- width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3388
- border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
3390
+ width: var(--ctr-page-navigator-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3391
+ height: var(--ctr-page-navigator-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3389
3392
  padding: var(--ctr-page-navigator-button-padding, calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3393
+ border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
3390
3394
  cursor: pointer;
3391
3395
  transition: background-color var(--sjs-creator-transition-duration, 150ms);
3392
3396
  }
3397
+ .svc-page-navigator__navigator-icon .sv-svg-icon {
3398
+ width: var(--ctr-page-navigator-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3399
+ height: var(--ctr-page-navigator-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3400
+ }
3393
3401
  .svc-page-navigator__navigator-icon use {
3394
3402
  fill: var(--ctr-page-navigator-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
3395
3403
  transition: fill var(--sjs-creator-transition-duration, 150ms);
@@ -3706,8 +3714,10 @@ svc-page {
3706
3714
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3707
3715
  box-sizing: border-box;
3708
3716
  width: 100%;
3709
- outline: none;
3710
- transition: background var(--sjs-creator-transition-duration, 150ms), box-shadow var(--sjs-creator-transition-duration, 150ms);
3717
+ outline-color: transparent;
3718
+ outline: 2px transparent dashed;
3719
+ transition-property: background-color, box-shadow, outline-color;
3720
+ transition-duration: var(--sjs-creator-transition-duration, 150ms);
3711
3721
  }
3712
3722
  .svc-page__content .sd-page {
3713
3723
  margin: 0;
@@ -3716,6 +3726,9 @@ svc-page {
3716
3726
  .svc-page__content > .svc-question__drag-area {
3717
3727
  padding-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3718
3728
  }
3729
+ .svc-page__content > .svc-question__drag-area .svc-question__drag-element {
3730
+ transition: opacity var(--sjs-creator-transition-duration, 150ms);
3731
+ }
3719
3732
 
3720
3733
  .svc-page__content--dragged {
3721
3734
  opacity: 0.25;
@@ -3737,39 +3750,120 @@ svc-page {
3737
3750
  color: var(--ctr-survey-page-header-title-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
3738
3751
  }
3739
3752
 
3740
- .svc-page__content-actions .sv-action-bar-item {
3741
- border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, 4px);
3753
+ .svc-page-toolbar__item {
3754
+ -webkit-appearance: none;
3755
+ -moz-appearance: none;
3756
+ appearance: none;
3757
+ outline: none;
3758
+ display: flex;
3759
+ box-sizing: border-box;
3760
+ border: none;
3761
+ cursor: pointer;
3762
+ white-space: nowrap;
3763
+ --thm-survey-question-panel-toolbar-item-padding-top: calc(
3764
+ var(--ctr-survey-question-panel-toolbar-item-padding-top) +
3765
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
3766
+ );
3767
+ --thm-survey-question-panel-toolbar-item-padding-right: calc(
3768
+ var(--ctr-survey-question-panel-toolbar-item-padding-right) +
3769
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
3770
+ );
3771
+ --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
3772
+ var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
3773
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
3774
+ );
3775
+ --thm-survey-question-panel-toolbar-item-padding-left: calc(
3776
+ var(--ctr-survey-question-panel-toolbar-item-padding-left) +
3777
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
3778
+ );
3779
+ --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
3780
+ margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3781
+ border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3782
+ padding: var(--thm-survey-question-panel-toolbar-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
3783
+ justify-content: center;
3784
+ align-items: center;
3742
3785
  background-color: transparent;
3743
- color: var(--ctr-survey-page-toolbar-item-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3744
3786
  transition: background-color var(--sjs-creator-transition-duration, 150ms);
3745
3787
  }
3746
- .svc-page__content-actions .sv-action-bar-item__icon use {
3747
- fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
3788
+
3789
+ .svc-page-toolbar__item--with-text {
3790
+ --thm-survey-question-panel-toolbar-item-padding-right: calc(
3791
+ var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
3792
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
3793
+ );
3794
+ --thm-survey-question-panel-toolbar-item-gap: calc(
3795
+ var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
3796
+ );
3797
+ padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right-with-text, var(--sjs-base-unit, var(--base-unit, 8px)));
3798
+ gap: var(--thm-survey-question-panel-toolbar-item-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3748
3799
  }
3749
- .svc-page__content-actions .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
3750
- .svc-page__content-actions .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
3800
+
3801
+ .svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item {
3802
+ margin-inline-end: 0;
3803
+ }
3804
+
3805
+ .svc-page-toolbar .sv-action:first-of-type .svc-page-toolbar__item {
3806
+ margin-inline-start: 0;
3807
+ }
3808
+
3809
+ .svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):hover:enabled,
3810
+ .svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):focus:enabled {
3751
3811
  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
3752
3812
  }
3753
- .svc-page__content-actions .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
3813
+
3814
+ .svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):active:enabled {
3754
3815
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
3755
3816
  }
3756
- .svc-page__content-actions .sv-action-bar-item:disabled {
3817
+
3818
+ .svc-page-toolbar__item:disabled {
3757
3819
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
3758
3820
  }
3759
- .svc-page__content-actions .sv-action-bar-item--secondary .sv-action-bar-item__icon use {
3821
+
3822
+ .svc-page-toolbar__item--active .svc-page-toolbar-item__icon use {
3760
3823
  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
3761
3824
  }
3762
- .svc-page__content-actions .sv-action-bar-item--active .sv-action-bar-item__icon use {
3825
+
3826
+ .svc-page-toolbar__item--pressed:not(.svc-page-toolbar__item--active) {
3827
+ background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
3828
+ opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
3829
+ }
3830
+
3831
+ .svc-page-toolbar-item__icon {
3832
+ --thm-survey-page-toolbar-item-icon-width: calc(
3833
+ var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
3834
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
3835
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
3836
+ );
3837
+ --thm-survey-page-toolbar-item-icon-height: calc(
3838
+ var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
3839
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
3840
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
3841
+ );
3842
+ width: var(--thm-survey-page-toolbar-item-icon-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3843
+ height: var(--thm-survey-page-toolbar-item-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3844
+ }
3845
+
3846
+ .svc-page-toolbar-item__icon use {
3763
3847
  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
3764
3848
  }
3849
+
3850
+ .svc-page-toolbar-item__title {
3851
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
3852
+ --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
3853
+ --ctr-small-bold-line-height: var(--small-bold-font-size);
3854
+ font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
3855
+ font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
3856
+ font-style: normal;
3857
+ font-weight: 400;
3858
+ line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
3859
+ font-weight: 600;
3860
+ color: var(--ctr-survey-page-toolbar-item-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3861
+ }
3862
+
3765
3863
  .svc-page__content-actions .sv-action-bar-item-dropdown {
3766
3864
  border-radius: calcCornerRadius(0.5);
3767
3865
  background-color: transparent;
3768
3866
  }
3769
- .svc-page__content-actions .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
3770
- background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
3771
- opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
3772
- }
3773
3867
 
3774
3868
  .svc-page__content:focus,
3775
3869
  .svc-hovered.svc-page__content {
@@ -3792,6 +3886,8 @@ svc-page {
3792
3886
  }
3793
3887
  .svc-page__content--selected > .svc-question__drag-area .svc-question__drag-element,
3794
3888
  .svc-hovered.svc-page__content > .svc-question__drag-area .svc-question__drag-element {
3889
+ width: var(--ctr-survey-page-drag-indicator-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3890
+ height: var(--ctr-survey-page-drag-indicator-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3795
3891
  opacity: var(--ctr-survey-page-drag-indicator-opacity, 0.5);
3796
3892
  }
3797
3893
 
@@ -3816,14 +3912,17 @@ svc-page {
3816
3912
  animation: none;
3817
3913
  }
3818
3914
 
3819
- .svc-page__content--collapse-onhover, .svc-page__content--collapse-always {
3915
+ .svc-page__content--collapse-onhover,
3916
+ .svc-page__content--collapse-always {
3820
3917
  outline: 2px transparent dashed;
3821
- transition: outline-color var(--sjs-creator-transition-duration, 150ms);
3822
3918
  }
3823
- .svc-page__content--collapse-onhover.svc-page__content--selected, .svc-page__content--collapse-onhover.svc-page__content.svc-hovered, .svc-page__content--collapse-always.svc-page__content--selected, .svc-page__content--collapse-always.svc-page__content.svc-hovered {
3919
+ .svc-page__content--collapse-onhover.svc-page__content--selected, .svc-page__content--collapse-onhover.svc-page__content.svc-hovered,
3920
+ .svc-page__content--collapse-always.svc-page__content--selected,
3921
+ .svc-page__content--collapse-always.svc-page__content.svc-hovered {
3824
3922
  outline-color: transparent;
3825
3923
  }
3826
- .svc-page__content--collapse-onhover.svc-page__content--collapsed-drag-over-inside, .svc-page__content--collapse-always.svc-page__content--collapsed-drag-over-inside {
3924
+ .svc-page__content--collapse-onhover.svc-page__content--collapsed-drag-over-inside,
3925
+ .svc-page__content--collapse-always.svc-page__content--collapsed-drag-over-inside {
3827
3926
  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
3828
3927
  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3829
3928
  animation: collapsed-drag-over-inside-blinking 1s infinite;
@@ -3874,6 +3973,7 @@ svc-page {
3874
3973
 
3875
3974
  .svc-element__add-new-question {
3876
3975
  -webkit-tap-highlight-color: transparent;
3976
+ height: auto;
3877
3977
  }
3878
3978
 
3879
3979
  .svc-add-new-item-button__text {
@@ -3891,20 +3991,17 @@ svc-page {
3891
3991
  .svc-element__question-type-selector {
3892
3992
  appearance: none;
3893
3993
  display: flex;
3894
- height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3895
- padding: var(--sjs-base-unit, var(--base-unit, 8px));
3994
+ padding: var(--ctr-button-contextual-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-button-contextual-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-button-contextual-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-button-contextual-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
3995
+ border-radius: var(--ctr-button-contextual-button-corner-radius, 2px);
3896
3996
  box-sizing: border-box;
3897
3997
  border: none;
3898
- border-radius: 2px;
3899
3998
  background-color: transparent;
3900
3999
  cursor: pointer;
3901
- margin-inline-end: var(--sjs-base-unit, var(--base-unit, 8px));
4000
+ margin: var(--ctr-button-contextual-button-margin-vertical, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-button-contextual-button-margin-horizontal, var(--sjs-base-unit, var(--base-unit, 8px)));
4001
+ margin-inline-start: 0;
3902
4002
  outline: none;
3903
4003
  transition: background-color var(--sjs-creator-transition-duration, 150ms);
3904
4004
  }
3905
- .svc-element__question-type-selector use {
3906
- fill: var(--ctr-library-contextual-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
3907
- }
3908
4005
  .svc-element__question-type-selector:hover {
3909
4006
  background-color: var(--ctr-button-contextual-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
3910
4007
  }
@@ -3912,6 +4009,18 @@ svc-page {
3912
4009
  background-color: var(--ctr-button-contextual-button-background-color-focused, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
3913
4010
  }
3914
4011
 
4012
+ .svc-element__question-type-selector-icon {
4013
+ width: var(--ctr-button-contextual-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4014
+ height: var(--ctr-button-contextual-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4015
+ }
4016
+ .svc-element__question-type-selector-icon .sv-svg-icon {
4017
+ width: var(--ctr-button-contextual-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4018
+ height: var(--ctr-button-contextual-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4019
+ }
4020
+ .svc-element__question-type-selector-icon use {
4021
+ fill: var(--ctr-button-contextual-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
4022
+ }
4023
+
3915
4024
  .svc-page--drag-over-empty:after {
3916
4025
  content: " ";
3917
4026
  position: absolute;
@@ -4009,6 +4118,55 @@ svc-page {
4009
4118
  .svc-creator .svc-page .svc-page__content--collapse-always.svc-page__content--selected .svc-page__content-actions .sv-action .sv-action-bar-separator, .svc-creator .svc-page .svc-page__content--collapse-always.svc-hovered .svc-page__content-actions .sv-action .sv-action-bar-separator {
4010
4119
  visibility: visible;
4011
4120
  }
4121
+
4122
+ .svc-page--enter,
4123
+ .svc-page--leave {
4124
+ animation-name: fadeIn, moveInWithOverflow;
4125
+ animation-fill-mode: forwards;
4126
+ animation-duration: var(--fade-animation-duration), var(--move-animation-duration);
4127
+ animation-direction: var(--animation-direction);
4128
+ animation-timing-function: var(--animation-timing-function);
4129
+ animation-delay: var(--fade-animation-delay), var(--move-animation-delay);
4130
+ }
4131
+
4132
+ .svc-page--enter {
4133
+ opacity: 0;
4134
+ --animation-direction: normal;
4135
+ --animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
4136
+ --fade-animation-duration: var(--sjs-svc-page-fade-in-duration, 250ms);
4137
+ --move-animation-duration: var(--sjs-svc-page-move-in-duration, 250ms);
4138
+ --fade-animation-delay: var(--sjs-svc-page-fade-in-delay, 100ms);
4139
+ --move-animation-delay: 0s;
4140
+ }
4141
+
4142
+ .svc-page--leave {
4143
+ --animation-direction: reverse;
4144
+ --animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
4145
+ --fade-animation-duration: var(--sjs-svc-page-fade-out-duration, 250ms);
4146
+ --move-animation-duration: var(--sjs-svc-page-move-out-duration, 250ms);
4147
+ --fade-animation-delay: 0s;
4148
+ --move-animation-delay: var(--sjs-svc-page-move-out-delay, 100ms);
4149
+ }
4150
+
4151
+ .svc-creator--disable-animations .svc-page--enter,
4152
+ .svc-creator--disable-animations .svc-page--leave {
4153
+ animation: none;
4154
+ }
4155
+
4156
+ .svc-page--enter.svc-page--enter .svc-page__content-actions {
4157
+ opacity: 0;
4158
+ }
4159
+ .svc-page--enter.svc-page--enter .svc-page__content {
4160
+ box-shadow: 0 0 0 2px transparent;
4161
+ background-color: transparent;
4162
+ }
4163
+ .svc-page--enter.svc-page--enter .svc-page__content > .svc-question__drag-area .svc-question__drag-element {
4164
+ opacity: 0;
4165
+ }
4166
+
4167
+ .svc-page {
4168
+ scroll-margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4169
+ }
4012
4170
  /*!**************************************************************************************************************************************************************************!*\
4013
4171
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/row.scss ***!
4014
4172
  \**************************************************************************************************************************************************************************/
@@ -4321,43 +4479,150 @@ svc-question {
4321
4479
  right: 0;
4322
4480
  }
4323
4481
 
4324
- .svc-question__adorner .sv-action-bar-item {
4482
+ .svc-survey-element-toolbar__item {
4483
+ -webkit-appearance: none;
4484
+ -moz-appearance: none;
4485
+ appearance: none;
4486
+ outline: none;
4487
+ display: flex;
4488
+ box-sizing: border-box;
4489
+ border: none;
4490
+ cursor: pointer;
4491
+ white-space: nowrap;
4492
+ --thm-survey-question-panel-toolbar-item-padding-top: calc(
4493
+ var(--ctr-survey-question-panel-toolbar-item-padding-top) +
4494
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
4495
+ );
4496
+ --thm-survey-question-panel-toolbar-item-padding-right: calc(
4497
+ var(--ctr-survey-question-panel-toolbar-item-padding-right) +
4498
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
4499
+ );
4500
+ --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
4501
+ var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
4502
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
4503
+ );
4504
+ --thm-survey-question-panel-toolbar-item-padding-left: calc(
4505
+ var(--ctr-survey-question-panel-toolbar-item-padding-left) +
4506
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
4507
+ );
4508
+ --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
4509
+ margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4510
+ border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4511
+ padding: var(--thm-survey-question-panel-toolbar-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
4512
+ justify-content: center;
4513
+ align-items: center;
4325
4514
  background-color: transparent;
4326
- color: var(--ctr-survey-question-panel-toolbar-item-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4327
- transition: background var(--sjs-creator-transition-duration, 150ms), color var(--sjs-creator-transition-duration, 150ms), opacity var(--sjs-creator-transition-duration, 150ms);
4515
+ transition: background var(--sjs-creator-transition-duration, 150ms), opacity var(--sjs-creator-transition-duration, 150ms);
4328
4516
  }
4329
- .svc-question__adorner .sv-action-bar-item__icon use {
4330
- fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
4517
+
4518
+ .svc-survey-element-toolbar__item--with-text {
4519
+ --thm-survey-question-panel-toolbar-item-padding-right: calc(
4520
+ var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
4521
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
4522
+ );
4523
+ --thm-survey-question-panel-toolbar-item-gap: calc(
4524
+ var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
4525
+ );
4526
+ padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, var(--sjs-base-unit, var(--base-unit, 8px)));
4527
+ gap: var(--thm-survey-question-panel-toolbar-item-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4528
+ }
4529
+
4530
+ .svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item {
4531
+ margin-inline-end: 0;
4532
+ }
4533
+
4534
+ .svc-survey-element-toolbar .sv-action:first-of-type .svc-survey-element-toolbar__item {
4535
+ margin-inline-start: 0;
4536
+ }
4537
+
4538
+ .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
4539
+ --thm-survey-question-panel-toolbar-item-padding-left: calc(
4540
+ var(--ctr-survey-question-panel-toolbar-item-padding-left) +
4541
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text)
4542
+ );
4543
+ --thm-survey-question-panel-toolbar-item-gap: calc(
4544
+ var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
4545
+ );
4546
+ flex-direction: row-reverse;
4547
+ padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
4548
+ gap: var(--thm-survey-question-panel-toolbar-item-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4549
+ }
4550
+
4551
+ .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
4552
+ padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-right, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-left, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4553
+ }
4554
+ .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon .svc-survey-element-toolbar-item__icon {
4555
+ padding: 0;
4556
+ width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4557
+ height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4331
4558
  }
4332
- .svc-question__adorner .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
4333
- .svc-question__adorner .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
4559
+
4560
+ .svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):hover:enabled,
4561
+ .svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):focus:enabled {
4334
4562
  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
4335
4563
  }
4336
- .svc-question__adorner .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
4564
+
4565
+ .svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):active:enabled {
4337
4566
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
4338
4567
  }
4339
- .svc-question__adorner .sv-action-bar-item:disabled {
4568
+
4569
+ .svc-survey-element-toolbar__item:disabled {
4340
4570
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
4341
4571
  }
4342
- .svc-question__adorner .sv-action-bar-item--secondary .sv-action-bar-item__icon use {
4343
- fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
4344
- }
4345
- .svc-question__adorner .sv-action-bar-item--active .sv-action-bar-item__icon use {
4572
+
4573
+ .svc-survey-element-toolbar__item--active .svc-survey-element-toolbar-item__icon use {
4346
4574
  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
4347
4575
  }
4348
- .svc-question__adorner .sv-action-bar-item-dropdown {
4349
- background-color: transparent;
4350
- }
4351
- .svc-question__adorner .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
4576
+
4577
+ .svc-survey-element-toolbar__item--pressed:not(.svc-survey-element-toolbar__item--active) {
4352
4578
  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
4353
4579
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
4354
4580
  }
4355
- .svc-question__adorner .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:hover,
4356
- .svc-question__adorner .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:focus,
4357
- .svc-question__adorner .sv-action-bar-item.sv-action-bar-item--active {
4581
+
4582
+ .svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:hover,
4583
+ .svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:focus,
4584
+ .svc-survey-element-toolbar__item--active {
4358
4585
  background-color: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
4359
4586
  }
4360
4587
 
4588
+ .svc-survey-element-toolbar-item__icon,
4589
+ .svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
4590
+ --ctr-survey-question-toolbar-item-icon-width: calc(
4591
+ var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
4592
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
4593
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
4594
+ );
4595
+ --ctr-survey-question-toolbar-item-icon-height: calc(
4596
+ var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
4597
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
4598
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
4599
+ );
4600
+ width: var(--ctr-survey-question-toolbar-item-icon-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4601
+ height: var(--ctr-survey-question-toolbar-item-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4602
+ }
4603
+
4604
+ .svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {
4605
+ fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
4606
+ }
4607
+
4608
+ .svc-survey-element-toolbar-item__title {
4609
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
4610
+ --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
4611
+ --ctr-small-bold-line-height: var(--small-bold-font-size);
4612
+ font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
4613
+ font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
4614
+ font-style: normal;
4615
+ font-weight: 400;
4616
+ line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
4617
+ font-weight: 600;
4618
+ color: var(--ctr-survey-question-panel-toolbar-item-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4619
+ transition: color var(--sjs-creator-transition-duration, 150ms);
4620
+ }
4621
+
4622
+ .svc-question__adorner .sv-action-bar-item-dropdown {
4623
+ background-color: transparent;
4624
+ }
4625
+
4361
4626
  .svc-question__content {
4362
4627
  scroll-margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4363
4628
  }
@@ -4529,58 +4794,69 @@ svc-question {
4529
4794
  width: 100%;
4530
4795
  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4531
4796
  }
4532
- .svc-question__content-actions .sv-action--convertTo {
4797
+ .svc-question__content-actions .svc-action-bar-item--right:first-of-type {
4798
+ margin-inline-start: auto;
4799
+ }
4800
+
4801
+ .svc-dropdown-action--convertTo {
4533
4802
  max-width: max-content;
4534
4803
  }
4535
- .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item {
4804
+ .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item {
4536
4805
  flex-direction: row-reverse;
4537
4806
  }
4538
- .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item--icon {
4807
+ .svc-dropdown-action--convertTo .sv-action-bar-item--icon {
4539
4808
  max-width: 100%;
4540
4809
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4541
4810
  }
4542
- .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title {
4811
+ .svc-dropdown-action--convertTo .svc-survey-element-toolbar-item__title {
4543
4812
  display: inline-block;
4544
4813
  justify-content: left;
4545
4814
  }
4546
- .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__icon {
4547
- margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4548
- }
4549
- .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__icon:last-child {
4815
+ .svc-dropdown-action--convertTo .svc-survey-element-toolbar-item__icon:last-child {
4550
4816
  margin-inline-start: 0;
4551
4817
  }
4552
- .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__icon:last-child use {
4818
+ .svc-dropdown-action--convertTo .svc-survey-element-toolbar-item__icon:last-child use {
4553
4819
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4554
4820
  }
4555
- .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title--with-icon {
4556
- margin-inline-start: 0;
4557
- margin-inline-end: 0;
4558
- }
4559
- .svc-question__content-actions .sv-action--convertTo.sv-action--hidden {
4821
+
4822
+ .svc-dropdown-action--convertTo.sv-action--hidden {
4560
4823
  min-width: 0;
4561
4824
  }
4562
- .svc-question__content-actions .sv-action--convertTo-last {
4825
+
4826
+ .svc-dropdown-action--convertTo-last {
4563
4827
  margin-inline-end: auto;
4564
4828
  }
4565
- .svc-question__content-actions .svc-action-bar-item--right:first-of-type {
4566
- margin-inline-start: auto;
4567
- }
4568
- .svc-question__content-actions .sv-dots {
4829
+
4830
+ .svc-survey-element-toolbar__dots-item {
4569
4831
  width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4570
4832
  margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
4571
4833
  margin-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4572
4834
  }
4573
- .svc-question__content-actions .sv-dots.sv-action--hidden {
4835
+ .svc-survey-element-toolbar__dots-item.sv-action--hidden {
4574
4836
  width: 0;
4575
4837
  margin: 0;
4576
4838
  }
4577
- .svc-question__content-actions .sv-dots.sv-action--hidden .sv-action__content {
4839
+ .svc-survey-element-toolbar__dots-item.sv-action--hidden .sv-action__content {
4578
4840
  display: none;
4579
4841
  }
4580
- .svc-question__content-actions .sv-dots .sv-dots__item {
4842
+ .svc-survey-element-toolbar__dots-item .sv-dots__item {
4581
4843
  margin-left: 0;
4582
4844
  }
4583
- .svc-question__content-actions .sv-dots__item use {
4845
+ .svc-survey-element-toolbar__dots-item .sv-list__item-icon {
4846
+ --ctr-survey-question-toolbar-item-icon-width: calc(
4847
+ var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
4848
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
4849
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
4850
+ );
4851
+ --ctr-survey-question-toolbar-item-icon-height: calc(
4852
+ var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
4853
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
4854
+ var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
4855
+ );
4856
+ width: var(--ctr-survey-question-toolbar-item-icon-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4857
+ height: var(--ctr-survey-question-toolbar-item-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
4858
+ }
4859
+ .svc-survey-element-toolbar__dots-item use {
4584
4860
  fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
4585
4861
  }
4586
4862
 
@@ -4896,11 +5172,11 @@ svc-question .sv-action-bar,
4896
5172
  }
4897
5173
 
4898
5174
  .svc-hovered > .svc-question__content > .svc-question__drag-area > .svc-question__drag-element {
4899
- opacity: 0.5;
5175
+ opacity: var(--ctr-survey-question-panel-drag-area-drag-indicator-opacity, 0.5);
4900
5176
  }
4901
5177
 
4902
5178
  .svc-question__content.svc-question__content--selected > .svc-question__drag-area > .svc-question__drag-element {
4903
- opacity: 0.5;
5179
+ opacity: var(--ctr-survey-question-panel-drag-area-drag-indicator-opacity, 0.5);
4904
5180
  z-index: 1;
4905
5181
  }
4906
5182
 
@@ -4932,11 +5208,17 @@ svc-question .sv-action-bar,
4932
5208
  transition: opacity 150ms;
4933
5209
  }
4934
5210
 
5211
+ .svc-element__header--lazy .svc-string-editor,
5212
+ .svc-element__header--lazy sv-ng-string > .svc-string-editor,
4935
5213
  .svc-element__header--hidden.sd-question__header--location--left .svc-string-editor,
4936
5214
  .svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor {
4937
5215
  display: inline-block;
4938
5216
  }
4939
- .svc-element__header--hidden.sd-question__header--location--left .svc-string-editor::before, .svc-element__header--hidden.sd-question__header--location--left .svc-string-editor::after,
5217
+ .svc-element__header--lazy .svc-string-editor::before, .svc-element__header--lazy .svc-string-editor::after,
5218
+ .svc-element__header--lazy sv-ng-string > .svc-string-editor::before,
5219
+ .svc-element__header--lazy sv-ng-string > .svc-string-editor::after,
5220
+ .svc-element__header--hidden.sd-question__header--location--left .svc-string-editor::before,
5221
+ .svc-element__header--hidden.sd-question__header--location--left .svc-string-editor::after,
4940
5222
  .svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor::before,
4941
5223
  .svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor::after {
4942
5224
  content: none;
@@ -5006,9 +5288,10 @@ svc-question .sv-action-bar,
5006
5288
 
5007
5289
  .svc-question__drag-element {
5008
5290
  width: 100%;
5009
- height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5010
5291
  opacity: 0;
5011
5292
  transition: opacity var(--sjs-creator-transition-duration, 150ms);
5293
+ width: var(--ctr-survey-question-panel-drag-area-drag-indicator-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
5294
+ height: var(--ctr-survey-question-panel-drag-area-drag-indicator-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
5012
5295
  }
5013
5296
  .svc-question__drag-element use {
5014
5297
  fill: var(--ctr-survey-question-panel-drag-area-drag-indicator-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
@@ -5245,6 +5528,8 @@ svc-question .sv-action-bar,
5245
5528
  .svc-panel__placeholder_frame .svc-panel__add-new-question-icon,
5246
5529
  .svc-panel__add-new-question-container .svc-panel__add-new-question-icon {
5247
5530
  display: block;
5531
+ width: var(--ctr-button-contextual-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
5532
+ height: var(--ctr-button-contextual-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
5248
5533
  }
5249
5534
  .svc-panel__placeholder_frame .svc-element__question-type-selector,
5250
5535
  .svc-panel__add-new-question-container .svc-element__question-type-selector {
@@ -5263,10 +5548,6 @@ svc-question .sv-action-bar,
5263
5548
  display: none;
5264
5549
  }
5265
5550
  }
5266
- .sv-list__container .sv-action-bar-item--secondary .sv-list__item-icon use {
5267
- fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
5268
- }
5269
-
5270
5551
  .sd-panel .svc-row {
5271
5552
  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
5272
5553
  }
@@ -5366,16 +5647,27 @@ svc-question .sv-action-bar,
5366
5647
  right: 0;
5367
5648
  visibility: hidden;
5368
5649
  }
5369
- .svc-question__top-actions .sv-action-bar-item {
5370
- margin: 0;
5371
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5372
- opacity: 0.5;
5373
- height: 24px;
5650
+
5651
+ .svc-survey-element-top-toolbar__item {
5652
+ -webkit-appearance: none;
5653
+ -moz-appearance: none;
5654
+ appearance: none;
5655
+ outline: none;
5656
+ display: flex;
5657
+ box-sizing: border-box;
5658
+ border: none;
5659
+ cursor: pointer;
5660
+ white-space: nowrap;
5661
+ padding: var(--ctr-survey-question-panel-toolbar-item-padding-top-small, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-right-small, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-bottom-small, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-left-small, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
5662
+ border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px);
5663
+ opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
5664
+ background-color: transparent;
5374
5665
  }
5375
- .svc-question__top-actions .sv-action-bar-item:hover, .svc-question__top-actions .sv-action-bar-item:focus {
5666
+ .svc-survey-element-top-toolbar__item:hover, .svc-survey-element-top-toolbar__item:focus {
5376
5667
  opacity: initial;
5668
+ background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
5377
5669
  }
5378
- .svc-question__top-actions .sv-action-bar-item .sv-action-bar-item__icon use {
5670
+ .svc-survey-element-top-toolbar__item use {
5379
5671
  fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
5380
5672
  }
5381
5673
 
@@ -5770,6 +6062,12 @@ svc-question .sv-action-bar,
5770
6062
  .svc-item-value-controls__drag-icon {
5771
6063
  display: block;
5772
6064
  transition: opacity var(--sjs-creator-transition-duration, 150ms);
6065
+ width: var(--ctr-survey-item-actionbar-drag-indicator-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
6066
+ height: var(--ctr-survey-item-actionbar-drag-indicator-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
6067
+ }
6068
+ .svc-item-value-controls__drag-icon .sv-svg-icon {
6069
+ width: var(--ctr-survey-item-actionbar-drag-indicator-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
6070
+ height: var(--ctr-survey-item-actionbar-drag-indicator-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
5773
6071
  }
5774
6072
 
5775
6073
  .svc-item-value-wrapper:hover:not(.svc-item-value--ghost) .svc-item-value-controls__drag-icon,
@@ -5778,7 +6076,7 @@ svc-question .sv-action-bar,
5778
6076
  }
5779
6077
 
5780
6078
  .svc-item-value-controls__drag {
5781
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
6079
+ padding: var(--ctr-survey-item-actionbar-drag-indicator-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-item-actionbar-drag-indicator-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-survey-item-actionbar-drag-indicator-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-item-actionbar-drag-indicator-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
5782
6080
  cursor: move;
5783
6081
  opacity: 0.25;
5784
6082
  }
@@ -6157,18 +6455,7 @@ svc-question .sv-action-bar,
6157
6455
  }
6158
6456
 
6159
6457
  .svc-matrix-cell__question-controls-button {
6160
- display: block;
6161
- width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6162
- height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6163
- background: var(--sjs-general-backcolor, var(--background, #fff));
6164
6458
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
6165
- box-sizing: border-box;
6166
- border-radius: 50%;
6167
- padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6168
- cursor: pointer;
6169
- }
6170
- .svc-matrix-cell__question-controls-button use {
6171
- fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
6172
6459
  }
6173
6460
 
6174
6461
  .svc-matrix-cell:hover .svc-matrix-cell__question-controls {
@@ -6515,9 +6802,9 @@ svc-question .sv-action-bar,
6515
6802
  .svc-question-link__clear-button:hover {
6516
6803
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
6517
6804
  }
6518
- /*!*********************************************************************************************************************************************************************************************************!*\
6519
- !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/property-panel/property-panel-item.scss ***!
6520
- \*********************************************************************************************************************************************************************************************************/
6805
+ /*!*****************************************************************************************************************************************************************************!*\
6806
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/search.scss ***!
6807
+ \*****************************************************************************************************************************************************************************/
6521
6808
  .svc-creator {
6522
6809
  --sjs-font-size-x1: calc(var(--ctr-font-unit, 8px) * 1);
6523
6810
  --sjs-font-size-x150: calc(var(--ctr-font-unit, 8px) * 1.5);
@@ -6539,9 +6826,116 @@ svc-question .sv-action-bar,
6539
6826
  --sjs-line-height-x8: calc(var(--ctr-line-height-unit, 8px) * 8);
6540
6827
  }
6541
6828
 
6542
- .svc-property-panel__item {
6543
- margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
6544
- width: 100%;
6829
+ .svc-search {
6830
+ --sjs-general-forecolor: rgba(0, 0, 0, 0.91);
6831
+ --sjs-general-forecolor-light: rgba(0, 0, 0, 0.45);
6832
+ }
6833
+
6834
+ .svc-search {
6835
+ display: flex;
6836
+ align-items: center;
6837
+ }
6838
+
6839
+ .svc-search__input {
6840
+ overflow: hidden;
6841
+ white-space: nowrap;
6842
+ text-overflow: ellipsis;
6843
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
6844
+ --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
6845
+ --ctr-small-bold-line-height: var(--small-bold-font-size);
6846
+ font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
6847
+ font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
6848
+ font-style: normal;
6849
+ font-weight: 400;
6850
+ line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
6851
+ font-weight: 600;
6852
+ border: none;
6853
+ -webkit-appearance: none;
6854
+ -moz-appearance: none;
6855
+ appearance: none;
6856
+ display: block;
6857
+ background: transparent;
6858
+ box-sizing: border-box;
6859
+ outline: none;
6860
+ padding: 0;
6861
+ width: 0;
6862
+ flex-grow: 1;
6863
+ }
6864
+
6865
+ .svc-creator--mobile .svc-search__input {
6866
+ font-size: max(16px, var(--ctr-font-small-size, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))));
6867
+ }
6868
+
6869
+ .svc-search__toolbar {
6870
+ display: flex;
6871
+ gap: var(--ctr-search-toolbar-gap, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
6872
+ justify-content: flex-end;
6873
+ align-items: center;
6874
+ flex-shrink: 0;
6875
+ }
6876
+
6877
+ .svc-search__toolbar .sv-action-bar {
6878
+ gap: var(--ctr-search-toolbar-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
6879
+ margin: 0;
6880
+ flex-shrink: 0;
6881
+ }
6882
+
6883
+ .svc-search__toolbar .sv-action--hidden {
6884
+ display: none;
6885
+ }
6886
+
6887
+ .svc-search__toolbar .svc-search__bar-item {
6888
+ height: min-content;
6889
+ margin: 0;
6890
+ border-radius: var(--ctr-search-button-corner-radius);
6891
+ padding: var(--ctr-search-button-padding-vertical, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-search-button-padding-horizontal, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-search-button-padding-vertical, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-search-button-padding-horizontal, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
6892
+ border-radius: 100px;
6893
+ }
6894
+ .svc-search__toolbar .svc-search__bar-item .sv-svg-icon {
6895
+ width: var(--ctr-search-button-icon-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
6896
+ height: var(--ctr-search-button-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
6897
+ }
6898
+
6899
+ .svc-search__toolbar-counter {
6900
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
6901
+ --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
6902
+ --ctr-small-bold-line-height: var(--small-bold-font-size);
6903
+ font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
6904
+ font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
6905
+ font-style: normal;
6906
+ font-weight: 400;
6907
+ line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
6908
+ font-weight: 600;
6909
+ display: flex;
6910
+ flex-shrink: 0;
6911
+ }
6912
+ /*!*********************************************************************************************************************************************************************************************************!*\
6913
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/property-panel/property-panel-item.scss ***!
6914
+ \*********************************************************************************************************************************************************************************************************/
6915
+ .svc-creator {
6916
+ --sjs-font-size-x1: calc(var(--ctr-font-unit, 8px) * 1);
6917
+ --sjs-font-size-x150: calc(var(--ctr-font-unit, 8px) * 1.5);
6918
+ --sjs-font-size-x2: calc(var(--ctr-font-unit, 8px) * 2);
6919
+ --sjs-font-size-x3: calc(var(--ctr-font-unit, 8px) * 3);
6920
+ --sjs-font-size-x4: calc(var(--ctr-font-unit, 8px) * 4);
6921
+ --sjs-font-size-x5: calc(var(--ctr-font-unit, 8px) * 5);
6922
+ --sjs-font-size-x6: calc(var(--ctr-font-unit, 8px) * 6);
6923
+ --sjs-font-size-x7: calc(var(--ctr-font-unit, 8px) * 7);
6924
+ --sjs-font-size-x8: calc(var(--ctr-font-unit, 8px) * 8);
6925
+ --sjs-line-height-x1: calc(var(--ctr-line-height-unit, 8px) * 1);
6926
+ --sjs-line-height-x150: calc(var(--ctr-line-height-unit, 8px) * 1.5);
6927
+ --sjs-line-height-x2: calc(var(--ctr-line-height-unit, 8px) * 2);
6928
+ --sjs-line-height-x3: calc(var(--ctr-line-height-unit, 8px) * 3);
6929
+ --sjs-line-height-x4: calc(var(--ctr-line-height-unit, 8px) * 4);
6930
+ --sjs-line-height-x5: calc(var(--ctr-line-height-unit, 8px) * 5);
6931
+ --sjs-line-height-x6: calc(var(--ctr-line-height-unit, 8px) * 6);
6932
+ --sjs-line-height-x7: calc(var(--ctr-line-height-unit, 8px) * 7);
6933
+ --sjs-line-height-x8: calc(var(--ctr-line-height-unit, 8px) * 8);
6934
+ }
6935
+
6936
+ .svc-property-panel__item {
6937
+ margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
6938
+ width: 100%;
6545
6939
  }
6546
6940
  /*!****************************************************************************************************************************************************************************************************!*\
6547
6941
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/property-panel/property-panel.scss ***!
@@ -7273,31 +7667,6 @@ svc-toolbox {
7273
7667
  display: flex;
7274
7668
  flex-direction: column;
7275
7669
  }
7276
- .svc-toolbox .spg-search-editor_container {
7277
- background: var(--ctr-toolbox-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
7278
- padding-top: var(--ctr-toolbox-search-padding-top, calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7279
- padding-inline-end: var(--ctr-toolbox-search-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7280
- padding-bottom: var(--ctr-toolbox-search-padding-bottom, calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7281
- padding-inline-start: var(--ctr-toolbox-search-padding-left, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7282
- height: unset;
7283
- width: unset;
7284
- flex-grow: 1;
7285
- border-bottom: none;
7286
- }
7287
- .svc-toolbox .spg-search-editor_input {
7288
- width: 0;
7289
- flex-grow: 1;
7290
- }
7291
- .svc-toolbox .spg-search-editor_toolbar-counter {
7292
- display: none;
7293
- }
7294
- .svc-toolbox .spg-search-editor_bar-item.sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled {
7295
- background-color: var(--ctr-toolbox-search-clear-button-background-color-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
7296
- border-radius: 100px;
7297
- }
7298
- .svc-toolbox .spg-search-editor_bar-item.sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled svg use {
7299
- fill: var(--ctr-toolbox-search-clear-button-icon-color-hovered, var(--sjs-special-red, var(--red, #e60a3e)));
7300
- }
7301
7670
 
7302
7671
  .svc-toolbox__panel {
7303
7672
  position: relative;
@@ -7385,7 +7754,7 @@ svc-toolbox {
7385
7754
  padding: var(--ctr-toolbox-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-group-padding-right-compact, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-padding-bottom, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-group-padding-left-compact, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7386
7755
  pointer-events: none;
7387
7756
  }
7388
- .svc-toolbox--compact .spg-search-editor_container {
7757
+ .svc-toolbox--compact .svc-search {
7389
7758
  opacity: 0;
7390
7759
  position: absolute;
7391
7760
  }
@@ -7424,7 +7793,7 @@ svc-toolbox {
7424
7793
  overflow: visible;
7425
7794
  border-inline-end: var(--ctr-toolbox-border-width-right, 0px) solid transparent;
7426
7795
  }
7427
- .svc-toolbox--flyout .spg-search-editor_container {
7796
+ .svc-toolbox--flyout .svc-search {
7428
7797
  opacity: 1;
7429
7798
  position: relative;
7430
7799
  }
@@ -7581,6 +7950,64 @@ svc-toolbox {
7581
7950
  margin-inline-end: auto;
7582
7951
  color: var(--ctr-property-grid-placeholder-text-description-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
7583
7952
  }
7953
+ /*!*********************************************************************************************************************************************************************************************!*\
7954
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/toolbox/toolbox-search.scss ***!
7955
+ \*********************************************************************************************************************************************************************************************/
7956
+ .svc-creator {
7957
+ --sjs-font-size-x1: calc(var(--ctr-font-unit, 8px) * 1);
7958
+ --sjs-font-size-x150: calc(var(--ctr-font-unit, 8px) * 1.5);
7959
+ --sjs-font-size-x2: calc(var(--ctr-font-unit, 8px) * 2);
7960
+ --sjs-font-size-x3: calc(var(--ctr-font-unit, 8px) * 3);
7961
+ --sjs-font-size-x4: calc(var(--ctr-font-unit, 8px) * 4);
7962
+ --sjs-font-size-x5: calc(var(--ctr-font-unit, 8px) * 5);
7963
+ --sjs-font-size-x6: calc(var(--ctr-font-unit, 8px) * 6);
7964
+ --sjs-font-size-x7: calc(var(--ctr-font-unit, 8px) * 7);
7965
+ --sjs-font-size-x8: calc(var(--ctr-font-unit, 8px) * 8);
7966
+ --sjs-line-height-x1: calc(var(--ctr-line-height-unit, 8px) * 1);
7967
+ --sjs-line-height-x150: calc(var(--ctr-line-height-unit, 8px) * 1.5);
7968
+ --sjs-line-height-x2: calc(var(--ctr-line-height-unit, 8px) * 2);
7969
+ --sjs-line-height-x3: calc(var(--ctr-line-height-unit, 8px) * 3);
7970
+ --sjs-line-height-x4: calc(var(--ctr-line-height-unit, 8px) * 4);
7971
+ --sjs-line-height-x5: calc(var(--ctr-line-height-unit, 8px) * 5);
7972
+ --sjs-line-height-x6: calc(var(--ctr-line-height-unit, 8px) * 6);
7973
+ --sjs-line-height-x7: calc(var(--ctr-line-height-unit, 8px) * 7);
7974
+ --sjs-line-height-x8: calc(var(--ctr-line-height-unit, 8px) * 8);
7975
+ }
7976
+
7977
+ .svc-toolbox .svc-search {
7978
+ padding-top: var(--ctr-toolbox-search-padding-top, calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7979
+ padding-inline-end: var(--ctr-toolbox-search-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7980
+ padding-bottom: var(--ctr-toolbox-search-padding-bottom, calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7981
+ padding-inline-start: var(--ctr-toolbox-search-padding-left, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
7982
+ gap: var(--ctr-toolbox-search-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
7983
+ height: unset;
7984
+ width: unset;
7985
+ flex-grow: 1;
7986
+ border-bottom: none;
7987
+ }
7988
+ .svc-toolbox .svc-search__input {
7989
+ color: var(--ctr-toolbox-search-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
7990
+ }
7991
+ .svc-toolbox .svc-search__input::placeholder {
7992
+ color: var(--ctr-toolbox-search-text-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
7993
+ }
7994
+ .svc-toolbox .svc-search__bar-item:hover:enabled {
7995
+ background-color: var(--ctr-toolbox-search-clear-button-background-color-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
7996
+ }
7997
+ .svc-toolbox .svc-search__bar-item:hover:enabled svg use {
7998
+ fill: var(--ctr-toolbox-search-clear-button-icon-color-hovered, var(--sjs-special-red, var(--red, #e60a3e)));
7999
+ }
8000
+ .svc-toolbox .svc-search__search-icon {
8001
+ width: var(--ctr-toolbox-search-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8002
+ height: var(--ctr-toolbox-search-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8003
+ }
8004
+ .svc-toolbox .svc-search__search-icon .sv-svg-icon {
8005
+ width: var(--ctr-toolbox-search-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8006
+ height: var(--ctr-toolbox-search-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8007
+ }
8008
+ .svc-toolbox .svc-search__search-icon .sv-svg-icon use {
8009
+ fill: var(--ctr-toolbox-search-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
8010
+ }
7584
8011
  /*!********************************************************************************************************************************************************************************************!*\
7585
8012
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/toolbox/toolbox-right.scss ***!
7586
8013
  \********************************************************************************************************************************************************************************************/
@@ -7625,7 +8052,7 @@ svc-toolbox {
7625
8052
  }
7626
8053
 
7627
8054
  .svc-creator__toolbox--right .sv-popup__body-content,
7628
- .svc-creator__toolbox--right .spg-search-editor_container {
8055
+ .svc-creator__toolbox--right .svc-search {
7629
8056
  direction: initial;
7630
8057
  }
7631
8058
  /*!************************************************************************************************************************************************************************************************!*\
@@ -7715,10 +8142,10 @@ svc-toolbox {
7715
8142
  }
7716
8143
  .svc-toolbox__panel--enter .svc-toolbox__item-submenu-button,
7717
8144
  .svc-toolbox__panel--enter .svc-toolbox__item-title,
7718
- .svc-toolbox__panel--enter .spg-search-editor_input,
8145
+ .svc-toolbox__panel--enter .svc-search__input,
7719
8146
  .svc-toolbox__panel--leave .svc-toolbox__item-submenu-button,
7720
8147
  .svc-toolbox__panel--leave .svc-toolbox__item-title,
7721
- .svc-toolbox__panel--leave .spg-search-editor_input {
8148
+ .svc-toolbox__panel--leave .svc-search__input {
7722
8149
  animation-duration: var(--fade-animation-duration);
7723
8150
  animation-delay: var(--fade-animation-delay);
7724
8151
  animation-direction: var(--animation-direction);
@@ -8091,6 +8518,13 @@ svc-toolbox {
8091
8518
  .svd-grid-hide {
8092
8519
  margin-inline-end: auto;
8093
8520
  }
8521
+ .svd-grid-hide .sv-action-bar-item--icon {
8522
+ padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
8523
+ }
8524
+ .svd-grid-hide .sv-svg-icon {
8525
+ width: var(--ctr-menu-toolbar-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8526
+ height: var(--ctr-menu-toolbar-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8527
+ }
8094
8528
 
8095
8529
  .svc-side-bar .svc-toolbox {
8096
8530
  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -8272,6 +8706,10 @@ svc-toolbox {
8272
8706
  justify-content: center;
8273
8707
  align-items: center;
8274
8708
  }
8709
+ .svc-menu-action__icon .sv-svg-icon {
8710
+ width: var(--ctr-menu-toolbar-button-icon-width, 24px);
8711
+ height: var(--ctr-menu-toolbar-button-icon-height, 24px);
8712
+ }
8275
8713
  .svc-menu-action__icon use {
8276
8714
  fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
8277
8715
  }
@@ -8372,8 +8810,14 @@ svc-toolbox {
8372
8810
  fill: var(--ctr-actionbar-button-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
8373
8811
  }
8374
8812
 
8813
+ .spg-action-button--icon {
8814
+ padding: var(--ctr-actionbar-button-padding-top-large-icon, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-actionbar-button-padding-right-large-icon, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-actionbar-button-padding-bottom-large-icon, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-actionbar-button-padding-left-large-icon, var(--sjs-base-unit, var(--base-unit, 8px)));
8815
+ }
8816
+
8375
8817
  .spg-action-button__icon {
8376
8818
  display: block;
8819
+ width: var(--ctr-actionbar-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8820
+ height: var(--ctr-actionbar-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8377
8821
  }
8378
8822
  .spg-action-button__icon use {
8379
8823
  fill: var(--ctr-actionbar-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
@@ -8576,21 +9020,27 @@ button.spg-action-button--large {
8576
9020
  font-style: normal;
8577
9021
  font-weight: 400;
8578
9022
  line-height: var(--ctr-font-default-line-height, var(--ctr-default-line-height, 24px));
8579
- padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
9023
+ padding: var(--ctr-error-message-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-error-message-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-error-message-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-error-message-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8580
9024
  color: var(--ctr-error-message-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
8581
9025
  background-color: var(--ctr-error-message-background-color, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
8582
- border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
9026
+ border-radius: var(--ctr-error-message-corner-radius, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8583
9027
  }
8584
9028
 
8585
9029
  .spg-question__erbox > div,
8586
9030
  .spg-question__erbox > svc-question-error > div,
8587
9031
  sv-question-error > div {
8588
9032
  display: flex;
8589
- gap: var(--sjs-base-unit, var(--base-unit, 8px));
9033
+ gap: var(--ctr-error-message-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
8590
9034
  }
8591
9035
 
9036
+ .spg-question__erbox-icon {
9037
+ width: var(--ctr-error-message-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9038
+ height: var(--ctr-error-message-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9039
+ }
8592
9040
  .spg-question__erbox-icon .sv-svg-icon {
8593
9041
  vertical-align: top;
9042
+ width: var(--ctr-error-message-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9043
+ height: var(--ctr-error-message-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
8594
9044
  }
8595
9045
  .spg-question__erbox-icon use {
8596
9046
  fill: var(--ctr-error-message-icon-color, var(--sjs-special-red, var(--red, #e60a3e)));
@@ -8609,6 +9059,33 @@ sv-question-error > div {
8609
9059
  margin-top: 0;
8610
9060
  }
8611
9061
 
9062
+ .spg-question--highlighted .spg-input,
9063
+ .spg-question--highlighted .spg-input-container,
9064
+ .spg-question--highlighted .spg-question--location--left,
9065
+ .spg-question--highlighted .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input {
9066
+ box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9067
+ }
9068
+ .spg-question--highlighted .spg-checkbox__control:focus + .spg-checkbox__rectangle,
9069
+ .spg-question--highlighted .spg-matrixdynamic__content.spg-text__content {
9070
+ outline: 2px solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9071
+ outline-offset: -2px;
9072
+ }
9073
+ .spg-question--highlighted .spg-checkbox__control:focus + .spg-checkbox__rectangle .spg-input,
9074
+ .spg-question--highlighted .spg-matrixdynamic__content.spg-text__content .spg-input {
9075
+ box-shadow: none;
9076
+ }
9077
+ .spg-question--highlighted .svc-action-button {
9078
+ background-color: var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
9079
+ }
9080
+ .spg-question--highlighted .sv-button-group {
9081
+ box-shadow: 0 0 0 1px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9082
+ border-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9083
+ }
9084
+ .spg-question--highlighted .spg-checkbox__control + .spg-checkbox__rectangle {
9085
+ outline: 2px solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9086
+ outline-offset: -2px;
9087
+ }
9088
+
8612
9089
  .spg-input {
8613
9090
  --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
8614
9091
  --ctr-default-line-height: calc(1.5 * var(--default-font-size));
@@ -9624,138 +10101,57 @@ input.spg-input:read-only::placeholder {
9624
10101
  background-color: transparent;
9625
10102
  }
9626
10103
 
9627
- .spg-editor--highlighted .spg-input,
9628
- .spg-editor--highlighted .spg-input-container,
9629
- .spg-editor--highlighted .spg-question--location--left,
9630
- .spg-editor--highlighted .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input {
9631
- box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9632
- }
9633
- .spg-editor--highlighted .spg-checkbox__control:focus + .spg-checkbox__rectangle,
9634
- .spg-editor--highlighted .spg-matrixdynamic__content.spg-text__content {
9635
- outline: 2px solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9636
- outline-offset: -2px;
9637
- }
9638
- .spg-editor--highlighted .spg-checkbox__control:focus + .spg-checkbox__rectangle .spg-input,
9639
- .spg-editor--highlighted .spg-matrixdynamic__content.spg-text__content .spg-input {
9640
- box-shadow: none;
9641
- }
9642
- .spg-editor--highlighted .svc-action-button {
9643
- background-color: var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
9644
- }
9645
- .spg-editor--highlighted .sv-button-group {
9646
- box-shadow: 0 0 0 1px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9647
- border-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9648
- }
9649
- .spg-editor--highlighted .spg-checkbox__control + .spg-checkbox__rectangle {
9650
- outline: 2px solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
9651
- outline-offset: -2px;
9652
- }
9653
-
9654
- .spg-search-editor_container {
9655
- --sjs-general-forecolor: rgba(0, 0, 0, 0.91);
9656
- --sjs-general-forecolor-light: rgba(0, 0, 0, 0.45);
10104
+ .svc-creator {
10105
+ --sjs-font-size-x1: calc(var(--ctr-font-unit, 8px) * 1);
10106
+ --sjs-font-size-x150: calc(var(--ctr-font-unit, 8px) * 1.5);
10107
+ --sjs-font-size-x2: calc(var(--ctr-font-unit, 8px) * 2);
10108
+ --sjs-font-size-x3: calc(var(--ctr-font-unit, 8px) * 3);
10109
+ --sjs-font-size-x4: calc(var(--ctr-font-unit, 8px) * 4);
10110
+ --sjs-font-size-x5: calc(var(--ctr-font-unit, 8px) * 5);
10111
+ --sjs-font-size-x6: calc(var(--ctr-font-unit, 8px) * 6);
10112
+ --sjs-font-size-x7: calc(var(--ctr-font-unit, 8px) * 7);
10113
+ --sjs-font-size-x8: calc(var(--ctr-font-unit, 8px) * 8);
10114
+ --sjs-line-height-x1: calc(var(--ctr-line-height-unit, 8px) * 1);
10115
+ --sjs-line-height-x150: calc(var(--ctr-line-height-unit, 8px) * 1.5);
10116
+ --sjs-line-height-x2: calc(var(--ctr-line-height-unit, 8px) * 2);
10117
+ --sjs-line-height-x3: calc(var(--ctr-line-height-unit, 8px) * 3);
10118
+ --sjs-line-height-x4: calc(var(--ctr-line-height-unit, 8px) * 4);
10119
+ --sjs-line-height-x5: calc(var(--ctr-line-height-unit, 8px) * 5);
10120
+ --sjs-line-height-x6: calc(var(--ctr-line-height-unit, 8px) * 6);
10121
+ --sjs-line-height-x7: calc(var(--ctr-line-height-unit, 8px) * 7);
10122
+ --sjs-line-height-x8: calc(var(--ctr-line-height-unit, 8px) * 8);
9657
10123
  }
9658
10124
 
9659
- .spg-search-editor_container {
10125
+ .svc-side-bar .svc-search {
9660
10126
  border-bottom: 1px solid var(--ctr-property-grid-search-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
9661
10127
  background: var(--ctr-property-grid-search-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
9662
- display: flex;
9663
- align-items: center;
9664
10128
  gap: var(--ctr-property-grid-search-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
9665
10129
  padding: var(--ctr-property-grid-search-padding-top, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-property-grid-search-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-property-grid-search-padding-bottom, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-property-grid-search-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9666
10130
  }
9667
-
9668
- .spg-search-editor_input {
9669
- overflow: hidden;
9670
- white-space: nowrap;
9671
- text-overflow: ellipsis;
9672
- --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
9673
- --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
9674
- --ctr-small-bold-line-height: var(--small-bold-font-size);
9675
- font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
9676
- font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
9677
- font-style: normal;
9678
- font-weight: 400;
9679
- line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
9680
- font-weight: 600;
10131
+ .svc-side-bar .svc-search__input {
9681
10132
  color: var(--ctr-property-grid-search-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
9682
- border: none;
9683
- -webkit-appearance: none;
9684
- -moz-appearance: none;
9685
- appearance: none;
9686
- display: block;
9687
- background: transparent;
9688
- box-sizing: border-box;
9689
- width: 100%;
9690
- outline: none;
9691
- padding: 0;
9692
- }
9693
-
9694
- .svc-creator--mobile .spg-search-editor_input {
9695
- font-size: max(16px, var(--ctr-font-small-size, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))));
9696
10133
  }
9697
-
9698
- .spg-search-editor_input::placeholder {
10134
+ .svc-side-bar .svc-search__input::placeholder {
9699
10135
  color: var(--ctr-property-grid-search-text-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
9700
10136
  }
9701
-
9702
- .spg-search-editor_toolbar {
9703
- display: flex;
9704
- gap: var(--ctr-search-toolbar-gap, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9705
- justify-content: flex-end;
9706
- align-items: center;
9707
- flex-shrink: 0;
9708
- }
9709
-
9710
- .spg-search-editor_toolbar .sv-action-bar {
9711
- gap: var(--ctr-search-toolbar-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9712
- margin: 0;
9713
- flex-shrink: 0;
9714
- }
9715
-
9716
- .spg-search-editor_toolbar .sv-action--hidden {
9717
- display: none;
9718
- }
9719
-
9720
- .spg-search-editor_toolbar .spg-search-editor_bar-item {
9721
- height: min-content;
9722
- margin: 0;
9723
- border-radius: var(--ctr-search-button-corner-radius);
9724
- padding: var(--ctr-search-button-padding-vertical, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-search-button-padding-horizontal, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-search-button-padding-vertical, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-search-button-padding-horizontal, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9725
- }
9726
-
9727
- .spg-search-editor_bar-item:not(.sv-action-bar-item--pressed):hover:enabled, .spg-search-editor_bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
10137
+ .svc-side-bar .svc-search__bar-item:not(.sv-action-bar-item--pressed):hover:enabled, .svc-side-bar .svc-search__bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
9728
10138
  background-color: var(--ctr-property-grid-search-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
9729
10139
  }
9730
-
9731
- .spg-search-editor_toolbar .sv-action-bar-item__icon use {
10140
+ .svc-side-bar .svc-search__toolbar .sv-action-bar-item__icon use {
9732
10141
  fill: var(--ctr-property-grid-search-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
9733
10142
  }
9734
-
9735
- .spg-search-editor_toolbar-counter {
9736
- --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
9737
- --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
9738
- --ctr-small-bold-line-height: var(--small-bold-font-size);
9739
- font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
9740
- font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
9741
- font-style: normal;
9742
- font-weight: 400;
9743
- line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
9744
- font-weight: 600;
10143
+ .svc-side-bar .svc-search__toolbar-counter {
9745
10144
  color: var(--ctr-property-grid-search-count-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
9746
- display: flex;
9747
- flex-shrink: 0;
9748
10145
  }
9749
-
9750
- .spg-search-editor_search-icon {
10146
+ .svc-side-bar .svc-search__search-icon {
9751
10147
  width: var(--ctr-property-grid-search-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9752
10148
  height: var(--ctr-property-grid-search-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9753
10149
  }
9754
- .spg-search-editor_search-icon .sv-svg-icon {
10150
+ .svc-side-bar .svc-search__search-icon .sv-svg-icon {
9755
10151
  width: var(--ctr-property-grid-search-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9756
10152
  height: var(--ctr-property-grid-search-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
9757
10153
  }
9758
- .spg-search-editor_search-icon .sv-svg-icon use {
10154
+ .svc-side-bar .svc-search__search-icon .sv-svg-icon use {
9759
10155
  fill: var(--ctr-property-grid-search-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
9760
10156
  }
9761
10157
 
@@ -9981,8 +10377,8 @@ input.spg-input:read-only::placeholder {
9981
10377
  flex-grow: 1;
9982
10378
  }
9983
10379
  .spg-title-toolbar--single-help-action .spg-help-action .spg-action-button--icon {
9984
- opacity: 0.5;
9985
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
10380
+ padding: var(--ctr-actionbar-button-padding-top-small-icon, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-actionbar-button-padding-right-small-icon, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-actionbar-button-padding-bottom-small-icon, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-actionbar-button-padding-left-small-icon, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
10381
+ opacity: var(--ctr-actionbar-button-opacity-muted, 0.5);
9986
10382
  }
9987
10383
  .spg-title-toolbar--single-help-action .spg-help-action .spg-action-button--icon:focus,
9988
10384
  .spg-title-toolbar--single-help-action .spg-help-action .spg-action-button--icon:hover {
@@ -9991,6 +10387,10 @@ input.spg-input:read-only::placeholder {
9991
10387
  .spg-title-toolbar--single-help-action .spg-help-action .spg-action-button:active {
9992
10388
  opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
9993
10389
  }
10390
+ .spg-title-toolbar--single-help-action .spg-help-action .spg-action-button__icon {
10391
+ width: var(--ctr-actionbar-button-icon-width-small, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
10392
+ height: var(--ctr-actionbar-button-icon-height-small, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
10393
+ }
9994
10394
  .spg-title-toolbar--single-help-action .spg-help-action svg {
9995
10395
  fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
9996
10396
  }
@@ -10088,10 +10488,20 @@ input.spg-input:read-only::placeholder {
10088
10488
  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
10089
10489
  }
10090
10490
 
10491
+ .sv-action-bar--default-size-mode .sv-action-bar-item {
10492
+ height: auto;
10493
+ width: auto;
10494
+ }
10495
+
10091
10496
  .sv-action-bar--small-size-mode .sv-action-bar-separator {
10092
10497
  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
10093
10498
  }
10094
10499
 
10500
+ .sv-action-bar--small-size-mode .sv-action-bar-item {
10501
+ height: auto;
10502
+ width: auto;
10503
+ }
10504
+
10095
10505
  .svc-creator--mobile .sv-action-bar-separator {
10096
10506
  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
10097
10507
  }
@@ -10159,6 +10569,10 @@ input.spg-input:read-only::placeholder {
10159
10569
  transition: background-color var(--sjs-creator-transition-duration, 150ms);
10160
10570
  height: auto;
10161
10571
  }
10572
+ .svc-top-bar .sv-action-bar-item--icon {
10573
+ padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
10574
+ border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0);
10575
+ }
10162
10576
  .svc-top-bar .sv-action-bar-item__icon {
10163
10577
  width: var(--ctr-menu-toolbar-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
10164
10578
  height: var(--ctr-menu-toolbar-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
@@ -10176,9 +10590,6 @@ input.spg-input:read-only::placeholder {
10176
10590
  .svc-top-bar .sv-action-bar-item:disabled {
10177
10591
  opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
10178
10592
  }
10179
- .svc-top-bar .sv-action-bar-item--secondary .sv-action-bar-item__icon use {
10180
- fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
10181
- }
10182
10593
  .svc-top-bar .sv-action-bar-item--active .sv-action-bar-item__icon use {
10183
10594
  fill: var(--ctr-menu-toolbar-button-text-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
10184
10595
  }
@@ -10203,6 +10614,10 @@ input.spg-input:read-only::placeholder {
10203
10614
  border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
10204
10615
  box-sizing: border-box;
10205
10616
  }
10617
+ .svc-footer-bar .svc-toolbar-wrapper .sv-action-bar-item__icon {
10618
+ width: var(--ctr-menu-toolbar-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
10619
+ height: var(--ctr-menu-toolbar-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
10620
+ }
10206
10621
  /*!*******************************************************************************************************************************************************************************************!*\
10207
10622
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/custom-questions/boolean-switch.scss ***!
10208
10623
  \*******************************************************************************************************************************************************************************************/