Work for #3390: start work on toolbox

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

@@ -28,9 +28,14 @@ import { SurveyResultsComponent } from "./tabs/preview/survey-results.component"
 import { SurveyResultsTableRowComponent } from "./tabs/preview/survey-results-row.component";
 import { TestTabComponent } from "./tabs/preview/test.component";
 import { PageDesignerComponent } from "./page.component";
+import { AdaptiveToolboxComponent } from "./toolbox/adaptive-toolbox.component";
+import { ToolboxToolComponent } from "./toolbox/toolbox-tool.component";
+import { ToolboxItemComponent } from "./toolbox/toolbox-item.component";
+import { ToolboxCategoryComponent } from "./toolbox/toolbox-category.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],
+  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],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],

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

@@ -1,5 +1,5 @@
 <ng-template #template>
-  <!-- <svc-adaptive-toolbox *ngIf="model.isToolboxVisible" params="model: creator"></svc-adaptive-toolbox> -->
+  <svc-adaptive-toolbox *ngIf="model.isToolboxVisible" [creator]="creator"></svc-adaptive-toolbox>
   <div class="svc-tab-designer" [class]="model.getRootCss()" (click)="model.clickDesigner()">
     <div class="svc-tab-designer_content">
       <ng-container *ngIf="model.showPlaceholder">

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

@@ -0,0 +1,14 @@
+<ng-template #template>
+  <div class="svc-toolbox" [class.svc-toolbox--compact]="model.isCompact" #container>
+    <div class="svc-toolbox__container">
+      <ng-container *ngIf="!(model.isCompact || model.categories.length == 1)">
+        <svc-toolbox-category *ngFor="let category of model.categories" [category]="category" [toolbox]="model"></svc-toolbox-category>
+      </ng-container>
+      <ng-container *ngIf="model.isCompact || model.categories.length == 1">
+        <div class="svc-toolbox__category">
+          <svc-toolbox-tool *ngFor="let item of model.renderedActions" [creator]="creator" [item]="item" [isCompact]="model.isCompact"></svc-toolbox-tool>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,30 @@
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
+import { CreatorBase, QuestionToolbox } from "survey-creator-core";
+import { VerticalResponsivityManager } from "survey-core";
+import { BaseAngular } from "survey-angular-ui";
+
+@Component({
+  selector: "svc-adaptive-toolbox",
+  templateUrl: "./adaptive-toolbox.component.html",
+  styles: [":host { display: none; }"]
+})
+export class AdaptiveToolboxComponent extends BaseAngular<QuestionToolbox> implements AfterViewInit {
+  @Input() creator!: CreatorBase;
+  @ViewChild("container") container!: ElementRef<HTMLElement>;
+  private responsivityManager: VerticalResponsivityManager | undefined;
+  public get model() {
+    return this.creator.toolbox;
+  }
+  ngAfterViewInit() {
+    this.responsivityManager =
+      new VerticalResponsivityManager(this.container.nativeElement,
+        this.model, ".svc-toolbox__tool:not(.sv-dots)>.sv-action__content", 44, 44);
+  }
+  protected getModel(): QuestionToolbox {
+    return this.model;
+  }
+  override ngOnDestroy(): void {
+    this.responsivityManager?.dispose();
+    super.ngOnDestroy();
+  }
+}

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

@@ -0,0 +1,17 @@
+<ng-template #template>
+  <div class="svc-toolbox__category">
+    <div class="svc-toolbox__category-header"
+      (click)="category.toggleState()" [key2click] [class.svc-toolbox__category-header--collapsed]="toolbox.canCollapseCategories">
+      <span class="svc-toolbox__category-title">{{category.name}}</span>
+      <div *ngIf="toolbox.canCollapseCategories" class="svc-toolbox__category-header__controls">
+        <svg [iconName]="'icon-arrow-down'" class="svc-toolbox__category-header__button svc-string-editor__button--expand" [size]="24" sv-ng-svg-icon></svg>
+        <svg [iconName]="'icon-arrow-up'" class="svc-toolbox__category-header__button svc-string-editor__button--collapse" [size]="24" sv-ng-svg-icon [visible]="category.collapsed"></svg>
+      </div>
+    </div>
+    <ng-container *ngIf="!category.collapsed">
+      <ng-container *ngFor="let item of category.items">
+        <svc-toolbox-tool [item]="item" [creator]="toolbox.creator" [isCompact]="false" ></svc-toolbox-tool>
+      </ng-container>
+    </ng-container>
+  </div>
+</ng-template>

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

@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core";
+import { BaseAngular } from "survey-angular-ui";
+import { QuestionToolbox, QuestionToolboxCategory } from "survey-creator-core";
+
+@Component({
+  selector: "svc-toolbox-category ",
+  templateUrl: "./toolbox-category.component.html",
+  styles: [":host { display: none; }"]
+})
+export class ToolboxCategoryComponent extends BaseAngular<QuestionToolboxCategory> {
+  @Input() category!: QuestionToolboxCategory;
+  @Input() toolbox!: QuestionToolbox;
+  getModel() {
+    return this.category;
+  }
+}

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

@@ -0,0 +1,15 @@
+<ng-template #template>
+  <div class="svc-toolbox__item" role="button" [attr.ariaLabel]="ariaLabel"
+    [class]="'svc-toolbox__item--' + item.iconName" (click)="viewModel.click($event)" [key2click]>
+    <span class="svc-toolbox__item-container">
+      <svg [iconName]="item.iconName" [size]="24" [title]="ariaLabel" sv-ng-svg-icon></svg>
+    </span>
+    <span *ngIf="isCompact" class="svc-toolbox__item-banner svc-item__banner">
+      <svg [iconName]="item.iconName" [size]="24" [title]="ariaLabel" class="svc-toolbox__item-icon" sv-ng-svg-icon></svg>
+      <span class="svc-toolbox__item-title">{{item.title}}</span>
+    </span>
+    <span *ngIf="!isCompact" class="svc-toolbox__item-title">
+      {{item.title}}
+    </span>
+  </div>
+</ng-template>

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

@@ -0,0 +1,26 @@
+import { Component, Input } from "@angular/core";
+import { ToolboxToolViewModel, CreatorBase, IQuestionToolboxItem, editorLocalization } from "survey-creator-core";
+import { BaseAngular, AngularComponentFactory } from "survey-angular-ui";
+import { Action } from "survey-core";
+
+@Component({
+  selector: "svc-toolbox-item",
+  templateUrl: "./toolbox-item.component.html",
+  styles: [":host { display: none; }"]
+})
+export class ToolboxItemComponent extends BaseAngular<ToolboxToolViewModel> {
+  @Input() creator!: CreatorBase;
+  @Input() model!: Action;
+  @Input() isCompact: boolean = false;
+  @Input() viewModel!: ToolboxToolViewModel
+  protected getModel(): ToolboxToolViewModel {
+    return this.viewModel;
+  }
+  public get item() {
+    return this.model;
+  }
+  public get ariaLabel(): string {
+    return this.item.tooltip + " " + editorLocalization.getString("toolbox") + " item";
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-toolbox-item", ToolboxItemComponent);

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

@@ -0,0 +1,9 @@
+<ng-template #template>
+    <div class="svc-toolbox__tool"
+        [class.sv-action--hidden]="!item.isVisible" [class]="item.css" (pointerdown)="model.onPointerDown($event)">
+        <div class="sv-action__content">
+            <div class="svc-toolbox__category-separator" *ngIf="item.needSeparator && isCompact"></div>
+            <ng-template [component]="{ name: item.component || 'svc-toolbox-item', default: 'svc-toolbox-item', data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }"></ng-template>
+        </div>
+    </div>
+</ng-template>

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

@@ -0,0 +1,25 @@
+import { Component, Input } from "@angular/core";
+import { CreatorModelComponent } from "../creator-model.component";
+import { CreatorBase, IQuestionToolboxItem, ToolboxToolViewModel } from "survey-creator-core";
+import { Action } from "survey-core";
+
+@Component({
+  selector: "svc-toolbox-tool",
+  templateUrl: "./toolbox-tool.component.html",
+  styles: [":host { display: none; }"]
+})
+export class ToolboxToolComponent extends CreatorModelComponent<Action> {
+  @Input() creator!: CreatorBase;
+  @Input() item!: Action;
+  @Input() isCompact: boolean = false;
+  public model!: ToolboxToolViewModel;
+  createModel() {
+    this.model = new ToolboxToolViewModel(<any>this.item, this.creator);
+  }
+  protected getPropertiesToTrack(): string[] {
+    return ["creator", "item"];
+  }
+  protected getModel(): Action {
+    return this.item;
+  }
+}