Merge branch 'master' into feature/5747-use-add-question-component

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

@@ -9,7 +9,15 @@ import { TabbedMenuItemComponent } from "./tabbed-menu/tabbed-menu/tabbed-menu-i
 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 { SidebarPageComponent } from "./side-bar/side-bar-page.component";
+
+import { TabButtonComponent } from "./tab-control/tab-button.component";
+import { TabsComponent } from "./tab-control/tabs.component";
+import { TabControlComponent } from "./tab-control/tab-control.component";
+import { SidebarPropertyGridHeaderComponent } from "./tab-control/side-bar-property-grid-header.component"
+import { PropertyGridPlaceholderComponent } from "./tab-control/property-grid-placeholder.component";
+import { SidebarPropertyGridPlaceholderHeaderComponent } from "./tab-control/property-grid-placeholder-header.component";
+
 import { ObjectSelectorComponent } from "./property-panel/object-selector.component";
 import { PropertyGridComponent } from "./property-panel/property-grid.component";
 import { SearchComponent } from "./property-panel/search.component";
@@ -70,7 +78,7 @@ import { JsonErrorItemComponent } from "./tabs/json/json-error-item.component";
 import { TranslateFromAction } from "./tabs/translation/translate-from-action.component";
 
 @NgModule({
-  declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+  declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarPropertyGridPlaceholderHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
     ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -80,7 +88,7 @@ import { TranslateFromAction } from "./tabs/translation/translate-from-action.co
     CommonModule, FormsModule, SurveyModule
   ],
   exports: [
-    CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+    CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarPropertyGridPlaceholderHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
     ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,

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

@@ -6,7 +6,15 @@ export * from "./tabbed-menu/tabbed-menu/tabbed-menu-item.component";
 export * from "./tabbed-menu/tabbed-menu/tabbed-menu.component";
 export * from "./tabbed-menu/tabbed-menu/tabbed-menu-item-wrapper.component";
 export * from "./side-bar/side-bar.component";
-export * from "./side-bar/side-bar-tab.component";
+export * from "./side-bar/side-bar-page.component";
+
+export * from "./tab-control/tab-button.component";
+export * from "./tab-control/tabs.component";
+export * from "./tab-control/tab-control.component";
+export * from "./tab-control/side-bar-property-grid-header.component";
+export * from "./tab-control/property-grid-placeholder.component";
+export * from "./tab-control/property-grid-placeholder-header.component";
+
 export * from "./property-panel/object-selector.component";
 export * from "./property-panel/property-grid.component";
 export * from "./property-panel/search.component";

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

@@ -1,6 +1,6 @@
 import { Component, Input } from "@angular/core";
 import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
-import { ObjectSelectorModel, SidebarTabModel } from "survey-creator-core";
+import { ObjectSelectorModel } from "survey-creator-core";
 
 @Component({
   selector: "svc-object-selector",

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

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

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

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

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

@@ -1,20 +1,30 @@
 <ng-template #template>
-  <div class="svc-side-bar" [class.svc-flyout-side-bar]="model.flyoutPanelMode" [visible]="model.hasVisibleTabs">
+  <div class="svc-side-bar" [class.svc-flyout-side-bar]="model.flyoutPanelMode" [visible]="model.hasVisiblePages">
     <div class="svc-side-bar__shadow" (click)="model.collapseSidebar()"></div>
-    <div class="svc-flex-column svc-side-bar__wrapper">
+    <div class="svc-flex-row svc-side-bar__wrapper">
       <div class="svc-side-bar__container" [visible]="model.renderedIsVisible" #container>
-        <div class="svc-side-bar__container-header">
-          <div class="svc-side-bar__container-actions">
-            <sv-action-bar [model]="model.toolbar"></sv-action-bar>
+        <ng-container *ngIf="model.headerComponentName">
+          <ng-template
+            [component]="{ name: model.headerComponentName, data: { model: model.headerComponentData } }"></ng-template>
+        </ng-container>
+        <ng-container *ngIf="!model.headerComponentName">
+          <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 *ngIf="!!model.headerText" class="svc-side-bar__container-title">{{model.headerText}}</div>
-        </div>
+        </ng-container>
         <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 *ngFor="let page of model.pages">
+            <svc-side-bar-page [model]="page"></svc-side-bar-page>
           </ng-container>
         </div>
       </div>
+      <ng-container *ngIf="model.sideAreaComponentName">
+        <ng-template
+          [component]="{ name: model.sideAreaComponentName, data: { model: model.sideAreaComponentData } }"></ng-template>
+      </ng-container>
     </div>
   </div>
 </ng-template>

packages/survey-creator-angular/src/tab-control/property-grid-placeholder-header.component.html

@@ -0,0 +1,5 @@
+<ng-template #template>
+  <div class="svc-side-bar__container-header svc-sidebar__header-container">
+    <div class="svc-side-bar__container-title">{{model.caption}}</div>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/tab-control/property-grid-placeholder-header.component.ts

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

packages/survey-creator-angular/src/tab-control/property-grid-placeholder.component.html

@@ -0,0 +1,14 @@
+<ng-template #template>
+  <div class="svc-property-grid-placeholder">
+    <div class="svc-property-grid-placeholder__header">
+      <span
+        class="svc-property-grid-placeholder__title">{{editorLocalization.getString("ed.propertyGridPlaceholderTitle")}}</span>
+      <span
+        class="svc-property-grid-placeholder__description">{{editorLocalization.getString("ed.propertyGridPlaceholderDescription")}}</span>
+    </div>
+    <div class="svc-property-grid-placeholder__content">
+      <div class="svc-property-grid-placeholder__gap"></div>
+      <div class="svc-property-grid-placeholder__image"></div>
+    </div>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/tab-control/property-grid-placeholder.component.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { AngularComponentFactory, EmbeddedViewContentComponent } from "survey-angular-ui";
+import { editorLocalization } from "survey-creator-core";
+
+@Component({
+  selector: "svc-property-grid-placeholder",
+  templateUrl: "./property-grid-placeholder.component.html",
+  styles: [":host { display: none; }"]
+})
+export class PropertyGridPlaceholderComponent extends EmbeddedViewContentComponent {
+  editorLocalization = editorLocalization;
+}
+AngularComponentFactory.Instance.registerComponent("svc-property-grid-placeholder", PropertyGridPlaceholderComponent);

packages/survey-creator-angular/src/tab-control/side-bar-property-grid-header.component.html

@@ -0,0 +1,15 @@
+<ng-template #template>
+  <div class="svc-sidebar__header svc-sidebar__header--tabbed">
+    <div class="svc-sidebar__header-container svc-sidebar__header-container--with-subtitle">
+      <div class="svc-sidebar__header-content" (click)="model.action()">
+        <div [class]="model.buttonClassName">
+          <div class="svc-sidebar__header-caption">
+            <span class="svc-sidebar__header-title">{{model.title}}</span>
+            <span class="svc-sidebar__header-subtitle">{{model.tooltip}}</span>
+          </div>
+        </div>
+        <sv-ng-popup [popupModel]="model.popupModel" [getTarget]="getTarget"></sv-ng-popup>
+      </div>
+    </div>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/tab-control/side-bar-property-grid-header.component.ts

@@ -0,0 +1,20 @@
+
+import { Component, Input } from "@angular/core";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
+import { getActionDropdownButtonTarget } from "survey-core";
+import { MenuButton } from "survey-creator-core";
+
+@Component({
+  selector: "svc-side-bar-property-grid-header",
+  templateUrl: "./side-bar-property-grid-header.component.html",
+  styles: [":host { display: none; }"]
+})
+export class SidebarPropertyGridHeaderComponent extends BaseAngular<MenuButton> {
+  @Input() model!: MenuButton;
+  public getTarget: (container: HTMLElement) => HTMLElement = getActionDropdownButtonTarget;
+
+  protected getModel(): MenuButton {
+    return this.model;
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-side-bar-property-grid-header", SidebarPropertyGridHeaderComponent);

packages/survey-creator-angular/src/tab-control/tab-button.component.html

@@ -0,0 +1,11 @@
+<ng-template #template>
+  <div class="svc-menu-action">
+    <div [class]="model.buttonClassName" [attr.title]="model.tooltip" (click)="model.action()">
+      <div class="svc-menu-action__icon">
+        <div class="svc-menu-action__icon-container">
+          <svg [iconName]="model.iconName" [size]="24" sv-ng-svg-icon></svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/tab-control/tab-button.component.ts

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

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

@@ -0,0 +1,20 @@
+<ng-template #template>
+  <div [class]="model.sideBarClassName">
+    <div class="svc-sidebar-tabs__top-container">
+      <div class="svc-sidebar-tabs__collapse-button">
+        <svc-tab-button [model]="model.expandCollapseAction"></svc-tab-button>
+      </div>
+      <div class="svc-sidebar-tabs__separator">
+        <div></div>
+      </div>
+      <div class="svc-sidebar-tabs__items">
+        <svc-tabs [model]="model.topToolbar"></svc-tabs>
+      </div>
+    </div>
+    <div class="svc-sidebar-tabs__bottom-container">
+      <div class="svc-sidebar-tabs__items">
+        <svc-tabs [model]="model.bottomToolbar"></svc-tabs>
+      </div>
+    </div>
+  </div>
+</ng-template>

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

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

packages/survey-creator-angular/src/tab-control/tabs.component.html

@@ -0,0 +1,5 @@
+<ng-template #template>
+  <ng-container *ngFor="let action of model.actions">
+    <svc-tab-button [model]="action"></svc-tab-button>
+  </ng-container>
+</ng-template>

packages/survey-creator-angular/src/tab-control/tabs.component.ts

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