survey-creator-angular 1.9.46

package/fesm2015/survey-creator-angular.mjs

@@ -0,0 +1,1420 @@
+import * as i0 from '@angular/core';
+import { Component, ViewChild, Input, ElementRef, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1 from 'survey-angular-ui';
+import { BaseAngular, AngularComponentFactory, SurveyContentComponent, ButtonGroupQuestionComponent, EmbeddedViewContentComponent, QuestionAngular, SurveyAngularModule } from 'survey-angular-ui';
+import { SvgRegistry, ResponsivityManager, VerticalResponsivityManager, DropdownListModel, RendererFactory } from 'survey-core';
+import { ToolboxToolViewModel, PageAdorner, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, StringEditorViewModelBase, editableStringRendererName, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
+
+class SvgBundleComponent {
+    ngOnInit() {
+        this.svgContainer.nativeElement.innerHTML = SvgRegistry.iconsRenderedHtml();
+    }
+}
+SvgBundleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SvgBundleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SvgBundleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SvgBundleComponent, selector: "svc-svg-bundle", viewQueries: [{ propertyName: "svgContainer", first: true, predicate: ["svgContainer"], descendants: true, static: true }], ngImport: i0, template: "<svg id='sv-icon-holder-global-container' #svgContainer></svg>", isInline: true, styles: [":host{display:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SvgBundleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-svg-bundle",
+                    template: "<svg id='sv-icon-holder-global-container' #svgContainer></svg>",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { svgContainer: [{
+                type: ViewChild,
+                args: ["svgContainer", { static: true }]
+            }] } });
+
+class TabbedMenuItemWrapperComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+TabbedMenuItemWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TabbedMenuItemWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabbedMenuItemWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TabbedMenuItemWrapperComponent, selector: "svc-tabbed-menu-item-wrapper", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <span class=\"svc-tabbed-menu-item-container\" [class.sv-action--hidden]=\"!model.isVisible\" [class]=\"model.css\">\n    <div class=\"sv-action__content\">\n      <ng-template [component]=\"{ name: model.component || 'svc-tabbed-menu-item', data: { model } }\"></ng-template>\n    </div>\n  </span>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TabbedMenuItemWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tabbed-menu-item-wrapper", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <span class=\"svc-tabbed-menu-item-container\" [class.sv-action--hidden]=\"!model.isVisible\" [class]=\"model.css\">\n    <div class=\"sv-action__content\">\n      <ng-template [component]=\"{ name: model.component || 'svc-tabbed-menu-item', data: { model } }\"></ng-template>\n    </div>\n  </span>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class TabbledMenuComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    ngAfterViewInit() {
+        this.responsivityManager = new ResponsivityManager(this.container.nativeElement, this.model, ".svc-tabbed-menu-item-container:not(.sv-dots)>.sv-action__content");
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.responsivityManager.dispose();
+    }
+}
+TabbledMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TabbledMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabbledMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-tabbed-menu\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">  \n      <svc-tabbed-menu-item-wrapper [model]=\"action\"></svc-tabbed-menu-item-wrapper>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: TabbedMenuItemWrapperComponent, selector: "svc-tabbed-menu-item-wrapper", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TabbledMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tabbed-menu", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-tabbed-menu\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">  \n      <svc-tabbed-menu-item-wrapper [model]=\"action\"></svc-tabbed-menu-item-wrapper>\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tabbed-menu", TabbledMenuComponent);
+
+class SidebarTabComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+SidebarTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SidebarTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SidebarTabComponent, selector: "svc-side-bar-tab", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngIf=\"model.visible\">\n    <ng-template [component]=\"{ name: model.componentName, data: { model: model.model } }\"></ng-template>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-side-bar-tab", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <ng-container *ngIf=\"model.visible\">\n    <ng-template [component]=\"{ name: model.componentName, data: { model: model.model } }\"></ng-template>\n  </ng-container>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class SidebarComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    ngOnDestroy() {
+        this.model.resetResizeManager();
+        super.ngOnDestroy();
+    }
+    ngAfterViewInit() {
+        this.model.initResizeManager(this.container.nativeElement);
+    }
+}
+SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.hasVisibleTabs\">\n    <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\"></div>\n    <div class=\"svc-flex-column svc-side-bar__wrapper\">\n      <div class=\"svc-side-bar__container\" [visible]=\"model.visible\" #container>\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        <div class=\"svc-side-bar__container-content\">\n          <ng-container *ngFor=\"let tab of model.tabs\">\n            <svc-side-bar-tab [model]=\"tab\"></svc-side-bar-tab> \n          </ng-container>\n        </div>\n        <div class=\"svc-side-bar__container-close\">\n          <div class=\"sd-btn sd-btn--action svc-side-bar__container-close-button\"\n            (click)=\"model.collapseSidebar()\"> {{ model.closeText }}</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarTabComponent, selector: "svc-side-bar-tab", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-side-bar", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-side-bar\" [class.svc-flyout-side-bar]=\"model.flyoutPanelMode\" [visible]=\"model.hasVisibleTabs\">\n    <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\"></div>\n    <div class=\"svc-flex-column svc-side-bar__wrapper\">\n      <div class=\"svc-side-bar__container\" [visible]=\"model.visible\" #container>\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        <div class=\"svc-side-bar__container-content\">\n          <ng-container *ngFor=\"let tab of model.tabs\">\n            <svc-side-bar-tab [model]=\"tab\"></svc-side-bar-tab> \n          </ng-container>\n        </div>\n        <div class=\"svc-side-bar__container-close\">\n          <div class=\"sd-btn sd-btn--action svc-side-bar__container-close-button\"\n            (click)=\"model.collapseSidebar()\"> {{ model.closeText }}</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+
+class NotifierComponent extends BaseAngular {
+    getModel() {
+        return this.notifier;
+    }
+}
+NotifierComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NotifierComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NotifierComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NotifierComponent, selector: "svc-notifier", inputs: { notifier: "notifier" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [visible]=\"notifier.active\" [class]=\"notifier.css\">\n    <span>{{notifier.message}}</span>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NotifierComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-notifier", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div [visible]=\"notifier.active\" [class]=\"notifier.css\">\n    <span>{{notifier.message}}</span>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { notifier: [{
+                type: Input
+            }] } });
+
+class CreatorComponent extends BaseAngular {
+    constructor(changeDetectorRef) {
+        super(changeDetectorRef);
+        changeDetectorRef.detach();
+    }
+    getModel() {
+        return this.model;
+    }
+    get creator() {
+        return this.model;
+    }
+    onModelChanged() {
+        this.changeDetectorRef.detectChanges();
+    }
+    ngAfterViewInit() {
+        this.creator.initKeyboardShortcuts(this.container.nativeElement);
+        this.creator.initResponsivityManager(this.container.nativeElement);
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        this.creator.removeKeyboardShortcuts(this.container.nativeElement);
+        this.creator.resetResponsivityManager();
+        super.ngOnDestroy();
+    }
+}
+CreatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CreatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CreatorComponent, selector: "svc-creator", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n  <sv-ng-modal-container></sv-ng-modal-container>\n  <div class=\"svc-creator\" [class.svc-creator--mobile]=\"creator.isMobileView\" #container>\n    <div>\n      <svc-svg-bundle></svc-svg-bundle>\n    </div>\n    <div class=\"svc-full-container svc-creator__area svc-flex-column\"\n      [class.svc-creator__area--with-banner]=\"!creator.haveCommercialLicense\">\n      <div class=\"svc-flex-row svc-full-container\"\n        [class.svc-creator__side-bar--left]=\"creator.sidebarLocation == 'left'\">\n        <div class=\"svc-flex-column svc-flex-row__element svc-flex-row__element--growing\">\n          <div class=\"svc-top-bar\">\n            <div class=\"svc-tabbed-menu-wrapper\" [visible]=\"creator.showTabs\">\n              <svc-tabbed-menu [model]=\"creator.tabbedMenu\"></svc-tabbed-menu>\n            </div>\n            <div *ngIf=\"creator.showToolbar\" class=\"svc-toolbar-wrapper\" [visible]=\"creator.showToolbar\">\n              <sv-action-bar [model]=\"creator.toolbar\"></sv-action-bar>\n            </div>\n          </div>\n          <div class=\"svc-creator__content-wrapper svc-flex-row\"\n            [class.svc-creator__content-wrapper--footer-toolbar]=\"creator.isMobileView\">\n            <div class=\"svc-creator__content-holder svc-flex-column\">\n              <ng-container *ngFor=\"let tab of creator.tabs\">\n                <div class=\"svc-creator-tab\" *ngIf=\"creator.viewType == tab.id && tab.visible\"\n                  [attr.id]=\"'scrollableDiv-' + tab.id\" [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n                  <ng-template [component]=\"{ name: tab.componentContent, data: { model: tab.data.model } }\"></ng-template>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"creator.isMobileView\" class=\"svc-footer-bar\">\n            <div class=\"svc-toolbar-wrapper\" [visible]=\"creator.isMobileView\">\n              <sv-action-bar [model]=\"creator.footerToolbar\"></sv-action-bar>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"creator.sidebar\" [class.sv-mobile-side-bar]=\"creator.isMobileView\">\n          <svc-side-bar [model]=\"creator.sidebar\"></svc-side-bar>\n        </div>\n      </div>\n      <div class=\"svc-creator__banner\" *ngIf=\"!creator.haveCommercialLicense\">\n        <span class=\"svc-creator__non-commercial-text\">\n          <a href=\"https://surveyjs.io/buy\">\n            {{creator.licenseText}}\n          </a>\n        </span>\n      </div>\n      <svc-notifier [notifier]=\"creator.notifier\"></svc-notifier>\n    </div>\n  </div>\n</ng-container>", components: [{ type: i1.ModalComponent, selector: "sv-ng-modal-container" }, { type: SvgBundleComponent, selector: "svc-svg-bundle" }, { type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: ["model"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarComponent, selector: "svc-side-bar", inputs: ["model"] }, { type: NotifierComponent, selector: "svc-notifier", inputs: ["notifier"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CreatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-creator", template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n  <sv-ng-modal-container></sv-ng-modal-container>\n  <div class=\"svc-creator\" [class.svc-creator--mobile]=\"creator.isMobileView\" #container>\n    <div>\n      <svc-svg-bundle></svc-svg-bundle>\n    </div>\n    <div class=\"svc-full-container svc-creator__area svc-flex-column\"\n      [class.svc-creator__area--with-banner]=\"!creator.haveCommercialLicense\">\n      <div class=\"svc-flex-row svc-full-container\"\n        [class.svc-creator__side-bar--left]=\"creator.sidebarLocation == 'left'\">\n        <div class=\"svc-flex-column svc-flex-row__element svc-flex-row__element--growing\">\n          <div class=\"svc-top-bar\">\n            <div class=\"svc-tabbed-menu-wrapper\" [visible]=\"creator.showTabs\">\n              <svc-tabbed-menu [model]=\"creator.tabbedMenu\"></svc-tabbed-menu>\n            </div>\n            <div *ngIf=\"creator.showToolbar\" class=\"svc-toolbar-wrapper\" [visible]=\"creator.showToolbar\">\n              <sv-action-bar [model]=\"creator.toolbar\"></sv-action-bar>\n            </div>\n          </div>\n          <div class=\"svc-creator__content-wrapper svc-flex-row\"\n            [class.svc-creator__content-wrapper--footer-toolbar]=\"creator.isMobileView\">\n            <div class=\"svc-creator__content-holder svc-flex-column\">\n              <ng-container *ngFor=\"let tab of creator.tabs\">\n                <div class=\"svc-creator-tab\" *ngIf=\"creator.viewType == tab.id && tab.visible\"\n                  [attr.id]=\"'scrollableDiv-' + tab.id\" [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n                  <ng-template [component]=\"{ name: tab.componentContent, data: { model: tab.data.model } }\"></ng-template>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"creator.isMobileView\" class=\"svc-footer-bar\">\n            <div class=\"svc-toolbar-wrapper\" [visible]=\"creator.isMobileView\">\n              <sv-action-bar [model]=\"creator.footerToolbar\"></sv-action-bar>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"creator.sidebar\" [class.sv-mobile-side-bar]=\"creator.isMobileView\">\n          <svc-side-bar [model]=\"creator.sidebar\"></svc-side-bar>\n        </div>\n      </div>\n      <div class=\"svc-creator__banner\" *ngIf=\"!creator.haveCommercialLicense\">\n        <span class=\"svc-creator__non-commercial-text\">\n          <a href=\"https://surveyjs.io/buy\">\n            {{creator.licenseText}}\n          </a>\n        </span>\n      </div>\n      <svc-notifier [notifier]=\"creator.notifier\"></svc-notifier>\n    </div>\n  </div>\n</ng-container>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container", { read: ElementRef }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("survey-widget", SurveyContentComponent);
+
+class CreatorModelComponent extends BaseAngular {
+    createHash() {
+        this.hash = {};
+        this.getPropertiesToTrack().forEach((prop) => {
+            this.hash[prop] = this[prop];
+        });
+    }
+    ngOnInit() {
+        this.createModel();
+        this.createHash();
+        super.ngOnInit();
+    }
+    ngDoCheck() {
+        if (this.needUpdateModel())
+            this.createModel();
+        super.ngDoCheck();
+    }
+    needUpdateModel() {
+        let res = false;
+        Object.keys(this.hash).forEach(key => {
+            if (this.hash[key] != this[key]) {
+                this.hash[key] = this[key];
+                res = true;
+            }
+        });
+        return res;
+    }
+}
+CreatorModelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CreatorModelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CreatorModelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CreatorModelComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CreatorModelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ""
+                }]
+        }] });
+
+class ToolboxToolComponent extends CreatorModelComponent {
+    constructor() {
+        super(...arguments);
+        this.isCompact = false;
+    }
+    createModel() {
+        this.model = new ToolboxToolViewModel(this.item, this.creator);
+    }
+    getPropertiesToTrack() {
+        return ["creator", "item"];
+    }
+    getModel() {
+        return this.item;
+    }
+}
+ToolboxToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ToolboxToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ToolboxToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: { creator: "creator", item: "item", isCompact: "isCompact" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div class=\"svc-toolbox__tool\"\n        [class.sv-action--hidden]=\"!item.isVisible\" [class]=\"item.css\" (pointerdown)=\"model.onPointerDown($event)\">\n        <div class=\"sv-action__content\">\n            <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\"></div>\n            <ng-template [component]=\"{ name: item.component || 'svc-toolbox-item', default: 'svc-toolbox-item', data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></ng-template>\n        </div>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ToolboxToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-toolbox-tool", styles: [":host { display: none; }"], template: "<ng-template #template>\n    <div class=\"svc-toolbox__tool\"\n        [class.sv-action--hidden]=\"!item.isVisible\" [class]=\"item.css\" (pointerdown)=\"model.onPointerDown($event)\">\n        <div class=\"sv-action__content\">\n            <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\"></div>\n            <ng-template [component]=\"{ name: item.component || 'svc-toolbox-item', default: 'svc-toolbox-item', data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></ng-template>\n        </div>\n    </div>\n</ng-template>" }]
+        }], propDecorators: { creator: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], isCompact: [{
+                type: Input
+            }] } });
+
+class ToolboxCategoryComponent extends BaseAngular {
+    getModel() {
+        return this.category;
+    }
+}
+ToolboxCategoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ToolboxCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ToolboxCategoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: { category: "category", toolbox: "toolbox" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-toolbox__category\" [class.svc-toolbox__category--collapsed]=\"category.collapsed\">\n    <div class=\"svc-toolbox__category-header\"\n      (click)=\"category.toggleState()\" [key2click] [class.svc-toolbox__category-header--collapsed]=\"toolbox.canCollapseCategories\">\n      <span class=\"svc-toolbox__category-title\">{{category.name}}</span>\n      <div *ngIf=\"toolbox.canCollapseCategories\" class=\"svc-toolbox__category-header__controls\">\n        <svg [iconName]=\"'icon-arrow-down'\" class=\"svc-toolbox__category-header__button svc-string-editor__button--expand\" [size]=\"24\" sv-ng-svg-icon [visible]=\"category.collapsed\"></svg>\n        <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-toolbox__category-header__button svc-string-editor__button--collapse\" [size]=\"24\" sv-ng-svg-icon [visible]=\"!category.collapsed\"></svg>\n      </div>\n    </div>\n      <ng-container *ngFor=\"let item of category.items\">\n        <svc-toolbox-tool [item]=\"item\" [creator]=\"toolbox.creator\" [isCompact]=\"false\" ></svc-toolbox-tool>\n      </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "isCompact"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ToolboxCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-toolbox-category ", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-toolbox__category\" [class.svc-toolbox__category--collapsed]=\"category.collapsed\">\n    <div class=\"svc-toolbox__category-header\"\n      (click)=\"category.toggleState()\" [key2click] [class.svc-toolbox__category-header--collapsed]=\"toolbox.canCollapseCategories\">\n      <span class=\"svc-toolbox__category-title\">{{category.name}}</span>\n      <div *ngIf=\"toolbox.canCollapseCategories\" class=\"svc-toolbox__category-header__controls\">\n        <svg [iconName]=\"'icon-arrow-down'\" class=\"svc-toolbox__category-header__button svc-string-editor__button--expand\" [size]=\"24\" sv-ng-svg-icon [visible]=\"category.collapsed\"></svg>\n        <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-toolbox__category-header__button svc-string-editor__button--collapse\" [size]=\"24\" sv-ng-svg-icon [visible]=\"!category.collapsed\"></svg>\n      </div>\n    </div>\n      <ng-container *ngFor=\"let item of category.items\">\n        <svc-toolbox-tool [item]=\"item\" [creator]=\"toolbox.creator\" [isCompact]=\"false\" ></svc-toolbox-tool>\n      </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { category: [{
+                type: Input
+            }], toolbox: [{
+                type: Input
+            }] } });
+
+class AdaptiveToolboxComponent extends BaseAngular {
+    get model() {
+        return this.creator.toolbox;
+    }
+    ngAfterViewInit() {
+        this.responsivityManager =
+            new VerticalResponsivityManager(this.container.nativeElement, this.model, ".svc-toolbox__tool:not(.sv-dots)");
+    }
+    getModel() {
+        return this.model;
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.responsivityManager) === null || _a === void 0 ? void 0 : _a.dispose();
+        super.ngOnDestroy();
+    }
+}
+AdaptiveToolboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AdaptiveToolboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AdaptiveToolboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AdaptiveToolboxComponent, selector: "svc-adaptive-toolbox", inputs: { creator: "creator" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-toolbox\" [class.svc-toolbox--compact]=\"model.isCompact\" #container>\n    <div class=\"svc-toolbox__container\">\n      <ng-container *ngIf=\"!(model.isCompact || model.categories.length == 1 || !model.showCategoryTitles)\">\n        <svc-toolbox-category *ngFor=\"let category of model.categories\" [category]=\"category\" [toolbox]=\"model\"></svc-toolbox-category>\n      </ng-container>\n      <ng-container *ngIf=\"model.isCompact || model.categories.length == 1 || !model.showCategoryTitles\">\n        <div class=\"svc-toolbox__category\">\n          <svc-toolbox-tool *ngFor=\"let item of model.renderedActions\" [creator]=\"creator\" [item]=\"item\" [isCompact]=\"model.isCompact\"></svc-toolbox-tool>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: ["category", "toolbox"] }, { type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "isCompact"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AdaptiveToolboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-adaptive-toolbox", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-toolbox\" [class.svc-toolbox--compact]=\"model.isCompact\" #container>\n    <div class=\"svc-toolbox__container\">\n      <ng-container *ngIf=\"!(model.isCompact || model.categories.length == 1 || !model.showCategoryTitles)\">\n        <svc-toolbox-category *ngFor=\"let category of model.categories\" [category]=\"category\" [toolbox]=\"model\"></svc-toolbox-category>\n      </ng-container>\n      <ng-container *ngIf=\"model.isCompact || model.categories.length == 1 || !model.showCategoryTitles\">\n        <div class=\"svc-toolbox__category\">\n          <svc-toolbox-tool *ngFor=\"let item of model.renderedActions\" [creator]=\"creator\" [item]=\"item\" [isCompact]=\"model.isCompact\"></svc-toolbox-tool>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { creator: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+
+class PageDesignerComponent extends CreatorModelComponent {
+    createModel() {
+        var _a;
+        if (this.model) {
+            (_a = this.previousModel) === null || _a === void 0 ? void 0 : _a.dispose();
+            this.adorner = new PageAdorner(this.creator, this.model);
+        }
+    }
+    getModel() {
+        return this.adorner;
+    }
+    getPropertiesToTrack() {
+        return ["creator", "model"];
+    }
+    addNewQuestion(event) {
+        event.stopPropagation();
+        this.adorner.addNewQuestion(this.adorner, event);
+    }
+    selectQuestionType(event) {
+        event.stopPropagation();
+        this.adorner.questionTypeSelectorModel.action();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.adorner.dispose();
+    }
+}
+PageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PageDesignerComponent, selector: "svc-page", inputs: { model: "model", survey: "survey", creator: "creator", isGhost: "isGhost" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)\" class=\"svc-page__content\" [class]=\"adorner.css\" [key2click]\n  (click)=\"adorner.select(adorner, $event)\" (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n  (mouseleave)=\"adorner.hover($event, $event.target)\" [id]=\"adorner.page.id\" data-bind=\"clickBubble: false\">\n  <div class=\"svc-page__content-actions\">\n    <sv-action-bar [model]=\"adorner.actionContainer\"></sv-action-bar>\n  </div>\n  <page [model]=\"model\" [survey]=\"survey\"></page>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <!-- ko with: questionTypeSelectorModel -->\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n        <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n      </button>\n    <!-- /ko -->\n  </div>\n</div>", components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PageComponent, selector: "page", inputs: ["model", "survey"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PageDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-page", styles: [], template: "<div *ngIf=\"model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)\" class=\"svc-page__content\" [class]=\"adorner.css\" [key2click]\n  (click)=\"adorner.select(adorner, $event)\" (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n  (mouseleave)=\"adorner.hover($event, $event.target)\" [id]=\"adorner.page.id\" data-bind=\"clickBubble: false\">\n  <div class=\"svc-page__content-actions\">\n    <sv-action-bar [model]=\"adorner.actionContainer\"></sv-action-bar>\n  </div>\n  <page [model]=\"model\" [survey]=\"survey\"></page>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <!-- ko with: questionTypeSelectorModel -->\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n        <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n      </button>\n    <!-- /ko -->\n  </div>\n</div>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], survey: [{
+                type: Input
+            }], creator: [{
+                type: Input
+            }], isGhost: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-page", PageDesignerComponent);
+
+class DesignerPagesComponent extends BaseAngular {
+    getModel() {
+        return this.model.pagesController;
+    }
+    get creator() {
+        return this.model.creator;
+    }
+    get survey() {
+        return this.creator.survey;
+    }
+}
+DesignerPagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DesignerPagesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DesignerPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <svc-page class=\"svc-page\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\" [attr.data-sv-drop-target-page]=\"model.pagesController.page2Display.name\" [model]=\"model.pagesController.page2Display\" [survey]=\"survey\" [creator]=\"creator\"></svc-page>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DesignerPagesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-designer-pages", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <svc-page class=\"svc-page\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\" [attr.data-sv-drop-target-page]=\"model.pagesController.page2Display.name\" [model]=\"model.pagesController.page2Display\" [survey]=\"survey\" [creator]=\"creator\"></svc-page>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class PageNavigatorItemComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    click(event) {
+        event.stopPropagation();
+        this.model.action();
+    }
+}
+PageNavigatorItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PageNavigatorItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PageNavigatorItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator-item\">\n    <div class=\"svc-page-navigator-item-content\"\n      (click)=\"click($event)\" [key2click] [class.svc-page-navigator-item--selected]=\"model.active\"  [class.svc-page-navigator-item--disabled]=\"model.disabled\">\n      <div class=\"svc-page-navigator-item__dot\" [attr.title]=\"model.title\"></div>\n  \n      <div class=\"svc-page-navigator-item__banner svc-item__banner\">\n        <span class=\"svc-text svc-text--small svc-text--bold\">{{model.title}}</span>\n        <span class=\"svc-page-navigator-item__dot\"></span>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PageNavigatorItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-page-navigator-item", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-page-navigator-item\">\n    <div class=\"svc-page-navigator-item-content\"\n      (click)=\"click($event)\" [key2click] [class.svc-page-navigator-item--selected]=\"model.active\"  [class.svc-page-navigator-item--disabled]=\"model.disabled\">\n      <div class=\"svc-page-navigator-item__dot\" [attr.title]=\"model.title\"></div>\n  \n      <div class=\"svc-page-navigator-item__banner svc-item__banner\">\n        <span class=\"svc-text svc-text--small svc-text--bold\">{{model.title}}</span>\n        <span class=\"svc-page-navigator-item__dot\"></span>\n      </div>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class PageNavigatorComponent extends CreatorModelComponent {
+    createModel() {
+        this.model = new PageNavigatorViewModel(this.pagesController, this.pageEditMode);
+    }
+    getModel() {
+        return this.model;
+    }
+    getPropertiesToTrack() {
+        return ["pagesController", "pageEditMode"];
+    }
+    ngAfterViewInit() {
+        var _a, _b;
+        if (this.pageEditMode !== "bypage") {
+            const el = this.container.nativeElement;
+            if (!!el && !!((_b = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement)) {
+                const self = this;
+                el.parentElement.parentElement.parentElement.onscroll = function (ev) {
+                    return self.model.onContainerScroll(ev.currentTarget);
+                };
+            }
+        }
+    }
+    ngOnDestroy() {
+        var _a, _b;
+        const el = this.container.nativeElement;
+        if (!!el && !!((_b = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement)) {
+            el.parentElement.parentElement.parentElement.onscroll = undefined;
+        }
+        this.model.dispose();
+        super.ngOnDestroy();
+    }
+}
+PageNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PageNavigatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PageNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container>\n    <ng-container *ngIf=\"model.visible\">\n      <div class=\"svc-page-navigator__selector\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__selector--opened]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__navigator-icon\" [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <svc-page-navigator-item *ngFor=\"let item of model.items\" [model]=\"item\"></svc-page-navigator-item>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PageNavigatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-page-navigator", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container>\n    <ng-container *ngIf=\"model.visible\">\n      <div class=\"svc-page-navigator__selector\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__selector--opened]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__navigator-icon\" [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <svc-page-navigator-item *ngFor=\"let item of model.items\" [model]=\"item\"></svc-page-navigator-item>\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { pagesController: [{
+                type: Input
+            }], pageEditMode: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+
+class DesignerSurveyComponent extends BaseAngular {
+    getModel() {
+        return this.model.survey;
+    }
+    get creator() {
+        return this.model.creator;
+    }
+    get survey() {
+        return this.creator.survey;
+    }
+}
+DesignerSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DesignerSurveyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DesignerSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getDesignerCss()\" [style.width]=\"survey.renderedWidth\" [style.maxWidth]=\"survey.renderedWidth\">\n    <div *ngIf=\"creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n      <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n    </div>\n\n    <!-- ko if: survey.isShowProgressBarOnTop -->\n    <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } -->\n    <!-- /ko -->\n    <!-- /ko -->\n    <ng-container *ngIf=\"creator.pageEditMode !== 'bypage'\">\n      <ng-container *ngFor=\"let page of survey.pages\">\n        <svc-page class=\"svc-page\" *ngIf=\"!model.showNewPage || page !== model.newPage\"\n          [attr.data-sv-drop-target-survey-element]=\"page.name\" [attr.data-sv-drop-target-page]=\"page.name\"\n          [model]=\"page\" [survey]=\"survey\" [creator]=\"creator\"></svc-page>\n      </ng-container>\n      <svc-page *ngIf=\"model.showNewPage && model.newPage\" class=\"svc-page\"\n        [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\" [model]=\"model.newPage\" [survey]=\"survey\"\n        [creator]=\"creator\" [isGhost]=\"true\"></svc-page>\n    </ng-container>\n    <ng-container *ngIf=\"model.pagesController.page2Display && creator.pageEditMode === 'bypage'\">\n      <svc-designer-pages [model]=\"model\"></svc-designer-pages>\n    </ng-container>\n    \n    <!-- ko if: survey.isShowProgressBarOnBottom -->\n    <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } -->\n    <!-- /ko -->\n    <!-- /ko -->\n  </div>\n\n  <div *ngIf=\"creator.showPageNavigator\" class=\"svc-tab-designer__page-navigator\">\n    <svc-page-navigator [pagesController]=\"model.pagesController\" [pageEditMode]=\"creator.pageEditMode\">\n    </svc-page-navigator>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }, { type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: ["model"] }, { type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: ["pagesController", "pageEditMode"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DesignerSurveyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-designer-survey", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div [class]=\"model.getDesignerCss()\" [style.width]=\"survey.renderedWidth\" [style.maxWidth]=\"survey.renderedWidth\">\n    <div *ngIf=\"creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n      <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n    </div>\n\n    <!-- ko if: survey.isShowProgressBarOnTop -->\n    <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } -->\n    <!-- /ko -->\n    <!-- /ko -->\n    <ng-container *ngIf=\"creator.pageEditMode !== 'bypage'\">\n      <ng-container *ngFor=\"let page of survey.pages\">\n        <svc-page class=\"svc-page\" *ngIf=\"!model.showNewPage || page !== model.newPage\"\n          [attr.data-sv-drop-target-survey-element]=\"page.name\" [attr.data-sv-drop-target-page]=\"page.name\"\n          [model]=\"page\" [survey]=\"survey\" [creator]=\"creator\"></svc-page>\n      </ng-container>\n      <svc-page *ngIf=\"model.showNewPage && model.newPage\" class=\"svc-page\"\n        [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\" [model]=\"model.newPage\" [survey]=\"survey\"\n        [creator]=\"creator\" [isGhost]=\"true\"></svc-page>\n    </ng-container>\n    <ng-container *ngIf=\"model.pagesController.page2Display && creator.pageEditMode === 'bypage'\">\n      <svc-designer-pages [model]=\"model\"></svc-designer-pages>\n    </ng-container>\n    \n    <!-- ko if: survey.isShowProgressBarOnBottom -->\n    <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } -->\n    <!-- /ko -->\n    <!-- /ko -->\n  </div>\n\n  <div *ngIf=\"creator.showPageNavigator\" class=\"svc-tab-designer__page-navigator\">\n    <svc-page-navigator [pagesController]=\"model.pagesController\" [pageEditMode]=\"creator.pageEditMode\">\n    </svc-page-navigator>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class DesignerTabComponent extends BaseAngular {
+    get survey() {
+        return this.creator.survey;
+    }
+    get creator() {
+        return this.model.creator;
+    }
+    getModel() {
+        return this.model;
+    }
+}
+DesignerTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DesignerTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DesignerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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}\n"], 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DesignerTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tab-designer", styles: [":host { display: none; }"], 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>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-designer", DesignerTabComponent);
+
+class TabbedMenuItemComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+TabbedMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TabbedMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabbedMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TabbedMenuItemComponent, selector: "svc-tabbed-menu-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div\n    class=\"svc-tabbed-menu-item\"\n    [class.svc-tabbed-menu-item--selected]=\"model.active\"\n    [class.svc-tabbed-menu-item--disabled]=\"model.disabled\"\n    (click)=\"model.action()\" [key2click]\n  >\n    <span\n      class=\"svc-text svc-text--normal svc-tabbed-menu-item__text\"\n      [class.svc-text--bold]=\"model.active\"\n    >\n    {{model.title}}\n  </span>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TabbedMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tabbed-menu-item", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div\n    class=\"svc-tabbed-menu-item\"\n    [class.svc-tabbed-menu-item--selected]=\"model.active\"\n    [class.svc-tabbed-menu-item--disabled]=\"model.disabled\"\n    (click)=\"model.action()\" [key2click]\n  >\n    <span\n      class=\"svc-text svc-text--normal svc-tabbed-menu-item__text\"\n      [class.svc-text--bold]=\"model.active\"\n    >\n    {{model.title}}\n  </span>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tabbed-menu-item", TabbedMenuItemComponent);
+
+class ObjectSelectorComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+ObjectSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ObjectSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ObjectSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ObjectSelectorComponent, selector: "svc-object-selector", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div class=\"svc-object-selector\" *ngIf=\"model.isVisible\">\n        <sv-ng-list [model]=\"model.list\"></sv-ng-list>\n    </div>\n</ng-template>\n", styles: [":host{display:none}\n"], components: [{ type: i1.ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ObjectSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-object-selector", styles: [":host { display: none; }"], template: "<ng-template #template>\n    <div class=\"svc-object-selector\" *ngIf=\"model.isVisible\">\n        <sv-ng-list [model]=\"model.list\"></sv-ng-list>\n    </div>\n</ng-template>\n" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-object-selector", ObjectSelectorComponent);
+
+class PropertyGridComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+PropertyGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PropertyGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PropertyGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PropertyGridComponent, selector: "svc-property-grid", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <survey-content [model]=\"model.survey\"></survey-content>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PropertyGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-property-grid", styles: [":host { display: none; }"], template: "<ng-template #template>\n    <survey-content [model]=\"model.survey\"></survey-content>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("buttongroup-question", ButtonGroupQuestionComponent);
+AngularComponentFactory.Instance.registerComponent("svc-property-grid", PropertyGridComponent);
+
+class TextareaJsonEditorComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    ngOnInit() {
+        this.model.canShowErrors = false;
+        super.ngOnInit();
+    }
+}
+TextareaJsonEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextareaJsonEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TextareaJsonEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TextareaJsonEditorComponent, selector: "svc-tab-json-editor-textarea", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content\">\n    <div class=\"svc-json-editor-tab__content\">\n      <textarea class=\"svc-json-editor-tab__content-area\"\n        [attr.aria-label]=\"model.ariaLabel\"\n        [disabled]=\"model.readOnly\"\n        [(ngModel)]=\"model.text\"\n        (keydown)=\"model.checkKey(model, $event)\">\n      </textarea>\n      <button type=\"button\" *ngIf=\"model.userFriendlyErrors.length !== 0\" class=\"svc-json-editor-tab__errros_button\"\n        (click)=\"model.toggleErrors()\">{{model.errorButtonText}}</button>\n      <ng-container *ngIf=\"model.canShowErrors\">\n        <div class=\"svc-json-editor-tab__content-errors\" *ngFor=\"let error of model.userFriendlyErrors\">\n          <span><b>Error:</b></span>\n          <span>{{error}}</span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextareaJsonEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tab-json-editor-textarea", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content\">\n    <div class=\"svc-json-editor-tab__content\">\n      <textarea class=\"svc-json-editor-tab__content-area\"\n        [attr.aria-label]=\"model.ariaLabel\"\n        [disabled]=\"model.readOnly\"\n        [(ngModel)]=\"model.text\"\n        (keydown)=\"model.checkKey(model, $event)\">\n      </textarea>\n      <button type=\"button\" *ngIf=\"model.userFriendlyErrors.length !== 0\" class=\"svc-json-editor-tab__errros_button\"\n        (click)=\"model.toggleErrors()\">{{model.errorButtonText}}</button>\n      <ng-container *ngIf=\"model.canShowErrors\">\n        <div class=\"svc-json-editor-tab__content-errors\" *ngFor=\"let error of model.userFriendlyErrors\">\n          <span><b>Error:</b></span>\n          <span>{{error}}</span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-json-editor-textarea", TextareaJsonEditorComponent);
+
+class AceJsonEditorComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    ngAfterViewInit() {
+        //todo fix ts 
+        this.model.init(window.ace.edit(this.inputEl.nativeElement));
+    }
+}
+AceJsonEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AceJsonEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AceJsonEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AceJsonEditorComponent, selector: "svc-tab-json-editor-ace", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div class=\"svc-creator-tab__content\">\n        <div class=\"svc-json-editor-tab__content\">\n            <div class=\"svc-json-editor-tab__ace-editor\" #inputEl></div>\n        </div>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AceJsonEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tab-json-editor-ace", styles: [":host { display: none; }"], template: "<ng-template #template>\n    <div class=\"svc-creator-tab__content\">\n        <div class=\"svc-json-editor-tab__content\">\n            <div class=\"svc-json-editor-tab__ace-editor\" #inputEl></div>\n        </div>\n    </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], inputEl: [{
+                type: ViewChild,
+                args: ["inputEl"]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-json-editor-ace", AceJsonEditorComponent);
+
+class LogicAddButtonComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    onClick(event) {
+        event.stopPropagation();
+        this.model.action();
+    }
+}
+LogicAddButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LogicAddButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LogicAddButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: LogicAddButtonComponent, selector: "svc-tab-logic-add-btn", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"button\" class=\"svc-logic-tab__content-action svc-btn\"\n        (click)=\"onClick($event)\" [key2click] [class.svc-logic-tab__content-action--disabled]=\"model.enabled !== undefined && !model.enabled\">\n        <span class=\"svc-text svc-text--normal svc-text--bold\">\n          {{model.title}}\n        </span>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LogicAddButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tab-logic-add-btn", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div role=\"button\" class=\"svc-logic-tab__content-action svc-btn\"\n        (click)=\"onClick($event)\" [key2click] [class.svc-logic-tab__content-action--disabled]=\"model.enabled !== undefined && !model.enabled\">\n        <span class=\"svc-text svc-text--normal svc-text--bold\">\n          {{model.title}}\n        </span>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class LogicTabComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+LogicTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LogicTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LogicTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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}\n"], 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LogicTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tab-logic", styles: [":host { display: none; }"], 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>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-logic", LogicTabComponent);
+
+class ActionButtonComponent extends EmbeddedViewContentComponent {
+    constructor() {
+        super(...arguments);
+        this.classes = "";
+        this.selected = false;
+        this.disabled = false;
+        this.text = "";
+        this.title = "";
+        this.allowBubble = false;
+    }
+    onClick(event) {
+        this.click();
+        if (!this.allowBubble) {
+            event.stopPropagation();
+        }
+    }
+}
+ActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionButtonComponent, selector: "svc-action-button", inputs: { classes: "classes", click: "click", selected: "selected", disabled: "disabled", text: "text", title: "title", allowBubble: "allowBubble" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <span *ngIf=\"disabled\" class=\"svc-action-button svc-action-button--disabled\"\n    [class]=\"classes\" [attr.title]=\"title\">{{text}}</span>\n  <span *ngIf=\"!disabled\" role=\"button\" class=\"svc-action-button\"\n    (click)=\"onClick($event)\" [key2click] [attr.title]=\"title\" [class.svc-action-button--selected]=\"selected\" [class]=\"classes\">{{text}}</span>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-action-button", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <span *ngIf=\"disabled\" class=\"svc-action-button svc-action-button--disabled\"\n    [class]=\"classes\" [attr.title]=\"title\">{{text}}</span>\n  <span *ngIf=\"!disabled\" role=\"button\" class=\"svc-action-button\"\n    (click)=\"onClick($event)\" [key2click] [attr.title]=\"title\" [class.svc-action-button--selected]=\"selected\" [class]=\"classes\">{{text}}</span>\n</ng-template>" }]
+        }], propDecorators: { classes: [{
+                type: Input
+            }], click: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], allowBubble: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-action-button", ActionButtonComponent);
+
+class LinkValueQuestionComponent extends QuestionAngular {
+    get clearCaption() {
+        return editorLocalization.getString("pe.clear");
+    }
+}
+LinkValueQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LinkValueQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LinkValueQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: LinkValueQuestionComponent, selector: "svc-link-value", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <svc-action-button [text]=\"model.linkValueText\" [click]=\"model.doLinkClick.bind(model)\" [selected]=\"model.isSelected\"  [disabled]=\"model.isReadOnly\" [classes]=\"model.linkSetButtonCssClasses\" [title]=\"model.tooltip\">\n  </svc-action-button>\n  <ng-container *ngIf=\"!model.isReadOnly && model.showClear\">\n    <svc-action-button\n      [text]=\"clearCaption\" [click]=\"model.doClearClick.bind(model)\" [selected]=\"model.isSelected\" [disabled]=\"false\" [classes]=\"model.linkClearButtonCssClasses\">\n    </svc-action-button>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "allowBubble"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LinkValueQuestionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-link-value", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <svc-action-button [text]=\"model.linkValueText\" [click]=\"model.doLinkClick.bind(model)\" [selected]=\"model.isSelected\"  [disabled]=\"model.isReadOnly\" [classes]=\"model.linkSetButtonCssClasses\" [title]=\"model.tooltip\">\n  </svc-action-button>\n  <ng-container *ngIf=\"!model.isReadOnly && model.showClear\">\n    <svc-action-button\n      [text]=\"clearCaption\" [click]=\"model.doClearClick.bind(model)\" [selected]=\"model.isSelected\" [disabled]=\"false\" [classes]=\"model.linkClearButtonCssClasses\">\n    </svc-action-button>\n  </ng-container>\n</ng-template>" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("linkvalue-question", LinkValueQuestionComponent);
+
+class EmbeddedSurveyQuestionComponent extends QuestionAngular {
+    get survey() {
+        return this.model.embeddedSurvey;
+    }
+    onModelChanged() {
+        super.onModelChanged();
+        if (!!this.model) {
+            this.model.onEmbeddedSurveyValueChanged = () => {
+                this.detectChanges();
+            };
+        }
+    }
+}
+EmbeddedSurveyQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: EmbeddedSurveyQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+EmbeddedSurveyQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: EmbeddedSurveyQuestionComponent, selector: "svc-embeddedsurvey-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngIf=\"!!model && !!survey && survey.currentPage\">\n    <page [model]=\"survey.currentPage\" [survey]=\"survey\"></page>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.PageComponent, selector: "page", inputs: ["model", "survey"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: EmbeddedSurveyQuestionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-embeddedsurvey-question", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <ng-container *ngIf=\"!!model && !!survey && survey.currentPage\">\n    <page [model]=\"survey.currentPage\" [survey]=\"survey\"></page>\n  </ng-container>\n</ng-template>" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("embeddedsurvey-question", EmbeddedSurveyQuestionComponent);
+
+class TranslationTabComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+TranslationTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TranslationTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TranslationTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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}\n"], components: [{ 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: "13.0.3", ngImport: i0, type: TranslationTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tab-translation", styles: [":host { display: none; }"], 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>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-translation", TranslationTabComponent);
+
+class TranslationSkeletonComponent {
+}
+TranslationSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TranslationSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TranslationSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TranslationSkeletonComponent, selector: "sd-translation-line-skeleton", ngImport: i0, template: "<ng-template #template>\n  <div class=\"sd-translation-line-skeleton\"></div>\n</ng-template>", styles: [":host{display:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TranslationSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sd-translation-line-skeleton", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"sd-translation-line-skeleton\"></div>\n</ng-template>" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("sd-translation-line-skeleton", TranslationSkeletonComponent);
+
+class SimulatorComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    get simulatorFrame() {
+        return this.model.simulatorFrame;
+    }
+    activateZoom() {
+        if (this.model.device !== "desktop") {
+            this.model.activateZoom();
+        }
+    }
+    deactivateZoom() {
+        if (this.model.device !== "desktop") {
+            this.model.deactivateZoom();
+        }
+    }
+}
+SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SimulatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SimulatorComponent, selector: "survey-simulator", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"'svd-simulator-main ' + model.simulatorMainCssClass + (model.device === 'desktop' ? ' svd-simulator-main--desktop' : '')\" (keydown)=\"model.tryToZoom($event, $event)\" (mouseover)=\"activateZoom()\" (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\" [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator-frame\" [style.width]=\"simulatorFrame.landscapedFrameWidth + 'px'\" [style.height]=\"simulatorFrame.landscapedFrameHeight + 'px'\" [class]=\"simulatorFrame.cssClass\"></div>\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\" [style.height]=\"simulatorFrame.deviceHeight + 'px'\" [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\">\n          <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!model.hasFrame\" class=\"svd-simulator-content\">\n      <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SimulatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "survey-simulator", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div [class]=\"'svd-simulator-main ' + model.simulatorMainCssClass + (model.device === 'desktop' ? ' svd-simulator-main--desktop' : '')\" (keydown)=\"model.tryToZoom($event, $event)\" (mouseover)=\"activateZoom()\" (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\" [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator-frame\" [style.width]=\"simulatorFrame.landscapedFrameWidth + 'px'\" [style.height]=\"simulatorFrame.landscapedFrameHeight + 'px'\" [class]=\"simulatorFrame.cssClass\"></div>\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\" [style.height]=\"simulatorFrame.deviceHeight + 'px'\" [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\">\n          <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!model.hasFrame\" class=\"svd-simulator-content\">\n      <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class TestAgainActionComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+TestAgainActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TestAgainActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TestAgainActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TestAgainActionComponent, selector: "survey-test-again", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"button\" class=\"svc-preview__test-again svc-btn\" (click)=\"model.action()\" [key2click]>\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{model.title}}\n    </span>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TestAgainActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "survey-test-again", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div role=\"button\" class=\"svc-preview__test-again svc-btn\" (click)=\"model.action()\" [key2click]>\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{model.title}}\n    </span>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class SurveyResultsTableRowComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+SurveyResultsTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyResultsTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SurveyResultsTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyResultsTableRowComponent, selector: "survey-results-table-row", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <tr (click)=\"model.toggle()\" [key2click]>\n    <td class=\"svd-dark-border-color\"\n        [style.paddingLeft]=\"model.textMargin \">\n        <span *ngIf=\"model.isNode\" class=\"svd-test-results__marker\"\n              [class.svd-test-results__marker--expanded]=\"!model.collapsed\"\n                         [style.left]=\"model.markerMargin\">\n            <svg [iconName]=\"'icon-expand_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </span>\n        <span >{{model.title}}</span></td>\n    <td [class.svd-test-results__node-value]=\"model.isNode\" [class.svd-dark-border-color]=\"!model.isNode\">\n      {{model.getString(model.displayValue)}}\n    </td>\n  </tr>\n  <ng-container *ngIf=\"model.isNode && !model.collapsed\">\n    <ng-container *ngFor=\"let row of model.data\">\n      <survey-results-table-row [model]=\"row\"></survey-results-table-row>\n    </ng-container>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyResultsTableRowComponent, selector: "survey-results-table-row", inputs: ["model"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyResultsTableRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "survey-results-table-row", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <tr (click)=\"model.toggle()\" [key2click]>\n    <td class=\"svd-dark-border-color\"\n        [style.paddingLeft]=\"model.textMargin \">\n        <span *ngIf=\"model.isNode\" class=\"svd-test-results__marker\"\n              [class.svd-test-results__marker--expanded]=\"!model.collapsed\"\n                         [style.left]=\"model.markerMargin\">\n            <svg [iconName]=\"'icon-expand_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </span>\n        <span >{{model.title}}</span></td>\n    <td [class.svd-test-results__node-value]=\"model.isNode\" [class.svd-dark-border-color]=\"!model.isNode\">\n      {{model.getString(model.displayValue)}}\n    </td>\n  </tr>\n  <ng-container *ngIf=\"model.isNode && !model.collapsed\">\n    <ng-container *ngFor=\"let row of model.data\">\n      <survey-results-table-row [model]=\"row\"></survey-results-table-row>\n    </ng-container>\n  </ng-container>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class SurveyResultsComponent extends CreatorModelComponent {
+    createModel() {
+        if (!!this.survey) {
+            this.model = new SurveyResultsModel(this.survey);
+        }
+    }
+    getModel() {
+        return this.model;
+    }
+    getPropertiesToTrack() {
+        return ["survey"];
+    }
+}
+SurveyResultsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyResultsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SurveyResultsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyResultsComponent, selector: "survey-results", inputs: { survey: "survey" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n<div class=\"svd-test-results\">\n  <div class=\"svd-test-results__header\">\n      <div class=\"svd-test-results__header-text\">{{model.surveyResultsText}}</div>\n      <div class=\"svd-test-results__header-types\">\n        <svc-action-button [text]=\"model.getLocString('ed.surveyResultsTable')\" [click]=\"model.selectTableClick\" [disabled]=\"false\" [selected]=\"model.isTableSelected\"></svc-action-button>\n        <svc-action-button [text]=\"model.getLocString('ed.surveyResultsJson')\" [click]=\"model.selectJsonClick\" [disabled]=\"false\" [selected]=\"model.isJsonSelected\"></svc-action-button>\n      </div>\n  </div>\n  <div class=\"svd-test-results__text svd-light-bg-color\" [visible]=\"model.resultViewType === 'text'\">\n      <div>{{model.resultText}}</div>\n  </div>\n  <div class=\"svd-test-results__table svd-light-bg-color\" [visible]=\"model.resultViewType === 'table'\">\n      <table>\n          <thead>\n              <tr class=\"svd-light-background-color\">\n                  <th class=\"svd-dark-border-color\">{{model.resultsTitle}}</th>\n                  <th class=\"svd-dark-border-color\">{{model.resultsDisplayValue}}</th>\n              </tr>\n          </thead>\n          <tbody>\n            <ng-container *ngFor=\"let row of model.resultData\">\n              <survey-results-table-row [model]=\"row\"></survey-results-table-row>\n            </ng-container>\n          </tbody>\n      </table>\n  </div>\n</div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "allowBubble"] }, { type: SurveyResultsTableRowComponent, selector: "survey-results-table-row", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyResultsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "survey-results", styles: [":host { display: none; }"], template: "<ng-template #template>\n<div class=\"svd-test-results\">\n  <div class=\"svd-test-results__header\">\n      <div class=\"svd-test-results__header-text\">{{model.surveyResultsText}}</div>\n      <div class=\"svd-test-results__header-types\">\n        <svc-action-button [text]=\"model.getLocString('ed.surveyResultsTable')\" [click]=\"model.selectTableClick\" [disabled]=\"false\" [selected]=\"model.isTableSelected\"></svc-action-button>\n        <svc-action-button [text]=\"model.getLocString('ed.surveyResultsJson')\" [click]=\"model.selectJsonClick\" [disabled]=\"false\" [selected]=\"model.isJsonSelected\"></svc-action-button>\n      </div>\n  </div>\n  <div class=\"svd-test-results__text svd-light-bg-color\" [visible]=\"model.resultViewType === 'text'\">\n      <div>{{model.resultText}}</div>\n  </div>\n  <div class=\"svd-test-results__table svd-light-bg-color\" [visible]=\"model.resultViewType === 'table'\">\n      <table>\n          <thead>\n              <tr class=\"svd-light-background-color\">\n                  <th class=\"svd-dark-border-color\">{{model.resultsTitle}}</th>\n                  <th class=\"svd-dark-border-color\">{{model.resultsDisplayValue}}</th>\n              </tr>\n          </thead>\n          <tbody>\n            <ng-container *ngFor=\"let row of model.resultData\">\n              <survey-results-table-row [model]=\"row\"></survey-results-table-row>\n            </ng-container>\n          </tbody>\n      </table>\n  </div>\n</div>\n</ng-template>" }]
+        }], propDecorators: { survey: [{
+                type: Input
+            }] } });
+
+class TestTabComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+TestTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TestTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TestTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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\" [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <div class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"!model.isRunning\">\n        <survey-test-again [model]=\"model.testAgainAction\"></survey-test-again>\n        <survey-results [survey]=\"model.survey\"></survey-results>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.isPageToolbarVisible\" class=\"svc-plugin-tab__content-actions svc-test-tab__content-actions\">\n      <sv-action-bar [model]=\"model.pages\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SimulatorComponent, selector: "survey-simulator", inputs: ["model"] }, { type: TestAgainActionComponent, selector: "survey-test-again", inputs: ["model"] }, { type: SurveyResultsComponent, selector: "survey-results", inputs: ["survey"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TestTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-tab-test", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-test-tab__content\" [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <div class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"!model.isRunning\">\n        <survey-test-again [model]=\"model.testAgainAction\"></survey-test-again>\n        <survey-results [survey]=\"model.survey\"></survey-results>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.isPageToolbarVisible\" class=\"svc-plugin-tab__content-actions svc-test-tab__content-actions\">\n      <sv-action-bar [model]=\"model.pages\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-tab-test", TestTabComponent);
+
+class QuestionDesignerComponent extends CreatorModelComponent {
+    constructor() {
+        super(...arguments);
+        this.adornerComponent = "";
+    }
+    get creator() {
+        return this.componentData.data;
+    }
+    get model() {
+        return this.componentData.model;
+    }
+    createModel() {
+        if (this.componentData) {
+            this.adorner = new QuestionAdornerViewModel(this.creator, this.model, null);
+        }
+    }
+    getPropertiesToTrack() {
+        return ["model", "creator"];
+    }
+    getModel() {
+        return this.adorner;
+    }
+    selectQuestionType(event) {
+        event.stopPropagation();
+        this.adorner.questionTypeSelectorModel.action(this.adorner.questionTypeSelectorModel, event);
+    }
+    addNewQuestion(event) {
+        event.stopPropagation();
+        this.adorner.addNewQuestion();
+    }
+}
+QuestionDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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    (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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: 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: "13.0.3", ngImport: i0, type: QuestionDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-question", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { componentName: [{
+                type: Input
+            }], componentData: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-question", QuestionDesignerComponent);
+
+class ItemValueDesignerComponent extends CreatorModelComponent {
+    get creator() {
+        return this.componentData.data.creator;
+    }
+    get question() {
+        return this.componentData.question;
+    }
+    get item() {
+        return this.componentData.model;
+    }
+    createModel() {
+        if (this.componentData) {
+            this.adorner = new ItemValueWrapperViewModel(this.creator, this.question, this.item);
+        }
+    }
+    getPropertiesToTrack() {
+        return ["creator", "question", "item"];
+    }
+    getModel() {
+        return this.adorner;
+    }
+}
+ItemValueDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ItemValueDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ItemValueDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ItemValueDesignerComponent, selector: "svc-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-item-value-wrapper\" (pointerdown)=\"adorner.onPointerDown($event)\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? item.value : null\"\n    [ngClass]=\"{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}\">\n    <div class=\"svc-item-value__ghost\"></div>\n    <div class=\"svc-item-value-controls\">\n      <span *ngIf=\"adorner.isDraggable\" class=\"svc-item-value-controls__button svc-item-value-controls__drag\">\n        <svg class=\"svc-item-value-controls__drag-icon\" [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\"\n          [attr.title]=\"adorner.dragTooltip\" [attr.aria-label]=\"adorner.dragTooltip\" sv-ng-svg-icon></svg>\n      </span>\n      <svg *ngIf=\"adorner.allowAdd\" class=\"svc-item-value-controls__button svc-item-value-controls__add\" [key2click]\n        (click)=\"adorner.add(adorner)\" [iconName]=\"'icon-add_16x16'\" [size]=\"16\" [attr.title]=\"undefined\"\n        [attr.aria-label]=\"undefined\" sv-ng-svg-icon></svg>\n      <svg *ngIf=\"adorner.allowRemove\" class=\"svc-item-value-controls__button svc-item-value-controls__remove\"\n        [key2click] (click)=\"adorner.remove(adorner)\" [iconName]=\"'icon-remove_16x16'\" [size]=\"16\"\n        [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\" sv-ng-svg-icon></svg>\n    </div>\n\n    <div class=\"svc-item-value__item\" (click)=\"adorner.select(adorner, $event)\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ItemValueDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-item-value", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-item-value-wrapper\" (pointerdown)=\"adorner.onPointerDown($event)\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? item.value : null\"\n    [ngClass]=\"{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}\">\n    <div class=\"svc-item-value__ghost\"></div>\n    <div class=\"svc-item-value-controls\">\n      <span *ngIf=\"adorner.isDraggable\" class=\"svc-item-value-controls__button svc-item-value-controls__drag\">\n        <svg class=\"svc-item-value-controls__drag-icon\" [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\"\n          [attr.title]=\"adorner.dragTooltip\" [attr.aria-label]=\"adorner.dragTooltip\" sv-ng-svg-icon></svg>\n      </span>\n      <svg *ngIf=\"adorner.allowAdd\" class=\"svc-item-value-controls__button svc-item-value-controls__add\" [key2click]\n        (click)=\"adorner.add(adorner)\" [iconName]=\"'icon-add_16x16'\" [size]=\"16\" [attr.title]=\"undefined\"\n        [attr.aria-label]=\"undefined\" sv-ng-svg-icon></svg>\n      <svg *ngIf=\"adorner.allowRemove\" class=\"svc-item-value-controls__button svc-item-value-controls__remove\"\n        [key2click] (click)=\"adorner.remove(adorner)\" [iconName]=\"'icon-remove_16x16'\" [size]=\"16\"\n        [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\" sv-ng-svg-icon></svg>\n    </div>\n\n    <div class=\"svc-item-value__item\" (click)=\"adorner.select(adorner, $event)\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { componentName: [{
+                type: Input
+            }], componentData: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-item-value", ItemValueDesignerComponent);
+
+class ImageItemValueDesignerComponent extends CreatorModelComponent {
+    get creator() {
+        return this.componentData.data.creator;
+    }
+    get question() {
+        return this.componentData.question;
+    }
+    get item() {
+        return this.componentData.model;
+    }
+    createModel() {
+        if (this.componentData) {
+            this.adorner = new ImageItemValueWrapperViewModel(this.creator, this.question, this.item, null, null);
+        }
+    }
+    getPropertiesToTrack() {
+        return ["creator", "question", "item"];
+    }
+    getModel() {
+        return this.adorner;
+    }
+    get showDragDropGhostOnTop() {
+        return this.adorner.ghostPosition === "top";
+    }
+    get showDragDropGhostOnBottom() {
+        return this.adorner.ghostPosition === "bottom";
+    }
+    blockEvent(event) {
+        event.stopPropagation();
+    }
+    getNewItemStyle() {
+        const needStyle = !this.adorner.getIsNewItemSingle();
+        return { width: needStyle ? this.question.renderedImageWidth : undefined, height: needStyle ? this.question.renderedImageHeight : undefined };
+    }
+    ngAfterViewInit() {
+        this.adorner.itemsRoot = this.container.nativeElement;
+    }
+}
+ImageItemValueDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ImageItemValueDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ImageItemValueDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ImageItemValueDesignerComponent, selector: "svc-image-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div (pointerdown)=\"adorner.onPointerDown($event)\" [class]=\"adorner.getRootCss()\" [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container>\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__drag-area-indicator\" (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </span>\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <ng-container *ngIf=\"adorner.allowRemove\">\n            <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__choose-file\" (click)=\"adorner.chooseFile(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__remove\" (click)=\"adorner.remove(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-delete'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew\">\n        <div class=\"svc-image-item-value__item\"\n          data-bind=\"event: { dragover: dragover, drop: drop, dragleave: dragleave }\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\"></div>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <span  class=\"svc-image-item-value-controls__button svc-image-item-value-controls__add\" [key2click] (click)=\"adorner.chooseNewFile(adorner)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg *ngIf=\"adorner.allowAdd\" [iconName]=\"'icon-add-lg'\" [size]=\"24\" sv-ng-svg-icon></svg>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ImageItemValueDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-image-item-value", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div (pointerdown)=\"adorner.onPointerDown($event)\" [class]=\"adorner.getRootCss()\" [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container>\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__drag-area-indicator\" (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </span>\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <ng-container *ngIf=\"adorner.allowRemove\">\n            <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__choose-file\" (click)=\"adorner.chooseFile(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__remove\" (click)=\"adorner.remove(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-delete'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew\">\n        <div class=\"svc-image-item-value__item\"\n          data-bind=\"event: { dragover: dragover, drop: drop, dragleave: dragleave }\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\"></div>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <span  class=\"svc-image-item-value-controls__button svc-image-item-value-controls__add\" [key2click] (click)=\"adorner.chooseNewFile(adorner)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg *ngIf=\"adorner.allowAdd\" [iconName]=\"'icon-add-lg'\" [size]=\"24\" sv-ng-svg-icon></svg>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { componentName: [{
+                type: Input
+            }], componentData: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container", { read: ElementRef }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-image-item-value", ImageItemValueDesignerComponent);
+
+class QuestionDropdownDesignerComponent extends QuestionDesignerComponent {
+    constructor() {
+        super(...arguments);
+        this.adornerComponent = "svc-dropdown-question-adorner";
+    }
+    createModel() {
+        if (this.componentData) {
+            this.adorner = new QuestionDropdownAdornerViewModel(this.creator, this.model, null);
+        }
+    }
+}
+QuestionDropdownDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionDropdownDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionDropdownDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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    (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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: 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: "13.0.3", ngImport: i0, type: QuestionDropdownDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-dropdown-question", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("svc-dropdown-question", QuestionDropdownDesignerComponent);
+class QuestionDropdownAdornerDesignerComponent extends EmbeddedViewContentComponent {
+    getItemValueComponentName(item) {
+        return this.question.getItemValueWrapperComponentName(item) || "sv-ng-selectbase-item";
+    }
+    getItemValueComponentData(item) {
+        return {
+            componentName: "sv-ng-selectbase-item",
+            componentData: {
+                question: this.question,
+                model: item,
+                inputType: "radio",
+                data: this.question.getItemValueWrapperComponentData(item)
+            }
+        };
+    }
+}
+QuestionDropdownAdornerDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionDropdownAdornerDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionDropdownAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QuestionDropdownAdornerDesignerComponent, selector: "svc-dropdown-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__dropdown-choices--wrapper\">\n    <div class=\"svc-question__dropdown-choices\">\n      <div *ngFor=\"let item of adorner.getRenderedItems()\" [class]=\"adorner.getChoiceCss()\"\n        data-bind=\"css: $parent.getChoiceCss()\">\n        <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\">\n        </ng-template>\n      </div>\n    </div>\n    <svc-action-button *ngIf=\"adorner.needToCollapse\" [text]=\"adorner.getButtonText()\"\n      [click]=\"adorner.switchCollapse.bind(adorner)\" [allowBubble]=\"true\"> \n    </svc-action-button>\n    <!-- ko if: needToCollapse -->\n    <!-- <svc-action-button params=\"text: getButtonText(), click: switchCollapse, allowBubble: true\">\n    </svc-action-button> -->\n    <!-- /ko -->\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "allowBubble"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionDropdownAdornerDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-dropdown-question-adorner", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-question__dropdown-choices--wrapper\">\n    <div class=\"svc-question__dropdown-choices\">\n      <div *ngFor=\"let item of adorner.getRenderedItems()\" [class]=\"adorner.getChoiceCss()\"\n        data-bind=\"css: $parent.getChoiceCss()\">\n        <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\">\n        </ng-template>\n      </div>\n    </div>\n    <svc-action-button *ngIf=\"adorner.needToCollapse\" [text]=\"adorner.getButtonText()\"\n      [click]=\"adorner.switchCollapse.bind(adorner)\" [allowBubble]=\"true\"> \n    </svc-action-button>\n    <!-- ko if: needToCollapse -->\n    <!-- <svc-action-button params=\"text: getButtonText(), click: switchCollapse, allowBubble: true\">\n    </svc-action-button> -->\n    <!-- /ko -->\n  </div>\n</ng-template>" }]
+        }], propDecorators: { adorner: [{
+                type: Input
+            }], question: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-dropdown-question-adorner", QuestionDropdownAdornerDesignerComponent);
+
+class QuestionImageDesignerComponent extends QuestionDesignerComponent {
+    constructor() {
+        super(...arguments);
+        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);
+        }
+    }
+    ngAfterViewInit() {
+        this.adorner.questionRoot = this.container.nativeElement;
+    }
+}
+QuestionImageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionImageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionImageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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    (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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: 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: "13.0.3", ngImport: i0, type: QuestionImageDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-image-question", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ["container", { read: ElementRef }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-image-question", QuestionImageDesignerComponent);
+class QuestionImageAdornerDesignerComponent extends EmbeddedViewContentComponent {
+}
+QuestionImageAdornerDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionImageAdornerDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionImageAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QuestionImageAdornerDesignerComponent, selector: "svc-image-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-image-question-controls\">\n    <ng-container *ngIf=\"adorner.allowEdit\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n      <span class=\"svc-image-question-controls__button\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n        <svg  [iconName]=\"'icon-file'\" [size]=\"24\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n      </span>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionImageAdornerDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-image-question-adorner", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-image-question-controls\">\n    <ng-container *ngIf=\"adorner.allowEdit\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n      <span class=\"svc-image-question-controls__button\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n        <svg  [iconName]=\"'icon-file'\" [size]=\"24\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n      </span>\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { adorner: [{
+                type: Input
+            }], question: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-image-question-adorner", QuestionImageAdornerDesignerComponent);
+
+class PanelDesignerComponent extends QuestionDesignerComponent {
+}
+PanelDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PanelDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: 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: "13.0.3", ngImport: i0, type: PanelDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-panel", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("svc-panel", PanelDesignerComponent);
+
+class ToolboxItemComponent extends BaseAngular {
+    constructor() {
+        super(...arguments);
+        this.isCompact = false;
+    }
+    getModel() {
+        return this.viewModel;
+    }
+    get item() {
+        return this.model;
+    }
+    get ariaLabel() {
+        return this.item.tooltip + " " + editorLocalization.getString("toolbox") + " item";
+    }
+}
+ToolboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ToolboxItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ToolboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ToolboxItemComponent, selector: "svc-toolbox-item", inputs: { creator: "creator", model: "model", isCompact: "isCompact", viewModel: "viewModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-toolbox__item\" role=\"button\" [attr.aria-label]=\"ariaLabel\"\n    [class]=\"'svc-toolbox__item--' + item.iconName\" (click)=\"viewModel.click($event)\" [key2click]>\n    <span class=\"svc-toolbox__item-container\">\n      <svg [iconName]=\"item.iconName\" [size]=\"24\" [title]=\"ariaLabel\" sv-ng-svg-icon></svg>\n    </span>\n    <span *ngIf=\"isCompact\" class=\"svc-toolbox__item-banner svc-item__banner\">\n      <svg [iconName]=\"item.iconName\" [size]=\"24\" [title]=\"ariaLabel\" class=\"svc-toolbox__item-icon\" sv-ng-svg-icon></svg>\n      <span class=\"svc-toolbox__item-title\">{{item.title}}</span>\n    </span>\n    <span *ngIf=\"!isCompact\" class=\"svc-toolbox__item-title\">\n      {{item.title}}\n    </span>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ToolboxItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-toolbox-item", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-toolbox__item\" role=\"button\" [attr.aria-label]=\"ariaLabel\"\n    [class]=\"'svc-toolbox__item--' + item.iconName\" (click)=\"viewModel.click($event)\" [key2click]>\n    <span class=\"svc-toolbox__item-container\">\n      <svg [iconName]=\"item.iconName\" [size]=\"24\" [title]=\"ariaLabel\" sv-ng-svg-icon></svg>\n    </span>\n    <span *ngIf=\"isCompact\" class=\"svc-toolbox__item-banner svc-item__banner\">\n      <svg [iconName]=\"item.iconName\" [size]=\"24\" [title]=\"ariaLabel\" class=\"svc-toolbox__item-icon\" sv-ng-svg-icon></svg>\n      <span class=\"svc-toolbox__item-title\">{{item.title}}</span>\n    </span>\n    <span *ngIf=\"!isCompact\" class=\"svc-toolbox__item-title\">\n      {{item.title}}\n    </span>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { creator: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], isCompact: [{
+                type: Input
+            }], viewModel: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-toolbox-item", ToolboxItemComponent);
+
+class StringEditorComponent extends CreatorModelComponent {
+    constructor(cdr, vcr, ngZone) {
+        super(cdr, vcr);
+        this.ngZone = ngZone;
+        this.justFocused = false;
+        this.onChangeHandler = () => {
+            this.detectChanges();
+        };
+    }
+    createModel() {
+        this.baseModel = new StringEditorViewModelBase(this.locString, this.creator);
+        this.baseModel.blurEditor = () => {
+            this.container.nativeElement.blur();
+            this.container.nativeElement.spellcheck = false;
+        };
+    }
+    get locString() {
+        return this.model.locStr;
+    }
+    get creator() {
+        return this.model.creator;
+    }
+    getModel() {
+        return this.baseModel;
+    }
+    getPropertiesToTrack() {
+        return ["creator", "locString"];
+    }
+    get placeholder() {
+        return this.baseModel.placeholder;
+    }
+    get contentEditable() {
+        return this.baseModel.contentEditable;
+    }
+    get className() {
+        return this.baseModel.className(this.locString.renderedHtml);
+    }
+    get errorText() {
+        return this.baseModel.errorText;
+    }
+    get editValue() {
+        return this.baseModel.focused && this.baseModel.editAsText && this.locString.text || this.locString.renderedHtml;
+    }
+    onBlur(event) {
+        this.container.nativeElement.spellcheck = false;
+        this.locString.__isEditing = false;
+        this.justFocused = false;
+        this.baseModel.onBlur(event);
+        return this.baseModel.errorText;
+    }
+    onFocus(event) {
+        this.baseModel.onFocus(event);
+        this.justFocused = true;
+    }
+    done(event) {
+        this.baseModel.done(event);
+        this.locString.__isEditing = false;
+    }
+    edit(event) {
+        this.container.nativeElement.focus();
+        this.locString.__isEditing = true;
+        this.baseModel.onClick(event);
+    }
+    ngOnInit() {
+        var _a;
+        super.ngOnInit();
+        if (this.locString.__isEditing) {
+            this.container.nativeElement.focus();
+        }
+        (_a = this.locString) === null || _a === void 0 ? void 0 : _a.onStringChanged.add(this.onChangeHandler);
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.locString) === null || _a === void 0 ? void 0 : _a.onStringChanged.remove(this.onChangeHandler);
+        super.ngOnDestroy();
+    }
+    ngAfterViewInit() {
+        this.baseModel.getEditorElement = () => this.container.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => this.baseModel.afterRender());
+        });
+    }
+}
+StringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringEditorComponent, selector: "svc-string-edtior", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <span [class]=\"className\">\n    <span class=\"svc-string-editor__content\">\n        <div class=\"svc-string-editor__border\">\n          <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-string-editor__button svc-string-editor__button--edit\" [size]=\"24\" sv-ng-svg-icon \n            (click)=\"edit($event)\" [iconName]=\"'icon-edit'\" [size]=\"16\"></svg>\n        </div>\n        <span role=\"textbox\" *ngIf=\"!locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n            (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"  (onInput)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerText]=\"editValue\" #container></span>\n        <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n        (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n        (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"editValue\" #container></span>\n    </span>\n    <span *ngIf=\"errorText\" class=\"svc-string-editor__error\">{{errorText}}</span>\n  </span>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-string-edtior", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <span [class]=\"className\">\n    <span class=\"svc-string-editor__content\">\n        <div class=\"svc-string-editor__border\">\n          <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-string-editor__button svc-string-editor__button--edit\" [size]=\"24\" sv-ng-svg-icon \n            (click)=\"edit($event)\" [iconName]=\"'icon-edit'\" [size]=\"16\"></svg>\n        </div>\n        <span role=\"textbox\" *ngIf=\"!locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n            (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"  (onInput)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerText]=\"editValue\" #container></span>\n        <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n        (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n        (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"editValue\" #container></span>\n    </span>\n    <span *ngIf=\"errorText\" class=\"svc-string-editor__error\">{{errorText}}</span>\n  </span>\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }]; }, propDecorators: { model: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+AngularComponentFactory.Instance.registerComponent(editableStringRendererName, StringEditorComponent);
+
+class LogicOperatorComponent extends QuestionAngular {
+    get dropdownModel() {
+        return this.dropdownListModel;
+    }
+    click(event) {
+        var _a;
+        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onClick(event);
+    }
+    clear(event) {
+        var _a;
+        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onClear(event);
+    }
+    keyup(event) {
+        var _a;
+        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.keyHandler(event);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.dropdownListModel = this.model.dropdownListModel || new DropdownListModel(this.model);
+    }
+}
+LogicOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LogicOperatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LogicOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: LogicOperatorComponent, selector: "svc-logic-operator", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <ng-container *ngIf=\"!model.isReadOnly\">\n      <div [class]=\"model.getControlClass()\"  (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n        [attr.id]=\"model.inputId\" \n        [attr.required]=\"model.isRequired\" \n        [attr.tabindex]= \"model.isInputReadOnly ? undefined : 0\"\n        [attr.disabled]=\"model.isInputReadOnly\"\n        [attr.role]=\"model.ariaRole\"\n        [attr.aria-required]=\"model.ariaRequired\" \n        [attr.aria-label]=\"model.ariaLabel\" \n        [attr.aria-invalid]=\"model.ariaInvalid\" \n        [attr.aria-describedby]= \"model.ariaDescribedBy\" \n      >\n        <div [class]=\"model.cssClasses.controlValue\">\n          <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n          <div>{{model.readOnlyText}}</div>\n        </div>\n        <div *ngIf=\"model.allowClear && model.cssClasses.cleanButtonIconId\" [class]=\"model.cssClasses.cleanButton\" (click)=\"clear\" [visible]=\"!model.isEmpty()\">\n          <svg [class]=\"model.cssClasses.cleanButtonSvg\" [iconName]=\"model.cssClasses.cleanButtonIconId\" [size]=\"'auto'\" [title]=\"model.cleanCaption\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </ng-container>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n      <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n      <div>{{model.readOnlyText}}</div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], 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.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LogicOperatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-logic-operator", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <ng-container *ngIf=\"!model.isReadOnly\">\n      <div [class]=\"model.getControlClass()\"  (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n        [attr.id]=\"model.inputId\" \n        [attr.required]=\"model.isRequired\" \n        [attr.tabindex]= \"model.isInputReadOnly ? undefined : 0\"\n        [attr.disabled]=\"model.isInputReadOnly\"\n        [attr.role]=\"model.ariaRole\"\n        [attr.aria-required]=\"model.ariaRequired\" \n        [attr.aria-label]=\"model.ariaLabel\" \n        [attr.aria-invalid]=\"model.ariaInvalid\" \n        [attr.aria-describedby]= \"model.ariaDescribedBy\" \n      >\n        <div [class]=\"model.cssClasses.controlValue\">\n          <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n          <div>{{model.readOnlyText}}</div>\n        </div>\n        <div *ngIf=\"model.allowClear && model.cssClasses.cleanButtonIconId\" [class]=\"model.cssClasses.cleanButton\" (click)=\"clear\" [visible]=\"!model.isEmpty()\">\n          <svg [class]=\"model.cssClasses.cleanButtonSvg\" [iconName]=\"model.cssClasses.cleanButtonIconId\" [size]=\"'auto'\" [title]=\"model.cleanCaption\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </ng-container>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n      <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n      <div>{{model.readOnlyText}}</div>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("sv-logic-operator", LogicOperatorComponent);
+RendererFactory.Instance.registerRenderer("dropdown", "logicoperator", "sv-logic-operator");
+
+class MatrixCellComponent extends CreatorModelComponent {
+    get creator() {
+        return this.componentData.creator;
+    }
+    get question() {
+        return this.componentData.question;
+    }
+    get column() {
+        return this.componentData.column;
+    }
+    get row() {
+        return this.componentData.row;
+    }
+    createModel() {
+        if (this.componentData) {
+            this.adorner = new MatrixCellWrapperViewModel(this.creator, null, this.question, this.row, this.column);
+        }
+    }
+    getPropertiesToTrack() {
+        return ["creator", "row", "column", "question"];
+    }
+    getModel() {
+        return this.adorner;
+    }
+}
+MatrixCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MatrixCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixCellComponent, selector: "svc-matrix-cell", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-matrix-cell\" (click)=\"adorner.selectContext(adorner, $event)\" (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\">\n    <div class=\"svc-matrix-cell--selected\" [class.svc-visible]=\"adorner.isSelected\"></div>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n    <div *ngIf=\"question\" class=\"svc-matrix-cell__question-controls\">\n      <span class=\"svc-matrix-cell__question-controls-button\" (click)=\"adorner.editQuestion(adorner)\" [key2click]>\n        <svg [iconName]=\"'icon-edit'\" [size]=\"24\" [size]=\"24\" sv-ng-svg-icon></svg>\n      </span>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-matrix-cell", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-matrix-cell\" (click)=\"adorner.selectContext(adorner, $event)\" (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\">\n    <div class=\"svc-matrix-cell--selected\" [class.svc-visible]=\"adorner.isSelected\"></div>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n    <div *ngIf=\"question\" class=\"svc-matrix-cell__question-controls\">\n      <span class=\"svc-matrix-cell__question-controls-button\" (click)=\"adorner.editQuestion(adorner)\" [key2click]>\n        <svg [iconName]=\"'icon-edit'\" [size]=\"24\" [size]=\"24\" sv-ng-svg-icon></svg>\n      </span>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { componentName: [{
+                type: Input
+            }], componentData: [{
+                type: Input
+            }], contentTempl: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-matrix-cell", MatrixCellComponent);
+
+class QuestionEditorComponent extends EmbeddedViewContentComponent {
+    get question() {
+        return this.survey.getAllQuestions()[0];
+    }
+    get elementComponentName() {
+        return this.question.isPanel ? "panel" : "question";
+    }
+    get componentName() {
+        const survey = this.survey;
+        if (!!survey) {
+            const name = survey.getElementWrapperComponentName(this.question);
+            if (!!name) {
+                return name;
+            }
+        }
+        return this.elementComponentName;
+    }
+    get componentData() {
+        const survey = this.survey;
+        let data;
+        if (!!survey) {
+            data = survey.getElementWrapperComponentData(this.question);
+        }
+        return {
+            componentName: this.elementComponentName,
+            componentData: {
+                model: this.question,
+                data: data
+            }
+        };
+    }
+}
+QuestionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QuestionEditorComponent, selector: "svc-question-editor-content", inputs: { survey: "survey" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n</ng-template>", directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-question-editor-content", template: "<ng-template #template>\n  <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n</ng-template>" }]
+        }], propDecorators: { survey: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-question-editor-content", QuestionEditorComponent);
+
+class CellQuestionComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    get model() {
+        return this.componentData.model;
+    }
+}
+CellQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CellQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CellQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CellQuestionComponent, selector: "svc-cell-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__adorner\">\n    <div class=\"svc-question__content svc-question__content--selected-no-border\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CellQuestionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-cell-question", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-question__adorner\">\n    <div class=\"svc-question__content svc-question__content--selected-no-border\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { componentName: [{
+                type: Input
+            }], componentData: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-cell-question", CellQuestionComponent);
+
+class CellQuestionDropdownComponent extends CellQuestionComponent {
+    getItemValueComponentName(item) {
+        return this.model.getItemValueWrapperComponentName(item) || "sv-ng-selectbase-item";
+    }
+    getItemValueComponentData(item) {
+        return {
+            componentName: "sv-ng-selectbase-item",
+            componentData: {
+                question: this.model,
+                model: item,
+                inputType: "radio",
+                data: this.model.getItemValueWrapperComponentData(item)
+            }
+        };
+    }
+}
+CellQuestionDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CellQuestionDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CellQuestionDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CellQuestionDropdownComponent, selector: "svc-cell-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-question__adorner\">\n    <div class=\"svc-question__content svc-question__content--selected-no-border\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div class=\"svc-question__dropdown-choices\">\n          <div *ngFor=\"let item of model.visibleChoices\"class=\"svc-question__dropdown-choice\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </div>\n    </div>\n\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CellQuestionDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-cell-dropdown-question", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-question__adorner\">\n    <div class=\"svc-question__content svc-question__content--selected-no-border\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div class=\"svc-question__dropdown-choices\">\n          <div *ngFor=\"let item of model.visibleChoices\"class=\"svc-question__dropdown-choice\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </div>\n    </div>\n\n    </div>\n  </div>\n</ng-template>" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("svc-cell-dropdown-question", CellQuestionDropdownComponent);
+
+class CreatorRowComponent extends CreatorModelComponent {
+    get row() {
+        return this.componentData.row;
+    }
+    get creator() {
+        return this.componentData.creator;
+    }
+    getModel() {
+        return this.model;
+    }
+    createModel() {
+        this.model = new RowViewModel(this.creator, this.row, undefined);
+    }
+    getPropertiesToTrack() {
+        return ["creator", "row"];
+    }
+}
+CreatorRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CreatorRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CreatorRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CreatorRowComponent, selector: "svc-row", inputs: { componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses\">\n    <sv-ng-row [row]=\"row\"></sv-ng-row>\n  </div>\n</ng-template>", components: [{ type: i1.RowComponent, selector: "sv-ng-row", inputs: ["row"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CreatorRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-row", template: "<ng-template #template>\n  <div [class]=\"model.cssClasses\">\n    <sv-ng-row [row]=\"row\"></sv-ng-row>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { componentData: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-row", CreatorRowComponent);
+
+class QuestionWidgetDesignerComponent extends QuestionDesignerComponent {
+    createModel() {
+        if (this.componentData) {
+            this.adorner = new QuestionAdornerViewModel(this.creator, this.model, null);
+        }
+    }
+}
+QuestionWidgetDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionWidgetDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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 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}\n"], 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: "13.0.3", ngImport: i0, type: QuestionWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-widget-question", styles: [":host { display: none; }"], 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 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>" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("svc-widget-question", QuestionWidgetDesignerComponent);
+
+class ToolboxComponent extends BaseAngular {
+    get toolbox() {
+        return this.model.toolbox;
+    }
+    getModel() {
+        return this.toolbox;
+    }
+}
+ToolboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ToolboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ToolboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ToolboxComponent, selector: "svc-toolbox", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-toolbox\">\n    <div class=\"svc-toolbox__container\">\n      <ng-container *ngIf=\"!(toolbox.categories.length == 1 || !toolbox.showCategoryTitles)\">\n        <svc-toolbox-category *ngFor=\"let category of toolbox.categories\" [category]=\"category\" [toolbox]=\"toolbox\"></svc-toolbox-category>\n      </ng-container>\n      <ng-container *ngIf=\"toolbox.categories.length == 1 || !toolbox.showCategoryTitles\">\n        <div class=\"svc-toolbox__category\">\n          <svc-toolbox-tool *ngFor=\"let item of toolbox.visibleActions\" [creator]=\"model\" [item]=\"item\" [isCompact]=\"toolbox.isCompact\"></svc-toolbox-tool>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: ["category", "toolbox"] }, { type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "isCompact"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ToolboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-toolbox", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-toolbox\">\n    <div class=\"svc-toolbox__container\">\n      <ng-container *ngIf=\"!(toolbox.categories.length == 1 || !toolbox.showCategoryTitles)\">\n        <svc-toolbox-category *ngFor=\"let category of toolbox.categories\" [category]=\"category\" [toolbox]=\"toolbox\"></svc-toolbox-category>\n      </ng-container>\n      <ng-container *ngIf=\"toolbox.categories.length == 1 || !toolbox.showCategoryTitles\">\n        <div class=\"svc-toolbox__category\">\n          <svc-toolbox-tool *ngFor=\"let item of toolbox.visibleActions\" [creator]=\"model\" [item]=\"item\" [isCompact]=\"toolbox.isCompact\"></svc-toolbox-tool>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-toolbox", ToolboxComponent);
+
+class QuestionRatingDesignerComponent extends QuestionDesignerComponent {
+    constructor() {
+        super(...arguments);
+        this.adornerComponent = "";
+    }
+}
+QuestionRatingDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionRatingDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionRatingDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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    (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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: 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: "13.0.3", ngImport: i0, type: QuestionRatingDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-rating-question", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [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\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\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 *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }] });
+AngularComponentFactory.Instance.registerComponent("svc-rating-question", QuestionRatingDesignerComponent);
+class QuestionRatingAdornerDesignerComponent extends CreatorModelComponent {
+    createModel() {
+        if (this.componentData) {
+            this.adorner = new QuestionRatingAdornerViewModel(this.componentData.data, this.componentData.model, null);
+        }
+    }
+    getPropertiesToTrack() {
+        return ["model", "creator"];
+    }
+    getModel() {
+        return this.adorner;
+    }
+}
+QuestionRatingAdornerDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionRatingAdornerDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+QuestionRatingAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QuestionRatingAdornerDesignerComponent, selector: "svc-rating-question-content", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-rating-question-content\">\n    <div class=\"svc-rating-question-controls svc-item-value-controls\">\n      <svg *ngIf=\"adorner.allowRemove\" [iconName]=\"'icon-remove_16x16'\" [size]=\"16\" [key2click] (click)=\"adorner.removeItem(adorner)\"\n      class=\"svc-item-value-controls__button svc-item-value-controls__remove\" [attr.title]=\"adorner.removeTooltip\" [attr.aria-label]=\"adorner.removeTooltip\" sv-ng-svg-icon></svg>\n      <svg *ngIf=\"adorner.allowAdd\" [iconName]=\"'icon-add_16x16'\" [size]=\"16\" [key2click] (click)=\"adorner.addItem(adorner)\"\n      class=\"svc-item-value-controls__button svc-item-value-controls__add\" [attr.title]=\"adorner.addTooltip\" [attr.aria-label]=\"adorner.addTooltip\"sv-ng-svg-icon></svg>\n    </div>\n    <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionRatingAdornerDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-rating-question-content", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-rating-question-content\">\n    <div class=\"svc-rating-question-controls svc-item-value-controls\">\n      <svg *ngIf=\"adorner.allowRemove\" [iconName]=\"'icon-remove_16x16'\" [size]=\"16\" [key2click] (click)=\"adorner.removeItem(adorner)\"\n      class=\"svc-item-value-controls__button svc-item-value-controls__remove\" [attr.title]=\"adorner.removeTooltip\" [attr.aria-label]=\"adorner.removeTooltip\" sv-ng-svg-icon></svg>\n      <svg *ngIf=\"adorner.allowAdd\" [iconName]=\"'icon-add_16x16'\" [size]=\"16\" [key2click] (click)=\"adorner.addItem(adorner)\"\n      class=\"svc-item-value-controls__button svc-item-value-controls__add\" [attr.title]=\"adorner.addTooltip\" [attr.aria-label]=\"adorner.addTooltip\"sv-ng-svg-icon></svg>\n    </div>\n    <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { componentName: [{
+                type: Input
+            }], componentData: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-rating-question-content", QuestionRatingAdornerDesignerComponent);
+
+class CreatorLogoImageComponent extends CreatorModelComponent {
+    createModel() {
+        this.model = new LogoImageViewModel(this.creator, null);
+    }
+    getModel() {
+        return this.model;
+    }
+    getPropertiesToTrack() {
+        return ["data"];
+    }
+    get creator() {
+        return this.data;
+    }
+    get survey() {
+        return this.creator.survey;
+    }
+    ngAfterViewInit() {
+        this.model.root = this.container.nativeElement;
+    }
+}
+CreatorLogoImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CreatorLogoImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CreatorLogoImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CreatorLogoImageComponent, selector: "svc-logo-image", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-logo-image\" #container>\n    <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n    <ng-container *ngIf=\"!survey.locLogo.renderedHtml\">\n      <ng-container *ngIf=\"model.allowEdit\">\n        <div class=\"svc-logo-image-placeholder\" (click)=\"model.chooseFile(model)\" [key2click]>\n          <svg>\n            <use xlink:href=\"#icon-logo\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml\">\n      <div [class]=\"model.containerCss\" (click)=\"model.chooseFile(model)\" [key2click]>\n        <sv-logo-image [data]=\"survey\"></sv-logo-image>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CreatorLogoImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "svc-logo-image", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div class=\"svc-logo-image\" #container>\n    <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n    <ng-container *ngIf=\"!survey.locLogo.renderedHtml\">\n      <ng-container *ngIf=\"model.allowEdit\">\n        <div class=\"svc-logo-image-placeholder\" (click)=\"model.chooseFile(model)\" [key2click]>\n          <svg>\n            <use xlink:href=\"#icon-logo\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml\">\n      <div [class]=\"model.containerCss\" (click)=\"model.chooseFile(model)\" [key2click]>\n        <sv-logo-image [data]=\"survey\"></sv-logo-image>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container", { read: ElementRef }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-logo-image", CreatorLogoImageComponent);
+
+class SurveyCreatorAngularModule {
+}
+SurveyCreatorAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyCreatorAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SurveyCreatorAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyCreatorAngularModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+        AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
+        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
+        ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, NotifierComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
+        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent], imports: [CommonModule, FormsModule, SurveyAngularModule], exports: [CreatorComponent] });
+SurveyCreatorAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyCreatorAngularModule, providers: [], imports: [[
+            CommonModule, FormsModule, SurveyAngularModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyCreatorAngularModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+                        AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
+                        QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
+                        ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, NotifierComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
+                        QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent],
+                    imports: [
+                        CommonModule, FormsModule, SurveyAngularModule
+                    ],
+                    exports: [
+                        CreatorComponent
+                    ],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CreatorComponent, SurveyCreatorAngularModule };
+//# sourceMappingURL=survey-creator-angular.mjs.map