survey-creator-angular 1.12.2 → 1.12.4

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-container *ngIf=\"model.headerComponentName\">\n          <ng-template\n            [component]=\"{ name: model.headerComponentName, data: { model: model.headerComponentData } }\"></ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!model.headerComponentName\">\n          <div class=\"svc-side-bar__container-header\">\n            <div class=\"svc-side-bar__container-actions\">\n              <sv-action-bar [model]=\"model.toolbar\"></sv-action-bar>\n            </div>\n            <div *ngIf=\"!!model.headerText\" class=\"svc-side-bar__container-title\">{{model.headerText}}</div>\n          </div>\n        </ng-container>\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: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarPageComponent, selector: "svc-side-bar-page", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarComponent, selector: "svc-side-bar", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar\" [class.svc-flyout-side-bar]=\"model.flyoutPanelMode\" [visible]=\"model.hasVisiblePages\">\n    <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\"></div>\n    <div class=\"svc-flex-row svc-side-bar__wrapper\">\n      <div class=\"svc-side-bar__container\" [visible]=\"model.renderedIsVisible\" #container>\n        <ng-template\n          [component]=\"{ name: model.header.component, data: { model: model.header.componentModel } }\"></ng-template>\n        <div class=\"svc-side-bar__container-content\">\n          <ng-container *ngFor=\"let page of model.pages\">\n            <svc-side-bar-page [model]=\"page\"></svc-side-bar-page>\n          </ng-container>\n        </div>\n      </div>\n      <ng-container *ngIf=\"model.sideAreaComponentName\">\n        <ng-template\n          [component]=\"{ name: model.sideAreaComponentName, data: { model: model.sideAreaComponentData } }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SidebarPageComponent, selector: "svc-side-bar-page", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
@@ -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: [{
@@ -516,6 +549,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tabbed-menu-item", TabbedMenuItemComponent);
 
+class SidebarDefaultHeaderComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+SidebarDefaultHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarDefaultHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SidebarDefaultHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarDefaultHeaderComponent, selector: "svc-side-bar-default-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar__container-header\">\n    <div class=\"svc-side-bar__container-actions\">\n      <sv-action-bar [model]=\"model.toolbar\"></sv-action-bar>\n    </div>\n    <div *ngIf=\"!!model.title\" class=\"svc-side-bar__container-title\">{{model.title}}</div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarDefaultHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-side-bar-default-header",
+                    templateUrl: "./side-bar-default-header.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-side-bar-default-header", SidebarDefaultHeaderComponent);
+
 class TabButtonComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -613,24 +665,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 AngularComponentFactory.Instance.registerComponent("svc-property-grid-placeholder", PropertyGridPlaceholderComponent);
 
-class SidebarPropertyGridPlaceholderHeaderComponent extends BaseAngular {
+class SidebarHeaderComponent extends BaseAngular {
     getModel() {
         return this.model;
     }
 }
-SidebarPropertyGridPlaceholderHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPropertyGridPlaceholderHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SidebarPropertyGridPlaceholderHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPropertyGridPlaceholderHeaderComponent, selector: "svc-side-bar-property-grid-placeholder-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar__container-header svc-sidebar__header-container\">\n    <div class=\"svc-side-bar__container-title\">{{model.caption}}</div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPropertyGridPlaceholderHeaderComponent, decorators: [{
+SidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarHeaderComponent, selector: "svc-side-bar-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-side-bar__container-header svc-sidebar__header-container\">\n    <ng-container *ngIf=\"!model.subTitle\">\n      <div class=\"svc-side-bar__container-title\">{{model.title}}</div>\n    </ng-container>\n    <ng-container *ngIf=\"!!model.subTitle\">\n      <div class=\"svc-sidebar__header-caption\">\n        <span class=\"svc-sidebar__header-title\">{{model.title}}</span>\n        <span class=\"svc-sidebar__header-subtitle\">{{model.subTitle}}</span>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "svc-side-bar-property-grid-placeholder-header",
-                    templateUrl: "./property-grid-placeholder-header.component.html",
+                    selector: "svc-side-bar-header",
+                    templateUrl: "./side-bar-header.component.html",
                     styles: [":host { display: none; }"]
                 }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
-AngularComponentFactory.Instance.registerComponent("svc-side-bar-property-grid-placeholder-header", SidebarPropertyGridPlaceholderHeaderComponent);
+AngularComponentFactory.Instance.registerComponent("svc-side-bar-header", SidebarHeaderComponent);
 
 class ObjectSelectorComponent extends BaseAngular {
     getModel() {
@@ -757,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: [{
@@ -899,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: [{
@@ -1029,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: [{
@@ -1048,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: [{
@@ -1191,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=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, 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: [{
@@ -1209,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);
 
@@ -1349,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=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionDropdownDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (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: [{
@@ -1397,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() {
@@ -1411,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=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionImageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", 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: [{
@@ -1424,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 {
 }
@@ -1450,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\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.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: [{
@@ -1890,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: [{
@@ -1930,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=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n        <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n        </div>\n      </div>\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        </div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n      </svc-question-banner>\n      <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionRatingDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (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: [{
@@ -2089,6 +2144,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 AngularComponentFactory.Instance.registerComponent("textwithreset-question", QuestionTextWithResetComponent);
 AngularComponentFactory.Instance.registerComponent("commentwithreset-question", QuestionTextWithResetComponent);
 
+class BooleanSwitchComponent extends QuestionAngular {
+}
+BooleanSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanSwitchComponent, selector: "sv-ng-boolean-switch", usesInheritance: true, ngImport: i0, template: "<div class=\"spg-boolean-switch\" role=\"checkbox\" [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" (click)=\"model.value = !model.value\">\n  <div class=\"spg-boolean-switch__button\" tabindex=\"0\"\n    [class]=\"model.value ? 'spg-boolean-switch__button--checked' : ''\">\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left\"></div>\n    </div>\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right\"></div>\n    </div>\n  </div>\n  <div class=\"spg-boolean-switch__caption\">\n    <div class=\"spg-boolean-switch__title\">\n      <span [model]=\"model.locTitle\" sv-ng-string></span>\n    </div>\n  </div>\n</div>", components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-boolean-switch",
+                    templateUrl: "./boolean-switch.component.html"
+                }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("sv-boolean-switch", BooleanSwitchComponent);
+RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
+
 class JsonErrorItemComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -2134,35 +2203,39 @@ AngularComponentFactory.Instance.registerComponent("svc-translate-from-action",
 class SurveyCreatorModule {
 }
 SurveyCreatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarPropertyGridPlaceholderHeaderComponent, 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, AddQuestionTypeSelectorComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarPropertyGridPlaceholderHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent,
+        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, 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, AddQuestionTypeSelectorComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction] });
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, BooleanSwitchComponent, TranslateFromAction,
+        AddQuestionTypeSelectorComponent] });
 SurveyCreatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, providers: [], imports: [[
             CommonModule, FormsModule, SurveyModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCreatorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarPropertyGridPlaceholderHeaderComponent, 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,
-                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, AddQuestionTypeSelectorComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction],
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent,
+                        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent],
                     imports: [
                         CommonModule, FormsModule, SurveyModule
                     ],
                     exports: [
-                        CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarPropertyGridPlaceholderHeaderComponent, 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,
-                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, AddQuestionTypeSelectorComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, TranslateFromAction
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent, BooleanSwitchComponent, TranslateFromAction,
+                        AddQuestionTypeSelectorComponent
                     ],
                     providers: [],
                 }]
@@ -2172,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, 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, SidebarPageComponent, SidebarPropertyGridHeaderComponent, SidebarPropertyGridPlaceholderHeaderComponent, 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