From c9f0c35cd5bfed96ec9c59157449cf3ac59dde78 Mon Sep 17 00:00:00 2001
From: Andrew Telnov <andrew.telnov@gmail.com>
Date: Wed, 13 Sep 2023 13:28:53 +0300
Subject: [PATCH] =?UTF-8?q?Progress=20bar=20with=20titles.=20Page=20name?=
 =?UTF-8?q?=20=E2=80=93>=20title=20fix=20#6925?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../progress/buttons/progress.component.html      |  4 ++--
 .../src/components/progress/ProgressButtons.vue   |  4 ++--
 src/knockout/components/progress/buttons.html     |  2 +-
 src/page.ts                                       |  3 +++
 src/panel.ts                                      |  7 +++++--
 src/react/reactSurveyProgressButtons.tsx          |  4 ++--
 src/surveyToc.ts                                  |  2 +-
 src/vue/progressButtons.vue                       |  4 ++--
 tests/surveytests.ts                              | 15 +++++++++++++++
 9 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/packages/survey-angular-ui/src/components/progress/buttons/progress.component.html b/packages/survey-angular-ui/src/components/progress/buttons/progress.component.html
index a14bb5c74d..4b63d91365 100644
--- a/packages/survey-angular-ui/src/components/progress/buttons/progress.component.html
+++ b/packages/survey-angular-ui/src/components/progress/buttons/progress.component.html
@@ -14,9 +14,9 @@
           (click)="isListElementClickable(index) ? clickListElement(index) : null">
           <div
             [class]="model.css.progressButtonsPageTitle"
-            [title]="page.locNavigationTitle.renderedHtml || page.name"
+            [title]="page.renderedNavigationTitle"
           >
-            {{ page.locNavigationTitle.renderedHtml || page.name }}
+            {{ page.renderedNavigationTitle }}
           </div>
           <div
             [class]="model.css.progressButtonsPageDescription"
diff --git a/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue b/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue
index be703193ad..43ba6ba318 100644
--- a/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue
+++ b/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue
@@ -21,9 +21,9 @@
           >
             <div
               :class="css.progressButtonsPageTitle"
-              :title="page.locNavigationTitle.renderedHtml || page.name"
+              :title="page.renderedNavigationTitle"
             >
-              {{ page.locNavigationTitle.renderedHtml || page.name }}
+              {{ page.renderedNavigationTitle }}
             </div>
             <div
               :class="css.progressButtonsPageDescription"
diff --git a/src/knockout/components/progress/buttons.html b/src/knockout/components/progress/buttons.html
index cf0a75ca27..5708166087 100644
--- a/src/knockout/components/progress/buttons.html
+++ b/src/knockout/components/progress/buttons.html
@@ -4,7 +4,7 @@
         <div data-bind="css: survey.css.progressButtonsListContainer">
             <ul data-bind="foreach: survey.visiblePages, css: survey.css.progressButtonsList">
                 <li data-bind="css: $parent.getListElementCss($index), click: $parent.isListElementClickable($index) ? $parent.clickListElement.bind($parent, $index) : null">
-                    <div data-bind="css: css.progressButtonsPageTitle, text: locNavigationTitle.koRenderedHtml() || name, attr: { title: locNavigationTitle.koRenderedHtml() || name }"></div>
+                    <div data-bind="css: css.progressButtonsPageTitle, text: renderedNavigationTitle, attr: { title: renderedNavigationTitle }"></div>
                     <div data-bind="css: css.progressButtonsPageDescription, text: locNavigationDescription.koRenderedHtml(), attr: { title: locNavigationDescription.koRenderedHtml() }"></div>
                 </li>
             </ul>
diff --git a/src/page.ts b/src/page.ts
index 55f6e72f88..25f7136eda 100644
--- a/src/page.ts
+++ b/src/page.ts
@@ -73,6 +73,9 @@ export class PageModel extends PanelModelBase implements IPage {
     this.locNavigationTitle.strChanged();
     this.locNavigationDescription.strChanged();
   }
+  public get renderedNavigationTitle(): string {
+    return this.locNavigationTitle.renderedHtml || this.title || this.name;
+  }
   public get passed(): boolean {
     return this.getPropertyValue("passed", false);
   }
diff --git a/src/panel.ts b/src/panel.ts
index e784cda253..e4453845e8 100644
--- a/src/panel.ts
+++ b/src/panel.ts
@@ -327,18 +327,21 @@ export class PanelModelBase extends SurveyElement<Question>
       (this.showDescription && this.isDesignMode &&
         settings.designMode.showEmptyDescriptions);
   }
-  public localeChanged() {
+  public localeChanged(): void {
     super.localeChanged();
     for (var i = 0; i < this.elements.length; i++) {
       (<Base>(<any>this.elements[i])).localeChanged();
     }
   }
-  public locStrsChanged() {
+  public locStrsChanged(): void {
     super.locStrsChanged();
     for (var i = 0; i < this.elements.length; i++) {
       this.elements[i].locStrsChanged();
     }
   }
+  public get renderedNavigationTitle(): string {
+    return this.title || this.name;
+  }
   /**
    * Returns a character or text string that indicates a required panel/page.
    * @see SurveyModel.requiredText
diff --git a/src/react/reactSurveyProgressButtons.tsx b/src/react/reactSurveyProgressButtons.tsx
index 4f97254735..30bf6d39c9 100644
--- a/src/react/reactSurveyProgressButtons.tsx
+++ b/src/react/reactSurveyProgressButtons.tsx
@@ -62,9 +62,9 @@ export class SurveyProgressButtons extends SurveyNavigationBase {
       >
         <div
           className={this.css.progressButtonsPageTitle}
-          title={page.navigationTitle || page.name}
+          title={page.renderedNavigationTitle}
         >
-          {page.navigationTitle || page.name}
+          {page.renderedNavigationTitle}
         </div>
         <div
           className={this.css.progressButtonsPageDescription}
diff --git a/src/surveyToc.ts b/src/surveyToc.ts
index f962bf6926..57ddafb720 100644
--- a/src/surveyToc.ts
+++ b/src/surveyToc.ts
@@ -32,7 +32,7 @@ export function createTOCListModel(survey: SurveyModel, onAction?: () => void) {
   var items = (pagesSource || []).map(page => {
     return new Action({
       id: page.name,
-      title: ((<any>page)["navigationTitle"]) || page.title || page.name,
+      title: page.renderedNavigationTitle,
       action: () => {
         if (typeof document !== undefined && !!document.activeElement) {
           !!(<any>document.activeElement).blur && (<any>document.activeElement).blur();
diff --git a/src/vue/progressButtons.vue b/src/vue/progressButtons.vue
index bc454dc808..7315281c6a 100644
--- a/src/vue/progressButtons.vue
+++ b/src/vue/progressButtons.vue
@@ -21,9 +21,9 @@
           >
             <div
               :class="css.progressButtonsPageTitle"
-              :title="page.locNavigationTitle.renderedHtml || page.name"
+              :title="page.renderedNavigationTitle"
             >
-              {{ page.locNavigationTitle.renderedHtml || page.name }}
+              {{ page.renderedNavigationTitle }}
             </div>
             <div
               :class="css.progressButtonsPageDescription"
diff --git a/tests/surveytests.ts b/tests/surveytests.ts
index 381f6a6399..446aebd2cf 100644
--- a/tests/surveytests.ts
+++ b/tests/surveytests.ts
@@ -232,6 +232,21 @@ QUnit.test(
     );
   }
 );
+QUnit.test("PageModel.renderedNavigationTitle", function (assert) {
+  const survey = new SurveyModel({
+    pages: [
+      { name: "page1" },
+      { name: "page2", title: "Page 2" },
+      { name: "page3", title: "Page 3", navigationTitle: "NavPage 3" },
+      { name: "page4", navigationTitle: "NavPage 4" },
+    ]
+  });
+  assert.equal(survey.pages[0].renderedNavigationTitle, "page1", "page1");
+  assert.equal(survey.pages[1].renderedNavigationTitle, "Page 2", "page2");
+  assert.equal(survey.pages[2].renderedNavigationTitle, "NavPage 3", "page3");
+  assert.equal(survey.pages[3].renderedNavigationTitle, "NavPage 4", "page4");
+});
+
 QUnit.test("PageModel passed property", function (assert) {
   var json = {
     pages: [