Work for #3390: implement side-bar and property grid

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

@@ -9,9 +9,13 @@ import { SvgBundleComponent } from "./svg-bundle.component";
 import { TabbedMenuItemComponent } from "./tabbed-menu/tabbed-menu/tabbed-menu-item.component";
 import { TabbledMenuComponent } from "./tabbed-menu/tabbed-menu/tabbed-menu.component";
 import { TabbedMenuItemWrapperComponent } from "./tabbed-menu/tabbed-menu/tabbed-menu-item-wrapper.component";
+import { SidebarComponent } from "./side-bar/side-bar.component";
+import { SidebarTabComponent } from "./side-bar/side-bar-tab.component";
+import { ObjectSelectorComponent } from "./property-panel/object-selector.component";
+import { PropertyGridComponent } from "./property-panel/property-grid.component";
 
 @NgModule({
-  declarations: [CreatorComponent, DesignerTabComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent],
+  declarations: [CreatorComponent, DesignerTabComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],

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

@@ -34,8 +34,7 @@
           </div>
         </div>
         <div *ngIf="creator.sidebar" [class.sv-mobile-side-bar]="creator.isMobileView">
-          <span>TODO implement sidebar</span>
-          <!-- <svc-side-bar params="model: creator.sidebar"> </svc-side-bar> -->
+          <svc-side-bar [model]="creator.sidebar"></svc-side-bar>
         </div>
       </div>
       <div class="svc-creator__banner" *ngIf="!creator.haveCommercialLicense">

packages/survey-creator-angular/src/property-panel/object-selector.component.html

@@ -0,0 +1,5 @@
+<ng-template #template>
+    <div class="svc-object-selector" *ngIf="model.isVisible">
+        <sv-ng-list [model]="model.list"></sv-ng-list>
+    </div>
+</ng-template>

packages/survey-creator-angular/src/property-panel/object-selector.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from "@angular/core";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
+import { ObjectSelectorModel, SidebarTabModel } from "survey-creator-core";
+
+@Component({
+  selector: "svc-object-selector",
+  templateUrl: "./object-selector.component.html",
+  styles: [":host { display: none; }"]
+})
+export class ObjectSelectorComponent extends BaseAngular<ObjectSelectorModel> {
+  @Input() model!: ObjectSelectorModel;
+  protected getModel(): ObjectSelectorModel {
+    return this.model;
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("svc-object-selector", ObjectSelectorComponent);

packages/survey-creator-angular/src/property-panel/property-grid.component.html

@@ -0,0 +1,3 @@
+<ng-template #template>
+    <survey-content [model]="model.survey"></survey-content>
+</ng-template>

packages/survey-creator-angular/src/property-panel/property-grid.component.ts

@@ -0,0 +1,24 @@
+import { PropertyGridViewModel } from "survey-creator-core";
+import { Component, Input } from "@angular/core";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
+import { QuestionFactory, QuestionButtonGroupModel } from "survey-core";
+
+@Component({
+  selector: "svc-property-grid",
+  templateUrl: "./property-grid.component.html",
+  styles: [":host { display: none; }"]
+})
+export class PropertyGridComponent extends BaseAngular<PropertyGridViewModel> {
+  @Input() model!: PropertyGridViewModel;
+  protected getModel(): PropertyGridViewModel {
+    return this.model;
+  }
+}
+
+QuestionFactory.Instance.registerQuestion("buttongroup", (name) => {
+  var q = new QuestionButtonGroupModel(name);
+  q.choices = QuestionFactory.DefaultChoices;
+  return q;
+});
+
+AngularComponentFactory.Instance.registerComponent("svc-property-grid", PropertyGridComponent);

packages/survey-creator-angular/src/side-bar/side-bar-tab.component.html

@@ -0,0 +1,5 @@
+<ng-template #template>
+  <ng-container *ngIf="model.visible">
+    <ng-template [component]="{ name: model.componentName, data: { model: model.model } }"></ng-template>
+  </ng-container>
+</ng-template>

packages/survey-creator-angular/src/side-bar/side-bar-tab.component.ts

@@ -0,0 +1,16 @@
+
+import { Component, Input } from "@angular/core";
+import { BaseAngular } from "survey-angular-ui";
+import { SidebarTabModel } from "survey-creator-core";
+
+@Component({
+  selector: "svc-side-bar-tab",
+  templateUrl: "./side-bar-tab.component.html",
+  styles: [":host { display: none; }"]
+})
+export class SidebarTabComponent extends BaseAngular<SidebarTabModel> {
+  @Input() model!: SidebarTabModel;
+  protected getModel(): SidebarTabModel {
+    return this.model;
+  }
+}

packages/survey-creator-angular/src/side-bar/side-bar.component.html

@@ -0,0 +1,26 @@
+<ng-template #template>
+  <div class="svc-side-bar" [class.svc-flyout-side-bar]="model.flyoutPanelMode" [visible]="model.hasVisibleTabs">
+    <div class="svc-side-bar__shadow" (click)="model.collapseSidebar()"></div>
+    <div class="svc-flex-column svc-side-bar__wrapper">
+      <div class="svc-side-bar__container" [visible]="model.visible" #container>
+        <div class="svc-side-bar__container-header">
+          <div class="svc-side-bar__container-actions">
+            <sv-action-bar [model]="model.toolbar"></sv-action-bar>
+          </div>
+          <div *ngIf="!!model.headerText" class="svc-side-bar__container-title">
+            {{model.headerText}}
+          </div>
+        </div>
+        <div class="svc-side-bar__container-content">
+          <ng-container *ngFor="let tab of model.tabs">
+            <svc-side-bar-tab [model]="tab"></svc-side-bar-tab> 
+          </ng-container>
+        </div>
+        <div class="svc-side-bar__container-close">
+          <div class="sd-btn sd-btn--action svc-side-bar__container-close-button"
+            (click)="model.collapseSidebar()"> {{ model.closeText }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/side-bar/side-bar.component.ts

@@ -0,0 +1,24 @@
+import { SidebarModel } from "survey-creator-core";
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
+import { BaseAngular } from "survey-angular-ui";
+
+@Component({
+  selector: "svc-side-bar",
+  templateUrl: "./side-bar.component.html",
+  styles: [":host { display: none; }"]
+})
+export class SidebarComponent extends BaseAngular<SidebarModel> implements AfterViewInit {
+  @Input() model!: SidebarModel;
+  @ViewChild("container") container!: ElementRef<HTMLElement>;
+  protected getModel(): SidebarModel {
+    return this.model;
+  }
+
+  override ngOnDestroy(): void {
+    this.model.resetResizeManager();
+    super.ngOnDestroy();
+  }
+  ngAfterViewInit(): void {
+    this.model.initResizeManager(this.container.nativeElement);
+  }
+}