Work for #3390: implement creator component

packages/survey-creator-angular/example/angular-ui/src/app/app.component.ts

@@ -4,7 +4,8 @@ import { CreatorBase } from "survey-creator-core";
 
 @Component({
   selector: "app-root",
-  templateUrl: "./app.component.html"
+  templateUrl: "./app.component.html",
+  styles: [":host { position: fixed; top: 0; bottom: 0; right: 0; left: 0;}"]
 })
 export class AppComponent {
   public isTest = !!(<any>window)["%hammerhead%"];

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

@@ -4,9 +4,10 @@ import { FormsModule } from "@angular/forms";
 
 import { CreatorComponent } from "./creator.component";
 import { SurveyAngularModule } from "survey-angular-ui";
+import { DesignerTabComponent } from "./tabs/designer.component";
 
 @NgModule({
-  declarations: [CreatorComponent],
+  declarations: [CreatorComponent, DesignerTabComponent],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],

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

@@ -1,4 +1,55 @@
-<div>
-  Creator !
-  <survey [model]="survey"></survey>
-</div>
+<ng-container *ngIf="!creator.isCreatorDisposed">
+  <div class="svc-creator" [class.svc-creator--mobile]="creator.isMobileView">
+    <div>
+      <!-- ko component: { name: 'svc-svg-bundle'} -->
+      <!-- /ko -->
+    </div>
+    <div class="svc-full-container svc-creator__area svc-flex-column"
+      [class.svc-creator__area--with-banner]="!creator.haveCommercialLicense">
+      <div class="svc-flex-row svc-full-container"
+        [class.svc-creator__side-bar--left]="creator.sidebarLocation == 'left'">
+        <div class="svc-flex-column svc-flex-row__element svc-flex-row__element--growing">
+          <div class="svc-top-bar">
+            <div class="svc-tabbed-menu-wrapper" [visible]="creator.showTabs">
+              <span>TODO TABBED MENU</span>
+              <!-- ko component: { name: 'svc-tabbed-menu', params: { model: creator.tabbedMenu } } -->
+              <!-- /ko -->
+            </div>
+            <div *ngIf="creator.showToolbar" class="svc-toolbar-wrapper" [visible]="creator.showToolbar">
+              <sv-action-bar [model]="creator.toolbar"></sv-action-bar>
+            </div>
+          </div>
+          <div class="svc-creator__content-wrapper svc-flex-row"
+            [class.svc-creator__content-wrapper--footer-toolbar]="creator.isMobileView">
+            <div class="svc-creator__content-holder svc-flex-column">
+              <ng-container *ngFor="let tab of creator.tabs">
+                <div class="svc-creator-tab" *ngIf="creator.viewType == tab.id && tab.visible"
+                  [attr.id]="'scrollableDiv-' + tab.id" [class.svc-creator__toolbox--right]="creator.toolboxLocation == 'right'">
+                  <ng-template [component]="{ name: tab.componentContent, data: { model: tab.data.model } }"></ng-template>
+                </div>
+              </ng-container>
+            </div>
+          </div>
+          <div *ngIf="creator.isMobileView" class="svc-footer-bar">
+            <div class="svc-toolbar-wrapper" [visible]="creator.isMobileView">
+              <sv-action-bar [model: creator.footerToolbar]></sv-action-bar>
+            </div>
+          </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> -->
+        </div>
+      </div>
+      <div class="svc-creator__banner" *ngIf="!creator.haveCommercialLicense">
+        <span class="svc-creator__non-commercial-text">
+          <a href="https://surveyjs.io/buy">
+            {{creator.licenseText}}
+          </a>
+        </span>
+      </div>
+      <!-- ko component: { name: 'svc-notifier', params: { creator: creator, notifier: creator.notifier } } -->
+      <!-- /ko -->
+    </div>
+  </div>
+</ng-container>

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

@@ -15,6 +15,10 @@ export class CreatorComponent extends BaseAngular<CreatorBase> {
     return this.model;
   }
 
+  public get creator(): CreatorBase {
+    return this.model;
+  }
+
   public survey = new SurveyModel({
     "logoPosition": "right",
     "completedHtml": "<h3>Thank you for your feedback.</h3><h5>Your thoughts and ideas will help us to create a great product!</h5>",

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

@@ -0,0 +1,5 @@
+<ng-template #template>
+  <div class="svc-tab-designer" [class]="model.getRootCss()" (click)="model.clickDesigner()">
+    TODO implement designer tab
+  </div>
+</ng-template>

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

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

packages/survey-creator-knockout/src/tabs/designer.ts

@@ -16,3 +16,4 @@ ko.components.register("svc-tab-designer", {
   },
   template: template
 });
+