survey-creator-angular 3.0.0-beta.3 → 3.0.0-beta.5

package/fesm2015/survey-creator-angular.js

@@ -6,7 +6,7 @@ import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from 'survey-angular-ui';
 import { BaseAngular, AngularComponentFactory, SurveyContentComponent, EmbeddedViewContentComponent, ButtonGroupQuestionComponent, QuestionAngular, SurveyModule } from 'survey-angular-ui';
-import { cssVariablesToString, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, PageAdorner, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, ToolboxToolViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
+import { cssVariablesToString, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, PageAdorner, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, PanelAdornerViewModel, ToolboxToolViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
 import { getActionDropdownButtonTarget, DropdownListModel, RendererFactory } from 'survey-core';
 
 class TabbedMenuItemWrapperComponent extends BaseAngular {
@@ -31,7 +31,7 @@ class TabbedMenuItemWrapperComponent extends BaseAngular {
     }
 }
 TabbedMenuItemWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabbedMenuItemWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabbedMenuItemWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbedMenuItemWrapperComponent, selector: "svc-tabbed-menu-item-wrapper", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <span class=\"svc-tabbed-menu-item-container\" [class.sv-action--hidden]=\"!model.isVisible\" [class]=\"model.css\"\n    #container>\n    <div class=\"sv-action__content\">\n      <ng-template [component]=\"{ name: model.component || 'svc-tabbed-menu-item', data: { model } }\"></ng-template>\n    </div>\n  </span>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+TabbedMenuItemWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbedMenuItemWrapperComponent, selector: "svc-tabbed-menu-item-wrapper", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <span class=\"svc-tabbed-menu-item-container\" [class.svc-tabbed-menu-item-container--hidden]=\"!model.isVisible\" [class]=\"model.css\"\n    #container>\n    <div class=\"svc-tabbed-menu-item-container__content\">\n      <ng-template [component]=\"{ name: model.component || 'svc-tabbed-menu-item', data: { model } }\"></ng-template>\n    </div>\n  </span>\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: TabbedMenuItemWrapperComponent, decorators: [{
             type: Component,
             args: [{
@@ -361,10 +361,8 @@ class PageNavigatorComponent extends CreatorModelComponent {
         return ["pagesController", "pageEditMode"];
     }
     ngAfterViewInit() {
-        if (this.pageEditMode !== "bypage") {
-            const el = this.container.nativeElement;
-            this.model.attachToUI(el);
-        }
+        const el = this.container.nativeElement;
+        this.model.attachToUI(el);
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -374,7 +372,7 @@ class PageNavigatorComponent extends CreatorModelComponent {
     }
 }
 PageNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div>\n        <div role=\"button\" class=\"svc-page-navigator__selector svc-page-navigator__button\"\n            (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__button--pressed]=\"model.isPopupOpened\">\n            <svg class=\"svc-page-navigator__button-icon\" [iconName]=\"model.icon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+PageNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div>\n         <ng-template [component]=\"{ name: 'sv-action-bar-item-dropdown', data: { model: model.selectorAction } }\"></ng-template>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -491,7 +489,7 @@ class TabButtonComponent extends BaseAngular {
     }
 }
 TabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabButtonComponent, selector: "svc-tab-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.visible\" class=\"svc-menu-action\">\n    <div [class]=\"model.buttonClassName\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\"\n      [attr.title]=\"model.tooltip\" (click)=\"model.action()\">\n      <div class=\"svc-menu-action__icon\">\n        <div class=\"svc-menu-action__icon-container\">\n          <svg [iconName]=\"model.iconName\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabButtonComponent, selector: "svc-tab-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.visible\" class=\"svc-sidebar-tabs__item\">\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\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: TabButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -551,7 +549,7 @@ class SidebarPropertyGridHeaderComponent extends BaseAngular {
     }
 }
 SidebarPropertyGridHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPropertyGridHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SidebarPropertyGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPropertyGridHeaderComponent, selector: "svc-side-bar-property-grid-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-sidebar__header svc-sidebar__header--tabbed\">\n    <div class=\"svc-sidebar__header-container svc-sidebar__header-container--with-subtitle\">\n      <div class=\"svc-sidebar__header-content\">\n        <div [class]=\"model.buttonClassName\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\">\n          <div class=\"svc-sidebar__header-caption\">\n            <span class=\"svc-sidebar__header-title\">{{model.title}}</span>\n            <span class=\"svc-sidebar__header-subtitle\">{{model.tooltip}}</span>\n          </div>\n        </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+SidebarPropertyGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPropertyGridHeaderComponent, selector: "svc-side-bar-property-grid-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-sidebar__header svc-sidebar__header--tabbed\">\n    <div class=\"svc-sidebar__header-container svc-sidebar__header-container--with-subtitle\">\n      <div class=\"svc-sidebar__header-content\">\n        <div [class]=\"model.getActionBarItemCss() + ' svc-sidebar__header-object-selector'\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\">\n          <div class=\"svc-sidebar__header-caption\">\n            <span class=\"svc-sidebar__header-title\">{{model.title}}</span>\n            <span class=\"svc-sidebar__header-subtitle\">{{model.tooltip}}</span>\n          </div>\n        </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPropertyGridHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -604,7 +602,7 @@ AngularComponentFactory.Instance.registerComponent("svc-side-bar-header", Sideba
 class ComponentContainerComponent extends EmbeddedViewContentComponent {
 }
 ComponentContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ComponentContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentContainerComponent, selector: "svc-component-container", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClass\" >\n    <ng-template *ngFor=\"let element of model.elements\" [component]=\"{ name: element.componentName, data: element.componentData }\"></ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ComponentContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentContainerComponent, selector: "svc-component-container", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-template #elementsTemplate>\n    <ng-template *ngFor=\"let element of model.elements\"\n      [component]=\"{ name: element.componentName, data: element.componentData }\"></ng-template>\n  </ng-template>\n\n  <ng-container *ngIf=\"model.wrapped; else unwrappedTemplate\">\n    <div [class]=\"model.cssClass\">\n      <sv-scroll *ngIf=\"model.scrollable; else wrappedPlainTemplate\">\n        <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n      </sv-scroll>\n      <ng-template #wrappedPlainTemplate>\n        <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-template #unwrappedTemplate>\n    <sv-scroll *ngIf=\"model.scrollable; else unwrappedPlainTemplate\">\n      <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n    </sv-scroll>\n    <ng-template #unwrappedPlainTemplate>\n      <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n    </ng-template>\n  </ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -617,6 +615,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-component-container", ComponentContainerComponent);
 
+class IconItemComponent extends EmbeddedViewContentComponent {
+}
+IconItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IconItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+IconItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IconItemComponent, selector: "svc-icon-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n<div *ngIf=\"model\" class=\"svc-icon-item\">\n  <svg [iconName]=\"model.value\" class=\"svc-icon-item__icon\" size=\"auto\" sv-ng-svg-icon></svg>\n  <span class=\"svc-icon-item__text\">{{ model.title }}</span>\n</div>\n</ng-template>\n", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IconItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-icon-item",
+                    templateUrl: "./icon-item.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-presets-icon-item", IconItemComponent);
+
+class SideBarLaunchCardComponent extends EmbeddedViewContentComponent {
+}
+SideBarLaunchCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SideBarLaunchCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SideBarLaunchCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SideBarLaunchCardComponent, selector: "svc-side-bar-launch-card", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n<div *ngIf=\"model\" class=\"spg-launch\">\n  <button class=\"spg-launch__card\" (click)=\"model.onClick()\">\n    <div class=\"spg-launch__container\">\n      <div class=\"spg-launch__text\">{{model.title}}</div>\n      <div class=\"spg-launch__text2\">{{model.description}}</div>\n    </div>\n    <div class=\"spg-launch__icon\">\n      <div class=\"spg-launch__chevron-right-16-x-16\">\n        <div class=\"spg-launch__icon2\">\n          <svg size=\"auto\" iconName=\"chevrondown-24x24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n    </div>\n  </button>\n</div>\n</ng-template>\n", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SideBarLaunchCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-side-bar-launch-card",
+                    templateUrl: "./side-bar-launch-card.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-side-bar-launch-card", SideBarLaunchCardComponent);
+
 class ObjectSelectorComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -733,35 +763,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tab-json-editor-ace", AceJsonEditorComponent);
 
-class LogicAddButtonComponent extends BaseAngular {
-    getModel() {
-        return this.model;
-    }
-    onClick(event) {
-        event.stopPropagation();
-        this.model.action();
-    }
-}
-LogicAddButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LogicAddButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LogicAddButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicAddButtonComponent, selector: "svc-tab-logic-add-btn", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"button\" class=\"svc-logic-tab__content-action svc-btn\"\n        (click)=\"onClick($event)\" [key2click] [class.svc-logic-tab__content-action--disabled]=\"model.enabled !== undefined && !model.enabled\">\n        <span class=\"svc-btn__text\">\n          {{model.title}}\n        </span>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LogicAddButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "svc-tab-logic-add-btn",
-                    templateUrl: "./logic-add-btn.component.html",
-                    styles: [":host { display: none; }"]
-                }]
-        }], propDecorators: { model: [{
-                type: Input
-            }] } });
-
 class LogicTabComponent extends BaseAngular {
     getModel() {
         return this.model;
     }
 }
 LogicTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LogicTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LogicTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicTabComponent, selector: "svc-tab-logic", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content\">\n    <div class=\"svc-plugin-tab__content svc-logic-tab__content\" [class.svc-logic-tab--empty]=\"!model.hasItems\">\n      <ng-container *ngIf=\"model.hasItems\">\n        <survey-content [model]=\"model.itemsSurvey\"></survey-content>\n        <ng-container *ngIf=\"!model.readOnly\">\n          <svc-tab-logic-add-btn [model]=\"model.addNewButton\"></svc-tab-logic-add-btn>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!model.hasItems\">\n        <div class=\"svc-logic-tab__content-empty\">\n          <svc-surface-placeholder [name]=\"'logic'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n            [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n          </svc-surface-placeholder>\n          <ng-container *ngIf=\"!model.readOnly\">\n            <svc-tab-logic-add-btn [model]=\"model.addNewButton\"></svc-tab-logic-add-btn>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }, { type: LogicAddButtonComponent, selector: "svc-tab-logic-add-btn", inputs: ["model"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+LogicTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicTabComponent, selector: "svc-tab-logic", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-logic-tab\">\n    <div class=\"svc-plugin-tab__content svc-logic-tab svc-logic-tab__content\" [class.svc-logic-tab--empty]=\"!model.hasItems\">\n      <ng-container *ngIf=\"model.hasItems\">\n        <survey-content [model]=\"model.itemsSurvey\"></survey-content>\n        <sv-action-bar *ngIf=\"!model.readOnly\" [model]=\"model.contentActionsContainer\"></sv-action-bar>\n      </ng-container>\n      <ng-container *ngIf=\"!model.hasItems\">\n        <div class=\"svc-logic-tab__content-empty\">\n          <svc-surface-placeholder [name]=\"'logic'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n            [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n          </svc-surface-placeholder>\n          <sv-action-bar *ngIf=\"!model.readOnly\" [model]=\"model.contentActionsContainer\"></sv-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LogicTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -941,6 +949,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 AngularComponentFactory.Instance.registerComponent("sd-translation-line-skeleton", TranslationSkeletonComponent);
 
 class SimulatorComponent extends BaseAngular {
+    constructor(changeDetectorRef, viewContainerRef) {
+        super(changeDetectorRef, viewContainerRef);
+    }
+    /**
+     * `BaseAngular` defers updates while `model.isRendering` is true during `ngDoCheck`, so
+     * `popupOverlayHeight` (and frame-driving props) would not refresh the embedded template in time.
+     * These properties must run synchronous `detectChanges` so `[style.--sv-popup-overlay-height]` applies.
+     */
+    getPropertiesToUpdateSync() {
+        return ["popupOverlayHeight", "landscape", "device", "survey"];
+    }
+    ngAfterViewInit() {
+        this.model.queueSurveyLayoutRefresh();
+    }
+    ngOnDestroy() {
+        this.model.cancelSurveyLayoutRefresh();
+        super.ngOnDestroy();
+    }
+    afterUpdate(isSync = false) {
+        super.afterUpdate(isSync);
+        this.model.queueSurveyLayoutRefresh();
+    }
     getModel() {
         return this.model;
     }
@@ -958,8 +988,8 @@ 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()\"\n    (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\"\n      [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\"\n        [style.height]=\"simulatorFrame.deviceHeight + 'px'\"\n        [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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SimulatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], 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()\"\n    (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\"\n      [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\"\n        [style.height]=\"simulatorFrame.deviceHeight + 'px'\"\n        [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\"\n          [style.--sv-popup-overlay-height]=\"model.popupOverlayHeight || null\">\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      [style.--sv-popup-overlay-height]=\"model.popupOverlayHeight || null\">\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: [{
@@ -967,32 +997,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: "./simulator.component.html",
                     styles: [":host { display: none; }"]
                 }]
-        }], propDecorators: { model: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { model: [{
                 type: Input
             }] } });
 
-class TestAgainActionComponent extends BaseAngular {
-    getModel() {
-        return this.model.testAgainAction;
-    }
-    get action() {
-        return this.getModel();
-    }
-}
-TestAgainActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TestAgainActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TestAgainActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TestAgainActionComponent, selector: "survey-test-again", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"button\" class=\"svc-preview__test-again svc-btn\" (click)=\"action.action()\" [key2click]>\n    <span class=\"svc-btn__text\">\n      {{action.title}}\n    </span>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TestAgainActionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "survey-test-again",
-                    templateUrl: "./test-again.component.html",
-                    styles: [":host { display: none; }"]
-                }]
-        }], propDecorators: { model: [{
-                type: Input
-            }] } });
-AngularComponentFactory.Instance.registerComponent("svc-complete-page", TestAgainActionComponent);
-
 class SurveyResultsTableRowComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -1043,7 +1051,7 @@ class TestTabComponent extends BaseAngular {
     }
 }
 TestTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TestTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TestTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TestTabComponent, selector: "svc-tab-preview", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-test-tab__content\"\n    [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <svc-surface-placeholder *ngIf=\"model.survey.isEmpty\" [name]=\"'preview'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.survey.isEmpty\" class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"model.showResults\">\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: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: SimulatorComponent, selector: "survey-simulator", 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"] }] });
+TestTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TestTabComponent, selector: "svc-tab-preview", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-test-tab__content\" [ngClass]=\"model.tabContentAdditionalCss\">\n    <svc-surface-placeholder *ngIf=\"model.survey.isEmpty\" [name]=\"'preview'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.survey.isEmpty\" class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"model.showResults\">\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: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: SimulatorComponent, selector: "survey-simulator", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TestTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -1062,7 +1070,7 @@ class ThemeTabComponent extends BaseAngular {
     }
 }
 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\"\n    [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <svc-surface-placeholder *ngIf=\"model.survey.isEmpty\" [name]=\"'theme'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.survey.isEmpty\" class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"model.showResults\">\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: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: SimulatorComponent, selector: "survey-simulator", 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"] }] });
+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\" [ngClass]=\"model.tabContentAdditionalCss\">\n    <svc-surface-placeholder *ngIf=\"model.survey.isEmpty\" [name]=\"'theme'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.survey.isEmpty\" class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"model.showResults\">\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: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: SimulatorComponent, selector: "survey-simulator", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: [{
@@ -1157,7 +1165,6 @@ AngularComponentFactory.Instance.registerComponent("svc-page", PageDesignerCompo
 class AddQuestionButtonComponent extends CreatorModelComponent {
     constructor() {
         super(...arguments);
-        this.buttonClass = "svc-btn";
         this.renderPopup = true;
     }
     getPropertiesToTrack() {
@@ -1177,7 +1184,7 @@ class AddQuestionButtonComponent extends CreatorModelComponent {
     }
 }
 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", inputs: { model: "model", buttonClass: "buttonClass", renderPopup: "renderPopup" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"'svc-element__add-new-question ' + buttonClass\" [key2click]\n    (click)=\"addNewQuestion($event)\"\n    (mouseover)=\"adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)\">\n    <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <span class=\"svc-add-new-item-button__text\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <ng-template *ngIf=\"renderPopup\"\n      [component]=\"{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }\">\n    </ng-template>\n  </div>\n  <ng-template *ngIf=\"!renderPopup\"\n    [component]=\"{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }\">\n  </ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+AddQuestionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", inputs: { model: "model", renderPopup: "renderPopup" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getActionBarItemCss()\" [key2click] (click)=\"addNewQuestion($event)\"\n    (mouseover)=\"adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)\">\n    <span [class]=\"model.getActionBarItemTitleCss()\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <div [class]=\"model.cssClasses.itemTypeSelector\">\n      <ng-template [component]=\"{ name: 'sv-action-bar-item-dropdown', data: { model: model.data.questionTypeSelectorModel } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1187,47 +1194,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], propDecorators: { model: [{
                 type: Input
-            }], buttonClass: [{
-                type: Input
             }], renderPopup: [{
                 type: Input
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-add-new-question-btn", AddQuestionButtonComponent);
 
-class AddQuestionTypeSelectorComponent extends CreatorModelComponent {
-    constructor() {
-        super(...arguments);
-        this.renderPopup = true;
-    }
-    getPropertiesToTrack() {
-        return [];
-    }
-    createModel() {
-    }
-    getModel() {
-        return this.questionTypeSelectorModel;
-    }
-    selectQuestionType(event) {
-        event.stopPropagation();
-        this.questionTypeSelectorModel.action();
-    }
-}
-AddQuestionTypeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionTypeSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AddQuestionTypeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionTypeSelectorComponent, selector: "svc-add-question-type-selector", inputs: { questionTypeSelectorModel: "questionTypeSelectorModel", renderPopup: "renderPopup" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\" [attr.title]=\"questionTypeSelectorModel.title\"\n    [attr.aria-label]=\"questionTypeSelectorModel.title\" class=\"svc-element__question-type-selector\">\n    <svg class=\"svc-element__question-type-selector-icon\" [iconName]=\"questionTypeSelectorModel.iconName\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <sv-ng-popup *ngIf=\"renderPopup\" [popupModel]=\"questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n  </button>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionTypeSelectorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "svc-add-question-type-selector",
-                    templateUrl: "./add-question-type-selector.component.html",
-                    styles: [":host { display: none; }"]
-                }]
-        }], propDecorators: { questionTypeSelectorModel: [{
-                type: Input
-            }], renderPopup: [{
-                type: Input
-            }] } });
-AngularComponentFactory.Instance.registerComponent("svc-add-question-type-selector", AddQuestionTypeSelectorComponent);
-
 class QuestionElementContentComponent extends EmbeddedViewContentComponent {
     ngDoCheck() { }
     ngOnChanges(changes) {
@@ -1253,7 +1224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class QuestionBannerComponent extends EmbeddedViewContentComponent {
 }
 QuestionBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionBannerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionBannerComponent, selector: "svc-question-banner", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-carry-forward-panel-wrapper\">\n    <div class=\"svc-carry-forward-panel\">\n    <span>{{model.text}} </span>\n    <span class=\"svc-carry-forward-panel__link\">\n      <svc-action-button [text]=\"model.actionText\" [click]=\"model.onClick.bind(model)\">\n      </svc-action-button>\n    </span>\n    </div>\n  </div>\n  <ng-template>", styles: [":host { display: none }"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "iconName", "allowBubble"] }] });
+QuestionBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionBannerComponent, selector: "svc-question-banner", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-carry-forward-panel-wrapper\">\n    <div class=\"svc-carry-forward-panel\">\n    <span>{{model.text}} </span>\n    <span class=\"svc-carry-forward-panel__link\">\n      <svc-action-button [text]=\"model.actionText\" [click]=\"model.onClick.bind(model)\">\n      </svc-action-button>\n    </span>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "iconName", "allowBubble"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionBannerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1411,7 +1382,7 @@ class ItemValueDesignerComponent extends CreatorModelComponent {
     }
 }
 ItemValueDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemValueDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ItemValueDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemValueDesignerComponent, selector: "svc-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 class=\"svc-item-value-wrapper\" (pointerdown)=\"adorner.onPointerDown($event)\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? item.value : null\"\n    [ngClass]=\"{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}\"\n    #container>\n    <div class=\"svc-item-value__ghost\"></div>\n    <div class=\"svc-item-value-controls\">\n      <span *ngIf=\"adorner.isDraggable\" class=\"svc-item-value-controls__button svc-item-value-controls__drag\">\n        <svg class=\"svc-item-value-controls__drag-icon\" [iconName]=\"'icon-drag-24x24'\" [size]=\"'auto'\"\n          [attr.title]=\"adorner.dragTooltip\" sv-ng-svg-icon></svg>\n      </span>\n      <span *ngIf=\"adorner.allowAdd\" class=\"svc-item-value-controls__button svc-item-value-controls__add\" [key2click]\n        (click)=\"adorner.add(adorner)\" role=\"button\" [attr.aria-label]=\"adorner.tooltip\"><svg [iconName]=\"'icon-add_16x16'\" [size]=\"'auto'\"\n          [attr.title]=\"adorner.tooltip\" sv-ng-svg-icon></svg></span>\n      <span *ngIf=\"adorner.allowRemove\" class=\"svc-item-value-controls__button svc-item-value-controls__remove\"\n        [key2click] (click)=\"adorner.remove(adorner)\" (blur)=\"onBlur($event)\" role=\"button\" [attr.aria-label]=\"adorner.tooltip\"><svg\n          [iconName]=\"'icon-remove_16x16'\" [size]=\"'auto'\" [attr.title]=\"adorner.tooltip\" sv-ng-svg-icon></svg></span>\n    </div>\n\n    <div class=\"svc-item-value__item\" (click)=\"adorner.select(adorner, $event)\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n\n    <div *ngIf=\"adorner.canShowPanel()\" class=\"svc-item-value-controls svc-choice-elements-button-container\">\n        <span\n            role=\"button\"\n            class=\"svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button\"\n            (click)=\"adorner.togglePanel()\"\n            [key2click]\n          >\n          <svg\n            [iconName]=\"adorner.showPanel ? 'icon-collapsepanel-16x16' : 'icon-expandpanel-16x16'\" \n            [size]=\"'auto'\" \n            sv-ng-svg-icon>\n          </svg>\n        </span>\n    </div>\n  </div>\n  <ng-template *ngIf=\"adorner.showPanel\"\n          [component]=\"{ name: getPanelComponentName(item.panel), data: getPanelComponentData(item.panel) }\"></ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ItemValueDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemValueDesignerComponent, selector: "svc-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 class=\"svc-item-value-wrapper\" (pointerdown)=\"adorner.onPointerDown($event)\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? item.value : null\"\n    [ngClass]=\"{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}\"\n    #container>\n    <div class=\"svc-item-value__ghost\"></div>\n    <div class=\"svc-item-value-controls\">\n      <span *ngIf=\"adorner.isDraggable\" class=\"svc-item-value-controls__button svc-item-value-controls__drag\">\n        <svg class=\"svc-item-value-controls__drag-icon\" [iconName]=\"'icon-drag-24x24'\" [size]=\"'auto'\"\n          [attr.title]=\"adorner.dragTooltip\" sv-ng-svg-icon></svg>\n      </span>\n      <ng-container *ngIf=\"adorner.allowAdd\">\n        <ng-template [component]=\"{name: 'sv-action-bar-item', data: { model: adorner.addAction }}\"></ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"adorner.allowRemove\">\n        <ng-template [component]=\"{name: 'sv-action-bar-item', data: { model: adorner.removeAction }}\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div class=\"svc-item-value__item\" (click)=\"adorner.select(adorner, $event)\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n\n    <div *ngIf=\"adorner.canShowPanel()\" class=\"svc-item-value-controls svc-choice-elements-button-container\">\n      <ng-template [component]=\"{name: 'sv-action-bar-item', data: { model: adorner.expandPanelAction } }\"></ng-template>\n    </div>\n  </div>\n  <ng-template *ngIf=\"adorner.renderedShowPanel\"\n          [component]=\"{ name: getPanelComponentName(item.panel), data: getPanelComponentData(item.panel) }\"></ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ItemValueDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1471,7 +1442,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()\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container\n    (dragstart)=\"preventDragHandler($event)\" (dragenter)=\"adorner.onDragEnter($event)\"\n    (dragover)=\"adorner.onDragOver($event)\" (dragleave)=\"adorner.onDragLeave($event)\" (drop)=\"adorner.onDrop($event)\">\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\"\n        class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew && !adorner.isUploading\">\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 *ngIf=\"adorner.isDraggable && adorner.canRenderControls\"\n          class=\"svc-context-button svc-image-item-value-controls__drag-area-indicator\"\n          (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-24x24'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </span>\n        <div *ngIf=\"adorner.canRenderControls\" 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\"\n              [attr.aria-label]=\"undefined\">\n              <svg role=\"button\" [iconName]=\"'icon-choosefile'\" [size]=\"'auto'\" [title]=\"adorner.selectFileTitle\"\n                sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-context-button svc-context-button--danger\" (click)=\"adorner.remove(adorner)\" [key2click]\n              [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg role=\"button\" [iconName]=\"'icon-delete'\" [size]=\"'auto'\" [title]=\"adorner.removeFileTitle\"\n                sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew || adorner.isUploading\">\n        <div class=\"svc-image-item-value__item\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\">\n                <div class=\"svc-image-item-value__loading\" *ngIf=\"adorner.isUploading\">\n                  <sv-ng-loading-indicator></sv-ng-loading-indicator>\n                </div>\n              </div>\n            </label>\n          </div>\n        </div>\n        <div class=\"svc-image-item-value-controls\" *ngIf=\"adorner.allowAdd && !adorner.isUploading\">\n          <span class=\"svc-image-item-value__placeholder\"\n            *ngIf=\"adorner.showPlaceholder\">{{adorner.placeholderText}}</span>\n          <span [class]=\"adorner.addButtonCss\" (click)=\"adorner.chooseNewFile(adorner)\" [key2click]=\"{}\">\n            <svg [iconName]=\"'icon-add-lg'\" [size]=\"'auto'\" [title]=\"adorner.addFileTitle\"\n              *ngIf=\"adorner.showChooseButtonAsIcon\" sv-ng-svg-icon></svg>\n            <span *ngIf=\"!adorner.showChooseButtonAsIcon\">{{adorner.chooseImageText}}</span>\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"] }, { type: i1.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], 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()\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container\n    (dragstart)=\"preventDragHandler($event)\" (dragenter)=\"adorner.onDragEnter($event)\"\n    (dragover)=\"adorner.onDragOver($event)\" (dragleave)=\"adorner.onDragLeave($event)\" (drop)=\"adorner.onDrop($event)\">\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\"\n        class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew && !adorner.isUploading\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <sv-ng-action-bar [model]=\"adorner.topActionsContainer\" *ngIf=\"adorner.canRenderControls\"></sv-ng-action-bar>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew || adorner.isUploading\">\n        <div class=\"svc-image-item-value__item\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\">\n                <div class=\"svc-image-item-value__loading\" *ngIf=\"adorner.isUploading\">\n                  <sv-ng-loading-indicator></sv-ng-loading-indicator>\n                </div>\n              </div>\n            </label>\n          </div>\n        </div>\n        <div class=\"svc-image-item-value-controls\" *ngIf=\"adorner.allowAdd && !adorner.isUploading\">\n          <span class=\"svc-image-item-value__placeholder\"\n            *ngIf=\"adorner.showPlaceholder\">{{adorner.placeholderText}}</span>\n          <sv-ng-action-bar [model]=\"adorner.actionsContainer\"></sv-ng-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], 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: ImageItemValueDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1528,7 +1499,7 @@ class QuestionDropdownAdornerDesignerComponent extends EmbeddedViewContentCompon
     }
 }
 QuestionDropdownAdornerDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDropdownAdornerDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionDropdownAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownAdornerDesignerComponent, selector: "svc-dropdown-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__dropdown-choices--wrapper\">\n    <div>\n      <div class=\"svc-question__dropdown-choices\">\n        <div *ngFor=\"let item of adorner.getRenderedItems()\" [class]=\"adorner.getChoiceCss()\"\n          data-bind=\"css: $parent.getChoiceCss()\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\">\n          </ng-template>\n        </div>\n      </div>\n      <svc-action-button *ngIf=\"adorner.needToCollapse\" [text]=\"adorner.getButtonText()\"\n        [click]=\"adorner.switchCollapse.bind(adorner)\" [allowBubble]=\"true\">\n      </svc-action-button>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "iconName", "allowBubble"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+QuestionDropdownAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownAdornerDesignerComponent, selector: "svc-dropdown-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__dropdown-choices--wrapper\">\n    <div>\n      <div class=\"svc-question__dropdown-choices\">\n        <div *ngFor=\"let item of adorner.getRenderedItems()\" [class]=\"adorner.getChoiceCss()\"\n          data-bind=\"css: $parent.getChoiceCss()\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\">\n          </ng-template>\n        </div>\n      </div>\n      <ng-container *ngIf=\"adorner.needToCollapse\">\n        <ng-template [component]=\"{ name: 'sv-action-bar-item', data: { model: adorner.collapseAction } }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDropdownAdornerDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1577,7 +1548,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\" *ngIf=\"!adorner.isUploading && !adorner.isEmptyElement\">\n    <ng-container *ngIf=\"adorner.allowEdit\">\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\" [attr.aria-label]=\"undefined\">\n        <svg [iconName]=\"'icon-choosefile'\" [size]=\"'auto'\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n      </span>\n    </ng-container>\n  </div>\n  <div class=\"svc-image-question__loading-placeholder\" *ngIf=\"adorner.isUploading && !adorner.isEmptyElement\">\n    <div class=\"svc-image-question__loading\">\n      <sv-ng-loading-indicator></sv-ng-loading-indicator>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], 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  <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\" class=\"svc-choose-file-input\" />\n  <sv-ng-action-bar *ngIf=\"!adorner.isUploading && !adorner.isEmptyElement\" [model]=\"adorner.imageActionsContainer\"></sv-ng-action-bar>\n  <div class=\"svc-image-question__loading-placeholder\" *ngIf=\"adorner.isUploading && !adorner.isEmptyElement\">\n    <div class=\"svc-image-question__loading\">\n      <sv-ng-loading-indicator></sv-ng-loading-indicator>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageAdornerDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1593,9 +1564,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 AngularComponentFactory.Instance.registerComponent("svc-image-question-adorner", QuestionImageAdornerDesignerComponent);
 
 class PanelDesignerComponent extends QuestionDesignerComponent {
+    createModel() {
+        if (this.componentData) {
+            this.adorner = new PanelAdornerViewModel(this.creator, this.model, null);
+        }
+    }
 }
 PanelDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n    <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n      <sv-ng-element-title *ngIf=\"!!model.hasTitle\" [element]=\"model\" [renderActions]=\"false\"></sv-ng-element-title>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <span class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"'auto'\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-container *ngIf=\"adorner.needToRenderContent\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n          <div class=\"svc-panel__placeholder_frame\">\n            <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n            <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n              (click)=\"addNewQuestion($event)\">\n              <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"'auto'\"\n                sv-ng-svg-icon></svg>\n              <span class=\"svc-add-new-item-button__text\">\n                {{ adorner.addNewQuestionText }}\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n          [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n        </ng-template>\n\n        <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question-container\">\n          <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n              [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n          </div>\n\n          <div class=\"svc-panel__add-new-question-wrapper\">\n            <ng-template\n              [component]=\"{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }\">\n            </ng-template>\n          </div>\n        </div>\n\n        <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\"\n          (focusin)=\"adorner.select(adorner, $event)\">\n          <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n    <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n      <sv-ng-element-title *ngIf=\"!!model.hasTitle\" [element]=\"model\" [renderActions]=\"false\"></sv-ng-element-title>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <span class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"'auto'\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-container *ngIf=\"adorner.needToRenderContent\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n          <div class=\"svc-panel__placeholder_frame\">\n            <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n            <sv-action-bar *ngIf=\"adorner.showAddQuestionButton\" [model]=\"adorner.addQuestionActionsContainer\"></sv-action-bar>\n          </div>\n        </div>\n\n        <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n          [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n        </ng-template>\n        <sv-action-bar *ngIf=\"!adorner.isEmptyElement &&adorner.showAddQuestionButton\" [model]=\"adorner.addQuestionActionsContainer\"></sv-action-bar>\n        <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\"\n          (focusin)=\"adorner.select(adorner, $event)\">\n          <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1642,7 +1618,7 @@ class ToolboxToolComponent extends CreatorModelComponent {
     }
 }
 ToolboxToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolboxToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ToolboxToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: { creator: "creator", item: "item", parentModel: "parentModel", isCompact: "isCompact" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\" #container>\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"svc-toolbox__tool-content sv-action__content\" (pointerdown)=\"model.onPointerDown($event)\">\n            <ng-template [component]=\"{ name: model.itemComponent, default: 'svc-toolbox-item', \n            data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></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"] }] });
+ToolboxToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: { creator: "creator", item: "item", parentModel: "parentModel", isCompact: "isCompact" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\" #container>\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"svc-toolbox__tool-content\" (pointerdown)=\"model.onPointerDown($event)\">\n            <ng-template [component]=\"{ name: model.itemComponent, default: 'svc-toolbox-item', \n            data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></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: ToolboxToolComponent, decorators: [{
             type: Component,
             args: [{
@@ -2017,7 +1993,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 svc-context-button\"\n        (click)=\"adorner.editQuestion(adorner, $event)\" [key2click]>\n        <svg [iconName]=\"'icon-edit'\" [size]=\"'auto'\" [size]=\"'auto'\" 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      <ng-template [component]=\"{name: 'sv-action-bar-item', data: { model: adorner.editAction } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: MatrixCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -2222,7 +2198,7 @@ class QuestionRatingAdornerDesignerComponent extends CreatorModelComponent {
     }
 }
 QuestionRatingAdornerDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionRatingAdornerDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionRatingAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingAdornerDesignerComponent, selector: "svc-rating-question-content", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-rating-question-content\">\n    <div [class]=\"adorner.controlsClassNames\">\n      <span *ngIf=\"adorner.allowRemove\" [class]=\"adorner.removeClassNames\" [key2click] \n      (click)=\"adorner.removeItem(adorner)\" role=\"button\" [attr.aria-label]=\"adorner.removeTooltip\">\n        <svg [iconName]=\"'icon-remove_16x16'\" [size]=\"'auto'\" [attr.title]=\"adorner.removeTooltip\" sv-ng-svg-icon></svg>\n      </span>\n      <span *ngIf=\"adorner.allowAdd\" [class]=\"adorner.addClassNames\" [key2click]\n      (click)=\"adorner.addItem(adorner)\" role=\"button\" [attr.aria-label]=\"adorner.addTooltip\">\n        <svg [iconName]=\"'icon-add_16x16'\" [size]=\"'auto'\" [attr.title]=\"adorner.addTooltip\" sv-ng-svg-icon></svg>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></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"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+QuestionRatingAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingAdornerDesignerComponent, selector: "svc-rating-question-content", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-rating-question-content\">\n    <sv-action-bar [model]=\"adorner.rateActionsContainer\"></sv-action-bar>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionRatingAdornerDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -2260,7 +2236,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]=\"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-image-48x48\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml && !model.isUploading\">\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\"\n            [attr.aria-label]=\"undefined\">\n            <svg [iconName]=\"'icon-choosefile'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          </span>\n          <span class=\"svc-context-button svc-context-button--danger\" (click)=\"model.remove(model)\" [key2click]\n            [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg [iconName]=\"'icon-clear'\" [size]=\"'auto'\" 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 class=\"svc-logo-image__loading\" *ngIf=\"model.isUploading\">\n      <sv-ng-loading-indicator></sv-ng-loading-indicator>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }, { type: i1.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], 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-image-48x48\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml && !model.isUploading\">\n      <div [class]=\"model.containerCss\">\n        <sv-ng-action-bar [model]=\"model.actionsContainer\"></sv-ng-action-bar>\n        <sv-logo-image [data]=\"survey\"></sv-logo-image>\n      </div>\n    </ng-container>\n    <div class=\"svc-logo-image__loading\" *ngIf=\"model.isUploading\">\n      <sv-ng-loading-indicator></sv-ng-loading-indicator>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }, { type: i1.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], 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: [{
@@ -2386,7 +2362,7 @@ AngularComponentFactory.Instance.registerComponent("sv-fileedit-button", FileEdi
 class BooleanSwitchComponent extends QuestionAngular {
 }
 BooleanSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanSwitchComponent, selector: "sv-ng-boolean-switch", usesInheritance: true, ngImport: i0, template: "<div class=\"spg-boolean-switch\" role=\"checkbox\" [attr.aria-checked]=\"model.booleanValue || false\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" (click)=\"model.value = !model.value\">\n  <div class=\"spg-boolean-switch__button\" tabindex=\"0\" [key2click]=\"{ disableTabStop: true }\"\n    [class]=\"model.value ? 'spg-boolean-switch__button--checked' : ''\">\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left\"></div>\n    </div>\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right\"></div>\n    </div>\n  </div>\n  <div class=\"spg-boolean-switch__caption\">\n    <div class=\"spg-boolean-switch__title\" [id]=\"model.labelRenderedAriaID\">\n      <span [model]=\"model.locTitle\" sv-ng-string></span>\n    </div>\n  </div>\n</div>", components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+BooleanSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanSwitchComponent, selector: "sv-ng-boolean-switch", usesInheritance: true, ngImport: i0, template: "<div class=\"spg-boolean-switch\" role=\"checkbox\" [attr.aria-checked]=\"model.booleanValue || false\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" (click)=\"model.value = !model.value\">\n  <div class=\"spg-boolean-switch__button\" tabindex=\"0\" [key2click]\n    [class]=\"model.value ? 'spg-boolean-switch__button--checked' : ''\">\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left\"></div>\n    </div>\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right\"></div>\n    </div>\n  </div>\n  <div class=\"spg-boolean-switch__caption\">\n    <div class=\"spg-boolean-switch__title\" [id]=\"model.labelRenderedAriaID\">\n      <span [model]=\"model.locTitle\" sv-ng-string></span>\n    </div>\n  </div>\n</div>", components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanSwitchComponent, decorators: [{
             type: Component,
             args: [{
@@ -2439,42 +2415,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-translate-from-action", TranslateFromAction);
 
+class ContainerTabComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+ContainerTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ContainerTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ContainerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContainerTabComponent, selector: "svc-tab-container", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <svc-component-container [model]=\"model.containerModel\"></svc-component-container>\n</ng-template>\n\n", styles: [":host { display: none; }"], components: [{ type: ComponentContainerComponent, selector: "svc-component-container", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ContainerTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-tab-container",
+                    templateUrl: "./container-tab.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-container", ContainerTabComponent);
+
+class ImageItemDragActionComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+ImageItemDragActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageItemDragActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ImageItemDragActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageItemDragActionComponent, selector: "svc-image-item-drag-action", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <span [class]=\"model.getActionBarItemCss()\"\n        (pointerdown)=\"model.data.model.onPointerDown($event)\">\n        <svg [iconName]=\"model.iconName\" [size]=\"'auto'\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageItemDragActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-image-item-drag-action",
+                    templateUrl: "./image-item-drag-action.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-image-item-drag-action", ImageItemDragActionComponent);
+
 class SurveyCreatorModule {
 }
 SurveyCreatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
         QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent,
-        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+        BooleanSwitchComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent,
+        IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
-        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, BooleanSwitchComponent, TranslateFromAction,
-        AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent] });
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, BooleanSwitchComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent,
+        IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent] });
 SurveyCreatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, providers: [], imports: [[
             CommonModule, FormsModule, SurveyModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+                    declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
                         QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent,
-                        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent],
+                        BooleanSwitchComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent,
+                        IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent],
                     imports: [
                         CommonModule, FormsModule, SurveyModule
                     ],
                     exports: [
-                        CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+                        CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
-                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, BooleanSwitchComponent, TranslateFromAction,
-                        AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, BooleanSwitchComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent,
+                        IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent
                     ],
                     providers: [],
                 }]
@@ -2484,5 +2500,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, AddQuestionButtonComponent, AddQuestionTypeSelectorComponent, BooleanSwitchComponent, CellQuestionComponent, CellQuestionDropdownComponent, ColorItemComponent, ComponentContainerComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, FileEditorButtonComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, JsonErrorItemComponent, LinkValueQuestionComponent, LogicAddButtonComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageElementContentComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionBannerComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionElementContentComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionPgErrorComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionWidgetDesignerComponent, SearchComponent, SidebarComponent, SidebarDefaultHeaderComponent, SidebarHeaderComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, SimulatorComponent, SpinEditorButtonComponent, StringEditorComponent, SurfacePlaceholderComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SwitcherComponent, TabButtonComponent, TabControlComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TabsComponent, TestAgainActionComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxToolComponent, TranslateFromAction, TranslationSkeletonComponent, TranslationTabComponent };
+export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, AddQuestionButtonComponent, BooleanSwitchComponent, CellQuestionComponent, CellQuestionDropdownComponent, ColorItemComponent, ComponentContainerComponent, ContainerTabComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, FileEditorButtonComponent, IconItemComponent, ImageItemDragActionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, JsonErrorItemComponent, LinkValueQuestionComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageElementContentComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionBannerComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionElementContentComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionPgErrorComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionWidgetDesignerComponent, SearchComponent, SideBarLaunchCardComponent, SidebarComponent, SidebarDefaultHeaderComponent, SidebarHeaderComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, SimulatorComponent, SpinEditorButtonComponent, StringEditorComponent, SurfacePlaceholderComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SwitcherComponent, TabButtonComponent, TabControlComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TabsComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxToolComponent, TranslateFromAction, TranslationSkeletonComponent, TranslationTabComponent };
 //# sourceMappingURL=survey-creator-angular.js.map