Prepare expand collapse animations for creator CR5855 (#8811)

* Revert "Merge pull request #8659 from surveyjs/do-not-render-empty-header-in-dynamic-panel-template"

This reverts commit 29ed533, reversing
changes made to 2458e68.

* Revert "Title for panel in-row rendered incorrectly (#8658)"

This reverts commit 74cd59f.

* Revert "Bug/8590 panel title rendering (#8599)"

This reverts commit 68157c3.

* Revert "Merge pull request #8502 from surveyjs/render-panel-hidden-title-in-design-mode-when-title-is-not-set"

This reverts commit 69d1463, reversing
changes made to a5fc7d2.

* add exports for anilmation utils

* do not render panel empty header

* fix min-height animations

* fix unit tests

packages/survey-core/entries/chunks/model.ts

@@ -284,6 +284,9 @@ export {
   createSvg,
   chooseFiles,
   sanitizeEditableContent,
+  prepareElementForVerticalAnimation,
+  cleanHtmlElementAfterAnimation,
+  classesToSelector,
   IAttachKey2clickOptions
 } from "../../src/utils/utils";
 export { InputMaskBase } from "../../src/mask/mask_base";

packages/survey-core/src/defaultCss/defaultV2Css.ts

@@ -70,7 +70,6 @@ export var defaultV2Css = {
     titleExpanded: "sd-element__title--expanded",
     titleCollapsed: "sd-element__title--collapsed",
     titleDisabled: "sd-element__title--disabled",
-    titleHidden: "sd-element__title--hidden",
     titleOnExpand: "sd-panel__title--expanded",
     titleOnError: "sd-panel__title--error",
     titleBar: "sd-action-title-bar",
@@ -83,7 +82,6 @@ export var defaultV2Css = {
     footer: "sd-panel__footer",
     requiredText: "sd-panel__required-text",
     header: "sd-panel__header sd-element__header sd-element__header--location-top",
-    headerHidden: "sd-panel__header--hidden",
     collapsed: "sd-element--collapsed",
     expanded: "sd-element--expanded",
     expandable: "sd-element--expandable",

packages/survey-core/src/defaultV2-theme/blocks/animations.scss

@@ -19,6 +19,7 @@
   from {
     overflow: hidden;
     height: var(--animation-height-from);
+    min-height: var(--animation-height-from);
     margin-top: 0;
     margin-bottom: 0;
     padding-top: 0;
@@ -35,6 +36,7 @@
     border-top-width: var(--animation-border-top-width);
     border-bottom-width: var(--animation-border-bottom-width);
     height: var(--animation-height-to);
+    min-height: var(--animation-height-to);
   }
   to {
     overflow: visible;
@@ -45,6 +47,7 @@
     border-top-width: var(--animation-border-top-width);
     border-bottom-width: var(--animation-border-bottom-width);
     height: var(--animation-height-to);
+    min-height: var(--animation-height-to);
   }
 }
 @keyframes moveIn {

packages/survey-core/src/defaultV2-theme/blocks/sd-element.scss

@@ -11,10 +11,6 @@
   opacity: 0.25;
 }
 
-.sd-element__title.sd-element__title--hidden {
-  display: none;
-}
-
 .sd-root--readonly .sd-element__title.sd-element__title--disabled {
   opacity: 1;
 }

packages/survey-core/src/panel.ts

@@ -414,7 +414,7 @@ export class PanelModelBase extends SurveyElement<Question>
   get hasTitle(): boolean {
     return (
       (this.canShowTitle() && this.locTitle.textOrHtml.length > 0) ||
-      (this.isDesignMode && (this.showTitle && this.isInteractiveDesignElement && settings.designMode.showEmptyTitles))
+      (this.isDesignMode && !(settings.supportCreatorV2 && this.isPanel) && this.showTitle && settings.designMode.showEmptyTitles)
     );
   }
   public delete(doDispose: boolean = true): void {
@@ -2007,9 +2007,6 @@ export class PanelModel extends PanelModelBase implements IElement {
     this.registerPropertyChangedHandlers(
       ["indent", "innerIndent", "rightIndent"], () => { this.onIndentChanged(); });
     this.registerPropertyChangedHandlers(["colSpan"], () => { this.parent?.updateColumns(); });
-    this.registerPropertyChangedHandlers(["title"], () => {
-      this.calcHasTextInTitle();
-    });
   }
   public getType(): string {
     return "panel";
@@ -2023,29 +2020,13 @@ export class PanelModel extends PanelModelBase implements IElement {
     }
     return super.getSurvey(live);
   }
-  get hasTextInTitle(): boolean {
-    return this.getPropertyValue("hasTextInTitle");
-  }
-  private calcHasTextInTitle(): void {
-    this.setPropertyValue("hasTextInTitle", !!this.title);
-  }
-  onSurveyLoad(): void {
+  onSurveyLoad() {
     super.onSurveyLoad();
     this.onIndentChanged();
-    this.calcHasTextInTitle();
   }
-  protected onSetData(): void {
+  protected onSetData() {
     super.onSetData();
     this.onIndentChanged();
-    this.calcHasTextInTitle();
-  }
-  public get cssHeader(): string {
-    return new CssClassBuilder()
-      .append(this.cssClasses.panel.header)
-      .append(this.cssClasses.panel.headerHidden,
-        !this.hasTextInTitle &&
-        !this.hasDescription &&
-        this.isDesignMode).toString();
   }
   public get isPanel(): boolean {
     return true;
@@ -2157,7 +2138,7 @@ export class PanelModel extends PanelModelBase implements IElement {
   protected createLocTitleProperty(): LocalizableString {
     const locTitleValue = super.createLocTitleProperty();
     locTitleValue.onGetTextCallback = (text: string): string => {
-      if (!text && (this.state !== "default" || (this.isDesignMode && this.isDefaultV2Theme && this.isInteractiveDesignElement))) {
+      if (!text && (this.state !== "default")) {
         text = this.name;
       }
       return text;
@@ -2289,10 +2270,7 @@ export class PanelModel extends PanelModelBase implements IElement {
     this.survey.cancelPreviewByPage(this);
   }
   public get cssTitle(): string {
-    return new CssClassBuilder()
-      .append(this.getCssTitle(this.cssClasses.panel))
-      .append(this.cssClasses.panel.titleHidden, !this.hasTextInTitle && this.isDesignMode)
-      .toString();
+    return this.getCssTitle(this.cssClasses.panel);
   }
   public get showErrorsAbovePanel(): boolean {
     return this.isDefaultV2Theme && !this.showPanelAsPage;

packages/survey-core/tests/paneltests.ts

@@ -13,7 +13,6 @@ import { ActionContainer } from "../src/actions/container";
 import { IElement } from "../src/base-interfaces";
 import { StylesManager } from "@legacy/stylesmanager";
 import { SurveyElement } from "../src/survey-element";
-import { QuestionPanelDynamicModel } from "../src/question_paneldynamic";
 
 export default QUnit.module("Panel");
 
@@ -1969,6 +1968,8 @@ QUnit.test("Render name for collapsed/expanded questions in design-time", functi
   assert.equal(panel.locTitle.renderedHtml, "panel", "Render name, #2");
   panel.state = "default";
   assert.equal(panel.state, "default", "the panel is not collapsed or expanded");
+  assert.equal(panel.hasTitle, false, "We do not render the title");
+  assert.notOk(panel.locTitle.renderedHtml, "Render title is empty, #3");
 });
 
 QUnit.test("Check updateRowsOnElementAdded: insert on empty page", function(assert) {
@@ -2784,64 +2785,6 @@ QUnit.test("Do not expand panels on validation that doesn't have an error Bug#83
   assert.equal(panels[3].isExpanded, true, "The panel should be expanded, it has error inside, #3");
   assert.equal(panels[4].isExpanded, true, "The panel should be expanded, panel is required, #4");
 });
-
-QUnit.test("panel check title in design mode", function (assert) {
-  StylesManager.applyTheme("default");
-  const survey = new SurveyModel();
-  var oldCss = survey.css.panel.titleHidden;
-  var oldRootCss = survey.css.root;
-  survey.css.root = "sd-root-modern";
-  survey.css.panel.header = "sv_p_header";
-  survey.css.panel.titleHidden = "sv_p_title--hidden";
-  survey.css.panel.headerHidden = "sv_p_header--hidden";
-
-  survey.setJsonObject({
-    questions: [
-      {
-        type: "panel",
-        name: "p1",
-        elements: [
-          {
-            type: "text",
-            name: "_"
-          }
-        ]
-      }
-    ]
-  });
-  const panel = <PanelModel>survey.getAllPanels()[0];
-  assert.equal(panel.hasTitle, false);
-  assert.equal(panel.cssTitle, "sv_p_title");
-  assert.equal(panel.cssHeader, "sv_p_header");
-  survey.setDesignMode(true);
-  assert.equal(panel.hasTitle, true);
-  assert.equal(panel.cssHeader, "sv_p_header sv_p_header--hidden");
-  assert.equal(panel.cssTitle, "sv_p_title sv_p_title--hidden");
-  survey.css.panel.titleHidden = oldCss;
-  survey.css.root = oldRootCss;
-});
-
-QUnit.test("panel dynamic inner panel title in design mode", function (assert) {
-  StylesManager.applyTheme("default");
-  const survey = new SurveyModel();
-
-  survey.setJsonObject({
-    questions: [
-      {
-        "type": "paneldynamic",
-        "name": "question1"
-      }
-    ]
-  });
-  const panel = <QuestionPanelDynamicModel>survey.getQuestionByName("question1");
-  assert.equal(panel.template.hasTitle, false);
-  survey.setDesignMode(true);
-  assert.equal(panel.template.hasTitle, false);
-
-  panel.templateTitle = "asd";
-  assert.equal(panel.template.hasTitle, true);
-});
-
 QUnit.test("Check if errors disappered in the closest questions on changing the question, checkErrorsMode: 'onValueChanged', Bug#8539", function (assert) {
   const survey = new SurveyModel({
     checkErrorsMode: "onValueChanged",
@@ -2899,20 +2842,4 @@ QUnit.test("Check if errors disappered in the closest questions on changing the
   q1.value = 1;
   assert.equal(q1.errors.length, 0, "q1.errors #3");
   assert.equal(q2.errors.length, 0, "q2.errors #3");
-});
-QUnit.test("Panel hasTextInTitle - reactive property, Bug:https://github.com/surveyjs/survey-creator/issues/5720", function (assert) {
-  const survey = new SurveyModel({
-    elements: [
-      { type: "panel", name: "panel1" },
-      { type: "panel", name: "panel2", title: "Panel 2" }
-    ]
-  });
-  const panel1 = survey.getPanelByName("panel1");
-  const panel2 = survey.getPanelByName("panel2");
-  assert.equal(panel1.hasTextInTitle, false, "panel1 #1");
-  assert.equal(panel2.hasTextInTitle, true, "panel2 #1");
-  panel1.title = "Panel 1";
-  assert.equal(panel1.hasTextInTitle, true, "panel1 #2");
-  panel2.title = "";
-  assert.equal(panel2.hasTextInTitle, false, "panel2 #2");
 });

packages/survey-core/tests/surveytests.ts

@@ -14674,6 +14674,7 @@ QUnit.test("forceIsInputReadOnly", function (assert) {
   survey.getQuestionByName("q2").forceIsInputReadOnly = false;
   assert.equal(survey.getQuestionByName("q1").isInputReadOnly, true, "q1");
   assert.equal(survey.getQuestionByName("q2").isInputReadOnly, false, "q2 with forceIsInputReadOnly");
+  settings.supportCreatorV2 = false;
 });
 
 QUnit.test("onElementContentVisibilityChanged event", function (assert) {
@@ -16715,6 +16716,7 @@ QUnit.test("Check survey calculated width mode observability with survey changin
     assert.equal(model.calculatedWidthMode, "static");
     model.getAllQuestions()[1].startWithNewLine = false;
     assert.equal(model.calculatedWidthMode, "responsive");
+    settings.supportCreatorV2 = false;
   }
 );
 
@@ -16726,6 +16728,7 @@ QUnit.test("Check survey calculated width mode observability on question added",
     model.addNewPage();
     model.pages[0].addNewQuestion("matrix", "q1");
     assert.equal(model.calculatedWidthMode, "responsive");
+    settings.supportCreatorV2 = false;
   }
 );
 

visualRegressionTests/tests/defaultV2/panel.ts

@@ -940,29 +940,4 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("panel-scroll-on-expand.png", null, t, comparer);
     });
   });
-  test("Check oridinary panel with no title in design mode", async (t) => {
-    await wrapVisualTest(t, async (t, comparer) => {
-      await t.resizeWindow(1920, 1080);
-      await initSurvey(framework, {
-        focusFirstQuestionAutomatic: true,
-        width: "600px",
-        questions: [
-          {
-            type: "panel",
-            name: "delivery_details",
-            elements: [
-              {
-                "type": "html",
-                "name": "question1",
-                "html": "No title in design mode"
-              }
-            ]
-          },
-        ]
-      }, null, true);
-      const panelRoot = Selector(".sd-panel");
-      await t.expect(panelRoot.find(".sd-element__title--hidden").exists).ok();
-      await takeElementScreenshot("panel-no-title-design.png", panelRoot, t, comparer);
-    });
-  });
-});
+});