#8026 Do not show visual panel in preview mode

Fixes #8026

src/defaultCss/defaultV2Css.ts

@@ -53,7 +53,7 @@ export var defaultV2Css = {
     next: "sd-navigation__next-btn",
     start: "sd-navigation__start-btn",
     preview: "sd-navigation__preview-btn",
-    edit: "",
+    edit: "sd-btn sd-btn--small",
   },
   panel: {
     asPage: "sd-panel--as-page",

src/defaultV2-theme/blocks/sd-panel.scss

@@ -70,7 +70,11 @@
   border-top: 1px solid $border-light;
   padding-top: calc(0.5 * var(--sd-base-vertical-padding));
 }
-
+.sd-panel--as-page .sd-panel__footer {
+  padding: calcSize(4) 0 0;
+  margin: 0;
+  border: none;
+}
 .sd-panel__content {
   padding-top: var(--sd-base-padding);
 }

src/panel.ts

@@ -232,7 +232,7 @@ export class QuestionRowModel extends Base {
     return new CssClassBuilder()
       .append(this.panel.cssClasses.row)
       .append(this.panel.cssClasses.rowCompact, this.panel["isCompact"])
-      .append(this.panel.cssClasses.pageRow, this.panel.isPage || (!!(<any>this.panel).originalPage && !(<any>this.panel.survey).isShowingPreview))
+      .append(this.panel.cssClasses.pageRow, this.panel.isPage || (!!(<any>this.panel).originalPage))
       .append(this.panel.cssClasses.rowMultiple, this.visibleElements.length > 1)
       .toString();
 
@@ -1907,6 +1907,7 @@ export class PanelModel extends PanelModelBase implements IElement {
           id: "cancel-preview",
           locTitle: this.survey.locEditText,
           innerCss: this.survey.cssNavigationEdit,
+          component: "sv-nav-btn",
           action: () => { this.cancelPreview(); }
         });
       }
@@ -1970,7 +1971,7 @@ export class PanelModel extends PanelModelBase implements IElement {
     return super.getIsNested() && this.parent !== undefined;
   }
   private get showPanelAsPage() {
-    return !!(<any>this).originalPage && !(<any>this.survey).isShowingPreview;
+    return !!(<any>this).originalPage;
   }
   protected getCssRoot(cssClasses: { [index: string]: string }): string {
     return new CssClassBuilder()

src/survey-element.ts

@@ -810,7 +810,7 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
   }
 
   public get hasParent() {
-    return (this.parent && !this.parent.isPage && (!(<any>this.parent).originalPage || (<any>this.survey).isShowingPreview)) || (this.parent === undefined);
+    return (this.parent && !this.parent.isPage && (!(<any>this.parent).originalPage)) || (this.parent === undefined);
   }
   @property({ defaultValue: true }) isSingleInRow: boolean = true;
 

tests/paneltests.ts

@@ -1890,7 +1890,7 @@ QUnit.test("Check panel styles with originalPage", function(assert) {
   survey.css = {};
 });
 
-QUnit.test("Check panel styles with originalPage and showPreview", function(assert) {
+QUnit.skip("Check panel styles with originalPage and showPreview", function (assert) {
   const survey = new SurveyModel({
     pages: [
       {