Resolved #5747 - We should use AddQuestionButtonComponent in panel adorner

.eslintrc.json

@@ -163,6 +163,7 @@
 		"linebreak-style": [
 			"off",
 			"windows"
-		]
+		],
+		"react/no-is-mounted": "off"
 	}
 }

packages/survey-creator-angular/src/add-question-type-selector.component.html

@@ -0,0 +1,8 @@
+<ng-template #template>
+  <button type="button" [key2click] (click)="selectQuestionType($event)" [attr.title]="questionTypeSelectorModel.title"
+    [attr.aria-label]="questionTypeSelectorModel.title" class="svc-element__question-type-selector">
+    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName" [size]="24"
+      sv-ng-svg-icon></svg>
+    <sv-ng-popup *ngIf="renderPopup" [popupModel]="questionTypeSelectorModel.popupModel"></sv-ng-popup>
+  </button>
+</ng-template>

packages/survey-creator-angular/src/add-question-type-selector.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from "@angular/core";
+import { ActionBarItemComponent, AngularComponentFactory } from "survey-angular-ui";
+import { CreatorModelComponent } from "./creator-model.component";
+import { Base } from "survey-core";
+
+@Component(
+  {
+    selector: "svc-add-question-type-selector",
+    templateUrl: "./add-question-type-selector.component.html",
+    styles: [":host { display: none; }"]
+  }
+)
+export class AddQuestionTypeSelectorComponent extends CreatorModelComponent<Base> {
+  protected override getPropertiesToTrack(): string[] {
+    return [];
+  }
+  protected override createModel(): void {
+  }
+  protected override getModel(): Base {
+    return this.questionTypeSelectorModel;
+  }
+  @Input() questionTypeSelectorModel!: any;
+  @Input() renderPopup?: boolean = true;
+  public selectQuestionType(event: any) {
+    event.stopPropagation();
+    this.questionTypeSelectorModel.action();
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-add-question-type-selector", AddQuestionTypeSelectorComponent);

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

@@ -0,0 +1,16 @@
+<ng-template #template>
+  <div *ngIf="adorner.showAddQuestionButton" [class]="'svc-element__add-new-question ' + buttonClass" [key2click]
+    (click)="addNewQuestion($event)"
+    (mouseover)="adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)"
+    data-bind="clickBubble: false">
+    <span class="svc-text svc-text--normal svc-text--bold">
+      {{ adorner.addNewQuestionText }}
+    </span>
+    <ng-template *ngIf="renderPopup"
+      [component]="{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }">
+    </ng-template>
+  </div>
+  <ng-template *ngIf="!renderPopup"
+    [component]="{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }">
+  </ng-template>
+</ng-template>

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

@@ -0,0 +1,33 @@
+import { Component, Input } from "@angular/core";
+import { ActionBarItemComponent, AngularComponentFactory } from "survey-angular-ui";
+import { CreatorModelComponent } from "./creator-model.component";
+import { Base } from "survey-core";
+
+@Component(
+  {
+    selector: "svc-add-new-question-btn",
+    templateUrl: "./add-question.component.html",
+    styles: [":host { display: none; }"]
+  }
+)
+export class AddQuestionButtonComponent extends CreatorModelComponent<Base> {
+  protected override getPropertiesToTrack(): string[] {
+    return [];
+  }
+  protected override createModel(): void {
+  }
+  protected override getModel(): Base {
+    return this.model.data;
+  }
+  @Input() model!: any;
+  @Input() buttonClass?: string = "svc-btn";
+  @Input() renderPopup?: boolean = true;
+  public get adorner() {
+    return this.model.data;
+  }
+  public addNewQuestion(event: any) {
+    event.stopPropagation();
+    this.adorner.addNewQuestion(this.adorner, event);
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-add-new-question-btn", AddQuestionButtonComponent);

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

@@ -39,7 +39,8 @@ import { SurveyResultsTableRowComponent } from "./tabs/preview/survey-results-ro
 import { TestTabComponent } from "./tabs/preview/test.component";
 import { ThemeTabComponent } from "./tabs/theme/theme.component";
 import { PageDesignerComponent } from "./page.component";
-import { AddQuestionButtonComponent } from "./page-add-question.component";
+import { AddQuestionButtonComponent } from "./add-question.component";
+import { AddQuestionTypeSelectorComponent } from "./add-question-type-selector.component";
 import { QuestionDesignerComponent } from "./question.component";
 import { ItemValueDesignerComponent } from "./adorners/item-value.component";
 import { ImageItemValueDesignerComponent } from "./adorners/image-item-value.component";
@@ -81,7 +82,7 @@ import { TranslateFromAction } from "./tabs/translation/translate-from-action.co
     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,
-    QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction],
+    QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, AddQuestionTypeSelectorComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction],
 
   imports: [
     CommonModule, FormsModule, SurveyModule
@@ -91,7 +92,7 @@ import { TranslateFromAction } from "./tabs/translation/translate-from-action.co
     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,
-    QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction],
+    QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, AddQuestionTypeSelectorComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction],
   providers: [],
 })
 export class SurveyCreatorModule { }

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

@@ -37,7 +37,8 @@ export * from "./tabs/preview/survey-results-row.component";
 export * from "./tabs/preview/test.component";
 export * from "./tabs/theme/theme.component";
 export * from "./page.component";
-export * from "./page-add-question.component";
+export * from "./add-question.component";
+export * from "./add-question-type-selector.component";
 export * from "./question.component";
 export * from "./adorners/item-value.component";
 export * from "./adorners/image-item-value.component";

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

@@ -1,6 +1,5 @@
 <ng-template #template>
-  <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()"
-    (dblclick)="adorner.dblclick($event)"
+  <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()" (dblclick)="adorner.dblclick($event)"
     (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)"
     [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
 
@@ -14,9 +13,9 @@
         (pointerdown)="adorner.onPointerDown($event)">
         <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
           sv-ng-svg-icon></svg>
-          <div class="svc-question__top-actions">
-            <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
-          </div>
+        <div class="svc-question__top-actions">
+          <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
+        </div>
       </div>
 
       <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
@@ -26,8 +25,6 @@
           <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
           <div *ngIf="adorner.showAddQuestionButton" class="svc-panel__add-new-question svc-action-button" [key2click]
             (click)="addNewQuestion($event)">
-            <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')"
-            [size]="24" sv-ng-svg-icon></svg>
             <span class="svc-text svc-text--normal svc-text--bold">
               {{ adorner.addNewQuestionText }}
             </span>
@@ -44,22 +41,16 @@
         <div class="svc-panel__question-type-selector-popup"> <sv-ng-popup
             [popupModel]="adorner.questionTypeSelectorModel.popupModel"></sv-ng-popup>
         </div>
+
         <div class="svc-panel__add-new-question-wrapper">
-          <div class="svc-panel__add-new-question svc-action-button" [key2click] (click)="addNewQuestion($event)">
-            <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24" sv-ng-svg-icon></svg>
-            <span class="svc-text svc-text--normal svc-text--bold">
-              {{ adorner.addNewQuestionText }}
-            </span>
-          </div>
-          <button type="button" [attr.title]="adorner.addNewQuestionText" [key2click] (click)="selectQuestionType($event)"
-            class="svc-panel__question-type-selector">
-            <svg class="svc-panel__question-type-selector-icon" [iconName]="adorner.questionTypeSelectorModel.iconName"
-              [size]="24" sv-ng-svg-icon></svg>
-          </button>
+          <ng-template
+            [component]="{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }">
+          </ng-template>
         </div>
       </div>
 
-      <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content-actions" (focusin)="adorner.select(adorner, $event)">
+      <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content-actions"
+        (focusin)="adorner.select(adorner, $event)">
         <sv-action-bar [model]="adorner.actionContainer" [handleClick]="false"></sv-action-bar>
       </div>
     </div>

packages/survey-creator-core/src/components/page.scss

@@ -219,17 +219,17 @@ svc-page {
   }
 }
 
-.svc-page__add-new-question {
+.svc-element__add-new-question {
   .svc-text {
     margin-left: calcSize(6);
   }
 }
 
-.svc-page__add-new-question {
+.svc-element__add-new-question {
   -webkit-tap-highlight-color: transparent;
 }
 
-.svc-page__question-type-selector {
+.svc-element__question-type-selector {
   appearance: none;
   display: flex;
   height: calcSize(5);
@@ -281,7 +281,7 @@ svc-page {
   }
 }
 
-.svc-page__add-new-question,
+.svc-element__add-new-question,
 .svc-question__adorner {
   .sv-list__item.sv-list__item--disabled {
     opacity: 0.25;

packages/survey-creator-core/src/components/page.ts

@@ -161,7 +161,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
     }
   }
 
-  addNewQuestion(model: PageAdorner, event: IPortableMouseEvent, type?: string) {
+  addNewQuestion = (model: PageAdorner, event: IPortableMouseEvent, type?: string) => {
     this.creator.addNewQuestionInPage((type) => {
       this.addGhostPage(false);
       this.creator.survey.currentPage = this.page;