survey-creator-angular 1.12.1 → 1.12.3

package/fesm2015/survey-creator-angular.js

@@ -5,8 +5,8 @@ import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from 'survey-angular-ui';
-import { BaseAngular, AngularComponentFactory, SurveyContentComponent, ButtonGroupQuestionComponent, EmbeddedViewContentComponent, QuestionAngular, ActionBarItemComponent, SurveyModule } from 'survey-angular-ui';
-import { ResponsivityManager, VerticalResponsivityManager, DropdownListModel, RendererFactory } from 'survey-core';
+import { BaseAngular, AngularComponentFactory, SurveyContentComponent, EmbeddedViewContentComponent, ButtonGroupQuestionComponent, QuestionAngular, SurveyModule } from 'survey-angular-ui';
+import { ResponsivityManager, VerticalResponsivityManager, getActionDropdownButtonTarget, DropdownListModel, RendererFactory } from 'survey-core';
 import { ToolboxToolViewModel, PageAdorner, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
 
 class TabbedMenuItemWrapperComponent extends BaseAngular {
@@ -56,18 +56,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tabbed-menu", TabbledMenuComponent);
 
-class SidebarTabComponent extends BaseAngular {
+class SidebarPageComponent extends BaseAngular {
     getModel() {
         return this.model;
     }
 }
-SidebarTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SidebarTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarTabComponent, selector: "svc-side-bar-tab", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngIf=\"model.visible\">\n    <ng-template [component]=\"{ name: model.componentName, data: { model: model.model } }\"></ng-template>\n  </ng-container>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarTabComponent, decorators: [{
+SidebarPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SidebarPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPageComponent, selector: "svc-side-bar-page", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngIf=\"model.visible\">\n    <ng-template [component]=\"{ name: model.componentName, data: { model: model.componentData } }\"></ng-template>\n  </ng-container>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPageComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "svc-side-bar-tab",
-                    templateUrl: "./side-bar-tab.component.html",
+                    selector: "svc-side-bar-page",
+                    templateUrl: "./side-bar-page.component.html",
                     styles: [":host { display: none; }"]
                 }]
         }], propDecorators: { model: [{
@@ -87,7 +87,7 @@ class SidebarComponent extends BaseAngular {
     }
 }
 SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarComponent, selector: "svc-side-bar", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar\" [class.svc-flyout-side-bar]=\"model.flyoutPanelMode\" [visible]=\"model.hasVisibleTabs\">\n    <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\"></div>\n    <div class=\"svc-flex-column svc-side-bar__wrapper\">\n      <div class=\"svc-side-bar__container\" [visible]=\"model.renderedIsVisible\" #container>\n        <div class=\"svc-side-bar__container-header\">\n          <div class=\"svc-side-bar__container-actions\">\n            <sv-action-bar [model]=\"model.toolbar\"></sv-action-bar>\n          </div>\n          <div *ngIf=\"!!model.headerText\" class=\"svc-side-bar__container-title\">{{model.headerText}}</div>\n        </div>\n        <div class=\"svc-side-bar__container-content\">\n          <ng-container *ngFor=\"let tab of model.tabs\">\n            <svc-side-bar-tab [model]=\"tab\"></svc-side-bar-tab>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarTabComponent, selector: "svc-side-bar-tab", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarComponent, selector: "svc-side-bar", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar\" [class.svc-flyout-side-bar]=\"model.flyoutPanelMode\" [visible]=\"model.hasVisiblePages\">\n    <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\"></div>\n    <div class=\"svc-flex-row svc-side-bar__wrapper\">\n      <div class=\"svc-side-bar__container\" [visible]=\"model.renderedIsVisible\" #container>\n        <ng-template\n          [component]=\"{ name: model.header.component, data: { model: model.header.componentModel } }\"></ng-template>\n        <div class=\"svc-side-bar__container-content\">\n          <ng-container *ngFor=\"let page of model.pages\">\n            <svc-side-bar-page [model]=\"page\"></svc-side-bar-page>\n          </ng-container>\n        </div>\n      </div>\n      <ng-container *ngIf=\"model.sideAreaComponentName\">\n        <ng-template\n          [component]=\"{ name: model.sideAreaComponentName, data: { model: model.sideAreaComponentData } }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SidebarPageComponent, selector: "svc-side-bar-page", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
@@ -516,6 +516,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tabbed-menu-item", TabbedMenuItemComponent);
 
+class SidebarDefaultHeaderComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+SidebarDefaultHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarDefaultHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SidebarDefaultHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarDefaultHeaderComponent, selector: "svc-side-bar-default-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar__container-header\">\n    <div class=\"svc-side-bar__container-actions\">\n      <sv-action-bar [model]=\"model.toolbar\"></sv-action-bar>\n    </div>\n    <div *ngIf=\"!!model.title\" class=\"svc-side-bar__container-title\">{{model.title}}</div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarDefaultHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-side-bar-default-header",
+                    templateUrl: "./side-bar-default-header.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-side-bar-default-header", SidebarDefaultHeaderComponent);
+
+class TabButtonComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+TabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabButtonComponent, selector: "svc-tab-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-menu-action\">\n    <div [class]=\"model.buttonClassName\" [attr.title]=\"model.tooltip\" (click)=\"model.action()\">\n      <div class=\"svc-menu-action__icon\">\n        <div class=\"svc-menu-action__icon-container\">\n          <svg [iconName]=\"model.iconName\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-tab-button",
+                    templateUrl: "./tab-button.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-button", TabButtonComponent);
+
+class TabsComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabsComponent, selector: "svc-tabs", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngFor=\"let action of model.actions\">\n    <svc-tab-button [model]=\"action\"></svc-tab-button>\n  </ng-container>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: TabButtonComponent, selector: "svc-tab-button", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-tabs",
+                    templateUrl: "./tabs.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class TabControlComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+TabControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabControlComponent, selector: "svc-tab-control", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.sideBarClassName\">\n    <div class=\"svc-sidebar-tabs__top-container\">\n      <div class=\"svc-sidebar-tabs__collapse-button\">\n        <svc-tab-button [model]=\"model.expandCollapseAction\"></svc-tab-button>\n      </div>\n      <div class=\"svc-sidebar-tabs__separator\">\n        <div></div>\n      </div>\n      <div class=\"svc-sidebar-tabs__items\">\n        <svc-tabs [model]=\"model.topToolbar\"></svc-tabs>\n      </div>\n    </div>\n    <div class=\"svc-sidebar-tabs__bottom-container\">\n      <div class=\"svc-sidebar-tabs__items\">\n        <svc-tabs [model]=\"model.bottomToolbar\"></svc-tabs>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: TabButtonComponent, selector: "svc-tab-button", inputs: ["model"] }, { type: TabsComponent, selector: "svc-tabs", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-tab-control",
+                    templateUrl: "./tab-control.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-control", TabControlComponent);
+
+class SidebarPropertyGridHeaderComponent extends BaseAngular {
+    constructor() {
+        super(...arguments);
+        this.getTarget = getActionDropdownButtonTarget;
+    }
+    getModel() {
+        return this.model;
+    }
+}
+SidebarPropertyGridHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPropertyGridHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SidebarPropertyGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPropertyGridHeaderComponent, selector: "svc-side-bar-property-grid-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-sidebar__header svc-sidebar__header--tabbed\">\n    <div class=\"svc-sidebar__header-container svc-sidebar__header-container--with-subtitle\">\n      <div class=\"svc-sidebar__header-content\" (click)=\"model.action()\">\n        <div [class]=\"model.buttonClassName\">\n          <div class=\"svc-sidebar__header-caption\">\n            <span class=\"svc-sidebar__header-title\">{{model.title}}</span>\n            <span class=\"svc-sidebar__header-subtitle\">{{model.tooltip}}</span>\n          </div>\n        </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\" [getTarget]=\"getTarget\"></sv-ng-popup>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPropertyGridHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-side-bar-property-grid-header",
+                    templateUrl: "./side-bar-property-grid-header.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-side-bar-property-grid-header", SidebarPropertyGridHeaderComponent);
+
+class PropertyGridPlaceholderComponent extends EmbeddedViewContentComponent {
+    constructor() {
+        super(...arguments);
+        this.editorLocalization = editorLocalization;
+    }
+}
+PropertyGridPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PropertyGridPlaceholderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PropertyGridPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PropertyGridPlaceholderComponent, selector: "svc-property-grid-placeholder", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-property-grid-placeholder\">\n    <div class=\"svc-property-grid-placeholder__header\">\n      <span\n        class=\"svc-property-grid-placeholder__title\">{{editorLocalization.getString(\"ed.propertyGridPlaceholderTitle\")}}</span>\n      <span\n        class=\"svc-property-grid-placeholder__description\">{{editorLocalization.getString(\"ed.propertyGridPlaceholderDescription\")}}</span>\n    </div>\n    <div class=\"svc-property-grid-placeholder__content\">\n      <div class=\"svc-property-grid-placeholder__gap\"></div>\n      <div class=\"svc-property-grid-placeholder__image\"></div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PropertyGridPlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-property-grid-placeholder",
+                    templateUrl: "./property-grid-placeholder.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("svc-property-grid-placeholder", PropertyGridPlaceholderComponent);
+
+class SidebarHeaderComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+SidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarHeaderComponent, selector: "svc-side-bar-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar__container-header svc-sidebar__header-container\">\n    <ng-container *ngIf=\"!model.subTitle\">\n      <div class=\"svc-side-bar__container-title\">{{model.title}}</div>\n    </ng-container>\n    <ng-container *ngIf=\"!!model.subTitle\">\n      <div class=\"svc-sidebar__header-caption\">\n        <span class=\"svc-sidebar__header-title\">{{model.title}}</span>\n        <span class=\"svc-sidebar__header-subtitle\">{{model.subTitle}}</span>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-side-bar-header",
+                    templateUrl: "./side-bar-header.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-side-bar-header", SidebarHeaderComponent);
+
 class ObjectSelectorComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -945,7 +1080,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tab-theme", ThemeTabComponent);
 
-class AddQuestionButtonComponent extends ActionBarItemComponent {
+class AddQuestionButtonComponent extends CreatorModelComponent {
+    constructor() {
+        super(...arguments);
+        this.buttonClass = "svc-btn";
+        this.renderPopup = true;
+    }
+    getPropertiesToTrack() {
+        return [];
+    }
+    createModel() {
+    }
+    getModel() {
+        return this.model.data;
+    }
     get adorner() {
         return this.model.data;
     }
@@ -953,23 +1101,59 @@ class AddQuestionButtonComponent extends ActionBarItemComponent {
         event.stopPropagation();
         this.adorner.addNewQuestion(this.adorner, event);
     }
-    selectQuestionType(event) {
-        event.stopPropagation();
-        this.adorner.questionTypeSelectorModel.action();
-    }
 }
 AddQuestionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AddQuestionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n      <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n    </button>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+AddQuestionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", inputs: { model: "model", buttonClass: "buttonClass", renderPopup: "renderPopup" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner.showAddQuestionButton\" [class]=\"'svc-element__add-new-question ' + buttonClass\" [key2click]\n    (click)=\"addNewQuestion($event)\"\n    (mouseover)=\"adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\" sv-ng-svg-icon></svg>\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <ng-template *ngIf=\"renderPopup\"\n      [component]=\"{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }\">\n    </ng-template>\n  </div>\n  <ng-template *ngIf=\"!renderPopup\"\n    [component]=\"{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }\">\n  </ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "svc-add-new-question-btn",
-                    templateUrl: "./page-add-question.component.html",
+                    templateUrl: "./add-question.component.html",
                     styles: [":host { display: none; }"]
                 }]
-        }] });
+        }], propDecorators: { model: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], renderPopup: [{
+                type: Input
+            }] } });
 AngularComponentFactory.Instance.registerComponent("svc-add-new-question-btn", AddQuestionButtonComponent);
 
+class AddQuestionTypeSelectorComponent extends CreatorModelComponent {
+    constructor() {
+        super(...arguments);
+        this.renderPopup = true;
+    }
+    getPropertiesToTrack() {
+        return [];
+    }
+    createModel() {
+    }
+    getModel() {
+        return this.questionTypeSelectorModel;
+    }
+    selectQuestionType(event) {
+        event.stopPropagation();
+        this.questionTypeSelectorModel.action();
+    }
+}
+AddQuestionTypeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionTypeSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AddQuestionTypeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionTypeSelectorComponent, selector: "svc-add-question-type-selector", inputs: { questionTypeSelectorModel: "questionTypeSelectorModel", renderPopup: "renderPopup" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\" [attr.title]=\"questionTypeSelectorModel.title\"\n    [attr.aria-label]=\"questionTypeSelectorModel.title\" class=\"svc-element__question-type-selector\">\n    <svg class=\"svc-element__question-type-selector-icon\" [iconName]=\"questionTypeSelectorModel.iconName\" [size]=\"24\"\n      sv-ng-svg-icon></svg>\n    <sv-ng-popup *ngIf=\"renderPopup\" [popupModel]=\"questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n  </button>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionTypeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-add-question-type-selector",
+                    templateUrl: "./add-question-type-selector.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { questionTypeSelectorModel: [{
+                type: Input
+            }], renderPopup: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-add-question-type-selector", AddQuestionTypeSelectorComponent);
+
 class QuestionBannerComponent extends EmbeddedViewContentComponent {
 }
 QuestionBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionBannerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -1032,7 +1216,7 @@ class QuestionDesignerComponent extends CreatorModelComponent {
     }
 }
 QuestionDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1184,7 +1368,7 @@ class QuestionDropdownDesignerComponent extends QuestionDesignerComponent {
     }
 }
 QuestionDropdownDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDropdownDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionDropdownDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionDropdownDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDropdownDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1251,7 +1435,7 @@ class QuestionImageDesignerComponent extends QuestionDesignerComponent {
     }
 }
 QuestionImageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionImageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionImageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1285,7 +1469,7 @@ AngularComponentFactory.Instance.registerComponent("svc-image-question-adorner",
 class PanelDesignerComponent extends QuestionDesignerComponent {
 }
 PanelDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n          <div class=\"svc-question__top-actions\">\n            <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n          </div>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n          <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n            (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n            [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </div>\n        <div class=\"svc-panel__add-new-question-wrapper\">\n          <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n          <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n            class=\"svc-panel__question-type-selector\">\n            <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n              [size]=\"24\" sv-ng-svg-icon></svg>\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string *ngIf=\"!!model.title\" [model]=\"model.locTitle\"></sv-ng-string>\n          <span *ngIf=\"!model.title\" class=\"svc-fake-title\">{{model.name}}</span>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n          <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n            (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\"\n              sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n            [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </div>\n\n        <div class=\"svc-panel__add-new-question-wrapper\">\n          <ng-template\n            [component]=\"{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }\">\n          </ng-template>\n        </div>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\"\n        (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1765,7 +1949,7 @@ class QuestionRatingDesignerComponent extends QuestionDesignerComponent {
     }
 }
 QuestionRatingDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionRatingDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionRatingDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionRatingDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionRatingDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1924,6 +2108,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 AngularComponentFactory.Instance.registerComponent("textwithreset-question", QuestionTextWithResetComponent);
 AngularComponentFactory.Instance.registerComponent("commentwithreset-question", QuestionTextWithResetComponent);
 
+class BooleanSwitchComponent extends QuestionAngular {
+}
+BooleanSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanSwitchComponent, selector: "sv-ng-boolean-switch", usesInheritance: true, ngImport: i0, template: "<div class=\"spg-boolean-switch\" role=\"checkbox\" [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" (click)=\"model.value = !model.value\">\n  <div class=\"spg-boolean-switch__button\" tabindex=\"0\"\n    [class]=\"model.value ? 'spg-boolean-switch__button--checked' : ''\">\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left\"></div>\n    </div>\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right\"></div>\n    </div>\n  </div>\n  <div class=\"spg-boolean-switch__caption\">\n    <div class=\"spg-boolean-switch__title\">\n      <span [model]=\"model.locTitle\" sv-ng-string></span>\n    </div>\n  </div>\n</div>", components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-boolean-switch",
+                    templateUrl: "./boolean-switch.component.html"
+                }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("sv-boolean-switch", BooleanSwitchComponent);
+RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
+
 class JsonErrorItemComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -1969,35 +2167,39 @@ AngularComponentFactory.Instance.registerComponent("svc-translate-from-action",
 class SurveyCreatorModule {
 }
 SurveyCreatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, 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,
+SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, 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,
-        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction], imports: [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,
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent,
+        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, 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,
-        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction] });
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, BooleanSwitchComponent, TranslateFromAction,
+        AddQuestionTypeSelectorComponent] });
 SurveyCreatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, providers: [], imports: [[
             CommonModule, FormsModule, SurveyModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, decorators: [{
             type: NgModule,
             args: [{
-                    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, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, 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,
-                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction],
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent,
+                        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent],
                     imports: [
                         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, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, 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,
-                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, BooleanSwitchComponent, TranslateFromAction,
+                        AddQuestionTypeSelectorComponent
                     ],
                     providers: [],
                 }]
@@ -2007,5 +2209,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, AddQuestionButtonComponent, CellQuestionComponent, CellQuestionDropdownComponent, ColorItemComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, JsonErrorItemComponent, LinkValueQuestionComponent, LogicAddButtonComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, QuestionBannerComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionPgErrorComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionTextWithResetComponent, QuestionWidgetDesignerComponent, SearchComponent, SidebarComponent, SidebarTabComponent, SimulatorComponent, StringEditorComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SwitcherComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TestAgainActionComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxToolComponent, TranslateFromAction, TranslationSkeletonComponent, TranslationTabComponent };
+export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, AddQuestionButtonComponent, AddQuestionTypeSelectorComponent, BooleanSwitchComponent, CellQuestionComponent, CellQuestionDropdownComponent, ColorItemComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, JsonErrorItemComponent, LinkValueQuestionComponent, LogicAddButtonComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionBannerComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionPgErrorComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionTextWithResetComponent, QuestionWidgetDesignerComponent, SearchComponent, SidebarComponent, SidebarDefaultHeaderComponent, SidebarHeaderComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, SimulatorComponent, StringEditorComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SwitcherComponent, TabButtonComponent, TabControlComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TabsComponent, TestAgainActionComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxToolComponent, TranslateFromAction, TranslationSkeletonComponent, TranslationTabComponent };
 //# sourceMappingURL=survey-creator-angular.js.map