Work for #3390: implement page navigator component

packages/survey-creator-angular/src/angular-ui.module.ts

@@ -33,10 +33,12 @@ import { ToolboxToolComponent } from "./toolbox/toolbox-tool.component";
 import { ToolboxItemComponent } from "./toolbox/toolbox-item.component";
 import { ToolboxCategoryComponent } from "./toolbox/toolbox-category.component";
 import { StringEditorComponent } from "./string-editor.component";
+import { PageNavigatorComponent } from "./page-navigator/page-navigator.component";
+import { PageNavigatorItemComponent } from "./page-navigator/page-navigator-item.component";
 
 @NgModule({
   declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
-    AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent],
+    AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],

packages/survey-creator-angular/src/page-navigator/page-navigator-item.component.html

@@ -0,0 +1,13 @@
+<ng-template #template>
+  <div class="svc-page-navigator-item">
+    <div class="svc-page-navigator-item-content"
+      (click)="model.action()" [key2click] [class.svc-page-navigator-item--selected]="model.active"  [class.svc-page-navigator-item--disabled]="model.disabled">
+      <div class="svc-page-navigator-item__dot" [attr.title]="model.title"></div>
+
+      <div class="svc-page-navigator-item__banner svc-item__banner">
+        <span class="svc-text svc-text--small svc-text--bold">{{model.title}}</span>
+        <span class="svc-page-navigator-item__dot"></span>
+      </div>
+    </div>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/page-navigator/page-navigator-item.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from "@angular/core";
+import { Action } from "survey-core";
+import { BaseAngular } from "survey-angular-ui";
+
+@Component({
+  selector: "svc-page-navigator-item",
+  templateUrl: "./page-navigator-item.component.html",
+  styles: [":host { display: none; }"]
+})
+export class PageNavigatorItemComponent extends BaseAngular<Action> {
+  @Input() model!: Action;
+  protected getModel(): Action {
+    return this.model;
+  }
+}

packages/survey-creator-angular/src/page-navigator/page-navigator.component.html

@@ -0,0 +1,12 @@
+<ng-template #template>
+  <div class="svc-page-navigator" #container>
+    <ng-container *ngIf="model.visible">
+      <div class="svc-page-navigator__selector"
+          (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__selector--opened]="model.isPopupOpened">
+          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="24" sv-ng-svg-icon></svg>
+          <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
+      </div>
+      <svc-page-navigator-item *ngFor="let item of model.items" [model]="item"></svc-page-navigator-item>
+    </ng-container>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/page-navigator/page-navigator.component.ts

@@ -0,0 +1,46 @@
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
+import { PageNavigatorViewModel, PagesController } from "survey-creator-core";
+import { CreatorModelComponent } from "../creator-model.component";
+
+@Component({
+  selector: "svc-page-navigator",
+  templateUrl: "./page-navigator.component.html",
+  styles: [":host { display: none; }"]
+})
+export class PageNavigatorComponent extends CreatorModelComponent<PageNavigatorViewModel> implements AfterViewInit {
+  public model!: PageNavigatorViewModel;
+  @Input() pagesController!: PagesController;
+  @Input() pageEditMode!: string;
+  @ViewChild("container") container!: ElementRef<HTMLDivElement>;
+  createModel(): void {
+    this.model = new PageNavigatorViewModel(
+      this.pagesController,
+      this.pageEditMode
+    );
+  }
+  protected getModel(): PageNavigatorViewModel {
+    return this.model;
+  }
+  protected getPropertiesToTrack(): string[] {
+    return ["pagesController", "pageEditMode"];
+  }
+  public ngAfterViewInit(): void {
+    if (this.pageEditMode !== "bypage") {
+      const el = this.container.nativeElement;
+      if (!!el && !!el.parentElement?.parentElement?.parentElement) {
+        const self = this;
+        el.parentElement.parentElement.parentElement.onscroll = function (this: GlobalEventHandlers, ev: Event) {
+          return self.model.onContainerScroll(ev.currentTarget as HTMLDivElement);
+        };
+      }
+    }
+  }
+  public override ngOnDestroy(): void {
+    const el = this.container.nativeElement;
+    if (!!el && !!el.parentElement?.parentElement?.parentElement) {
+      el.parentElement.parentElement.parentElement.onscroll = <any>undefined;
+    }
+    this.model.dispose();
+    super.ngOnDestroy();
+  }
+}

packages/survey-creator-angular/src/tabs/designer.component.html

@@ -50,8 +50,8 @@
         </div>
 
         <div *ngIf="creator.showPageNavigator" class="svc-tab-designer__page-navigator">
-          <!-- <svc-page-navigator params="controller: pagesController, pageEditMode: creator.pageEditMode">
-          </svc-page-navigator> -->
+          <svc-page-navigator [pagesController]="model.pagesController" [pageEditMode]="creator.pageEditMode">
+          </svc-page-navigator>
         </div>
       </ng-container>
     </div>