Fix completed html strings and styles (#9997)

* Fix completed html strings and styles

* Fix scr tests

* Fix scr tests

* Fix e2e test

* Fix scr tests

Author: dk981234

e2e/survey/cookie.spec.ts

@@ -49,11 +49,11 @@ frameworks.forEach((framework) => {
       await page.goto(`${url}${framework}`);
       await initSurvey(page, framework, json);
 
-      await expect(page.locator(".sd-body h3").getByText("You have already completed this survey.")).toBeVisible();
+      await expect(page.locator(".sd-body").getByText("You have already completed this survey.")).toBeVisible();
       await deleteCookie(page);
       await firstElement.hover();
 
-      await expect(page.locator(".sd-body h3").getByText("You have already completed this survey.")).not.toBeVisible();
+      await expect(page.locator(".sd-body").getByText("You have already completed this survey.")).not.toBeVisible();
     });
   });
 });

packages/survey-core/src/default-theme/blocks/sd-completedpage.scss

@@ -2,6 +2,7 @@
 @use "../mixins.scss" as mixins;
 
 .sd-completedpage,
+.sd-body--loading,
 .sd-completed-before-page {
   align-items: center;
   font-family: $font-family;
@@ -10,20 +11,20 @@
   text-align: center;
   height: auto;
   @include mixins.articleHtml;
+  &:not(:has(> *)) {
+    @include mixins.articleLargeFont;
+  }
 }
-
-.sd-completedpage:before,
-.sd-completedpage:after {
-  display: block;
-  width: calcSize(9);
-  margin-left: calc(50% - 4.5 * #{$base-unit});
-  content: "";
+.sd-completedpage {
+  &:has(> *) {
+    padding: calcSize(13) 0 calcSize(2) 0;
+  }
+  padding: calcSize(17) 0 calcSize(6) 0;
 }
-
-.sd-completedpage:before {
-  height: calcSize(13);
+.sd-body--loading,
+.sd-completed-before-page {
+  &:has(> *) {
+    padding: 0;
+  }
+  padding: calcSize(4) 0 calcSize(4) 0;
 }
-
-.sd-completedpage:after {
-  height: calcSize(2);
-}

packages/survey-core/src/default-theme/mixins.scss

@@ -102,7 +102,6 @@
   h2 {
     @include articleXLargeFont;
   }
-
   h3 {
     @include articleLargeFont;
   }
@@ -144,15 +143,19 @@
     font-size: $font-questiontitle-size;
     line-height: multiply(1.5, $font-questiontitle-size);
 
-    box-shadow: $shadow-small, 0 0 0 0px $primary;
+    box-shadow:
+      $shadow-small,
+      0 0 0 0px $primary;
     transition: box-shadow $transition-duration;
 
     &:hover {
       background-color: $background-dark;
     }
 
     &:focus {
-      box-shadow: $shadow-small-reset, 0 0 0 2px $primary;
+      box-shadow:
+        $shadow-small-reset,
+        0 0 0 2px $primary;
     }
 
     span {

packages/survey-core/src/localizablestring.ts

@@ -61,7 +61,6 @@ export class LocalizableString implements ILocalizableString {
   public onGetTextCallback: (str: string, nonProcessedText?: string) => string;
   public storeDefaultText: boolean;
   public serializeCallBackText: boolean;
-  public onGetLocalizationTextCallback: (str: string) => string;
   public onStrChanged: (oldValue: string, newValue: string) => void;
   public lastChangedLoc: string;
   public onSearchChanged: () => void;
@@ -155,9 +154,6 @@ export class LocalizableString implements ILocalizableString {
     }
     if (this.isValueEmpty(res) && !!this.getLocalizationName()) {
       res = this.getLocalizationStr();
-      if (!!this.onGetLocalizationTextCallback) {
-        res = this.onGetLocalizationTextCallback(res);
-      }
     }
     if (!res) res = this.defaultValue || "";
     return res;

packages/survey-core/src/survey.ts

@@ -950,10 +950,9 @@ export class SurveyModel extends SurveyElementCore
     // if (DomDocumentHelper.isAvailable()) {
     //   SurveyModel.stylesManager = new StylesManager();
     // }
-    const htmlCallBack = (str: string): string => { return "<h3>" + str + "</h3>"; };
-    this.createHtmlLocString("completedHtml", "completingSurvey", htmlCallBack);
-    this.createHtmlLocString("completedBeforeHtml", "completingSurveyBefore", htmlCallBack, "completed-before");
-    this.createHtmlLocString("loadingHtml", "loadingSurvey", htmlCallBack, "loading");
+    this.createHtmlLocString("completedHtml", "completingSurvey");
+    this.createHtmlLocString("completedBeforeHtml", "completingSurveyBefore", "completed-before");
+    this.createHtmlLocString("loadingHtml", "loadingSurvey", "loading");
     this.createLocalizableString("emptySurveyText", this, true, "emptySurvey");
     this.createLocalizableString("logo", this, false);
     this.createLocalizableString("startSurveyText", this, false, true);
@@ -1170,9 +1169,8 @@ export class SurveyModel extends SurveyElementCore
       }
     };
   }
-  private createHtmlLocString(name: string, locName: string, func: (str: string) => string, reason?: string): void {
+  private createHtmlLocString(name: string, locName: string, reason?: string): void {
     const res = this.createLocalizableString(name, this, false, locName);
-    res.onGetLocalizationTextCallback = func;
     if (reason) {
       res.onGetTextCallback = (str: string): string => { return this.processHtml(str, reason); };
     }
@@ -2614,9 +2612,6 @@ export class SurveyModel extends SurveyElementCore
   get locLoadingHtml(): LocalizableString {
     return this.getLocalizableString("loadingHtml");
   }
-  public get defaultLoadingHtml(): string {
-    return "<h3>" + this.getLocalizationString("loadingSurvey") + "</h3>";
-  }
   public get navigationBar(): ActionContainer {
     if (!this.navigationBarValue) {
       this.navigationBarValue = this.createNavigationBar();

packages/survey-core/tests/surveytests.ts

@@ -3506,14 +3506,6 @@ QUnit.test("pre process title, 'locale' variable", function (assert) {
   );
 });
 
-QUnit.test("Default value completedHtml, completedBeforeHtml and loadingHtml", function (assert) {
-  const survey = new SurveyModel();
-  survey.locale = "";
-  assert.ok(survey.completedHtml.indexOf("</h3>") > -1, "h3 is here, default completedHtml");
-  assert.ok(survey.completedBeforeHtml.indexOf("</h3>") > -1, "h3 is here, default completedBeforeHtml");
-  assert.ok(survey.loadingHtml.indexOf("</h3>") > -1, "h3 is here, default loadingHtml");
-});
-
 QUnit.test(
   "pre process title with variables in Capital letters, bug#1099",
   function (assert) {