Merge branch 'master' into bug/private-tasks-237-ranking-ux

src/base-interfaces.ts

@@ -317,6 +317,7 @@ export interface IPanel extends ISurveyElement, IParentElement {
   indexOf(el: IElement): number;
   elements: Array<IElement>;
   ensureRowsVisibility(): void;
+  validateContainerOnly(): void;
 }
 export interface IPage extends IPanel, IConditionRunner {
   isStartPage: boolean;

src/common-styles/sv-save-data.scss

@@ -7,7 +7,7 @@
   background: $background;
   opacity: 0;
   padding: calcSize(3) calcSize(6);
-  box-shadow: 0px 2px 6px $shadow-medium;
+  box-shadow: $shadow-medium;
   border-radius: calcCornerRadius(2);
   color: $foreground;
   min-width: calcSize(30);

src/defaultV2-theme/blocks/sd-boolean.scss

@@ -1,10 +1,15 @@
+.sd-boolean-root {
+  box-shadow: $shadow-inner;
+  border-radius: calcSize(12.5);
+}
+
 .sd-boolean {
   display: flex;
   width: max-content;
   position: relative;
   padding: calcSize(0.5);
-  background: $editor-background;
-  box-shadow: $editor-boxshadow;
+  background-color: $editor-background;
+  box-shadow: $shadow-inner;
   border-radius: calcSize(12.5);
 }
 
@@ -45,8 +50,8 @@
 }
 
 .sd-boolean__thumb {
-  background: $background;
-  box-shadow: 0px 1px 2px $shadow-inner;
+  background-color: $background;
+  box-shadow: $shadow-small;
   border-radius: calcSize(12.5);
   transition-duration: 0.2s;
   transition-property: margin-left, transform;

src/defaultV2-theme/blocks/sd-button.scss

@@ -6,7 +6,7 @@
   -moz-appearance: none;
   padding: calcSize(2) calcSize(6);
   background: $background;
-  box-shadow: 0px 1px 2px $shadow-inner;
+  box-shadow: $shadow-small;
   border-radius: calcCornerRadius(1);
   cursor: pointer;
 

src/defaultV2-theme/blocks/sd-dropdown.scss

@@ -39,9 +39,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: var(--font-family, $font-family);
-  font-size: calcFontSize(1);
-  color: $foreground;
+  line-height: calcLineHeight(1.5);
+  font-family: $font-editorfont-family;
+  font-weight: $font-editorfont-weight;
+  color: $font-editorfont-color;
+  font-size: $font-editorfont-size;
 
   position: relative;
 }

src/defaultV2-theme/blocks/sd-element.scss

@@ -19,13 +19,16 @@
   opacity: 0.35;
 }
 
+.sd-title.sd-element__title {
+  font-family: $font-questiontitle-family;
+  font-weight: $font-questiontitle-weight;
+  color: $font-questiontitle-color;
+}
+
 .sd-element__title {
   font-size: 0;
   line-height: 0;
   position: static;
-  font-family: $font-questiontitle-family;
-  font-weight: $font-questiontitle-weight;
-  color: $font-questiontitle-color;
   margin: 0;
 
   .sd-element__num {
@@ -125,7 +128,7 @@
   padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
   padding-bottom: var(--sd-base-padding);
   background: $question-background;
-  box-shadow: $questionpanel-boxshadow;
+  box-shadow: $shadow-small;
 
   &.sd-question--paneldynamic {
     padding-bottom: 0;

src/defaultV2-theme/blocks/sd-input.scss

@@ -13,7 +13,7 @@
   color: $font-editorfont-color;
   font-size: $font-editorfont-size;
   background-color: $editor-background;
-  box-shadow: $editor-boxshadow;
+  box-shadow: $shadow-inner;
   border: none;
   border-radius: $editor-corner-radius;
   text-align: start;

src/defaultV2-theme/blocks/sd-item.scss

@@ -11,7 +11,7 @@
   height: calcSize(3);
   box-sizing: border-box;
   background: var(--sd-item-default-background, $editor-background);
-  box-shadow: $editor-boxshadow;
+  box-shadow: $shadow-inner;
   border: none;
   flex-shrink: 0;
 }
@@ -36,12 +36,12 @@
 }
 
 .sd-item__control-label {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-editorfont-family;
   font-style: normal;
   font-weight: normal;
   line-height: calcLineHeight(1.5);
-  font-size: calcFontSize(1);
-  color: $foreground;
+  font-size: $font-editorfont-size;
+  color: $font-editorfont-color;
   white-space: normal;
   word-break: break-word;
   width: 100%;

src/defaultV2-theme/blocks/sd-question.scss

@@ -123,7 +123,7 @@
   background-color: $background;
   color: $foreground;
   opacity: 0.75;
-  box-shadow: 0px 2px 6px $shadow-medium;
+  box-shadow: $shadow-medium;
   z-index: 1000;
 }
 

src/defaultV2-theme/blocks/sd-rating.scss

@@ -44,8 +44,8 @@
 
 .sd-rating__item {
   position: relative;
-  background: $background;
-  box-shadow: 0px 1px 2px $shadow-inner;
+  background: transparent;
+  box-shadow: $shadow-small;
   border-radius: calcSize(12.5);
   white-space: nowrap;
   padding: calcSize(0.5) calcSize(2.5);
@@ -56,7 +56,7 @@
   box-sizing: border-box;
   min-width: calcSize(6);
   text-align: center;
-  border: 2px solid $background;
+  border: 2px solid transparent;
   color: $foreground;
   fill: $foreground;
   font-size: calcFontSize(1);
@@ -357,4 +357,8 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
   &.sd-rating__item--fixed-size {
     min-width: calcSize(3);
   }
-}
+}
+
+.sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
+  color: $primary-foreground;
+}

src/defaultV2-theme/blocks/sd-row.scss

@@ -33,7 +33,7 @@
   width: 100%;
   &:not(.sd-row--compact) {
     background: $question-background;
-    box-shadow: 0px 1px 2px $shadow-inner;
+    box-shadow: $shadow-small;
     border-radius: calcCornerRadius(1);
   }
   &.sd-row--compact {

src/defaultV2-theme/blocks/sd-timer.scss

@@ -10,8 +10,7 @@
   display: flex;
   border-radius: 100%;
   padding: calc(var(--sd-timer-size) / 144 * 8);
-  filter: drop-shadow(0px calcSize(1) calcSize(2) $shadow-medium);
-  box-shadow: 0 2px 6px #0000001a;
+  box-shadow: $shadow-large, $shadow-medium;
   box-sizing: border-box;
 }
 

src/defaultV2-theme/defaultV2.fontless.scss

@@ -143,7 +143,7 @@ body {
 
 .sv-popup.sv-popup--modal {
   .sv-popup__body-content {
-    box-shadow: 0px calcSize(1) calcSize(2) $shadow-medium;
+    box-shadow: $shadow-large;
     background-color: $background-dim-light;
   }
 

src/defaultV2-theme/variables.scss

@@ -10,16 +10,21 @@ $secondary-backcolor-semi-light: var(--sjs-secondary-backcolor-semi-light, rgba(
 $secondary-forecolor: var(--sjs-secondary-forecolor, #fff);
 $secondary-forecolor-light: var(--sjs-secondary-forecolor-light, rgba(#fff, 0.25));
 
-$editor-background: var(--sjs-editorpanel-backcolor,
-    var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
-$question-background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
+$editor-background: var(
+  --sjs-editorpanel-backcolor,
+  var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)))
+);
+$question-background: var(
+  --sjs-questionpanel-backcolor,
+  var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff)))
+);
 
 $background: var(--sjs-general-backcolor, var(--background, #fff));
 $background-dim: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 $background-dim-light: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
 $background-semitransparent: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
 $background-dark: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
-$background-dim-dark: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
+$background-dim-dark: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
 
 $corner-radius: var(--sjs-corner-radius, 4px);
 $editor-corner-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
@@ -34,8 +39,10 @@ $border: var(--sjs-border-default, var(--border, #d6d6d6));
 $border-light: var(--sjs-border-light, var(--border-light, #eaeaea));
 $border-inside: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
 
-$shadow-medium: rgba(0, 0, 0, 0.1);
-$shadow-inner: rgba(0, 0, 0, 0.15);
+$shadow-small: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+$shadow-medium: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+$shadow-large: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+$shadow-inner: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
 
 $red: var(--sjs-special-red, var(--red, #e60a3e));
 $red-light: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
@@ -51,7 +58,7 @@ $blue-light: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217,
 $blue-forecolor: var(--sjs-special-blue-forecolor, #ffffff);
 
 $font-family: var(--font-family);
-$font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+$font-size: var(--sjs-font-size, 16px);
 
 $font-surveytitle-family: var(--sjs-font-surveytitle-family, var(--font-family));
 $font-surveytitle-weight: var(--sjs-font-surveytitle-weight, 700);
@@ -64,27 +71,32 @@ $font-pagetitle-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-s
 
 $font-pagedescription-family: var(--sjs-font-pagedescription-family, var(--font-family));
 $font-pagedescription-weight: var(--sjs-font-pagedescription-weight, 400);
-$font-pagedescription-color: var(--sjs-font-pagedescription-color,
-    var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+$font-pagedescription-color: var(
+  --sjs-font-pagedescription-color,
+  var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45))
+);
 $font-pagedescription-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, $font-size)));
 
 $font-questiontitle-family: var(--sjs-font-questiontitle-family, var(--font-family));
 $font-questiontitle-weight: var(--sjs-font-questiontitle-weight, 600);
-$font-questiontitle-color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+$font-questiontitle-color: var(
+  --sjs-font-questiontitle-color,
+  var(--sjs-general-forecolor, var(--foreground, #161616))
+);
 $font-questiontitle-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, $font-size)));
 
 $font-questiondescription-family: var(--sjs-font-questiondescription-family, var(--font-family));
 $font-questiondescription-weight: var(--sjs-font-questiondescription-weight, 400);
-$font-questiondescription-color: var(--sjs-font-questiondescription-color,
-    var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+$font-questiondescription-color: var(
+  --sjs-font-questiondescription-color,
+  var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45))
+);
 $font-questiondescription-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, $font-size)));
 
 $font-editorfont-family: var(--sjs-font-editorfont-family, var(--font-family));
 $font-editorfont-weight: var(--sjs-font-editorfont-weight, 400);
 $font-editorfont-color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
 $font-editorfont-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, $font-size)));
-$questionpanel-boxshadow: var(--sjs-shadow-small, 0px 1px 2px 0px $shadow-inner);
-$editor-boxshadow: var(--sjs-shadow-inner, inset 0px 1px 2px $shadow-inner);
 $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @function calcSize($multiplier) {

src/knockout/kosurvey.ts

@@ -66,7 +66,7 @@ export class SurveyImplementor extends ImplementorBase {
     if (typeof ko === "undefined")
       throw new Error("knockoutjs library is not loaded.");
     const page = this.survey.activePage;
-    if(!!page) {
+    if (!!page) {
       page.updateCustomWidgets();
     }
     this.survey.updateElementCss(false);
@@ -85,12 +85,12 @@ export class SurveyImplementor extends ImplementorBase {
     ko.renderTemplate(
       "survey-content",
       this.survey,
-      { },
+      {},
       this.renderedElement
     );
   }
   public koEventAfterRender(element: any, survey: any) {
-    if(survey["needRenderIcons"]) {
+    if (survey["needRenderIcons"]) {
       SvgRegistry.renderIcons();
     }
     survey.afterRenderSurvey(element);
@@ -155,7 +155,7 @@ LocalizableString.prototype["onCreating"] = function () {
   var self = this;
   this.koHasHtml = ko.observable(this.hasHtml);
   this.koRenderedHtml = ko.observable(this.renderedHtml);
-  this.onStringChanged.add(function() {
+  this.onStringChanged.add(function () {
     const hasHtml = self.hasHtml;
     self.koHasHtml(hasHtml);
     self.koRenderedHtml(hasHtml ? self.getHtmlValue() : self.calculatedText);
@@ -259,6 +259,27 @@ export var registerTemplateEngine = (ko: any, platform: string) => {
   ko.setTemplateEngine(surveyTemplateEngineInstance);
 };
 
+ko.bindingHandlers["elementStyle"] = {
+  update: function (element, valueAccessor, allBindings) {
+    if (element && element.style.length) {
+      for (let index = element.style.length - 1; index >= 0; index--) {
+        const style = element.style[index] as string;
+        if (style && style.indexOf("--sjs-") === 0) {
+          element.style.removeProperty(style);
+        }
+      }
+    }
+    var value = ko.utils.unwrapObservable(valueAccessor()) || {};
+    Object.keys(value).forEach(key => {
+      if(key.indexOf("--") === 0) {
+        element.style.setProperty(key, value[key]);
+      } else {
+        element.style[key] = value[key];
+      }
+    });
+  }
+};
+
 ko.bindingHandlers["key2click"] = {
   init: function (element: HTMLElement, valueAccessor, allBindingsAccessor, viewModel: any) {
     const options: IAttachKey2clickOptions = { ...valueAccessor() } || {

src/knockout/templates/index.html

@@ -4,7 +4,7 @@
 </script>
 
 <script type="text/html" id="survey-content-template">
-  <div data-bind="css: rootCss, style: themeVariables">
+  <div data-bind="css: rootCss, elementStyle: themeVariables">
       <form onsubmit="return false;" data-bind="style: { backgroundColor: renderBackgroundOpacity }">
           <div class="sv_custom_header" data-bind="visible: !hasLogo"></div>
           <div data-bind="css: containerCss">

src/panel.ts

@@ -745,6 +745,12 @@ export class PanelModelBase extends SurveyElement<Question>
     }
     return !rec.result;
   }
+  public validateContainerOnly(): void {
+    this.hasErrorsInPanels({ fireCallback: true });
+    if(!!this.parent) {
+      this.parent.validateContainerOnly();
+    }
+  }
   private hasErrorsInPanels(rec: any) {
     var errors = <Array<any>>[];
     this.hasRequiredError(rec, errors);

src/question.ts

@@ -1761,6 +1761,11 @@ export class Question extends SurveyElement<Question>
    * @see [Data Validation](https://surveyjs.io/form-library/documentation/data-validation)
    */
   public validate(fireCallback: boolean = true, rec: any = null): boolean {
+    if(!!rec && rec.isOnValueChanged) {
+      if(!!this.parent) {
+        this.parent.validateContainerOnly();
+      }
+    }
     return !this.hasErrors(fireCallback, rec);
   }
   public get currentErrorCount(): number {

src/question_custom.ts

@@ -573,6 +573,9 @@ export abstract class QuestionCustomModelBase extends Question
   ensureRowsVisibility(): void {
     // do nothing
   }
+  validateContainerOnly(): void {
+    // do nothing
+  }
   protected getContentDisplayValueCore(keyAsText: boolean, value: any, question: Question): any {
     if (!question) return super.getDisplayValueCore(keyAsText, value);
     return this.customQuestion.getDisplayValue(keyAsText, value, question);