From a3cfa5dd5bf9122def02b3ee77a3d56e5b0b3103 Mon Sep 17 00:00:00 2001
From: TSV <tsv2013@users.noreply.github.com>
Date: Mon, 27 Feb 2023 11:02:52 +0300
Subject: [PATCH] Work for #5551 - Implement TOC navigation - fixed vr-tests -
 header/footer containers rendering - no wrapper now

---
 .../src/components-container.component.html      | 15 +++++++++++----
 .../src/components-container.component.ts        |  4 ++++
 .../src/survey-content.component.html            |  4 ++--
 .../components-container.html                    | 16 +++++++++++++++-
 .../components-container/components-container.ts |  4 ++--
 src/knockout/templates/index.html                |  4 ++--
 src/react/components/components-container.tsx    |  8 ++++++++
 src/react/reactSurvey.tsx                        |  4 ++--
 8 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/packages/survey-angular-ui/src/components-container.component.html b/packages/survey-angular-ui/src/components-container.component.html
index 11410735d5..3f67502dc5 100644
--- a/packages/survey-angular-ui/src/components-container.component.html
+++ b/packages/survey-angular-ui/src/components-container.component.html
@@ -1,7 +1,14 @@
 <ng-template #template>
-<div *ngIf="components.length > 0" class="sv-components-column">
-  <ng-container *ngFor="let component of components">
-    <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+  <ng-container *ngIf="isNeedRenderWrapper">
+    <div *ngIf="components.length > 0" class="sv-components-column">
+      <ng-container *ngFor="let component of components">
+        <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+      </ng-container>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="!isNeedRenderWrapper && components.length > 0">
+    <ng-container *ngFor="let component of components">
+      <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+    </ng-container>
   </ng-container>
-</div>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/components-container.component.ts b/packages/survey-angular-ui/src/components-container.component.ts
index 78a8e091d2..d7ce05935f 100644
--- a/packages/survey-angular-ui/src/components-container.component.ts
+++ b/packages/survey-angular-ui/src/components-container.component.ts
@@ -11,8 +11,12 @@ import { EmbeddedViewContentComponent } from "./embedded-view-content.component"
 export class ComponentsContainerComponent extends EmbeddedViewContentComponent {
   @Input() survey!: SurveyModel;
   @Input() container!: string;
+  @Input() needRenderWrapper?: boolean;
   get components(): Array<any> {
     return this.survey.getContainerContent(this.container as any);
   }
+  get isNeedRenderWrapper(): boolean {
+    return this.needRenderWrapper === false ? false : true;
+  }
 }
 AngularComponentFactory.Instance.registerComponent("sv-components-container", ComponentsContainerComponent);
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/survey-content.component.html b/packages/survey-angular-ui/src/survey-content.component.html
index 4297ac6c4f..f8f8db589e 100644
--- a/packages/survey-angular-ui/src/survey-content.component.html
+++ b/packages/survey-angular-ui/src/survey-content.component.html
@@ -4,7 +4,7 @@
       <div class="sv_custom_header" [hidden]="model.hasLogo"></div>
       <div [class]="model.css.container">
         <div *ngIf="model.renderedHasHeader" [class]="model.css.header" [survey]="model" sv-ng-survey-header></div>
-        <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'header' } }"></ng-template>
+        <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }"></ng-template>
         <!-- <ng-container *ngIf="model.isTimerPanelShowingOnTop && !model.isShowStartingPage">
           <sv-timerpanel [model]="model.timerModel"></sv-timerpanel>
         </ng-container> -->
@@ -36,7 +36,7 @@
         <!-- <ng-container *ngIf="model.isTimerPanelShowingOnBottom && !model.isShowStartingPage">
             <sv-timerpanel [model]="model.timerModel"></sv-timerpanel>
         </ng-container> -->
-        <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'footer' } }"></ng-template>
+        <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }"></ng-template>
         <div *ngIf="model.state === 'completed' && model.showCompletedPage" [class]="model.completedCss"
           [innerHtml]="model.processedCompletedHtml"></div>
         <div *ngIf="model.state === 'completedbefore'" [class]="model.css.body"
diff --git a/src/knockout/components/components-container/components-container.html b/src/knockout/components/components-container/components-container.html
index 4897507e7d..f5e8f7e429 100644
--- a/src/knockout/components/components-container/components-container.html
+++ b/src/knockout/components/components-container/components-container.html
@@ -1,4 +1,5 @@
 <!-- ko if: components.length > 0 -->
+<!-- ko if: $data.needRenderWrapper -->
 <div data-bind="css: css">
   <!-- ko foreach: components -->
   <!-- ko if: $data.component && !$data.template -->
@@ -9,6 +10,19 @@
   <!-- ko template: { name: template, data: $data.data } -->
   <!-- /ko -->
   <!-- /ko -->
-<!-- /ko -->
+  <!-- /ko -->
 </div>
+<!-- /ko -->
+<!-- ko ifnot: $data.needRenderWrapper -->
+  <!-- ko foreach: components -->
+  <!-- ko if: $data.component && !$data.template -->
+  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data } } -->
+  <!-- /ko -->
+  <!-- /ko -->
+  <!-- ko if: $data.template -->
+  <!-- ko template: { name: template, data: $data.data } -->
+  <!-- /ko -->
+  <!-- /ko -->
+  <!-- /ko -->
+<!-- /ko -->
 <!-- /ko -->
\ No newline at end of file
diff --git a/src/knockout/components/components-container/components-container.ts b/src/knockout/components/components-container/components-container.ts
index 646782aebb..2f5e5b0e79 100644
--- a/src/knockout/components/components-container/components-container.ts
+++ b/src/knockout/components/components-container/components-container.ts
@@ -3,7 +3,7 @@ import { SurveyModel } from "survey-core";
 const template: string = require("./components-container.html");
 
 export class ComponentsContainer {
-  constructor(public survey: SurveyModel, private container: any) {
+  constructor(public survey: SurveyModel, private container: any, public needRenderWrapper: boolean = true) {
   }
   css = "sv-components-column";
   get components(): Array<any> {
@@ -15,7 +15,7 @@ ko.components.register("sv-components-container", {
   viewModel: {
     createViewModel: (params: any) => {
       const survey = params.survey as SurveyModel;
-      return new ComponentsContainer(survey, params.container);
+      return new ComponentsContainer(survey, params.container, params.needRenderWrapper);
     },
   },
   template: template
diff --git a/src/knockout/templates/index.html b/src/knockout/templates/index.html
index 315483cb6a..0e1abbfc33 100644
--- a/src/knockout/templates/index.html
+++ b/src/knockout/templates/index.html
@@ -11,7 +11,7 @@
               <!-- ko template: { name: koTitleTemplate, afterRender: koAfterRenderHeader } -->
               <!-- /ko -->
               <!-- ko if: isShowingPage -->
-              <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "header" } } --><!-- /ko -->
+              <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "header", needRenderWrapper: false } } --><!-- /ko -->
               <div data-bind="css: $data.bodyContainerCss">
                   <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "left" } } --><!-- /ko -->
                   <div data-bind="css: bodyCss, style:{maxWidth: renderedWidth}, attr: { id: activePage ? activePage.id : '' }">
@@ -28,7 +28,7 @@
                   </div>
                   <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "right" } } --><!-- /ko -->
               </div>
-              <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "footer" } } --><!-- /ko -->
+              <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "footer", needRenderWrapper: false } } --><!-- /ko -->
               <!-- /ko -->
               <!-- ko if: state == "completed" && showCompletedPage -->
               <div data-bind="html: processedCompletedHtml, css: completedCss"></div>
diff --git a/src/react/components/components-container.tsx b/src/react/components/components-container.tsx
index ab46d43d83..303ef91efe 100644
--- a/src/react/components/components-container.tsx
+++ b/src/react/components/components-container.tsx
@@ -5,9 +5,17 @@ import { ReactElementFactory } from "../element-factory";
 export class ComponentsContainer extends React.Component<any, any> {
   render(): JSX.Element | null {
     const components: Array<ISurveyLayoutElement> = this.props.survey.getContainerContent(this.props.container);
+    const needRenderWrapper = this.props.needRenderWrapper === false ? false : true;
     if(components.length == 0) {
       return null;
     }
+    if(!needRenderWrapper) {
+      return <>
+        {components.map(component => {
+          return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, key: component.id });
+        })}
+      </>;
+    }
     return <div className="sv-components-column">
       {components.map(component => {
         return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, key: component.id });
diff --git a/src/react/reactSurvey.tsx b/src/react/reactSurvey.tsx
index 16ec3965e1..0daac3e0e6 100644
--- a/src/react/reactSurvey.tsx
+++ b/src/react/reactSurvey.tsx
@@ -110,9 +110,9 @@ export class Survey extends SurveyElementBase<any, any>
           {customHeader}
           <div className={this.css.container}>
             {header}
-            <ComponentsContainer survey={this.survey} container={"header"}></ComponentsContainer>
+            <ComponentsContainer survey={this.survey} container={"header"} needRenderWrapper={false}></ComponentsContainer>
             {renderResult}
-            <ComponentsContainer survey={this.survey} container={"footer"}></ComponentsContainer>
+            <ComponentsContainer survey={this.survey} container={"footer"} needRenderWrapper={false}></ComponentsContainer>
           </div>
         </form>
         { this.survey.showBrandInfo ? <BrandInfo/> : null }