survey-creator-angular 1.12.3 → 1.12.5

package/fesm2015/survey-creator-angular.js

@@ -87,7 +87,7 @@ class SidebarComponent extends BaseAngular {
     }
 }
 SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarComponent, selector: "svc-side-bar", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar\" [class.svc-flyout-side-bar]=\"model.flyoutPanelMode\" [visible]=\"model.hasVisiblePages\">\n    <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\"></div>\n    <div class=\"svc-flex-row svc-side-bar__wrapper\">\n      <div class=\"svc-side-bar__container\" [visible]=\"model.renderedIsVisible\" #container>\n        <ng-template\n          [component]=\"{ name: model.header.component, data: { model: model.header.componentModel } }\"></ng-template>\n        <div class=\"svc-side-bar__container-content\">\n          <ng-container *ngFor=\"let page of model.pages\">\n            <svc-side-bar-page [model]=\"page\"></svc-side-bar-page>\n          </ng-container>\n        </div>\n      </div>\n      <ng-container *ngIf=\"model.sideAreaComponentName\">\n        <ng-template\n          [component]=\"{ name: model.sideAreaComponentName, data: { model: model.sideAreaComponentData } }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SidebarPageComponent, selector: "svc-side-bar-page", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarComponent, selector: "svc-side-bar", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.rootCss\" [visible]=\"model.renderRoot\">\n    <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\" [visible]=\"model.renderContainer\"></div>\n    <div class=\"svc-flex-row svc-side-bar__wrapper\">\n      <div class=\"svc-side-bar__container-wrapper\" [visible]=\"model.renderContainer\">\n        <div class=\"svc-side-bar__container\" [visible]=\"model.renderedIsVisible\" #container>\n          <ng-template\n            [component]=\"{ name: model.header.component, data: { model: model.header.componentModel } }\"></ng-template>\n          <div class=\"svc-side-bar__container-content\">\n            <ng-container *ngFor=\"let page of model.pages\">\n              <svc-side-bar-page [model]=\"page\"></svc-side-bar-page>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"model.sideAreaComponentName\">\n        <ng-template\n          [component]=\"{ name: model.sideAreaComponentName, data: { model: model.sideAreaComponentData } }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SidebarPageComponent, selector: "svc-side-bar-page", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
@@ -135,7 +135,7 @@ class CreatorComponent extends BaseAngular {
     }
 }
 CreatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorComponent, selector: "survey-creator", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n  <sv-ng-modal-container></sv-ng-modal-container>\n  <div [class]=\"creator.getRootCss()\" #container>\n    <div>\n      <sv-svg-bundle></sv-svg-bundle>\n    </div>\n    <div class=\"svc-full-container svc-creator__area svc-flex-column\"\n      [class.svc-creator__area--with-banner]=\"!creator.haveCommercialLicense\">\n      <div class=\"svc-flex-row svc-full-container\"\n        [class.svc-creator__side-bar--left]=\"creator.sidebarLocation == 'left'\">\n        <div class=\"svc-flex-column svc-flex-row__element svc-flex-row__element--growing\">\n          <div class=\"svc-top-bar\">\n            <div class=\"svc-tabbed-menu-wrapper\" [visible]=\"creator.showTabs\">\n              <svc-tabbed-menu [model]=\"creator.tabbedMenu\"></svc-tabbed-menu>\n            </div>\n            <div *ngIf=\"creator.showToolbar\" class=\"svc-toolbar-wrapper\" [visible]=\"creator.showToolbar\">\n              <sv-action-bar [model]=\"creator.toolbar\"></sv-action-bar>\n            </div>\n          </div>\n          <div class=\"svc-creator__content-wrapper svc-flex-row\"\n            [class.svc-creator__content-wrapper--footer-toolbar]=\"creator.isMobileView\">\n            <div class=\"svc-creator__content-holder svc-flex-column\">\n              <ng-container *ngFor=\"let tab of creator.tabs\">\n                <div class=\"svc-creator-tab\" *ngIf=\"creator.viewType == tab.id && tab.visible\"\n                  [attr.id]=\"'scrollableDiv-' + tab.id\"\n                  [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n                  <ng-template\n                    [component]=\"{ name: tab.componentContent, data: { model: tab.data.model } }\"></ng-template>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"creator.isMobileView\" class=\"svc-footer-bar\">\n            <div class=\"svc-toolbar-wrapper\" [visible]=\"creator.isMobileView\">\n              <sv-action-bar [model]=\"creator.footerToolbar\"></sv-action-bar>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"creator.sidebar\" [class.sv-mobile-side-bar]=\"creator.isMobileView\">\n          <svc-side-bar [model]=\"creator.sidebar\"></svc-side-bar>\n        </div>\n      </div>\n      <div class=\"svc-creator__banner\" *ngIf=\"!creator.haveCommercialLicense\">\n        <span class=\"svc-creator__non-commercial-text\" [innerHTML]=\"creator.licenseText | safeHtml\"></span>\n      </div>\n      <sv-notifier [notifier]=\"creator.notifier\"></sv-notifier>\n    </div>\n  </div>\n</ng-container>", components: [{ type: i1.ModalComponent, selector: "sv-ng-modal-container" }, { type: i1.SvgBundleComponent, selector: "sv-svg-bundle" }, { type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: ["model"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarComponent, selector: "svc-side-bar", inputs: ["model"] }, { type: i1.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1.SafeHtmlPipe } });
+CreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorComponent, selector: "survey-creator", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n  <sv-ng-modal-container></sv-ng-modal-container>\n  <div [class]=\"creator.getRootCss()\" #container>\n    <div>\n      <sv-svg-bundle></sv-svg-bundle>\n    </div>\n    <div class=\"svc-full-container svc-creator__area svc-flex-column\"\n      [class.svc-creator__area--with-banner]=\"!creator.haveCommercialLicense\">\n      <div class=\"svc-flex-row svc-full-container\"\n        [class.svc-creator__side-bar--left]=\"creator.sidebarLocation == 'left'\">\n        <div class=\"svc-flex-column svc-flex-row__element svc-flex-row__element--growing\">\n          <div class=\"svc-top-bar\">\n            <div class=\"svc-tabbed-menu-wrapper\" [visible]=\"creator.showTabs\">\n              <svc-tabbed-menu [model]=\"creator.tabbedMenu\"></svc-tabbed-menu>\n            </div>\n            <div *ngIf=\"creator.showToolbar\" class=\"svc-toolbar-wrapper\" [visible]=\"creator.showToolbar\">\n              <sv-action-bar [model]=\"creator.toolbar\"></sv-action-bar>\n            </div>\n          </div>\n          <div class=\"svc-creator__content-wrapper svc-flex-row\"\n            [class.svc-creator__content-wrapper--footer-toolbar]=\"creator.isMobileView\">\n            <div class=\"svc-creator__content-holder svc-flex-column\">\n              <ng-container *ngFor=\"let tab of creator.tabs\">\n                <div class=\"svc-creator-tab\" *ngIf=\"creator.viewType == tab.id && tab.visible\"\n                  [attr.id]=\"'scrollableDiv-' + tab.id\"\n                  [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n                  <ng-template\n                    [component]=\"{ name: tab.componentContent, data: { model: tab.data.model } }\"></ng-template>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"creator.isMobileView\" class=\"svc-footer-bar\">\n            <div class=\"svc-toolbar-wrapper\" [visible]=\"creator.isMobileView\">\n              <sv-action-bar [model]=\"creator.footerToolbar\"></sv-action-bar>\n            </div>\n          </div>\n        </div>\n        <svc-side-bar [model]=\"creator.sidebar\" *ngIf=\"creator.sidebar\"></svc-side-bar>\n      </div>\n      <div class=\"svc-creator__banner\" *ngIf=\"!creator.haveCommercialLicense\">\n        <span class=\"svc-creator__non-commercial-text\" [innerHTML]=\"creator.licenseText | safeHtml\"></span>\n      </div>\n      <sv-notifier [notifier]=\"creator.notifier\"></sv-notifier>\n    </div>\n  </div>\n</ng-container>", components: [{ type: i1.ModalComponent, selector: "sv-ng-modal-container" }, { type: i1.SvgBundleComponent, selector: "sv-svg-bundle" }, { type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: ["model"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarComponent, selector: "svc-side-bar", inputs: ["model"] }, { type: i1.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1.SafeHtmlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -213,7 +213,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" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\">\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"sv-action__content\" (pointerdown)=\"model.onPointerDown($event)\"\n            (mouseover)=\"model.onMouseOver(item, $event)\"\n        (mouseleave)=\"model.onMouseLeave(item, $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" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\">\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"sv-action__content\" (pointerdown)=\"model.onPointerDown($event)\"\n            (mouseover)=\"model.onMouseOverTool(item, $event)\"\n        (mouseleave)=\"model.onMouseLeave(item, $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: [{
@@ -307,8 +307,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ["container"]
             }] } });
 
+class SurfacePlaceholderComponent extends EmbeddedViewContentComponent {
+}
+SurfacePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurfacePlaceholderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SurfacePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: { name: "name", placeholderTitleText: "placeholderTitleText", placeholderDescriptionText: "placeholderDescriptionText" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-surface-placeholder\">\n    <div class=\"svc-surface-placeholder__image\" [class]=\"'svc-surface-placeholder__image--' + name\"></div>\n    <div class=\"svc-surface-placeholder__text\">\n      <div class=\"svc-surface-placeholder__title\">{{placeholderTitleText}}</div>\n      <div class=\"svc-surface-placeholder__description\">{{placeholderDescriptionText}}</div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurfacePlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-surface-placeholder",
+                    templateUrl: "./surface-placeholder.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], placeholderTitleText: [{
+                type: Input
+            }], placeholderDescriptionText: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-surface-placeholder", SurfacePlaceholderComponent);
+
 class PageDesignerComponent extends CreatorModelComponent {
     createModel() {
+        if (this.adorner) {
+            this.adorner.dispose();
+        }
         if (this.model) {
             this.adorner = new PageAdorner(this.creator, this.model);
         }
@@ -319,13 +342,20 @@ class PageDesignerComponent extends CreatorModelComponent {
     getPropertiesToTrack() {
         return ["creator", "model"];
     }
+    ngAfterViewChecked() {
+        var _a;
+        super.ngAfterViewChecked();
+        if (this.adorner && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.adorner.rootElement = this.container.nativeElement;
+        }
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.adorner.dispose();
     }
 }
 PageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageDesignerComponent, selector: "svc-page", inputs: { model: "model", survey: "survey", creator: "creator", isGhost: "isGhost" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)\" class=\"svc-page__content\" [class]=\"adorner.css\" [key2click]\n  (click)=\"adorner.select(adorner, $event)\" (dblclick)=\"adorner.dblclick($event)\"  (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n  (mouseleave)=\"adorner.hover($event, $event.target)\" [id]=\"adorner.page.id\" data-bind=\"clickBubble: false\">\n  <div class=\"svc-page__content-actions\">\n    <sv-action-bar [model]=\"adorner.actionContainer\"></sv-action-bar>\n  </div>\n  <page [model]=\"model\" [survey]=\"survey\"></page>\n  <div *ngIf=\"adorner.showPlaceholder\" class=\"svc-page__placeholder_frame\">\n    <div class=\"svc-panel__placeholder_frame\">\n      <div class=\"svc-panel__placeholder\">{{adorner.placeholderText}}</div>\n    </div>\n  </div>\n  <sv-action-bar [model]=\"adorner.footerActionsBar\"></sv-action-bar>\n</div>", components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+PageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageDesignerComponent, selector: "svc-page", inputs: { model: "model", survey: "survey", creator: "creator", isGhost: "isGhost" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)\" class=\"svc-page__content\"\n  [class]=\"adorner.css\" [key2click] (click)=\"adorner.select(adorner, $event)\" (dblclick)=\"adorner.dblclick($event)\"\n  (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.target)\"\n  [id]=\"adorner.page.id\" #container>\n  <div class=\"svc-page__content-actions\">\n    <sv-action-bar [model]=\"adorner.actionContainer\"></sv-action-bar>\n  </div>\n  <page [model]=\"model\" [survey]=\"survey\"></page>\n  <div *ngIf=\"adorner.showPlaceholder\" class=\"svc-page__placeholder_frame\">\n    <div class=\"svc-panel__placeholder_frame\">\n      <div class=\"svc-panel__placeholder\">{{adorner.placeholderText}}</div>\n    </div>\n  </div>\n  <sv-action-bar [model]=\"adorner.footerActionsBar\"></sv-action-bar>\n</div>", components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -341,6 +371,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], isGhost: [{
                 type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container", { read: ElementRef }]
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-page", PageDesignerComponent);
 
@@ -484,7 +517,7 @@ class DesignerTabComponent extends BaseAngular {
     }
 }
 DesignerTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DesignerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerTabComponent, selector: "svc-tab-designer", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-flex-column\">\n    <svc-adaptive-toolbox *ngIf=\"model.isToolboxVisible\" [creator]=\"creator\"></svc-adaptive-toolbox>\n  </div>\n  <div class=\"svc-tab-designer\" [class]=\"model.getRootCss()\" (click)=\"model.clickDesigner()\">\n    <div class=\"svc-tab-designer_content\">\n      <ng-container *ngIf=\"model.showPlaceholder\">\n        <div *ngIf=\"creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n          <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n        </div>\n        <div class=\"svc-designer__placeholder-container\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\">\n          <span class=\"svc-designer-placeholder-text svc-text svc-text--normal\">\n            {{ model.placeholderText }}\n          </span>\n          <svc-page class=\"svc-designer-placeholder-page\" [model]=\"model.newPage\" [survey]=\"survey\" [creator]=\"creator\"></svc-page>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!model.showPlaceholder\">\n        <svc-designer-survey [model]=\"model\"></svc-designer-survey>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: AdaptiveToolboxComponent, selector: "svc-adaptive-toolbox", inputs: ["creator"] }, { type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }, { type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DesignerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerTabComponent, selector: "svc-tab-designer", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-flex-column\">\n    <svc-adaptive-toolbox *ngIf=\"model.isToolboxVisible\" [creator]=\"creator\"></svc-adaptive-toolbox>\n  </div>\n  <div class=\"svc-tab-designer\" [class]=\"model.getRootCss()\" (click)=\"model.clickDesigner()\">\n    <div class=\"svc-tab-designer_content\">\n      <ng-container *ngIf=\"model.showPlaceholder\">\n        <div *ngIf=\"creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n          <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n        </div>\n        <div class=\"svc-designer__placeholder-container\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\">\n          <svc-surface-placeholder [name]=\"'designer'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n            [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n          </svc-surface-placeholder>\n          <svc-page class=\"svc-designer-placeholder-page\" [model]=\"model.newPage\" [survey]=\"survey\"\n            [creator]=\"creator\"></svc-page>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!model.showPlaceholder\">\n        <svc-designer-survey [model]=\"model\"></svc-designer-survey>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: AdaptiveToolboxComponent, selector: "svc-adaptive-toolbox", inputs: ["creator"] }, { type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }, { type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -503,7 +536,7 @@ class TabbedMenuItemComponent extends BaseAngular {
     }
 }
 TabbedMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabbedMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabbedMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbedMenuItemComponent, selector: "svc-tabbed-menu-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div\n    class=\"svc-tabbed-menu-item\"\n    [class.svc-tabbed-menu-item--selected]=\"model.active\"\n    [class.svc-tabbed-menu-item--disabled]=\"model.disabled\"\n    (click)=\"model.action()\" [key2click]\n  >\n    <span\n      class=\"svc-text svc-text--normal svc-tabbed-menu-item__text\"\n      [class.svc-text--bold]=\"model.active\"\n    >\n    {{model.title}}\n  </span>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+TabbedMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbedMenuItemComponent, selector: "svc-tabbed-menu-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getRootCss()\" (click)=\"model.action()\" [key2click]>\n    <span *ngIf=\"model.hasTitle\" [class]=\"model.getTitleCss()\">\n      {{model.title}}\n    </span>\n    <svg *ngIf=\"model.hasIcon\" [iconName]=\"model.iconName\" [size]=\"'auto'\" [class]=\"model.getIconCss()\"\n      [title]=\"model.tooltip || model.title\" sv-ng-svg-icon></svg>\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: 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: TabbedMenuItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -776,7 +809,7 @@ class LogicTabComponent extends BaseAngular {
     }
 }
 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      <survey-content [model]=\"model.itemsSurvey\"></survey-content>\n      <div *ngIf=\"!model.hasItems\" class=\"svc-logic-tab__content-empty\">\n        <span class=\"svc-text\">{{model.emptyTabPlaceholder}}</span>\n      </div>\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  </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"] }], 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\">\n    <div class=\"svc-plugin-tab__content svc-logic-tab__content\" [class.svc-logic-tab--empty]=\"!model.hasItems\">\n      <survey-content [model]=\"model.itemsSurvey\"></survey-content>\n      <div *ngIf=\"!model.hasItems\" class=\"svc-logic-tab__content-empty\">\n        <svc-surface-placeholder [name]=\"'logic'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n          [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n        </svc-surface-placeholder>\n      </div>\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  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: LogicAddButtonComponent, selector: "svc-tab-logic-add-btn", inputs: ["model"] }], 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: [{
@@ -918,7 +951,7 @@ class TranslationTabComponent extends BaseAngular {
     }
 }
 TranslationTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TranslationTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TranslationTabComponent, selector: "svc-tab-translation", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-translation-tab\">\n    <div class=\"st-content\">\n      <div *ngIf=\"model.isEmpty\" class=\"st-no-strings\">\n        <span>{{model.noStringsText}}</span>\n      </div>\n      <div *ngIf=\"!model.isEmpty\" class=\"svc-flex-column st-strings-wrapper\">\n        <div class=\"svc-flex-row st-strings-header\">\n          <survey-content [model]=\"model.stringsHeaderSurvey\"></survey-content>\n        </div>\n        <div class=\"svc-flex-row svc-plugin-tab__content st-strings\">\n          <survey-content [model]=\"model.stringsSurvey\"></survey-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TranslationTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TranslationTabComponent, selector: "svc-tab-translation", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-translation-tab\" [class]=\"model.isEmpty ? 'svc-translation-tab--empty' : ''\">\n    <svc-surface-placeholder *ngIf=\"model.isEmpty\" [name]=\"'translation'\"\n      [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.isEmpty\" class=\"st-content\">\n      <div class=\"svc-flex-column st-strings-wrapper\">\n        <div class=\"svc-flex-row st-strings-header\">\n          <survey-content [model]=\"model.stringsHeaderSurvey\"></survey-content>\n        </div>\n        <div class=\"svc-flex-row svc-plugin-tab__content st-strings\">\n          <survey-content [model]=\"model.stringsSurvey\"></survey-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: i1.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -1048,7 +1081,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-test", 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    <div 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: 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-test", 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    <div *ngIf=\"model.survey.isEmpty\" class=\"svc-test-tab--empty\">\n      <svc-surface-placeholder [name]=\"'preview'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n        [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n      </svc-surface-placeholder>\n    </div>\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TestTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -1067,7 +1100,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    <div 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: 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\"\n    [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <div *ngIf=\"model.survey.isEmpty\" class=\"svc-test-tab--empty\">\n      <svc-surface-placeholder [name]=\"'theme'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n        [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n      </svc-surface-placeholder>\n    </div>\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ThemeTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -1210,13 +1243,20 @@ class QuestionDesignerComponent extends CreatorModelComponent {
         event.stopPropagation();
         this.adorner.addNewQuestion();
     }
+    ngAfterViewChecked() {
+        var _a;
+        super.ngAfterViewChecked();
+        if (this.adorner && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.adorner.rootElement = this.container.nativeElement;
+        }
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.adorner.dispose();
     }
 }
 QuestionDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", 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 *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      <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n        <sv-ng-string *ngIf=\"!!model.hasTitle\" [model]=\"model.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!model.hasTitle\" class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { 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: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1228,6 +1268,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], componentData: [{
                 type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container", { read: ElementRef }]
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-question", QuestionDesignerComponent);
 
@@ -1368,7 +1411,7 @@ class QuestionDropdownDesignerComponent extends QuestionDesignerComponent {
     }
 }
 QuestionDropdownDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDropdownDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionDropdownDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionDropdownDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (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      <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n        <sv-ng-string *ngIf=\"!!model.hasTitle\" [model]=\"model.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!model.hasTitle\" class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { 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: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDropdownDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1416,9 +1459,8 @@ class QuestionImageDesignerComponent extends QuestionDesignerComponent {
         this.adornerComponent = "svc-image-question-adorner";
     }
     createModel() {
-        var _a;
         if (this.componentData) {
-            this.adorner = new QuestionImageAdornerViewModel(this.creator, this.model, null, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.nextSibling);
+            this.adorner = new QuestionImageAdornerViewModel(this.creator, this.model, null);
         }
     }
     get placeholderComponent() {
@@ -1430,12 +1472,9 @@ class QuestionImageDesignerComponent extends QuestionDesignerComponent {
     get showPlaceholderComponent() {
         return !!this.placeholderComponentData;
     }
-    ngAfterViewInit() {
-        this.adorner.questionRoot = this.container.nativeElement;
-    }
 }
 QuestionImageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionImageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionImageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", 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      <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n        <sv-ng-string *ngIf=\"!!model.hasTitle\" [model]=\"model.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!model.hasTitle\" class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { 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: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1443,10 +1482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: "../question.component.html",
                     styles: [":host { display: none; }"]
                 }]
-        }], propDecorators: { container: [{
-                type: ViewChild,
-                args: ["container", { read: ElementRef }]
-            }] } });
+        }] });
 AngularComponentFactory.Instance.registerComponent("svc-image-question", QuestionImageDesignerComponent);
 class QuestionImageAdornerDesignerComponent extends EmbeddedViewContentComponent {
 }
@@ -1469,7 +1505,7 @@ AngularComponentFactory.Instance.registerComponent("svc-image-question-adorner",
 class PanelDesignerComponent extends QuestionDesignerComponent {
 }
 PanelDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string *ngIf=\"!!model.title\" [model]=\"model.locTitle\"></sv-ng-string>\n          <span *ngIf=\"!model.title\" class=\"svc-fake-title\">{{model.name}}</span>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n          <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n            (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\"\n              sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n            [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </div>\n\n        <div class=\"svc-panel__add-new-question-wrapper\">\n          <ng-template\n            [component]=\"{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }\">\n          </ng-template>\n        </div>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\"\n        (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+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      <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n        <sv-ng-string *ngIf=\"!!model.hasTitle\" [model]=\"model.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!model.hasTitle\" 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]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n          <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n            (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\"\n              sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n            [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </div>\n\n        <div class=\"svc-panel__add-new-question-wrapper\">\n          <ng-template\n            [component]=\"{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }\">\n          </ng-template>\n        </div>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\"\n        (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1525,7 +1561,7 @@ class ToolboxItemGroupComponent extends BaseAngular {
     }
 }
 ToolboxItemGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolboxItemGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ToolboxItemGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxItemGroupComponent, selector: "svc-toolbox-item-group", inputs: { creator: "creator", model: "model", isCompact: "isCompact", viewModel: "viewModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <svc-toolbox-item [model]=\"item\" [viewModel]=\"viewModel\" [creator]=\"creator\" [isCompact]=\"isCompact\"></svc-toolbox-item>\n  <sv-ng-popup [popupModel]=\"model.popupModel\" [getArea]=\"model.getArea\"></sv-ng-popup>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ToolboxItemComponent, selector: "svc-toolbox-item", inputs: ["creator", "model", "isCompact", "viewModel"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }] });
+ToolboxItemGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxItemGroupComponent, selector: "svc-toolbox-item-group", inputs: { creator: "creator", model: "model", isCompact: "isCompact", viewModel: "viewModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <svc-toolbox-item [model]=\"item\" [viewModel]=\"viewModel\" [creator]=\"creator\" [isCompact]=\"isCompact\"></svc-toolbox-item>\n  <div class=\"svc-toolbox__item-submenu-button\" (mouseover)=\"viewModel.onMouseOver(item, $event)\">\n    <svg [iconName]=\"item.subitemsButtonIcon\" [size]=\"16\" sv-ng-svg-icon></svg>\n  </div>\n  <sv-ng-popup [popupModel]=\"model.popupModel\" [getArea]=\"model.getArea\"></sv-ng-popup>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ToolboxItemComponent, selector: "svc-toolbox-item", inputs: ["creator", "model", "isCompact", "viewModel"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolboxItemGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1909,7 +1945,7 @@ class QuestionWidgetDesignerComponent extends QuestionDesignerComponent {
     }
 }
 QuestionWidgetDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionWidgetDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionWidgetDesignerComponent, selector: "svc-widget-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\" [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\">\n    <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\" [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\" sv-ng-svg-icon></svg>\n      </div>\n      <div class=\"svc-widget__content\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      </div>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n            <div class=\"svc-panel__placeholder\" data-bind=\"text: placeholderText\"></div>\n        </div>\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.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"] }] });
+QuestionWidgetDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionWidgetDesignerComponent, selector: "svc-widget-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\" [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\">\n    <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\" [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\" #container>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\" sv-ng-svg-icon></svg>\n      </div>\n      <div class=\"svc-widget__content\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      </div>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n            <div class=\"svc-panel__placeholder\" data-bind=\"text: placeholderText\"></div>\n        </div>\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.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: QuestionWidgetDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1949,7 +1985,7 @@ class QuestionRatingDesignerComponent extends QuestionDesignerComponent {
     }
 }
 QuestionRatingDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionRatingDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionRatingDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionRatingDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (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      <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n        <sv-ng-string *ngIf=\"!!model.hasTitle\" [model]=\"model.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!model.hasTitle\" class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { 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: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionRatingDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -2167,12 +2203,12 @@ AngularComponentFactory.Instance.registerComponent("svc-translate-from-action",
 class SurveyCreatorModule {
 }
 SurveyCreatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+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,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
         QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent,
-        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -2184,7 +2220,7 @@ SurveyCreatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
 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, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+                    declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -2194,7 +2230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         CommonModule, FormsModule, SurveyModule
                     ],
                     exports: [
-                        CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+                        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,
                         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -2209,5 +2245,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, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, JsonErrorItemComponent, LinkValueQuestionComponent, LogicAddButtonComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionBannerComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionPgErrorComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionTextWithResetComponent, QuestionWidgetDesignerComponent, SearchComponent, SidebarComponent, SidebarDefaultHeaderComponent, SidebarHeaderComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, SimulatorComponent, StringEditorComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SwitcherComponent, TabButtonComponent, TabControlComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TabsComponent, TestAgainActionComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxToolComponent, TranslateFromAction, TranslationSkeletonComponent, TranslationTabComponent };
+export { AceJsonEditorComponent, ActionButtonComponent, AdaptiveToolboxComponent, AddQuestionButtonComponent, AddQuestionTypeSelectorComponent, BooleanSwitchComponent, CellQuestionComponent, CellQuestionDropdownComponent, ColorItemComponent, CreatorComponent, CreatorLogoImageComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, DesignerTabComponent, EmbeddedSurveyQuestionComponent, ImageItemValueDesignerComponent, ItemValueDesignerComponent, JsonErrorItemComponent, LinkValueQuestionComponent, LogicAddButtonComponent, LogicOperatorComponent, LogicTabComponent, MatrixCellComponent, ObjectSelectorComponent, PageDesignerComponent, PageNavigatorComponent, PageNavigatorItemComponent, PanelDesignerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionBannerComponent, QuestionColorComponent, QuestionDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionDropdownDesignerComponent, QuestionEditorComponent, QuestionFileEditorComponent, QuestionImageAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionPgErrorComponent, QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionTextWithResetComponent, QuestionWidgetDesignerComponent, SearchComponent, SidebarComponent, SidebarDefaultHeaderComponent, SidebarHeaderComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, SimulatorComponent, StringEditorComponent, SurfacePlaceholderComponent, SurveyCreatorModule, SurveyResultsComponent, SurveyResultsTableRowComponent, SwitcherComponent, TabButtonComponent, TabControlComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, TabbledMenuComponent, TabsComponent, TestAgainActionComponent, TestTabComponent, TextareaJsonEditorComponent, ThemeTabComponent, ToolboxCategoryComponent, ToolboxComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxToolComponent, TranslateFromAction, TranslationSkeletonComponent, TranslationTabComponent };
 //# sourceMappingURL=survey-creator-angular.js.map