Calc elements css styles on demand

packages/survey-core/src/page.ts

@@ -249,15 +249,26 @@ export class PageModel extends PanelModel implements IPage {
    * Returns `true` if the respondent has already seen this page during the current session.
    */
   public get wasShown(): boolean {
-    return this.hasShownValue;
+    return this.wasRendered;
   }
+  //TODO remove this property & property above
   get hasShown(): boolean {
-    return this.wasShown;
+    return this.wasRendered;
   }
-  public setWasShown(val: boolean) {
-    if (val == this.hasShownValue) return;
-    this.hasShownValue = val;
-    if (this.isDesignMode || val !== true) return;
+  protected onFirstRenderingCore(): void {
+    if (!this.isDesignMode) {
+      this.randomizeElementsCore();
+    }
+    super.onFirstRenderingCore();
+  }
+  public setWasShown(val: boolean): void {
+    if(val) {
+      this.onFirstRendering();
+    } else {
+      this.clearWasRendered();
+    }
+  }
+  private randomizeElementsCore(): void {
     var els = this.elements;
     for (var i = 0; i < els.length; i++) {
       if (els[i].isPanel) {
@@ -269,7 +280,7 @@ export class PageModel extends PanelModel implements IPage {
   /**
    * Scrolls this page to the top.
    */
-  public scrollToTop() {
+  public scrollToTop(): void {
     if (!!this.survey) {
       this.survey.scrollElementToTop(this, null, this, this.id);
     }

packages/survey-core/src/question.ts

@@ -158,7 +158,7 @@ export class Question extends SurveyElement<Question>
     const setValueIfInfo = this.addTriggerInfo("setValueIf", (): boolean => true, (): void => this.runSetValueExpression());
     setValueIfInfo.runSecondCheck = (keys: any): boolean => this.checkExpressionIf(keys);
     this.registerPropertyChangedHandlers(["width"], () => {
-      this.updateQuestionCss();
+      this.updateElementCss();
       if (!!this.parent) {
         this.parent.elementWidthChanged(this);
       }
@@ -168,7 +168,7 @@ export class Question extends SurveyElement<Question>
         this.validate();
       }
       this.locTitle.strChanged();
-      this.clearCssClasses();
+      this.updateElementCss(true);
     });
     this.registerPropertyChangedHandlers(
       ["indent", "rightIndent"],
@@ -184,7 +184,7 @@ export class Question extends SurveyElement<Question>
       }
     );
     this.registerFunctionOnPropertiesValueChanged(["no", "readOnly", "hasVisibleErrors", "containsErrors"], () => {
-      this.updateQuestionCss();
+      this.updateElementCss();
     });
     this.registerPropertyChangedHandlers(["_isMobile"], () => { this.onMobileChanged(); });
     this.registerPropertyChangedHandlers(["colSpan"], () => { this.parent?.updateColumns(); });
@@ -433,7 +433,7 @@ export class Question extends SurveyElement<Question>
       }
     }
     if(val !== this.visible && this.areInvisibleElementsShowing) {
-      this.updateQuestionCss(true);
+      this.updateElementCss(true);
     }
   }
   /**
@@ -664,7 +664,7 @@ export class Question extends SurveyElement<Question>
     this.removeFromParent();
     this.setPropertyValue("parent", val);
     if(!!val) {
-      this.updateQuestionCss();
+      this.updateElementCss();
     }
     this.onParentChanged();
   }
@@ -702,7 +702,7 @@ export class Question extends SurveyElement<Question>
     var isVisibilityChanged =
       this.titleLocation == "hidden" || value == "hidden";
     this.setPropertyValue("titleLocation", value.toLowerCase());
-    this.updateQuestionCss();
+    this.updateElementCss();
     if (isVisibilityChanged) {
       this.notifySurveyVisibilityChanged();
     }
@@ -843,7 +843,7 @@ export class Question extends SurveyElement<Question>
   }
   public set descriptionLocation(val: string) {
     this.setPropertyValue("descriptionLocation", val);
-    this.updateQuestionCss();
+    this.updateElementCss();
   }
   get hasDescriptionUnderTitle(): boolean {
     return this.getDescriptionLocation() == "underTitle" && this.hasDescription;
@@ -1041,7 +1041,7 @@ export class Question extends SurveyElement<Question>
     return classes;
   }
   public get cssRoot(): string {
-    this.ensureElementCss();
+    this.ensureCssClasses();
     return this.getPropertyValue("cssRoot", "");
   }
   protected setCssRoot(val: string): void {
@@ -1067,7 +1067,7 @@ export class Question extends SurveyElement<Question>
       .toString();
   }
   public get cssHeader(): string {
-    this.ensureElementCss();
+    this.ensureCssClasses();
     return this.getPropertyValue("cssHeader", "");
   }
   protected setCssHeader(val: string): void {
@@ -1085,7 +1085,7 @@ export class Question extends SurveyElement<Question>
     return false;
   }
   public get cssContent(): string {
-    this.ensureElementCss();
+    this.ensureCssClasses();
     return this.getPropertyValue("cssContent", "");
   }
   protected setCssContent(val: string): void {
@@ -1099,7 +1099,7 @@ export class Question extends SurveyElement<Question>
       .toString();
   }
   public get cssTitle(): string {
-    this.ensureElementCss();
+    this.ensureCssClasses();
     return this.getPropertyValue("cssTitle", "");
   }
   protected setCssTitle(val: string): void {
@@ -1113,7 +1113,7 @@ export class Question extends SurveyElement<Question>
       .toString();
   }
   public get cssDescription(): string {
-    this.ensureElementCss();
+    this.ensureCssClasses();
     return this.getPropertyValue("cssDescription", "");
   }
   protected setCssDescription(val: string): void {
@@ -1146,7 +1146,7 @@ export class Question extends SurveyElement<Question>
   }
 
   public get cssError(): string {
-    this.ensureElementCss();
+    this.ensureCssClasses();
     return this.getPropertyValue("cssError", "");
   }
   protected setCssError(val: string): void {
@@ -1176,34 +1176,24 @@ export class Question extends SurveyElement<Question>
       .toString();
   }
 
-  public getQuestionRootCss() {
+  public getQuestionRootCss(): string {
     return new CssClassBuilder()
       .append(this.cssClasses.root)
       .append(this.cssClasses.rootMobile, this.isMobile)
       .toString();
   }
-  public updateElementCss(reNew?: boolean): void {
-    super.updateElementCss(reNew);
-    if (reNew) {
-      this.updateQuestionCss(true);
-    }
+  protected clearElementsCssClasses(): void {
+    super.clearElementsCssClasses();
+    this.resetPropertyValue("cssRoot");
+    this.resetPropertyValue("cssHeader");
+    this.resetPropertyValue("cssContent");
+    this.resetPropertyValue("cssTitle");
+    this.resetPropertyValue("cssDescription");
+    this.resetPropertyValue("cssError");
     this.resetIndents();
   }
-  protected updateQuestionCss(reNew?: boolean): void {
-    if (
-      this.isLoadingFromJson ||
-      !this.survey ||
-      (reNew !== true && !this.cssClassesValue)
-    )
-      return;
-    this.updateElementCssCore(this.cssClasses);
-  }
-  private ensureElementCss() {
-    if (!this.cssClassesValue) {
-      this.updateQuestionCss(true);
-    }
-  }
   protected updateElementCssCore(cssClasses: any): void {
+    super.updateElementCssCore(cssClasses);
     this.setCssRoot(this.getCssRoot(cssClasses));
     this.setCssHeader(this.getCssHeader(cssClasses));
     this.setCssContent(this.getCssContent(cssClasses));
@@ -1470,7 +1460,7 @@ export class Question extends SurveyElement<Question>
     if (this.isReadOnly) {
       this.clearErrors();
     }
-    this.updateQuestionCss();
+    this.updateElementCss();
     this.resetRenderedCommentPlaceholder();
   }
   /**
@@ -2129,7 +2119,7 @@ export class Question extends SurveyElement<Question>
     const oldVal = this.isAnswered;
     this.setPropertyValue("isAnswered", this.getIsAnswered());
     if (oldVal !== this.isAnswered) {
-      this.updateQuestionCss();
+      this.updateElementCss();
     }
   }
   protected getIsAnswered(): boolean {
@@ -2355,7 +2345,7 @@ export class Question extends SurveyElement<Question>
     this.allowNotifyValueChanged && this.onValueChanged();
     this.isSettingQuestionValue = false;
     if (this.isAnswered !== this.isOldAnswered) {
-      this.updateQuestionCss();
+      this.updateElementCss();
     }
     this.isOldAnswered = undefined;
     if (this.parent) {

packages/survey-core/src/question_dropdown.ts

@@ -265,12 +265,11 @@ export class QuestionDropdownModel extends QuestionSelectBase {
       updateListCssValues(res, css);
     }
   }
-  protected calcCssClasses(css: any): any {
-    const classes = super.calcCssClasses(css);
+  protected onCalcCssClasses(classes: any): void {
+    super.onCalcCssClasses(classes);
     if (this.dropdownListModelValue) {
       this.dropdownListModel.updateCssClasses(classes.popup, classes.list);
     }
-    return classes;
   }
 
   @property() suggestedItem: ItemValue;

packages/survey-core/src/question_file.ts

@@ -984,14 +984,16 @@ export class QuestionFileModel extends QuestionFileModelBase {
     this.loadFiles(files);
   }
 
-  protected calcCssClasses(css: any): any {
-    const classes = super.calcCssClasses(css);
-    this.actionsContainer.cssClasses = css.actionBar;
-    this.actionsContainer.cssClasses.itemWithTitle = this.actionsContainer.cssClasses.item;
-    this.actionsContainer.cssClasses.item = "";
-    this.actionsContainer.cssClasses.itemAsIcon = classes.contextButton;
-    this.actionsContainer.containerCss = classes.actionsContainer;
-    return classes;
+  protected onCalcCssClasses(classes: any): void {
+    super.onCalcCssClasses(classes);
+    const container = this.actionsContainer;
+    if(container) {
+      container.cssClasses = classes.actionBar;
+      container.cssClasses.itemWithTitle = container.cssClasses.item;
+      container.cssClasses.item = "";
+      container.cssClasses.itemAsIcon = classes.contextButton;
+      container.containerCss = classes.actionsContainer;
+    }
   }
   public onSurveyLoad(): void {
     super.onSurveyLoad();

packages/survey-core/src/question_paneldynamic.ts

@@ -2590,16 +2590,15 @@ export class QuestionPanelDynamicModel extends Question
     return this.isRenderModeList && index < this.renderedPanels.length - 1;
   }
 
-  protected calcCssClasses(css: any): any {
-    const classes = super.calcCssClasses(css);
+  protected onCalcCssClasses(classes: any): void {
+    super.onCalcCssClasses(classes);
     const additionalTitleToolbar = <AdaptiveActionContainer>this.additionalTitleToolbar;
     if (!!additionalTitleToolbar) {
       additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss(classes);
       additionalTitleToolbar.cssClasses = classes.tabs;
       additionalTitleToolbar.dotsItem.cssClasses = classes.tabs;
-      additionalTitleToolbar.dotsItem.popupModel.contentComponentData.model.cssClasses = css.list;
+      additionalTitleToolbar.dotsItem.popupModel.contentComponentData.model.cssClasses = classes.list;
     }
-    return classes;
   }
   protected onMobileChanged(): void {
     super.onMobileChanged();

packages/survey-core/src/question_rating.ts

@@ -900,12 +900,11 @@ export class QuestionRatingModel extends Question {
     super.updateCssClasses(res, css);
     updateListCssValues(res, css);
   }
-  protected calcCssClasses(css: any): any {
-    const classes = super.calcCssClasses(css);
+  protected onCalcCssClasses(classes: any): void {
+    super.onCalcCssClasses(classes);
     if(this.dropdownListModelValue) {
       this.dropdownListModelValue.updateCssClasses(classes.popup, classes.list);
     }
-    return classes;
   }
   public themeChanged(theme: ITheme): void {
     this.colorsCalculated = false;

packages/survey-core/src/question_tagbox.ts

@@ -172,12 +172,11 @@ export class QuestionTagboxModel extends QuestionCheckboxModel {
     super.updateCssClasses(res, css);
     updateListCssValues(res, css);
   }
-  protected calcCssClasses(css: any): any {
-    const classes = super.calcCssClasses(css);
+  protected onCalcCssClasses(classes: any): void {
+    super.onCalcCssClasses(classes);
     if (this.dropdownListModelValue) {
       this.dropdownListModel.updateCssClasses(classes.popup, classes.list);
     }
-    return classes;
   }
   public onOpened: EventBase<QuestionTagboxModel> = this.addEvent<QuestionTagboxModel>();
   public onOpenedCallBack(): void {