survey-creator-angular 1.9.88 → 1.9.90

package/angular-ui.d.ts

@@ -24,7 +24,9 @@ export * from "./tabs/preview/test-again.component";
 export * from "./tabs/preview/survey-results.component";
 export * from "./tabs/preview/survey-results-row.component";
 export * from "./tabs/preview/test.component";
+export * from "./tabs/theme/theme.component";
 export * from "./page.component";
+export * from "./page-add-question.component";
 export * from "./question.component";
 export * from "./adorners/item-value.component";
 export * from "./adorners/image-item-value.component";

package/angular-ui.module.d.ts

@@ -26,37 +26,39 @@ import * as i24 from "./tabs/preview/test.component";
 import * as i25 from "./tabs/preview/test-again.component";
 import * as i26 from "./tabs/preview/survey-results.component";
 import * as i27 from "./tabs/preview/survey-results-row.component";
-import * as i28 from "./toolbox/adaptive-toolbox.component";
-import * as i29 from "./toolbox/toolbox-tool.component";
-import * as i30 from "./toolbox/toolbox-item.component";
-import * as i31 from "./toolbox/toolbox-category.component";
-import * as i32 from "./string-editor.component";
-import * as i33 from "./page-navigator/page-navigator.component";
-import * as i34 from "./page-navigator/page-navigator-item.component";
-import * as i35 from "./adorners/question-dropdown.component";
-import * as i36 from "./adorners/question-image.component";
-import * as i37 from "./adorners/item-value.component";
-import * as i38 from "./adorners/image-item-value.component";
-import * as i39 from "./questions/logic-operator.component";
-import * as i40 from "./adorners/matrix-cell.component";
-import * as i41 from "./question-editor.component";
-import * as i42 from "./adorners/cell-question-dropdown.component";
-import * as i43 from "./row.component";
-import * as i44 from "./tabs/designer/designer-pages.component";
-import * as i45 from "./tabs/designer/designer-survey.component";
-import * as i46 from "./adorners/cell-question.component";
-import * as i47 from "./question-widget.component";
-import * as i48 from "./toolbox/toolbox.component";
-import * as i49 from "./header/logo-image.component";
-import * as i50 from "./adorners/question-rating.component";
-import * as i51 from "./custom-questions/spin-editor.component";
-import * as i52 from "./custom-questions/color.component";
-import * as i53 from "./custom-questions/file.component";
-import * as i54 from "@angular/common";
-import * as i55 from "@angular/forms";
-import * as i56 from "survey-angular-ui";
+import * as i28 from "./tabs/theme/theme.component";
+import * as i29 from "./toolbox/adaptive-toolbox.component";
+import * as i30 from "./toolbox/toolbox-tool.component";
+import * as i31 from "./toolbox/toolbox-item.component";
+import * as i32 from "./toolbox/toolbox-category.component";
+import * as i33 from "./string-editor.component";
+import * as i34 from "./page-navigator/page-navigator.component";
+import * as i35 from "./page-navigator/page-navigator-item.component";
+import * as i36 from "./adorners/question-dropdown.component";
+import * as i37 from "./adorners/question-image.component";
+import * as i38 from "./adorners/item-value.component";
+import * as i39 from "./adorners/image-item-value.component";
+import * as i40 from "./questions/logic-operator.component";
+import * as i41 from "./adorners/matrix-cell.component";
+import * as i42 from "./question-editor.component";
+import * as i43 from "./adorners/cell-question-dropdown.component";
+import * as i44 from "./row.component";
+import * as i45 from "./tabs/designer/designer-pages.component";
+import * as i46 from "./tabs/designer/designer-survey.component";
+import * as i47 from "./adorners/cell-question.component";
+import * as i48 from "./question-widget.component";
+import * as i49 from "./toolbox/toolbox.component";
+import * as i50 from "./header/logo-image.component";
+import * as i51 from "./adorners/question-rating.component";
+import * as i52 from "./custom-questions/spin-editor.component";
+import * as i53 from "./custom-questions/color.component";
+import * as i54 from "./custom-questions/file.component";
+import * as i55 from "./page-add-question.component";
+import * as i56 from "@angular/common";
+import * as i57 from "@angular/forms";
+import * as i58 from "survey-angular-ui";
 export declare class SurveyCreatorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SurveyCreatorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SurveyCreatorModule, [typeof i1.CreatorComponent, typeof i2.DesignerTabComponent, typeof i3.PageDesignerComponent, typeof i4.QuestionDesignerComponent, typeof i5.PanelDesignerComponent, typeof i6.SvgBundleComponent, typeof i7.TabbledMenuComponent, typeof i8.TabbedMenuItemComponent, typeof i9.TabbedMenuItemWrapperComponent, typeof i10.SidebarComponent, typeof i11.SidebarTabComponent, typeof i12.ObjectSelectorComponent, typeof i13.PropertyGridComponent, typeof i14.TextareaJsonEditorComponent, typeof i15.AceJsonEditorComponent, typeof i16.LogicTabComponent, typeof i17.LogicAddButtonComponent, typeof i18.ActionButtonComponent, typeof i19.LinkValueQuestionComponent, typeof i20.EmbeddedSurveyQuestionComponent, typeof i21.TranslationTabComponent, typeof i22.TranslationSkeletonComponent, typeof i23.SimulatorComponent, typeof i24.TestTabComponent, typeof i25.TestAgainActionComponent, typeof i26.SurveyResultsComponent, typeof i27.SurveyResultsTableRowComponent, typeof i28.AdaptiveToolboxComponent, typeof i29.ToolboxToolComponent, typeof i30.ToolboxItemComponent, typeof i31.ToolboxCategoryComponent, typeof i32.StringEditorComponent, typeof i33.PageNavigatorComponent, typeof i34.PageNavigatorItemComponent, typeof i35.QuestionDropdownDesignerComponent, typeof i35.QuestionDropdownAdornerDesignerComponent, typeof i36.QuestionImageDesignerComponent, typeof i36.QuestionImageAdornerDesignerComponent, typeof i37.ItemValueDesignerComponent, typeof i38.ImageItemValueDesignerComponent, typeof i39.LogicOperatorComponent, typeof i40.MatrixCellComponent, typeof i41.QuestionEditorComponent, typeof i42.CellQuestionDropdownComponent, typeof i43.CreatorRowComponent, typeof i44.DesignerPagesComponent, typeof i45.DesignerSurveyComponent, typeof i46.CellQuestionComponent, typeof i47.QuestionWidgetDesignerComponent, typeof i48.ToolboxComponent, typeof i49.CreatorLogoImageComponent, typeof i50.QuestionRatingAdornerDesignerComponent, typeof i50.QuestionRatingDesignerComponent, typeof i51.QuestionSpinEditorComponent, typeof i52.QuestionColorComponent, typeof i53.QuestionFileEditorComponent], [typeof i54.CommonModule, typeof i55.FormsModule, typeof i56.SurveyModule], [typeof i1.CreatorComponent, typeof i2.DesignerTabComponent, typeof i3.PageDesignerComponent, typeof i4.QuestionDesignerComponent, typeof i5.PanelDesignerComponent, typeof i6.SvgBundleComponent, typeof i7.TabbledMenuComponent, typeof i8.TabbedMenuItemComponent, typeof i9.TabbedMenuItemWrapperComponent, typeof i10.SidebarComponent, typeof i11.SidebarTabComponent, typeof i12.ObjectSelectorComponent, typeof i13.PropertyGridComponent, typeof i14.TextareaJsonEditorComponent, typeof i15.AceJsonEditorComponent, typeof i16.LogicTabComponent, typeof i17.LogicAddButtonComponent, typeof i18.ActionButtonComponent, typeof i19.LinkValueQuestionComponent, typeof i20.EmbeddedSurveyQuestionComponent, typeof i21.TranslationTabComponent, typeof i22.TranslationSkeletonComponent, typeof i23.SimulatorComponent, typeof i24.TestTabComponent, typeof i25.TestAgainActionComponent, typeof i26.SurveyResultsComponent, typeof i27.SurveyResultsTableRowComponent, typeof i28.AdaptiveToolboxComponent, typeof i29.ToolboxToolComponent, typeof i30.ToolboxItemComponent, typeof i31.ToolboxCategoryComponent, typeof i32.StringEditorComponent, typeof i33.PageNavigatorComponent, typeof i34.PageNavigatorItemComponent, typeof i35.QuestionDropdownDesignerComponent, typeof i35.QuestionDropdownAdornerDesignerComponent, typeof i36.QuestionImageDesignerComponent, typeof i36.QuestionImageAdornerDesignerComponent, typeof i37.ItemValueDesignerComponent, typeof i38.ImageItemValueDesignerComponent, typeof i39.LogicOperatorComponent, typeof i40.MatrixCellComponent, typeof i41.QuestionEditorComponent, typeof i42.CellQuestionDropdownComponent, typeof i43.CreatorRowComponent, typeof i44.DesignerPagesComponent, typeof i45.DesignerSurveyComponent, typeof i46.CellQuestionComponent, typeof i47.QuestionWidgetDesignerComponent, typeof i48.ToolboxComponent, typeof i49.CreatorLogoImageComponent, typeof i50.QuestionRatingAdornerDesignerComponent, typeof i50.QuestionRatingDesignerComponent, typeof i51.QuestionSpinEditorComponent, typeof i52.QuestionColorComponent, typeof i53.QuestionFileEditorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SurveyCreatorModule, [typeof i1.CreatorComponent, typeof i2.DesignerTabComponent, typeof i3.PageDesignerComponent, typeof i4.QuestionDesignerComponent, typeof i5.PanelDesignerComponent, typeof i6.SvgBundleComponent, typeof i7.TabbledMenuComponent, typeof i8.TabbedMenuItemComponent, typeof i9.TabbedMenuItemWrapperComponent, typeof i10.SidebarComponent, typeof i11.SidebarTabComponent, typeof i12.ObjectSelectorComponent, typeof i13.PropertyGridComponent, typeof i14.TextareaJsonEditorComponent, typeof i15.AceJsonEditorComponent, typeof i16.LogicTabComponent, typeof i17.LogicAddButtonComponent, typeof i18.ActionButtonComponent, typeof i19.LinkValueQuestionComponent, typeof i20.EmbeddedSurveyQuestionComponent, typeof i21.TranslationTabComponent, typeof i22.TranslationSkeletonComponent, typeof i23.SimulatorComponent, typeof i24.TestTabComponent, typeof i25.TestAgainActionComponent, typeof i26.SurveyResultsComponent, typeof i27.SurveyResultsTableRowComponent, typeof i28.ThemeTabComponent, typeof i29.AdaptiveToolboxComponent, typeof i30.ToolboxToolComponent, typeof i31.ToolboxItemComponent, typeof i32.ToolboxCategoryComponent, typeof i33.StringEditorComponent, typeof i34.PageNavigatorComponent, typeof i35.PageNavigatorItemComponent, typeof i36.QuestionDropdownDesignerComponent, typeof i36.QuestionDropdownAdornerDesignerComponent, typeof i37.QuestionImageDesignerComponent, typeof i37.QuestionImageAdornerDesignerComponent, typeof i38.ItemValueDesignerComponent, typeof i39.ImageItemValueDesignerComponent, typeof i40.LogicOperatorComponent, typeof i41.MatrixCellComponent, typeof i42.QuestionEditorComponent, typeof i43.CellQuestionDropdownComponent, typeof i44.CreatorRowComponent, typeof i45.DesignerPagesComponent, typeof i46.DesignerSurveyComponent, typeof i47.CellQuestionComponent, typeof i48.QuestionWidgetDesignerComponent, typeof i49.ToolboxComponent, typeof i50.CreatorLogoImageComponent, typeof i51.QuestionRatingAdornerDesignerComponent, typeof i51.QuestionRatingDesignerComponent, typeof i52.QuestionSpinEditorComponent, typeof i53.QuestionColorComponent, typeof i54.QuestionFileEditorComponent, typeof i55.AddQuestionButtonComponent], [typeof i56.CommonModule, typeof i57.FormsModule, typeof i58.SurveyModule], [typeof i1.CreatorComponent, typeof i2.DesignerTabComponent, typeof i3.PageDesignerComponent, typeof i4.QuestionDesignerComponent, typeof i5.PanelDesignerComponent, typeof i6.SvgBundleComponent, typeof i7.TabbledMenuComponent, typeof i8.TabbedMenuItemComponent, typeof i9.TabbedMenuItemWrapperComponent, typeof i10.SidebarComponent, typeof i11.SidebarTabComponent, typeof i12.ObjectSelectorComponent, typeof i13.PropertyGridComponent, typeof i14.TextareaJsonEditorComponent, typeof i15.AceJsonEditorComponent, typeof i16.LogicTabComponent, typeof i17.LogicAddButtonComponent, typeof i18.ActionButtonComponent, typeof i19.LinkValueQuestionComponent, typeof i20.EmbeddedSurveyQuestionComponent, typeof i21.TranslationTabComponent, typeof i22.TranslationSkeletonComponent, typeof i23.SimulatorComponent, typeof i24.TestTabComponent, typeof i25.TestAgainActionComponent, typeof i26.SurveyResultsComponent, typeof i27.SurveyResultsTableRowComponent, typeof i28.ThemeTabComponent, typeof i29.AdaptiveToolboxComponent, typeof i30.ToolboxToolComponent, typeof i31.ToolboxItemComponent, typeof i32.ToolboxCategoryComponent, typeof i33.StringEditorComponent, typeof i34.PageNavigatorComponent, typeof i35.PageNavigatorItemComponent, typeof i36.QuestionDropdownDesignerComponent, typeof i36.QuestionDropdownAdornerDesignerComponent, typeof i37.QuestionImageDesignerComponent, typeof i37.QuestionImageAdornerDesignerComponent, typeof i38.ItemValueDesignerComponent, typeof i39.ImageItemValueDesignerComponent, typeof i40.LogicOperatorComponent, typeof i41.MatrixCellComponent, typeof i42.QuestionEditorComponent, typeof i43.CellQuestionDropdownComponent, typeof i44.CreatorRowComponent, typeof i45.DesignerPagesComponent, typeof i46.DesignerSurveyComponent, typeof i47.CellQuestionComponent, typeof i48.QuestionWidgetDesignerComponent, typeof i49.ToolboxComponent, typeof i50.CreatorLogoImageComponent, typeof i51.QuestionRatingAdornerDesignerComponent, typeof i51.QuestionRatingDesignerComponent, typeof i52.QuestionSpinEditorComponent, typeof i53.QuestionColorComponent, typeof i54.QuestionFileEditorComponent, typeof i55.AddQuestionButtonComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SurveyCreatorModule>;
 }

package/bundles/survey-creator-angular.umd.js

@@ -120,11 +120,11 @@
                 if (_ = accept(result.set))
                     descriptor.set = _;
                 if (_ = accept(result.init))
-                    initializers.push(_);
+                    initializers.unshift(_);
             }
             else if (_ = accept(result)) {
                 if (kind === "field")
-                    initializers.push(_);
+                    initializers.unshift(_);
                 else
                     descriptor[key] = _;
             }
@@ -411,6 +411,33 @@
             throw new TypeError("Cannot use 'in' operator on non-object");
         return typeof state === "function" ? receiver === state : state.has(receiver);
     }
+    var tslib_es6 = {
+        __extends: __extends,
+        __assign: __assign,
+        __rest: __rest,
+        __decorate: __decorate,
+        __param: __param,
+        __metadata: __metadata,
+        __awaiter: __awaiter,
+        __generator: __generator,
+        __createBinding: __createBinding,
+        __exportStar: __exportStar,
+        __values: __values,
+        __read: __read,
+        __spread: __spread,
+        __spreadArrays: __spreadArrays,
+        __spreadArray: __spreadArray,
+        __await: __await,
+        __asyncGenerator: __asyncGenerator,
+        __asyncDelegator: __asyncDelegator,
+        __asyncValues: __asyncValues,
+        __makeTemplateObject: __makeTemplateObject,
+        __importStar: __importStar,
+        __importDefault: __importDefault,
+        __classPrivateFieldGet: __classPrivateFieldGet,
+        __classPrivateFieldSet: __classPrivateFieldSet,
+        __classPrivateFieldIn: __classPrivateFieldIn,
+    };
 
     var SvgBundleComponent = /** @class */ (function () {
         function SvgBundleComponent() {
@@ -765,14 +792,6 @@
         PageDesignerComponent.prototype.getPropertiesToTrack = function () {
             return ["creator", "model"];
         };
-        PageDesignerComponent.prototype.addNewQuestion = function (event) {
-            event.stopPropagation();
-            this.adorner.addNewQuestion(this.adorner, event);
-        };
-        PageDesignerComponent.prototype.selectQuestionType = function (event) {
-            event.stopPropagation();
-            this.adorner.questionTypeSelectorModel.action();
-        };
         PageDesignerComponent.prototype.ngOnDestroy = function () {
             _super.prototype.ngOnDestroy.call(this);
             this.adorner.dispose();
@@ -780,7 +799,7 @@
         return PageDesignerComponent;
     }(CreatorModelComponent));
     PageDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    PageDesignerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+    PageDesignerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -824,7 +843,7 @@
         return DesignerPagesComponent;
     }(i1.BaseAngular));
     DesignerPagesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DesignerPagesComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    DesignerPagesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DesignerPagesComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -955,7 +974,7 @@
         return DesignerSurveyComponent;
     }(i1.BaseAngular));
     DesignerSurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DesignerSurveyComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    DesignerSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    DesignerSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DesignerSurveyComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1369,7 +1388,7 @@
         return SimulatorComponent;
     }(i1.BaseAngular));
     SimulatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SimulatorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    SimulatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SimulatorComponent, selector: "survey-simulator", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    SimulatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SimulatorComponent, selector: "survey-simulator", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SimulatorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1482,6 +1501,64 @@
                 }] } });
     i1.AngularComponentFactory.Instance.registerComponent("svc-tab-test", TestTabComponent);
 
+    var ThemeTabComponent = /** @class */ (function (_super) {
+        __extends(ThemeTabComponent, _super);
+        function ThemeTabComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ThemeTabComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        return ThemeTabComponent;
+    }(i1.BaseAngular));
+    ThemeTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ThemeTabComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ThemeTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ThemeTabComponent, selector: "svc-tab-theme", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ThemeTabComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "svc-tab-theme",
+                        templateUrl: "./theme.component.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    i1.AngularComponentFactory.Instance.registerComponent("svc-tab-theme", ThemeTabComponent);
+
+    var AddQuestionButtonComponent = /** @class */ (function (_super) {
+        __extends(AddQuestionButtonComponent, _super);
+        function AddQuestionButtonComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(AddQuestionButtonComponent.prototype, "adorner", {
+            get: function () {
+                return this.model.data;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AddQuestionButtonComponent.prototype.addNewQuestion = function (event) {
+            event.stopPropagation();
+            this.adorner.addNewQuestion(this.adorner, event);
+        };
+        AddQuestionButtonComponent.prototype.selectQuestionType = function (event) {
+            event.stopPropagation();
+            this.adorner.questionTypeSelectorModel.action();
+        };
+        return AddQuestionButtonComponent;
+    }(i1.ActionBarItemComponent));
+    AddQuestionButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddQuestionButtonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    AddQuestionButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", usesInheritance: true, ngImport: i0__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddQuestionButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "svc-add-new-question-btn",
+                        templateUrl: "./page-add-question.component.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }] });
+    i1.AngularComponentFactory.Instance.registerComponent("svc-add-new-question-btn", AddQuestionButtonComponent);
+
     var QuestionDesignerComponent = /** @class */ (function (_super) {
         __extends(QuestionDesignerComponent, _super);
         function QuestionDesignerComponent() {
@@ -1684,7 +1761,7 @@
         return ImageItemValueDesignerComponent;
     }(CreatorModelComponent));
     ImageItemValueDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemValueDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    ImageItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+    ImageItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemValueDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1825,7 +1902,7 @@
         return QuestionImageAdornerDesignerComponent;
     }(i1.EmbeddedViewContentComponent));
     QuestionImageAdornerDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageAdornerDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    QuestionImageAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+    QuestionImageAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageAdornerDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2040,7 +2117,7 @@
         return StringEditorComponent;
     }(CreatorModelComponent));
     StringEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringEditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    StringEditorComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    StringEditorComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeHtml": i1__namespace.SafeHtmlPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2150,8 +2227,9 @@
             configurable: true
         });
         MatrixCellComponent.prototype.createModel = function () {
+            var _a;
             if (this.componentData) {
-                this.adorner = new surveyCreatorCore.MatrixCellWrapperViewModel(this.creator, this.element, this.question, this.row, this.column);
+                this.adorner = new surveyCreatorCore.MatrixCellWrapperViewModel(this.creator, this.element, this.question, this.row, this.column || ((_a = this.element.cell) === null || _a === void 0 ? void 0 : _a.column));
             }
         };
         MatrixCellComponent.prototype.getPropertiesToTrack = function () {
@@ -2163,7 +2241,7 @@
         return MatrixCellComponent;
     }(CreatorModelComponent));
     MatrixCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    MatrixCellComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+    MatrixCellComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2264,7 +2342,7 @@
         return CellQuestionComponent;
     }(i1.BaseAngular));
     CellQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CellQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    CellQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CellQuestionComponent, selector: "svc-cell-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    CellQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CellQuestionComponent, selector: "svc-cell-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CellQuestionComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2301,7 +2379,7 @@
         return CellQuestionDropdownComponent;
     }(CellQuestionComponent));
     CellQuestionDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CellQuestionDropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    CellQuestionDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CellQuestionDropdownComponent, selector: "svc-cell-dropdown-question", usesInheritance: true, ngImport: i0__namespace, 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__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    CellQuestionDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CellQuestionDropdownComponent, selector: "svc-cell-dropdown-question", usesInheritance: true, ngImport: i0__namespace, 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__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CellQuestionDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2498,7 +2576,7 @@
         return CreatorLogoImageComponent;
     }(CreatorModelComponent));
     CreatorLogoImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreatorLogoImageComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    CreatorLogoImageComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+    CreatorLogoImageComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreatorLogoImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2557,7 +2635,7 @@
         return QuestionFileEditorComponent;
     }(i1.QuestionAngular));
     QuestionFileEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionFileEditorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    QuestionFileEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionFileEditorComponent, selector: "svc-file-editor", usesInheritance: true, ngImport: i0__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+    QuestionFileEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionFileEditorComponent, selector: "svc-file-editor", usesInheritance: true, ngImport: i0__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionFileEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2573,35 +2651,35 @@
         return SurveyCreatorModule;
     }());
     SurveyCreatorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SurveyCreatorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, 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: [i2.CommonModule, i1$1.FormsModule, i1.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: [i2.CommonModule, i1$1.FormsModule, i1.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__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, providers: [], imports: [[
                 i2.CommonModule, i1$1.FormsModule, i1.SurveyModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, decorators: [{
                 type: i0.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: [
                             i2.CommonModule, i1$1.FormsModule, i1.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: [],
                     }]
@@ -2614,6 +2692,7 @@
     exports.AceJsonEditorComponent = AceJsonEditorComponent;
     exports.ActionButtonComponent = ActionButtonComponent;
     exports.AdaptiveToolboxComponent = AdaptiveToolboxComponent;
+    exports.AddQuestionButtonComponent = AddQuestionButtonComponent;
     exports.CellQuestionComponent = CellQuestionComponent;
     exports.CellQuestionDropdownComponent = CellQuestionDropdownComponent;
     exports.CreatorComponent = CreatorComponent;
@@ -2662,6 +2741,7 @@
     exports.TestAgainActionComponent = TestAgainActionComponent;
     exports.TestTabComponent = TestTabComponent;
     exports.TextareaJsonEditorComponent = TextareaJsonEditorComponent;
+    exports.ThemeTabComponent = ThemeTabComponent;
     exports.ToolboxCategoryComponent = ToolboxCategoryComponent;
     exports.ToolboxComponent = ToolboxComponent;
     exports.ToolboxItemComponent = ToolboxItemComponent;