Introduce survey element getPanelInDesignMode function (#10572)

Author: andrewtelnov

packages/survey-core/src/page.ts

@@ -70,6 +70,7 @@ export class PageModel extends PanelModel implements IPage {
   public getTemplate(): string {
     return this.isPanel ? "panel" : super.getTemplate();
   }
+  public getPanelInDesignMode(): PanelModel { return null; }
   public get no(): string {
     if (!this.canShowPageNumber() || !this.survey) return "";
     let no = this.isStartPage ? "" : this.num + ". ";

packages/survey-core/src/panel.ts

@@ -2215,6 +2215,7 @@ export class PanelModel extends PanelModelBase implements IElement {
   public moveTo(container: IPanel, insertBefore: any = null): boolean {
     return this.moveToBase(this.parent, container, insertBefore);
   }
+  public getPanelInDesignMode(): PanelModel { return this; }
   /**
    * Returns the visible index of the panel in the survey. Commonly it is -1 and it doesn't show.
    * You have to set showNumber to true to show index/numbering for the Panel

packages/survey-core/src/question_matrixdropdownbase.ts

@@ -1217,8 +1217,10 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     return this.detailPanelValue;
   }
   public getPanels(): Array<IPanel> {
-    return [this.detailPanel];
+    const pnl = this.getPanelInDesignMode();
+    return !!pnl ? [pnl] : null;
   }
+  public getPanelInDesignMode(): PanelModel { return this.detailPanelMode !== "none" ? this.detailPanel : null; }
   /**
    * An array of survey elements (questions and panels) to be displayed in detail sections.
    *

packages/survey-core/src/question_paneldynamic.ts

@@ -385,6 +385,7 @@ export class QuestionPanelDynamicModel extends Question
   public get template(): PanelModel {
     return this.templateValue;
   }
+  public getPanelInDesignMode() : PanelModel { return this.template; }
   public getPanels(): Array<IPanel> {
     return [this.template];
   }

packages/survey-core/src/survey-element.ts

@@ -357,6 +357,7 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
     this.onParentQuestionChanged();
   }
   protected onParentQuestionChanged(): void { }
+  public getPanelInDesignMode(): PanelModel { return null; }
   public updateElementVisibility(): void {
     this.setPropertyValue("isVisible", this.isVisible);
   }

packages/survey-core/tests/paneltests.ts

@@ -3804,3 +3804,7 @@ QUnit.test("page questionStartIndex, Issue#10523", function (assert) {
   assert.equal(q6.no, "B.2.1", "q6, #1");
   assert.equal(q7.no, "B.2.2", "q7, #1");
 });
+QUnit.test("Panel/Page getPanelInDesignMode", function (assert) {
+  assert.notOk(new PageModel("p1").getPanelInDesignMode(), "page returns null");
+  assert.equal(new PanelModel("p1").getPanelInDesignMode().name, "p1", "panel returns itself");
+});

packages/survey-core/tests/question_matrixdropdownbasetests.ts

@@ -25,13 +25,18 @@ QUnit.test(" 213 123sad d213 sadsd", function (assert) {
 });
 QUnit.test("allowAdaptiveActions", function (assert) {
   const matrix = new QuestionMatrixDropdownModelBase("q1");
+  matrix.detailPanelMode = "underRow";
   assert.equal(matrix.allowAdaptiveActions, false, "matrix.allowAdaptiveActions");
   assert.equal(matrix.getPanels()[0]["allowAdaptiveActions"], true, "matrix.panel.allowAdaptiveActions");
 
   matrix.allowAdaptiveActions = false;
   assert.equal(matrix.allowAdaptiveActions, false, "matrix.allowAdaptiveActions");
   assert.equal(matrix.getPanels()[0]["allowAdaptiveActions"], false, "matrix.panel.allowAdaptiveActions");
-
+  matrix.detailPanelMode = "none";
+  matrix.allowAdaptiveActions = true;
+  assert.equal(matrix.allowAdaptiveActions, true, "matrix.allowAdaptiveActions, #1");
+  matrix.allowAdaptiveActions = false;
+  assert.equal(matrix.allowAdaptiveActions, false, "matrix.allowAdaptiveActions, #2");
 });
 
 QUnit.test("verticalLayout when isMobile set 'true'", function (assert) {
@@ -2382,3 +2387,15 @@ QUnit.test("Do not send data notification on creating detail panel, Bug#10253",
   assert.equal(survey.state, "completed", "survey.state");
   assert.equal(counter, 0, "#2");
 });
+QUnit.test("matrices getPanelInDesignMode", function (assert) {
+  const q1 = new QuestionMatrixDropdownModel("q1");
+  assert.notOk(q1.getPanelInDesignMode(), "#1");
+  q1.detailPanelMode = "underRow";
+  assert.ok(q1.getPanelInDesignMode(), "#2");
+  assert.strictEqual(q1.getPanelInDesignMode(), q1.detailPanel, "#3");
+  q1.detailPanelMode = "none";
+  assert.notOk(q1.getPanelInDesignMode(), "#4");
+  q1.detailPanelMode = "underRowSingle";
+  assert.ok(q1.getPanelInDesignMode(), "#5");
+  assert.strictEqual(q1.getPanelInDesignMode(), q1.detailPanel, "#6");
+});

packages/survey-core/tests/question_paneldynamic_tests.ts

@@ -8991,3 +8991,8 @@ QUnit.test("Panel dynamic vs visibleIf & dots in question names, Bug#10505", fun
   q088_5.value = false;
   assert.equal(q090.isVisible, true, "q090 visible #5");
 });
+QUnit.test("paneldynamic getPanelInDesignMode", function (assert) {
+  assert.notOk(new QuestionTextModel("q1").getPanelInDesignMode(), "text returns null");
+  const q1 = new QuestionPanelDynamicModel("q1");
+  assert.strictEqual(q1.getPanelInDesignMode(), q1.template, "returns tempalte");
+});