New tokens: panel + [creator:7855]

e2e/questions/panel.spec.ts

@@ -75,8 +75,9 @@ frameworks.forEach((framework) => {
       const getTitle3 = page.locator(".sd-element__title").filter({ hasText: "question3" });
       const getTitle4 = page.locator(".sd-element__title").filter({ hasText: "question4" });
 
+      // TODO: Check whether this test actual for new rendering
       const getPanelsCountByMargin = await page.evaluate(
-        () => (window as any).survey.rootElement.getRootNode().querySelectorAll('div[style*="padding-left: 20px"]').length
+        () => (window as any).survey.rootElement.getRootNode().querySelectorAll('div[style*="padding-inline-start"][style*="20px"]').length
       );
 
       await expect(getTitle1).toBeVisible({ timeout: 1000 });

packages/survey-angular-ui/src/page.component.html

@@ -1,16 +1,20 @@
 <ng-template #template>
   <ng-container *ngIf="!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey">
     <div [class]="model.cssRoot" #pageContainer>
-      <sv-ng-element-title [element]="model"></sv-ng-element-title>
-      <div *ngIf="model._showDescription" [class]="model.cssClasses.page?.description">
-        <sv-ng-string [model]="model.locDescription"></sv-ng-string>
+      <div *ngIf="model.hasTitle || model._showDescription" [class]="model.cssHeader">
+        <sv-ng-element-title [element]="model"></sv-ng-element-title>
+        <div *ngIf="model._showDescription" [class]="model.cssClasses.page?.description">
+          <sv-ng-string [model]="model.locDescription"></sv-ng-string>
+        </div>
+      </div>
+      <div [class]="model.cssContent">
+        <div *ngIf="model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+        <ng-container *ngFor="let row of model.visibleRows">
+          <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
+            <sv-ng-row [row]="row"></sv-ng-row>
+          </ng-template>
+        </ng-container>
       </div>
-      <div *ngIf="model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-      <ng-container *ngFor="let row of model.visibleRows">
-        <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
-          <sv-ng-row [row]="row"></sv-ng-row>
-        </ng-template>
-      </ng-container>
     </div>
   </ng-container>  
 </ng-template>

packages/survey-angular-ui/src/panel.component.html

@@ -3,14 +3,14 @@
     <div *ngIf="model.showErrorsAbovePanel && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
     <div *ngIf="model.hasDescription || model.hasTitle" [element]="model" sv-ng-element-header></div>
     <div *ngIf="!model.showErrorsAbovePanel && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-    <div *ngIf="model.renderedIsExpanded" [style.paddingLeft]="model.innerPaddingLeft" [class]="model.cssClasses.panel.content" 
+    <div *ngIf="model.renderedIsExpanded" [style]="panelContentStyle" [class]="model.cssClasses.panel.content" 
       [attr.id]="model.contentId" [attr.role]="model.ariaRole" [attr.aria-labelledby]="model.ariaLabelledBy"[attr.aria-label]="model.ariaLabel">
       <ng-container *ngFor="let row of model.visibleRows; trackBy: trackRowBy">
         <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
           <sv-ng-row [row]="row"></sv-ng-row>
         </ng-template>
       </ng-container>
-      <sv-ng-action-bar [model]="model.getFooterToolbar()"></sv-ng-action-bar>
     </div>
+    <sv-ng-action-bar *ngIf="model.renderedIsExpanded && model.getFooterToolbar().hasActions" [model]="model.getFooterToolbar()"></sv-ng-action-bar>
   </div>
 </ng-template>

packages/survey-angular-ui/src/panel.component.ts

@@ -9,6 +9,7 @@ import { AngularComponentFactory } from "./component-factory";
 export class PanelComponent extends BaseAngular<PanelModel> implements AfterViewInit {
   @Input() model!: PanelModel;
   @ViewChild("panelContainer", { static: false, read: ElementRef }) panelContainerRef!: ElementRef<HTMLDivElement>;
+  private readonly panelPaddingHorizontal = "var(--sd-base-padding, var(--sjs2-spacing-x500))";
   protected getModel(): PanelModel {
     return this.model;
   }
@@ -23,5 +24,11 @@ export class PanelComponent extends BaseAngular<PanelModel> implements AfterView
   public get canRender() {
     return this.model && this.model.survey && this.model.getIsContentVisible();
   }
+  public get panelContentStyle(): Record<string, string> {
+    const hasInnerPadding = !!this.model?.innerPaddingLeft;
+    return hasInnerPadding ? {
+      "padding-inline-start": `calc(${this.panelPaddingHorizontal} + ${this.model.innerPaddingLeft})`,
+    } : {};
+  }
 }
 AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);

packages/survey-angular-ui/src/question.component.html

@@ -9,32 +9,37 @@
       [model]="model.singleInputActions"
       [css]="model.cssClasses"
     ></sv-breadcrumbs>
-    <div *ngIf="model.showErrorsAboveQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-    <div [element]="model" *ngIf="model.hasTitleOnLeftTop" sv-ng-element-header></div>
-    <sv-single-input-summary
-      *ngIf="!!model.singleInputSummary"
-      [model]="model.singleInputSummary"
-      [css]="model.cssClasses"
-    ></sv-single-input-summary>
-    <sv-ng-element
-      *ngIf="!model.singleInputSummary && !!singleQuestion"
-      [model]="singleQuestion"
-    ></sv-ng-element>
-    <ng-template
-      *ngIf="!model.singleInputSummary && !singleQuestion"
-      [component]="{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }">
-      <div [class]="model.cssContent" role="presentation" [visible]="model.renderedIsExpanded" [attr.aria-hidden]="model.contentAriaHidden" [attr.data-sv-drop-target-matrix-row]="model.dragDropMatrixAttribute" [attr.data-sv-drop-target-matrix]="model.dragDropMatrixAttribute">
+    <div [class]="model.getQuestionContainerCss()">
+      <div *ngIf="model.showErrorsAboveQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+      <div [class]="model.getHeaderAndContentContainerCss()">
+        <div [element]="model" *ngIf="model.hasTitleOnLeftTop" sv-ng-element-header></div>
+        <hr *ngIf="model.hasTitleOnLeftTop && model.isComplexQuestion" />
+        <sv-single-input-summary
+          *ngIf="!!model.singleInputSummary"
+          [model]="model.singleInputSummary"
+          [css]="model.cssClasses"
+        ></sv-single-input-summary>
+        <sv-ng-element
+          *ngIf="!model.singleInputSummary && !!singleQuestion"
+          [model]="singleQuestion"
+        ></sv-ng-element>
         <ng-template
-          [component]="{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }"></ng-template>
-        <div *ngIf="model.hasComment" [class]="model.getCommentAreaCss(false)">
-          <div [model]="model.locCommentText" sv-ng-string></div>
-          <sv-ng-comment [question]="model"></sv-ng-comment>
-        </div>
-        <div *ngIf="model.hasDescriptionUnderInput" [class]="model.cssDescription" [attr.id]="model.ariaDescriptionId"
-          [model]="model.locDescription" sv-ng-string></div>
+          *ngIf="!model.singleInputSummary && !singleQuestion"
+          [component]="{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }">
+          <div [class]="model.cssContent" role="presentation" [visible]="model.renderedIsExpanded" [attr.aria-hidden]="model.contentAriaHidden" [attr.data-sv-drop-target-matrix-row]="model.dragDropMatrixAttribute" [attr.data-sv-drop-target-matrix]="model.dragDropMatrixAttribute">
+            <ng-template
+              [component]="{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }"></ng-template>
+            <div *ngIf="model.hasComment" [class]="model.getCommentAreaCss(false)">
+              <div [model]="model.locCommentText" sv-ng-string></div>
+              <sv-ng-comment [question]="model"></sv-ng-comment>
+            </div>
+            <div *ngIf="model.hasDescriptionUnderInput" [class]="model.cssDescription" [attr.id]="model.ariaDescriptionId"
+              [model]="model.locDescription" sv-ng-string></div>
+          </div>
+        </ng-template>
+        <div [element]="model" *ngIf="model.hasTitleOnBottom" sv-ng-element-header></div>
       </div>
-    </ng-template>
-    <div [element]="model" *ngIf="model.hasTitleOnBottom" sv-ng-element-header></div>
-    <div *ngIf="model.showErrorsBelowQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+      <div *ngIf="model.showErrorsBelowQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+    </div>
   </div>
 </ng-template>

packages/survey-angular-ui/src/questions/composite.component.ts

@@ -6,7 +6,8 @@ import { PanelModel, QuestionCompositeModel } from "survey-core";
 
 @Component({
   selector: "sv-ng-composite-question",
-  template: "<sv-ng-panel [model]='contentPanel'></sv-ng-panel>"
+  template: "<ng-template #template><sv-ng-panel [model]='contentPanel'></sv-ng-panel></ng-template>",
+  styles: [":host { display: none } "]
 })
 export class CompositeQuestionComponent extends QuestionAngular<QuestionCompositeModel> {
   get contentPanel(): PanelModel {

packages/survey-angular-ui/src/questions/paneldynamic.component.html

@@ -1,30 +1,33 @@
-<div [class]="model.cssClasses.root" #contentElement>
-  <div *ngIf="model.hasTabbedMenu" [class]="model.getTabsContainerCss()">
-    <sv-action-bar [model]="model.tabbedMenu"></sv-action-bar>
-  </div>
-  <sv-ng-placeholder-paneldynamic [question]="model"></sv-ng-placeholder-paneldynamic>
-  <div [class]="model.cssClasses.progress" *ngIf="model.isProgressTopShowing && model.isRangeShowing">
-    <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }"
-    role="progressbar" [attr.aria-label]="model.progressBarAriaLabel"
-    ></div>
-  </div>
-  <div [class]="model.cssClasses.panelsContainer">
-    <ng-container *ngFor="let panel of model.renderedPanels; index as index; trackBy: trackPanelBy">
-      <div [class]="model.getPanelWrapperCss(panel)">
-        <ng-template
-          [component]="{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }"></ng-template>
-        <ng-container *ngIf="model.canRenderRemovePanelOnRight(panel)">
+<ng-template #template>
+  <div [class]="model.cssClasses.root" #contentElement>
+    <div *ngIf="model.hasTabbedMenu" [class]="model.getTabsContainerCss()">
+      <sv-action-bar [model]="model.tabbedMenu"></sv-action-bar>
+    </div>
+    <sv-ng-placeholder-paneldynamic [question]="model"></sv-ng-placeholder-paneldynamic>
+    <div [class]="model.cssClasses.progress" *ngIf="model.isProgressTopShowing && model.isRangeShowing">
+      <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }"
+      role="progressbar" [attr.aria-label]="model.progressBarAriaLabel"
+      ></div>
+    </div>
+    <div [class]="model.cssClasses.panelsContainer">
+      <ng-container *ngFor="let panel of model.renderedPanels; index as index; trackBy: trackPanelBy">
+        <div [class]="model.getPanelWrapperCss(panel)">
           <ng-template
-            [component]="{ name: 'sv-action', data: { model: model.getRemovePanelAction(panel)}}"></ng-template>
-        </ng-container>
-      </div>
-      <hr [class]="model.cssClasses.separator" *ngIf="model.showSeparator(index)" />
-    </ng-container>
+            [component]="{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }"></ng-template>
+          <ng-container *ngIf="model.canRenderRemovePanelOnRight(panel)">
+            <ng-template
+              [component]="{ name: 'sv-action', data: { model: model.getRemovePanelAction(panel)}}"></ng-template>
+          </ng-container>
+        </div>
+        <hr [class]="model.cssClasses.separator" *ngIf="model.showSeparator(index)" />
+      </ng-container>
+    </div>
+    <ng-container [ngTemplateOutlet]="progress" *ngIf="model.showNavigation"></ng-container>
   </div>
-  <ng-container [ngTemplateOutlet]="progress" *ngIf="model.showNavigation"></ng-container>
-</div>
+</ng-template>
+
 <ng-template #progress>
-  <div [class]="model.cssClasses.footer" *ngIf="!!model.cssClasses.footer">
+  <div [class]="model.cssClasses.footer" *ngIf="(model.isRangeShowing && model.isProgressBottomShowing) || model.showFooterToolbar">
     <hr [class]="model.cssClasses.separator" />
     <div [class]="model.cssClasses.progress" *ngIf="model.isRangeShowing && model.isProgressBottomShowing">
       <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }" 

packages/survey-angular-ui/src/questions/paneldynamic.component.ts

@@ -5,7 +5,8 @@ import { AngularComponentFactory } from "../component-factory";
 
 @Component({
   selector: "sv-ng-paneldynamic-question",
-  templateUrl: "./paneldynamic.component.html"
+  templateUrl: "./paneldynamic.component.html",
+  styleUrls: ["../hide-host.scss"]
 })
 export class PanelDynamicQuestionComponent extends QuestionAngular<QuestionPanelDynamicModel | any> implements OnInit {
   public trackPanelBy(_: number, panel: PanelModel) {