Work for #5551 - Implement TOC navigation - fixed vr-test

packages/survey-angular-ui/src/components/progress/toc/progress.component.html

@@ -1,3 +1,5 @@
-<div [class]="containerCss">
-  <sv-ng-list [model]="listModel"></sv-ng-list>
-</div>
+<ng-template #template>
+  <div [class]="containerCss">
+    <sv-ng-list [model]="listModel"></sv-ng-list>
+  </div>
+</ng-template>

packages/survey-angular-ui/src/components/progress/toc/progress.component.ts

@@ -1,19 +1,22 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges, ChangeDetectorRef } from "@angular/core";
+import { EmbeddedViewContentComponent } from "../../../embedded-view-content.component";
 import { createTOCListModel, ListModel, SurveyModel } from "survey-core";
 import { AngularComponentFactory } from "../../../component-factory";
 
 @Component({
   selector: "sv-progress-toc, sv-ng-progress-toc",
-  templateUrl: "./progress.component.html"
-  })
-export class ProgressTocComponent implements OnChanges, OnInit {
+  templateUrl: "./progress.component.html",
+  styles: [":host { display: none; }"]
+})
+export class ProgressTocComponent extends EmbeddedViewContentComponent implements OnChanges, OnInit {
   public listModel!: ListModel;
   public containerCss = "sv_progress-toc";
   @Input() model!: SurveyModel;
   private createProgressTOCModel() {
     this.listModel = createTOCListModel(this.model);
   }
-  ngOnInit(): void {
+  override ngOnInit(): void {
+    super.ngOnInit();
     this.createProgressTOCModel();
   }
   ngOnChanges(changes: SimpleChanges): void {

src/common-styles/sv-progress-toc.scss

@@ -2,11 +2,12 @@ $font-family: var(--font-family);
 
 .sv_progress-toc {
   padding: 8px;
-  max-width: 320px;
+  max-width: 336px;
   height: 100%;
   background: #FFFFFF;
   border-right: 1px solid #D6D6D6;
   margin-top: 2px;
+  box-sizing: border-box;
 
   .sv-list__item.sv-list__item--selected .sv-list__item-body {
     background: rgba(25, 179, 148, 0.1);
@@ -18,4 +19,9 @@ $font-family: var(--font-family);
   .sv-list__item span {
     white-space: break-spaces;
   }
+
+  .sv-list__item-body {
+    padding-inline-start: 16px;
+    padding-inline-end: 16px;
+  }
 }

src/defaultV2-theme/blocks/sd-progress-toc.scss

@@ -2,11 +2,12 @@ $font-family: var(--font-family);
 
 .sv_progress-toc {
   padding: calcSize(1);
-  max-width: calcSize(40);
+  max-width: calcSize(42);
   height: 100%;
   background: $background;
   border-right: 1px solid $border;
   margin-top: 2px;
+  box-sizing: border-box;
 
   .sv-list__item.sv-list__item--selected .sv-list__item-body {
     background: $primary-light;
@@ -18,4 +19,9 @@ $font-family: var(--font-family);
   .sv-list__item span {
     white-space: break-spaces;
   }
+
+  .sv-list__item-body {
+    padding-inline-start: calcSize(2);
+    padding-inline-end: calcSize(2);
+  }
 }