survey-creator-angular 1.9.88 → 1.9.90

package/fesm2015/survey-creator-angular.js

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from 'survey-angular-ui';
-import { BaseAngular, AngularComponentFactory, SurveyContentComponent, ButtonGroupQuestionComponent, EmbeddedViewContentComponent, QuestionAngular, SurveyModule } from 'survey-angular-ui';
+import { BaseAngular, AngularComponentFactory, SurveyContentComponent, ButtonGroupQuestionComponent, EmbeddedViewContentComponent, QuestionAngular, ActionBarItemComponent, SurveyModule } from 'survey-angular-ui';
 import { SvgRegistry, ResponsivityManager, VerticalResponsivityManager, DropdownListModel, RendererFactory } from 'survey-core';
 import { ToolboxToolViewModel, PageAdorner, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, StringEditorViewModelBase, editableStringRendererName, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
 
@@ -304,21 +304,13 @@ class PageDesignerComponent extends CreatorModelComponent {
     getPropertiesToTrack() {
         return ["creator", "model"];
     }
-    addNewQuestion(event) {
-        event.stopPropagation();
-        this.adorner.addNewQuestion(this.adorner, event);
-    }
-    selectQuestionType(event) {
-        event.stopPropagation();
-        this.adorner.questionTypeSelectorModel.action();
-    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.adorner.dispose();
     }
 }
 PageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageDesignerComponent, selector: "svc-page", inputs: { model: "model", survey: "survey", creator: "creator", isGhost: "isGhost" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)\" class=\"svc-page__content\" [class]=\"adorner.css\" [key2click]\n  (click)=\"adorner.select(adorner, $event)\" (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n  (mouseleave)=\"adorner.hover($event, $event.target)\" [id]=\"adorner.page.id\" data-bind=\"clickBubble: false\">\n  <div class=\"svc-page__content-actions\">\n    <sv-action-bar [model]=\"adorner.actionContainer\"></sv-action-bar>\n  </div>\n  <page [model]=\"model\" [survey]=\"survey\"></page>\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    <!-- ko with: questionTypeSelectorModel -->\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    <!-- /ko -->\n  </div>\n</div>", components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+PageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageDesignerComponent, selector: "svc-page", inputs: { model: "model", survey: "survey", creator: "creator", isGhost: "isGhost" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)\" class=\"svc-page__content\" [class]=\"adorner.css\" [key2click]\n  (click)=\"adorner.select(adorner, $event)\" (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n  (mouseleave)=\"adorner.hover($event, $event.target)\" [id]=\"adorner.page.id\" data-bind=\"clickBubble: false\">\n  <div class=\"svc-page__content-actions\">\n    <sv-action-bar [model]=\"adorner.actionContainer\"></sv-action-bar>\n  </div>\n  <page [model]=\"model\" [survey]=\"survey\"></page>\n  <sv-action-bar [model]=\"adorner.footerActionsBar\"></sv-action-bar>\n</div>", components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -349,7 +341,7 @@ class DesignerPagesComponent extends BaseAngular {
     }
 }
 DesignerPagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerPagesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DesignerPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <svc-page class=\"svc-page\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\" [attr.data-sv-drop-target-page]=\"model.pagesController.page2Display.name\" [model]=\"model.pagesController.page2Display\" [survey]=\"survey\" [creator]=\"creator\"></svc-page>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }] });
+DesignerPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage' \" [attr.data-sv-drop-target-page]=\"model.pagesController.page2Display.name\">\n    <ng-template [component]=\"{ name: 'svc-page', data: { model: model.pagesController.page2Display, creator, survey }}\"></ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerPagesComponent, decorators: [{
             type: Component,
             args: [{
@@ -453,7 +445,7 @@ class DesignerSurveyComponent extends BaseAngular {
     }
 }
 DesignerSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerSurveyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DesignerSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.designerCss\" [style.maxWidth]=\"survey.renderedWidth\">\n    <div *ngIf=\"creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n      <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n    </div>\n\n    <!-- ko if: survey.isShowProgressBarOnTop -->\n    <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } -->\n    <!-- /ko -->\n    <!-- /ko -->\n    <ng-container *ngIf=\"creator.pageEditMode !== 'bypage'\">\n      <ng-container *ngFor=\"let page of survey.pages\">\n        <svc-page class=\"svc-page\" *ngIf=\"!model.showNewPage || page !== model.newPage\"\n          [attr.data-sv-drop-target-survey-element]=\"page.name\" [attr.data-sv-drop-target-page]=\"page.name\"\n          [model]=\"page\" [survey]=\"survey\" [creator]=\"creator\"></svc-page>\n      </ng-container>\n      <svc-page *ngIf=\"model.showNewPage && model.newPage\" class=\"svc-page\"\n        [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\" [model]=\"model.newPage\" [survey]=\"survey\"\n        [creator]=\"creator\" [isGhost]=\"true\"></svc-page>\n    </ng-container>\n    <ng-container *ngIf=\"model.pagesController.page2Display && creator.pageEditMode === 'bypage'\">\n      <svc-designer-pages [model]=\"model\"></svc-designer-pages>\n    </ng-container>\n\n    <!-- ko if: survey.isShowProgressBarOnBottom -->\n    <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } -->\n    <!-- /ko -->\n    <!-- /ko -->\n  </div>\n\n  <div *ngIf=\"creator.showPageNavigator\" class=\"svc-tab-designer__page-navigator\">\n    <svc-page-navigator [pagesController]=\"model.pagesController\" [pageEditMode]=\"creator.pageEditMode\">\n    </svc-page-navigator>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }, { type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: ["model"] }, { type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: ["pagesController", "pageEditMode"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DesignerSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.designerCss\" [style.maxWidth]=\"survey.renderedWidth\">\n    <div *ngIf=\"creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n      <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n    </div>\n\n    <!-- ko if: survey.isShowProgressBarOnTop -->\n    <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } -->\n    <!-- /ko -->\n    <!-- /ko -->\n    <ng-container *ngIf=\"creator.pageEditMode !== 'bypage'\">\n      <ng-container *ngFor=\"let page of survey.pages\">\n        <ng-container *ngIf=\"!model.showNewPage || page !== model.newPage\">\n          <ng-container *ngTemplateOutlet=\"pageContainer; context: { page, isGhost: false }\"></ng-container>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"model.showNewPage && model.newPage\">\n        <ng-container *ngTemplateOutlet=\"pageContainer; context: { page: model.newPage, isGhost: true }\"></ng-container>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.pagesController.page2Display && creator.pageEditMode === 'bypage'\">\n      <svc-designer-pages [model]=\"model\"></svc-designer-pages>\n    </ng-container>\n\n    <!-- ko if: survey.isShowProgressBarOnBottom -->\n    <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } -->\n    <!-- /ko -->\n    <!-- /ko -->\n  </div>\n\n  <div *ngIf=\"creator.showPageNavigator\" class=\"svc-tab-designer__page-navigator\">\n    <svc-page-navigator [pagesController]=\"model.pagesController\" [pageEditMode]=\"creator.pageEditMode\">\n    </svc-page-navigator>\n  </div>\n</ng-template>\n\n<ng-template let-page=\"page\" let-isGhost=\"isGhost\" #pageContainer>\n  <div class=\"svc-page\"\n    [attr.data-sv-drop-target-survey-element]=\"isGhost ? 'newGhostPage' : page.name\" [attr.data-sv-drop-target-page]=\"page.name\">\n    <ng-template [component]=\"{ name: 'svc-page', data: { model: page, creator, survey, isGhost }}\"></ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: ["model"] }, { type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: ["pagesController", "pageEditMode"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerSurveyComponent, decorators: [{
             type: Component,
             args: [{
@@ -778,7 +770,7 @@ class SimulatorComponent extends BaseAngular {
     }
 }
 SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SimulatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SimulatorComponent, selector: "survey-simulator", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getRootCss()\" (keydown)=\"model.tryToZoom($event, $event)\" (mouseover)=\"activateZoom()\" (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\" [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator-frame\" [style.width]=\"simulatorFrame.landscapedFrameWidth + 'px'\" [style.height]=\"simulatorFrame.landscapedFrameHeight + 'px'\" [class]=\"simulatorFrame.cssClass\"></div>\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\" [style.height]=\"simulatorFrame.deviceHeight + 'px'\" [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\">\n          <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!model.hasFrame\" class=\"svd-simulator-content\">\n      <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SimulatorComponent, selector: "survey-simulator", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\" (keydown)=\"model.tryToZoom($event, $event)\" (mouseover)=\"activateZoom()\" (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\" [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator-frame\" [style.width]=\"simulatorFrame.landscapedFrameWidth + 'px'\" [style.height]=\"simulatorFrame.landscapedFrameHeight + 'px'\" [class]=\"simulatorFrame.cssClass\"></div>\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\" [style.height]=\"simulatorFrame.deviceHeight + 'px'\" [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\">\n          <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!model.hasFrame\" class=\"svd-simulator-content\">\n      <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n    </div>\n  </div>\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: SimulatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -871,6 +863,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tab-test", TestTabComponent);
 
+class ThemeTabComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+ThemeTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ThemeTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ThemeTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ThemeTabComponent, selector: "svc-tab-theme", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-test-tab__content\" [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <div class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"!model.isRunning\">\n        <survey-test-again [model]=\"model.testAgainAction\"></survey-test-again>\n        <survey-results [survey]=\"model.survey\"></survey-results>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.isPageToolbarVisible\" class=\"svc-plugin-tab__content-actions svc-test-tab__content-actions\">\n      <sv-action-bar [model]=\"model.pages\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SimulatorComponent, selector: "survey-simulator", inputs: ["model"] }, { type: TestAgainActionComponent, selector: "survey-test-again", inputs: ["model"] }, { type: SurveyResultsComponent, selector: "survey-results", inputs: ["survey"] }, { 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: ThemeTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-tab-theme",
+                    templateUrl: "./theme.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-theme", ThemeTabComponent);
+
+class AddQuestionButtonComponent extends ActionBarItemComponent {
+    get adorner() {
+        return this.model.data;
+    }
+    addNewQuestion(event) {
+        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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+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",
+                    styles: [":host { display: none; }"]
+                }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("svc-add-new-question-btn", AddQuestionButtonComponent);
+
 class QuestionDesignerComponent extends CreatorModelComponent {
     constructor() {
         super(...arguments);
@@ -1008,7 +1044,7 @@ class ImageItemValueDesignerComponent extends CreatorModelComponent {
     }
 }
 ImageItemValueDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageItemValueDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ImageItemValueDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageItemValueDesignerComponent, selector: "svc-image-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div (pointerdown)=\"adorner.onPointerDown($event)\" [class]=\"adorner.getRootCss()\" [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container>\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__drag-area-indicator\" (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </span>\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <ng-container *ngIf=\"adorner.allowRemove && !adorner.isUploading\">\n            <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__choose-file\" (click)=\"adorner.chooseFile(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__remove\" (click)=\"adorner.remove(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-delete'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew\">\n        <div class=\"svc-image-item-value__item\"\n          data-bind=\"event: { dragover: dragover, drop: drop, dragleave: dragleave }\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\"></div>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__add\" [key2click] (click)=\"adorner.chooseNewFile(adorner)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg *ngIf=\"adorner.allowAdd && !adorner.isUploading\" [iconName]=\"'icon-add-lg'\" [size]=\"24\" sv-ng-svg-icon></svg>\n          </span>\n        </div>\n      </ng-container>\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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+ImageItemValueDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageItemValueDesignerComponent, selector: "svc-image-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div (pointerdown)=\"adorner.onPointerDown($event)\" [class]=\"adorner.getRootCss()\" [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container>\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\" class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span class=\"svc-context-button svc-image-item-value-controls__drag-area-indicator\" (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </span>\n        <div class=\"svc-context-container svc-image-item-value-controls\">\n          <ng-container *ngIf=\"adorner.allowRemove && !adorner.isUploading\">\n            <span class=\"svc-context-button\" (click)=\"adorner.chooseFile(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-context-button svc-context-button--danger\" (click)=\"adorner.remove(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-delete'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew\">\n        <div class=\"svc-image-item-value__item\"\n          data-bind=\"event: { dragover: dragover, drop: drop, dragleave: dragleave }\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\"></div>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <span class=\"svc-context-button svc-image-item-value-controls__add\" [key2click] (click)=\"adorner.chooseNewFile(adorner)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg *ngIf=\"adorner.allowAdd && !adorner.isUploading\" [iconName]=\"'icon-add-lg'\" [size]=\"24\" sv-ng-svg-icon></svg>\n          </span>\n        </div>\n      </ng-container>\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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageItemValueDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1121,7 +1157,7 @@ AngularComponentFactory.Instance.registerComponent("svc-image-question", Questio
 class QuestionImageAdornerDesignerComponent extends EmbeddedViewContentComponent {
 }
 QuestionImageAdornerDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageAdornerDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionImageAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageAdornerDesignerComponent, selector: "svc-image-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-image-question-controls\">\n    <ng-container *ngIf=\"adorner.allowEdit && !adorner.isUploading && !adorner.isEmptyElement\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n      <span class=\"svc-image-question-controls__button\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n        <svg  [iconName]=\"'icon-file'\" [size]=\"24\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n      </span>\n    </ng-container>\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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+QuestionImageAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageAdornerDesignerComponent, selector: "svc-image-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-image-question-controls\">\n    <ng-container *ngIf=\"adorner.allowEdit && !adorner.isUploading && !adorner.isEmptyElement\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\"\n        class=\"svc-choose-file-input\" />\n      <span class=\"svc-context-button\" [key2click] [attr.title]=\"undefined\"\n        [attr.aria-label]=\"undefined\">\n        <svg [iconName]=\"'icon-file'\" [size]=\"24\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n      </span>\n    </ng-container>\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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageAdornerDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1276,7 +1312,7 @@ class StringEditorComponent extends CreatorModelComponent {
     }
 }
 StringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StringEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringEditorComponent, selector: "svc-string-edtior", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <span [class]=\"className\">\n    <span class=\"svc-string-editor__content\">\n        <div class=\"svc-string-editor__border\">\n          <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-string-editor__button svc-string-editor__button--edit\" [size]=\"24\" sv-ng-svg-icon \n            (click)=\"edit($event)\" [iconName]=\"'icon-edit'\" [size]=\"16\"></svg>\n        </div>\n        <span class=\"svc-string-editor__input\">\n          <span role=\"textbox\" *ngIf=\"!locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n              (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"  (input)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [textContent]=\"editValue\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" #container></span>\n          <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor sv-string-editor--html\" spellcheck=\"false\"\n          (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n          (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"editValue\" #container></span>\n          <sv-ng-character-counter *ngIf=\"showCharacterCounter\" [counter]=\"characterCounter\" [remainingCharacterCounter]=\"getCharacterCounterClass\"></sv-ng-character-counter>\n        </span>\n    </span>\n    <span *ngIf=\"errorText\" class=\"svc-string-editor__error\">{{errorText}}</span>\n  </span>\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.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringEditorComponent, selector: "svc-string-edtior", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <span [class]=\"className\">\n    <span class=\"svc-string-editor__content\">\n        <div class=\"svc-string-editor__border\">\n          <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-string-editor__button svc-string-editor__button--edit\" [size]=\"24\" sv-ng-svg-icon \n            (click)=\"edit($event)\" [iconName]=\"'icon-edit'\" [size]=\"16\"></svg>\n        </div>\n        <span class=\"svc-string-editor__input\">\n          <span role=\"textbox\" *ngIf=\"!locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n              (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"  (input)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [textContent]=\"editValue\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" #container></span>\n          <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor sv-string-editor--html\" spellcheck=\"false\"\n          (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n          (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"editValue | safeHtml\" #container></span>\n          <sv-ng-character-counter *ngIf=\"showCharacterCounter\" [counter]=\"characterCounter\" [remainingCharacterCounter]=\"getCharacterCounterClass\"></sv-ng-character-counter>\n        </span>\n    </span>\n    <span *ngIf=\"errorText\" class=\"svc-string-editor__error\">{{errorText}}</span>\n  </span>\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.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeHtml": i1.SafeHtmlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StringEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -1349,8 +1385,9 @@ class MatrixCellComponent extends CreatorModelComponent {
         return this.componentData.row;
     }
     createModel() {
+        var _a;
         if (this.componentData) {
-            this.adorner = new MatrixCellWrapperViewModel(this.creator, this.element, this.question, this.row, this.column);
+            this.adorner = new MatrixCellWrapperViewModel(this.creator, this.element, this.question, this.row, this.column || ((_a = this.element.cell) === null || _a === void 0 ? void 0 : _a.column));
         }
     }
     getPropertiesToTrack() {
@@ -1361,7 +1398,7 @@ class MatrixCellComponent extends CreatorModelComponent {
     }
 }
 MatrixCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "svc-matrix-cell", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div tabindex=\"-1\" class=\"svc-matrix-cell\" (click)=\"selectContext($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n    (mouseleave)=\"adorner.hover($event, $event.currentTarget)\">\n    <div class=\"svc-matrix-cell--selected\" [class.svc-visible]=\"adorner.isSelected\"></div>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n    <div *ngIf=\"isSupportCellEditor\" class=\"svc-matrix-cell__question-controls\">\n      <span class=\"svc-matrix-cell__question-controls-button\" (click)=\"adorner.editQuestion(adorner)\" [key2click]>\n        <svg [iconName]=\"'icon-edit'\" [size]=\"24\" [size]=\"24\" sv-ng-svg-icon></svg>\n      </span>\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"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+MatrixCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "svc-matrix-cell", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div tabindex=\"-1\" class=\"svc-matrix-cell\" (click)=\"selectContext($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n    (mouseleave)=\"adorner.hover($event, $event.currentTarget)\">\n    <div class=\"svc-matrix-cell--selected\" [class.svc-visible]=\"adorner.isSelected\"></div>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n    <div *ngIf=\"isSupportCellEditor\" class=\"svc-matrix-cell__question-controls\">\n      <span class=\"svc-matrix-cell__question-controls-button\" (click)=\"adorner.editQuestion(adorner, $event)\" [key2click]>\n        <svg [iconName]=\"'icon-edit'\" [size]=\"24\" [size]=\"24\" sv-ng-svg-icon></svg>\n      </span>\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"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -1432,7 +1469,7 @@ class CellQuestionComponent extends BaseAngular {
     }
 }
 CellQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CellQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CellQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CellQuestionComponent, selector: "svc-cell-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__adorner\">\n    <div class=\"svc-question__content svc-question__content--selected-no-border\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+CellQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CellQuestionComponent, selector: "svc-cell-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__adorner\">\n    <div class=\"svc-question__content svc-question__content--in-popup\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CellQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -1464,7 +1501,7 @@ class CellQuestionDropdownComponent extends CellQuestionComponent {
     }
 }
 CellQuestionDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CellQuestionDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CellQuestionDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CellQuestionDropdownComponent, selector: "svc-cell-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__adorner\">\n    <div class=\"svc-question__content svc-question__content--selected-no-border\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div class=\"svc-question__dropdown-choices\">\n          <div *ngFor=\"let item of model.visibleChoices\"class=\"svc-question__dropdown-choice\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </div>\n    </div>\n\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+CellQuestionDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CellQuestionDropdownComponent, selector: "svc-cell-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__adorner\">\n    <div class=\"svc-question__content svc-question__content--in-popup\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div class=\"svc-question__dropdown-choices\">\n          <div *ngFor=\"let item of model.visibleChoices\"class=\"svc-question__dropdown-choice\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </div>\n    </div>\n\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CellQuestionDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -1613,7 +1650,7 @@ class CreatorLogoImageComponent extends CreatorModelComponent {
     }
 }
 CreatorLogoImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorLogoImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CreatorLogoImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorLogoImageComponent, selector: "svc-logo-image", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-logo-image\" #container>\n    <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n    <ng-container *ngIf=\"!survey.locLogo.renderedHtml\">\n      <ng-container *ngIf=\"model.allowEdit && !model.isUploading\">\n        <div class=\"svc-logo-image-placeholder\" (click)=\"model.chooseFile(model)\" [key2click]>\n          <svg>\n            <use xlink:href=\"#icon-logo\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml\">\n      <div [class]=\"model.containerCss\" (click)=\"model.chooseFile(model)\" [key2click]>\n        <sv-logo-image [data]=\"survey\"></sv-logo-image>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+CreatorLogoImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorLogoImageComponent, selector: "svc-logo-image", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-logo-image\" #container>\n    <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"model.acceptedTypes\" class=\"svc-choose-file-input\" />\n    <ng-container *ngIf=\"!survey.locLogo.renderedHtml\">\n      <ng-container *ngIf=\"model.allowEdit && !model.isUploading\">\n        <div class=\"svc-logo-image-placeholder\" (click)=\"model.chooseFile(model)\" [key2click]>\n          <svg>\n            <use xlink:href=\"#icon-logo\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml\">\n      <div [class]=\"model.containerCss\">\n        <div class=\"svc-context-container svc-logo-image-controls\">\n            <span class=\"svc-context-button\" (click)=\"model.chooseFile(model)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-context-button svc-context-button--danger\" (click)=\"model.remove(model)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-clear'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n        </div>\n        <sv-logo-image [data]=\"survey\"></sv-logo-image>\n      </div>\n    </ng-container>\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.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorLogoImageComponent, decorators: [{
             type: Component,
             args: [{
@@ -1657,7 +1694,7 @@ AngularComponentFactory.Instance.registerComponent("color-question", QuestionCol
 class QuestionFileEditorComponent extends QuestionAngular {
 }
 QuestionFileEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionFileEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionFileEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionFileEditorComponent, selector: "svc-file-editor", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (dragenter)=\"model.onDragEnter($event)\" (dragover)=\"model.onDragOver($event)\"\n  (drop)=\"model.onDrop($event)\" (dragleave)=\"model.onDragLeave($event)\">\n  <input type=\"text\" [class]=\"model.cssClasses.control\" [value]=\"model.value ||''\"\n    (change)=\"model.onInputChange($event)\" (blur)=\"model.onInputBlur($event)\" />\n  <div [class]=\"model.cssClasses.buttonsContainer\">\n    <button type=\"button\" [class]=\"model.cssClasses.clearButton\" [disabled]=\"model.getIsClearButtonDisabled()\"\n      (click)=\"model.doClean($event)\">\n      <svg [iconName]=\"model.cssClasses.clearButtonIcon\" size=\"'auto'\" [title]=\"model.clearButtonCaption\"\n        sv-ng-svg-icon></svg>\n    </button>\n    <label tabindex=\"0\" role=\"button\" [class]=\"model.cssClasses.chooseButton\" [attr.for]=\"model.inputId\"\n      [attr.aria-label]=\"model.chooseButtonCaption\">\n      <svg [iconName]=\"model.cssClasses.chooseButtonIcon\" size=\"'auto'\" [title]=\"model.chooseButtonCaption\"\n        sv-ng-svg-icon></svg>\n      <input type=\"file\" tabindex=\"-1\" [class]=\"model.cssClasses.fileInput\" [attr.id]=\"model.inputId\"\n        [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"false\"\n        [title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" (change)=\"model.doChange($event)\">\n    </label>\n  </div>\n</div>", components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+QuestionFileEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionFileEditorComponent, selector: "svc-file-editor", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (dragenter)=\"model.onDragEnter($event)\" (dragover)=\"model.onDragOver($event)\"\n  (drop)=\"model.onDrop($event)\" (dragleave)=\"model.onDragLeave($event)\">\n  <input type=\"text\" [class]=\"model.cssClasses.control\" [value]=\"model.value ||''\"\n    (change)=\"model.onInputChange($event)\" (blur)=\"model.onInputBlur($event)\" />\n  <div [class]=\"model.cssClasses.buttonsContainer\">\n    <button type=\"button\" [class]=\"model.cssClasses.clearButton\" [disabled]=\"model.getIsClearButtonDisabled()\"\n      (click)=\"model.doClean($event)\">\n      <svg [iconName]=\"model.cssClasses.clearButtonIcon\" size=\"'auto'\" [title]=\"model.clearButtonCaption\"\n        sv-ng-svg-icon></svg>\n    </button>\n    <label tabindex=\"0\" role=\"button\" [class]=\"model.cssClasses.chooseButton\" [attr.for]=\"model.inputId\"\n      [attr.aria-label]=\"model.chooseButtonCaption\">\n      <svg [iconName]=\"model.cssClasses.chooseButtonIcon\" size=\"'auto'\" [title]=\"model.chooseButtonCaption\"\n        sv-ng-svg-icon></svg>\n      <input type=\"file\" tabindex=\"-1\" [class]=\"model.cssClasses.fileInput\" [attr.id]=\"model.inputId\"\n        [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"false\"\n        [title]=\"model.inputTitle\" [accept]=\"model.acceptedTypes\" (change)=\"model.doChange($event)\">\n    </label>\n  </div>\n</div>", 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: QuestionFileEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -1670,35 +1707,35 @@ AngularComponentFactory.Instance.registerComponent("fileedit-question", Question
 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, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
-        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
-        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent] });
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent] });
 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, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+                    declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
-                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent],
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent],
                     imports: [
                         CommonModule, FormsModule, SurveyModule
                     ],
                     exports: [
-                        CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+                        CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
-                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent
                     ],
                     providers: [],
                 }]
@@ -1708,5 +1745,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, CellQuestionComponent, CellQuestionDropdownComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, LinkValueQuestionComponent, LogicAddButtonComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionWidgetDesignerComponent, SidebarComponent, SidebarTabComponent, SimulatorComponent, StringEditorComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SvgBundleComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TestAgainActionComponent, TestTabComponent, TextareaJsonEditorComponent, ToolboxCategoryComponent, ToolboxComponent, ToolboxItemComponent, ToolboxToolComponent, TranslationSkeletonComponent, TranslationTabComponent };
+export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, AddQuestionButtonComponent, CellQuestionComponent, CellQuestionDropdownComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, LinkValueQuestionComponent, LogicAddButtonComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionWidgetDesignerComponent, SidebarComponent, SidebarTabComponent, SimulatorComponent, StringEditorComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SvgBundleComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TestAgainActionComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxComponent, ToolboxItemComponent, ToolboxToolComponent, TranslationSkeletonComponent, TranslationTabComponent };
 //# sourceMappingURL=survey-creator-angular.js.map