resolve #8452 Enable the questionTitleWidth setting (for panel and pa…

…ge) when at least one question within a panel has titleLocation set to left (#8464)

Co-authored-by: OlgaLarina <[email protected]>

src/panel.ts

@@ -1115,6 +1115,21 @@ export class PanelModelBase extends SurveyElement<Question>
     if (this.parent) return this.parent.getQuestionTitleLocation();
     return this.survey ? this.survey.questionTitleLocation : "top";
   }
+  availableQuestionTitleWidth(): boolean {
+    const questionTitleLocation = this.getQuestionTitleLocation();
+    if (questionTitleLocation === "left") return true;
+    return this.hasElementWithTitleLocationLeft();
+  }
+  hasElementWithTitleLocationLeft(): boolean {
+    const result = this.elements.some(el => {
+      if (el instanceof PanelModelBase) {
+        return el.hasElementWithTitleLocationLeft();
+      } else if (el instanceof Question) {
+        return el.getTitleLocation() === "left";
+      }
+    });
+    return result;
+  }
   /**
    * Sets consistent width for question titles in CSS values. Applies only when [`questionTitleLocation`](#questionTitleLocation) evaluates to `"left"`.
    *
@@ -2161,7 +2176,7 @@ Serializer.addClass(
     {
       name: "questionTitleWidth",
       visibleIf: function (obj: any) {
-        return !!obj && obj["getQuestionTitleLocation"]() === "left";
+        return !!obj && obj["availableQuestionTitleWidth"]();
       }
     },
     {

tests/surveytests.ts

@@ -6920,6 +6920,29 @@ QUnit.test("Define questionTitleWidth on Panel/Page level", function (assert) {
   assert.equal(q.titleWidth, undefined, "titleWidth available if titleLocation is left");
 });
 
+QUnit.test("availableQuestionTitleWidth on Panel/Page", function (assert) {
+  const survey = new SurveyModel();
+  const page = survey.addNewPage("page");
+  const panel = page.addNewPanel("panel");
+  const panel2 = panel.addNewPanel("panel2");
+  const q = <Question>panel.addNewQuestion("text");
+
+  assert.equal(page.availableQuestionTitleWidth(), false, "page");
+  assert.equal(panel.availableQuestionTitleWidth(), false, "panel1");
+  assert.equal(panel2.availableQuestionTitleWidth(), false, "panel2");
+
+  q.titleLocation = "left";
+  assert.equal(page.availableQuestionTitleWidth(), true, "page");
+  assert.equal(panel.availableQuestionTitleWidth(), true, "panel1");
+  assert.equal(panel2.availableQuestionTitleWidth(), false, "panel2");
+
+  q.titleLocation = "top";
+  page.questionTitleLocation = "left";
+  assert.equal(page.availableQuestionTitleWidth(), true, "page");
+  assert.equal(panel.availableQuestionTitleWidth(), true, "panel1");
+  assert.equal(panel2.availableQuestionTitleWidth(), true, "panel2");
+});
+
 QUnit.test("Question property.page getChoices", function (assert) {
   var property = Serializer.findProperty("questionbase", "page");
   assert.ok(property, "page property is here");