survey-creator-angular 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -563,7 +563,7 @@
       return TabbedMenuItemWrapperComponent;
   }(i1.BaseAngular));
   TabbedMenuItemWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabbedMenuItemWrapperComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TabbedMenuItemWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbedMenuItemWrapperComponent, selector: "svc-tabbed-menu-item-wrapper", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <span class=\"svc-tabbed-menu-item-container\" [class.sv-action--hidden]=\"!model.isVisible\" [class]=\"model.css\"\n    #container>\n    <div class=\"sv-action__content\">\n      <ng-template [component]=\"{ name: model.component || 'svc-tabbed-menu-item', data: { model } }\"></ng-template>\n    </div>\n  </span>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  TabbedMenuItemWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbedMenuItemWrapperComponent, selector: "svc-tabbed-menu-item-wrapper", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <span class=\"svc-tabbed-menu-item-container\" [class.svc-tabbed-menu-item-container--hidden]=\"!model.isVisible\" [class]=\"model.css\"\n    #container>\n    <div class=\"svc-tabbed-menu-item-container__content\">\n      <ng-template [component]=\"{ name: model.component || 'svc-tabbed-menu-item', data: { model } }\"></ng-template>\n    </div>\n  </span>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabbedMenuItemWrapperComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -965,10 +965,8 @@
           return ["pagesController", "pageEditMode"];
       };
       PageNavigatorComponent.prototype.ngAfterViewInit = function () {
-          if (this.pageEditMode !== "bypage") {
-              var el = this.container.nativeElement;
-              this.model.attachToUI(el);
-          }
+          var el = this.container.nativeElement;
+          this.model.attachToUI(el);
       };
       PageNavigatorComponent.prototype.ngOnDestroy = function () {
           _super.prototype.ngOnDestroy.call(this);
@@ -979,7 +977,7 @@
       return PageNavigatorComponent;
   }(CreatorModelComponent));
   PageNavigatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageNavigatorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PageNavigatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div>\n        <div role=\"button\" class=\"svc-page-navigator__selector svc-page-navigator__button\"\n            (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__button--pressed]=\"model.isPopupOpened\">\n            <svg class=\"svc-page-navigator__button-icon\" [iconName]=\"model.icon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  PageNavigatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div>\n         <ng-template [component]=\"{ name: 'sv-action-bar-item-dropdown', data: { model: model.selectorAction } }\"></ng-template>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageNavigatorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1142,7 +1140,7 @@
       return TabButtonComponent;
   }(i1.BaseAngular));
   TabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabButtonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabButtonComponent, selector: "svc-tab-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"model.visible\" class=\"svc-menu-action\">\n    <div [class]=\"model.buttonClassName\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\"\n      [attr.title]=\"model.tooltip\" (click)=\"model.action()\">\n      <div class=\"svc-menu-action__icon\">\n        <div class=\"svc-menu-action__icon-container\">\n          <svg [iconName]=\"model.iconName\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  TabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabButtonComponent, selector: "svc-tab-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"model.visible\" class=\"svc-sidebar-tabs__item\">\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabButtonComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1215,7 +1213,7 @@
       return SidebarPropertyGridHeaderComponent;
   }(i1.BaseAngular));
   SidebarPropertyGridHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SidebarPropertyGridHeaderComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SidebarPropertyGridHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPropertyGridHeaderComponent, selector: "svc-side-bar-property-grid-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-sidebar__header svc-sidebar__header--tabbed\">\n    <div class=\"svc-sidebar__header-container svc-sidebar__header-container--with-subtitle\">\n      <div class=\"svc-sidebar__header-content\">\n        <div [class]=\"model.buttonClassName\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\">\n          <div class=\"svc-sidebar__header-caption\">\n            <span class=\"svc-sidebar__header-title\">{{model.title}}</span>\n            <span class=\"svc-sidebar__header-subtitle\">{{model.tooltip}}</span>\n          </div>\n        </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  SidebarPropertyGridHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPropertyGridHeaderComponent, selector: "svc-side-bar-property-grid-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-sidebar__header svc-sidebar__header--tabbed\">\n    <div class=\"svc-sidebar__header-container svc-sidebar__header-container--with-subtitle\">\n      <div class=\"svc-sidebar__header-content\">\n        <div [class]=\"model.getActionBarItemCss() + ' svc-sidebar__header-object-selector'\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\">\n          <div class=\"svc-sidebar__header-caption\">\n            <span class=\"svc-sidebar__header-title\">{{model.title}}</span>\n            <span class=\"svc-sidebar__header-subtitle\">{{model.tooltip}}</span>\n          </div>\n        </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SidebarPropertyGridHeaderComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1281,7 +1279,7 @@
       return ComponentContainerComponent;
   }(i1.EmbeddedViewContentComponent));
   ComponentContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentContainerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ComponentContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentContainerComponent, selector: "svc-component-container", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.cssClass\" >\n    <ng-template *ngFor=\"let element of model.elements\" [component]=\"{ name: element.componentName, data: element.componentData }\"></ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ComponentContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentContainerComponent, selector: "svc-component-container", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-template #elementsTemplate>\n    <ng-template *ngFor=\"let element of model.elements\"\n      [component]=\"{ name: element.componentName, data: element.componentData }\"></ng-template>\n  </ng-template>\n\n  <ng-container *ngIf=\"model.wrapped; else unwrappedTemplate\">\n    <div [class]=\"model.cssClass\">\n      <sv-scroll *ngIf=\"model.scrollable; else wrappedPlainTemplate\">\n        <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n      </sv-scroll>\n      <ng-template #wrappedPlainTemplate>\n        <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-template #unwrappedTemplate>\n    <sv-scroll *ngIf=\"model.scrollable; else unwrappedPlainTemplate\">\n      <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n    </sv-scroll>\n    <ng-template #unwrappedPlainTemplate>\n      <ng-container *ngTemplateOutlet=\"elementsTemplate\"></ng-container>\n    </ng-template>\n  </ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentContainerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1294,6 +1292,48 @@
               }] } });
   i1.AngularComponentFactory.Instance.registerComponent("svc-component-container", ComponentContainerComponent);
 
+  var IconItemComponent = /** @class */ (function (_super) {
+      __extends(IconItemComponent, _super);
+      function IconItemComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return IconItemComponent;
+  }(i1.EmbeddedViewContentComponent));
+  IconItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: IconItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  IconItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IconItemComponent, selector: "svc-icon-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n<div *ngIf=\"model\" class=\"svc-icon-item\">\n  <svg [iconName]=\"model.value\" class=\"svc-icon-item__icon\" size=\"auto\" sv-ng-svg-icon></svg>\n  <span class=\"svc-icon-item__text\">{{ model.title }}</span>\n</div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: IconItemComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-icon-item",
+                      templateUrl: "./icon-item.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("svc-presets-icon-item", IconItemComponent);
+
+  var SideBarLaunchCardComponent = /** @class */ (function (_super) {
+      __extends(SideBarLaunchCardComponent, _super);
+      function SideBarLaunchCardComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return SideBarLaunchCardComponent;
+  }(i1.EmbeddedViewContentComponent));
+  SideBarLaunchCardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SideBarLaunchCardComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  SideBarLaunchCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SideBarLaunchCardComponent, selector: "svc-side-bar-launch-card", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n<div *ngIf=\"model\" class=\"spg-launch\">\n  <button class=\"spg-launch__card\" (click)=\"model.onClick()\">\n    <div class=\"spg-launch__container\">\n      <div class=\"spg-launch__text\">{{model.title}}</div>\n      <div class=\"spg-launch__text2\">{{model.description}}</div>\n    </div>\n    <div class=\"spg-launch__icon\">\n      <div class=\"spg-launch__chevron-right-16-x-16\">\n        <div class=\"spg-launch__icon2\">\n          <svg size=\"auto\" iconName=\"chevrondown-24x24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n    </div>\n  </button>\n</div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SideBarLaunchCardComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-side-bar-launch-card",
+                      templateUrl: "./side-bar-launch-card.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("svc-side-bar-launch-card", SideBarLaunchCardComponent);
+
   var ObjectSelectorComponent = /** @class */ (function (_super) {
       __extends(ObjectSelectorComponent, _super);
       function ObjectSelectorComponent() {
@@ -1435,33 +1475,6 @@
               }] } });
   i1.AngularComponentFactory.Instance.registerComponent("svc-tab-json-editor-ace", AceJsonEditorComponent);
 
-  var LogicAddButtonComponent = /** @class */ (function (_super) {
-      __extends(LogicAddButtonComponent, _super);
-      function LogicAddButtonComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      LogicAddButtonComponent.prototype.getModel = function () {
-          return this.model;
-      };
-      LogicAddButtonComponent.prototype.onClick = function (event) {
-          event.stopPropagation();
-          this.model.action();
-      };
-      return LogicAddButtonComponent;
-  }(i1.BaseAngular));
-  LogicAddButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogicAddButtonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  LogicAddButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicAddButtonComponent, selector: "svc-tab-logic-add-btn", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"button\" class=\"svc-logic-tab__content-action svc-btn\"\n        (click)=\"onClick($event)\" [key2click] [class.svc-logic-tab__content-action--disabled]=\"model.enabled !== undefined && !model.enabled\">\n        <span class=\"svc-btn__text\">\n          {{model.title}}\n        </span>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogicAddButtonComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "svc-tab-logic-add-btn",
-                      templateUrl: "./logic-add-btn.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { model: [{
-                  type: i0.Input
-              }] } });
-
   var LogicTabComponent = /** @class */ (function (_super) {
       __extends(LogicTabComponent, _super);
       function LogicTabComponent() {
@@ -1473,7 +1486,7 @@
       return LogicTabComponent;
   }(i1.BaseAngular));
   LogicTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogicTabComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  LogicTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicTabComponent, selector: "svc-tab-logic", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content\">\n    <div class=\"svc-plugin-tab__content svc-logic-tab__content\" [class.svc-logic-tab--empty]=\"!model.hasItems\">\n      <ng-container *ngIf=\"model.hasItems\">\n        <survey-content [model]=\"model.itemsSurvey\"></survey-content>\n        <ng-container *ngIf=\"!model.readOnly\">\n          <svc-tab-logic-add-btn [model]=\"model.addNewButton\"></svc-tab-logic-add-btn>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!model.hasItems\">\n        <div class=\"svc-logic-tab__content-empty\">\n          <svc-surface-placeholder [name]=\"'logic'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n            [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n          </svc-surface-placeholder>\n          <ng-container *ngIf=\"!model.readOnly\">\n            <svc-tab-logic-add-btn [model]=\"model.addNewButton\"></svc-tab-logic-add-btn>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }, { type: LogicAddButtonComponent, selector: "svc-tab-logic-add-btn", inputs: ["model"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  LogicTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicTabComponent, selector: "svc-tab-logic", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-logic-tab\">\n    <div class=\"svc-plugin-tab__content svc-logic-tab svc-logic-tab__content\" [class.svc-logic-tab--empty]=\"!model.hasItems\">\n      <ng-container *ngIf=\"model.hasItems\">\n        <survey-content [model]=\"model.itemsSurvey\"></survey-content>\n        <sv-action-bar *ngIf=\"!model.readOnly\" [model]=\"model.contentActionsContainer\"></sv-action-bar>\n      </ng-container>\n      <ng-container *ngIf=\"!model.hasItems\">\n        <div class=\"svc-logic-tab__content-empty\">\n          <svc-surface-placeholder [name]=\"'logic'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n            [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n          </svc-surface-placeholder>\n          <sv-action-bar *ngIf=\"!model.readOnly\" [model]=\"model.contentActionsContainer\"></sv-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SurveyContentComponent, selector: "survey-content", inputs: ["model"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogicTabComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1694,9 +1707,29 @@
 
   var SimulatorComponent = /** @class */ (function (_super) {
       __extends(SimulatorComponent, _super);
-      function SimulatorComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
+      function SimulatorComponent(changeDetectorRef, viewContainerRef) {
+          return _super.call(this, changeDetectorRef, viewContainerRef) || this;
+      }
+      /**
+       * `BaseAngular` defers updates while `model.isRendering` is true during `ngDoCheck`, so
+       * `popupOverlayHeight` (and frame-driving props) would not refresh the embedded template in time.
+       * These properties must run synchronous `detectChanges` so `[style.--sv-popup-overlay-height]` applies.
+       */
+      SimulatorComponent.prototype.getPropertiesToUpdateSync = function () {
+          return ["popupOverlayHeight", "landscape", "device", "survey"];
+      };
+      SimulatorComponent.prototype.ngAfterViewInit = function () {
+          this.model.queueSurveyLayoutRefresh();
+      };
+      SimulatorComponent.prototype.ngOnDestroy = function () {
+          this.model.cancelSurveyLayoutRefresh();
+          _super.prototype.ngOnDestroy.call(this);
+      };
+      SimulatorComponent.prototype.afterUpdate = function (isSync) {
+          if (isSync === void 0) { isSync = false; }
+          _super.prototype.afterUpdate.call(this, isSync);
+          this.model.queueSurveyLayoutRefresh();
+      };
       SimulatorComponent.prototype.getModel = function () {
           return this.model;
       };
@@ -1719,8 +1752,8 @@
       };
       return SimulatorComponent;
   }(i1.BaseAngular));
-  SimulatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SimulatorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SimulatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SimulatorComponent, selector: "survey-simulator", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.getRootCss()\" (keydown)=\"model.tryToZoom($event, $event)\" (mouseover)=\"activateZoom()\"\n    (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\"\n      [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\"\n        [style.height]=\"simulatorFrame.deviceHeight + 'px'\"\n        [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\">\n          <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!model.hasFrame\" class=\"svd-simulator-content\">\n      <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  SimulatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SimulatorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  SimulatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SimulatorComponent, selector: "survey-simulator", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.getRootCss()\" (keydown)=\"model.tryToZoom($event, $event)\" (mouseover)=\"activateZoom()\"\n    (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\"\n      [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\"\n        [style.height]=\"simulatorFrame.deviceHeight + 'px'\"\n        [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\"\n          [style.--sv-popup-overlay-height]=\"model.popupOverlayHeight || null\">\n          <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!model.hasFrame\" class=\"svd-simulator-content\"\n      [style.--sv-popup-overlay-height]=\"model.popupOverlayHeight || null\">\n      <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SimulatorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1728,40 +1761,9 @@
                       templateUrl: "./simulator.component.html",
                       styles: [":host { display: none; }"]
                   }]
-          }], propDecorators: { model: [{
-                  type: i0.Input
-              }] } });
-
-  var TestAgainActionComponent = /** @class */ (function (_super) {
-      __extends(TestAgainActionComponent, _super);
-      function TestAgainActionComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      TestAgainActionComponent.prototype.getModel = function () {
-          return this.model.testAgainAction;
-      };
-      Object.defineProperty(TestAgainActionComponent.prototype, "action", {
-          get: function () {
-              return this.getModel();
-          },
-          enumerable: false,
-          configurable: true
-      });
-      return TestAgainActionComponent;
-  }(i1.BaseAngular));
-  TestAgainActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TestAgainActionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TestAgainActionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TestAgainActionComponent, selector: "survey-test-again", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"button\" class=\"svc-preview__test-again svc-btn\" (click)=\"action.action()\" [key2click]>\n    <span class=\"svc-btn__text\">\n      {{action.title}}\n    </span>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TestAgainActionComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "survey-test-again",
-                      templateUrl: "./test-again.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { model: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ViewContainerRef }]; }, propDecorators: { model: [{
                   type: i0.Input
               }] } });
-  i1.AngularComponentFactory.Instance.registerComponent("svc-complete-page", TestAgainActionComponent);
 
   var SurveyResultsTableRowComponent = /** @class */ (function (_super) {
       __extends(SurveyResultsTableRowComponent, _super);
@@ -1828,7 +1830,7 @@
       return TestTabComponent;
   }(i1.BaseAngular));
   TestTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TestTabComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TestTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TestTabComponent, selector: "svc-tab-preview", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-test-tab__content\"\n    [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <svc-surface-placeholder *ngIf=\"model.survey.isEmpty\" [name]=\"'preview'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.survey.isEmpty\" class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"model.showResults\">\n        <survey-results [survey]=\"model.survey\"></survey-results>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.isPageToolbarVisible\" class=\"svc-plugin-tab__content-actions svc-test-tab__content-actions\">\n      <sv-action-bar [model]=\"model.pages\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: SimulatorComponent, selector: "survey-simulator", inputs: ["model"] }, { type: SurveyResultsComponent, selector: "survey-results", inputs: ["survey"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  TestTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TestTabComponent, selector: "svc-tab-preview", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-test-tab__content\" [ngClass]=\"model.tabContentAdditionalCss\">\n    <svc-surface-placeholder *ngIf=\"model.survey.isEmpty\" [name]=\"'preview'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.survey.isEmpty\" class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"model.showResults\">\n        <survey-results [survey]=\"model.survey\"></survey-results>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.isPageToolbarVisible\" class=\"svc-plugin-tab__content-actions svc-test-tab__content-actions\">\n      <sv-action-bar [model]=\"model.pages\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: SimulatorComponent, selector: "survey-simulator", inputs: ["model"] }, { type: SurveyResultsComponent, selector: "survey-results", inputs: ["survey"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TestTabComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1852,7 +1854,7 @@
       return ThemeTabComponent;
   }(i1.BaseAngular));
   ThemeTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ThemeTabComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ThemeTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ThemeTabComponent, selector: "svc-tab-theme", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-test-tab__content\"\n    [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <svc-surface-placeholder *ngIf=\"model.survey.isEmpty\" [name]=\"'theme'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.survey.isEmpty\" class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"model.showResults\">\n        <survey-results [survey]=\"model.survey\"></survey-results>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.isPageToolbarVisible\" class=\"svc-plugin-tab__content-actions svc-test-tab__content-actions\">\n      <sv-action-bar [model]=\"model.pages\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: SimulatorComponent, selector: "survey-simulator", inputs: ["model"] }, { type: SurveyResultsComponent, selector: "survey-results", inputs: ["survey"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ThemeTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ThemeTabComponent, selector: "svc-tab-theme", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-creator-tab__content svc-test-tab__content\" [ngClass]=\"model.tabContentAdditionalCss\">\n    <svc-surface-placeholder *ngIf=\"model.survey.isEmpty\" [name]=\"'theme'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n      [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n    </svc-surface-placeholder>\n    <div *ngIf=\"!model.survey.isEmpty\" class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"model.showResults\">\n        <survey-results [survey]=\"model.survey\"></survey-results>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.isPageToolbarVisible\" class=\"svc-plugin-tab__content-actions svc-test-tab__content-actions\">\n      <sv-action-bar [model]=\"model.pages\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: SimulatorComponent, selector: "survey-simulator", inputs: ["model"] }, { type: SurveyResultsComponent, selector: "survey-results", inputs: ["survey"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ThemeTabComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1958,7 +1960,6 @@
       __extends(AddQuestionButtonComponent, _super);
       function AddQuestionButtonComponent() {
           var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.buttonClass = "svc-btn";
           _this.renderPopup = true;
           return _this;
       }
@@ -1984,7 +1985,7 @@
       return AddQuestionButtonComponent;
   }(CreatorModelComponent));
   AddQuestionButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddQuestionButtonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  AddQuestionButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", inputs: { model: "model", buttonClass: "buttonClass", renderPopup: "renderPopup" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"'svc-element__add-new-question ' + buttonClass\" [key2click]\n    (click)=\"addNewQuestion($event)\"\n    (mouseover)=\"adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)\">\n    <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <span class=\"svc-add-new-item-button__text\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <ng-template *ngIf=\"renderPopup\"\n      [component]=\"{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }\">\n    </ng-template>\n  </div>\n  <ng-template *ngIf=\"!renderPopup\"\n    [component]=\"{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }\">\n  </ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  AddQuestionButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", inputs: { model: "model", renderPopup: "renderPopup" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.getActionBarItemCss()\" [key2click] (click)=\"addNewQuestion($event)\"\n    (mouseover)=\"adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)\">\n    <span [class]=\"model.getActionBarItemTitleCss()\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <div [class]=\"model.cssClasses.itemTypeSelector\">\n      <ng-template [component]=\"{ name: 'sv-action-bar-item-dropdown', data: { model: model.data.questionTypeSelectorModel } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddQuestionButtonComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1994,50 +1995,11 @@
                   }]
           }], propDecorators: { model: [{
                   type: i0.Input
-              }], buttonClass: [{
-                  type: i0.Input
               }], renderPopup: [{
                   type: i0.Input
               }] } });
   i1.AngularComponentFactory.Instance.registerComponent("svc-add-new-question-btn", AddQuestionButtonComponent);
 
-  var AddQuestionTypeSelectorComponent = /** @class */ (function (_super) {
-      __extends(AddQuestionTypeSelectorComponent, _super);
-      function AddQuestionTypeSelectorComponent() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.renderPopup = true;
-          return _this;
-      }
-      AddQuestionTypeSelectorComponent.prototype.getPropertiesToTrack = function () {
-          return [];
-      };
-      AddQuestionTypeSelectorComponent.prototype.createModel = function () {
-      };
-      AddQuestionTypeSelectorComponent.prototype.getModel = function () {
-          return this.questionTypeSelectorModel;
-      };
-      AddQuestionTypeSelectorComponent.prototype.selectQuestionType = function (event) {
-          event.stopPropagation();
-          this.questionTypeSelectorModel.action();
-      };
-      return AddQuestionTypeSelectorComponent;
-  }(CreatorModelComponent));
-  AddQuestionTypeSelectorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddQuestionTypeSelectorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  AddQuestionTypeSelectorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionTypeSelectorComponent, selector: "svc-add-question-type-selector", inputs: { questionTypeSelectorModel: "questionTypeSelectorModel", renderPopup: "renderPopup" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\" [attr.title]=\"questionTypeSelectorModel.title\"\n    [attr.aria-label]=\"questionTypeSelectorModel.title\" class=\"svc-element__question-type-selector\">\n    <svg class=\"svc-element__question-type-selector-icon\" [iconName]=\"questionTypeSelectorModel.iconName\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <sv-ng-popup *ngIf=\"renderPopup\" [popupModel]=\"questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n  </button>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddQuestionTypeSelectorComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "svc-add-question-type-selector",
-                      templateUrl: "./add-question-type-selector.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { questionTypeSelectorModel: [{
-                  type: i0.Input
-              }], renderPopup: [{
-                  type: i0.Input
-              }] } });
-  i1.AngularComponentFactory.Instance.registerComponent("svc-add-question-type-selector", AddQuestionTypeSelectorComponent);
-
   var QuestionElementContentComponent = /** @class */ (function (_super) {
       __extends(QuestionElementContentComponent, _super);
       function QuestionElementContentComponent() {
@@ -2073,7 +2035,7 @@
       return QuestionBannerComponent;
   }(i1.EmbeddedViewContentComponent));
   QuestionBannerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionBannerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionBannerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionBannerComponent, selector: "svc-question-banner", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-carry-forward-panel-wrapper\">\n    <div class=\"svc-carry-forward-panel\">\n    <span>{{model.text}} </span>\n    <span class=\"svc-carry-forward-panel__link\">\n      <svc-action-button [text]=\"model.actionText\" [click]=\"model.onClick.bind(model)\">\n      </svc-action-button>\n    </span>\n    </div>\n  </div>\n  <ng-template>", styles: [":host { display: none }"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "iconName", "allowBubble"] }] });
+  QuestionBannerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionBannerComponent, selector: "svc-question-banner", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-carry-forward-panel-wrapper\">\n    <div class=\"svc-carry-forward-panel\">\n    <span>{{model.text}} </span>\n    <span class=\"svc-carry-forward-panel__link\">\n      <svc-action-button [text]=\"model.actionText\" [click]=\"model.onClick.bind(model)\">\n      </svc-action-button>\n    </span>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "iconName", "allowBubble"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionBannerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2271,7 +2233,7 @@
       return ItemValueDesignerComponent;
   }(CreatorModelComponent));
   ItemValueDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ItemValueDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemValueDesignerComponent, selector: "svc-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-item-value-wrapper\" (pointerdown)=\"adorner.onPointerDown($event)\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? item.value : null\"\n    [ngClass]=\"{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}\"\n    #container>\n    <div class=\"svc-item-value__ghost\"></div>\n    <div class=\"svc-item-value-controls\">\n      <span *ngIf=\"adorner.isDraggable\" class=\"svc-item-value-controls__button svc-item-value-controls__drag\">\n        <svg class=\"svc-item-value-controls__drag-icon\" [iconName]=\"'icon-drag-24x24'\" [size]=\"'auto'\"\n          [attr.title]=\"adorner.dragTooltip\" sv-ng-svg-icon></svg>\n      </span>\n      <span *ngIf=\"adorner.allowAdd\" class=\"svc-item-value-controls__button svc-item-value-controls__add\" [key2click]\n        (click)=\"adorner.add(adorner)\" role=\"button\" [attr.aria-label]=\"adorner.tooltip\"><svg [iconName]=\"'icon-add_16x16'\" [size]=\"'auto'\"\n          [attr.title]=\"adorner.tooltip\" sv-ng-svg-icon></svg></span>\n      <span *ngIf=\"adorner.allowRemove\" class=\"svc-item-value-controls__button svc-item-value-controls__remove\"\n        [key2click] (click)=\"adorner.remove(adorner)\" (blur)=\"onBlur($event)\" role=\"button\" [attr.aria-label]=\"adorner.tooltip\"><svg\n          [iconName]=\"'icon-remove_16x16'\" [size]=\"'auto'\" [attr.title]=\"adorner.tooltip\" sv-ng-svg-icon></svg></span>\n    </div>\n\n    <div class=\"svc-item-value__item\" (click)=\"adorner.select(adorner, $event)\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n\n    <div *ngIf=\"adorner.canShowPanel()\" class=\"svc-item-value-controls svc-choice-elements-button-container\">\n        <span\n            role=\"button\"\n            class=\"svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button\"\n            (click)=\"adorner.togglePanel()\"\n            [key2click]\n          >\n          <svg\n            [iconName]=\"adorner.showPanel ? 'icon-collapsepanel-16x16' : 'icon-expandpanel-16x16'\" \n            [size]=\"'auto'\" \n            sv-ng-svg-icon>\n          </svg>\n        </span>\n    </div>\n  </div>\n  <ng-template *ngIf=\"adorner.showPanel\"\n          [component]=\"{ name: getPanelComponentName(item.panel), data: getPanelComponentData(item.panel) }\"></ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemValueDesignerComponent, selector: "svc-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-item-value-wrapper\" (pointerdown)=\"adorner.onPointerDown($event)\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? item.value : null\"\n    [ngClass]=\"{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}\"\n    #container>\n    <div class=\"svc-item-value__ghost\"></div>\n    <div class=\"svc-item-value-controls\">\n      <span *ngIf=\"adorner.isDraggable\" class=\"svc-item-value-controls__button svc-item-value-controls__drag\">\n        <svg class=\"svc-item-value-controls__drag-icon\" [iconName]=\"'icon-drag-24x24'\" [size]=\"'auto'\"\n          [attr.title]=\"adorner.dragTooltip\" sv-ng-svg-icon></svg>\n      </span>\n      <ng-container *ngIf=\"adorner.allowAdd\">\n        <ng-template [component]=\"{name: 'sv-action-bar-item', data: { model: adorner.addAction }}\"></ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"adorner.allowRemove\">\n        <ng-template [component]=\"{name: 'sv-action-bar-item', data: { model: adorner.removeAction }}\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div class=\"svc-item-value__item\" (click)=\"adorner.select(adorner, $event)\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n\n    <div *ngIf=\"adorner.canShowPanel()\" class=\"svc-item-value-controls svc-choice-elements-button-container\">\n      <ng-template [component]=\"{name: 'sv-action-bar-item', data: { model: adorner.expandPanelAction } }\"></ng-template>\n    </div>\n  </div>\n  <ng-template *ngIf=\"adorner.renderedShowPanel\"\n          [component]=\"{ name: getPanelComponentName(item.panel), data: getPanelComponentData(item.panel) }\"></ng-template>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ItemValueDesignerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2356,7 +2318,7 @@
       return ImageItemValueDesignerComponent;
   }(CreatorModelComponent));
   ImageItemValueDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemValueDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ImageItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageItemValueDesignerComponent, selector: "svc-image-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div (pointerdown)=\"adorner.onPointerDown($event)\" [class]=\"adorner.getRootCss()\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container\n    (dragstart)=\"preventDragHandler($event)\" (dragenter)=\"adorner.onDragEnter($event)\"\n    (dragover)=\"adorner.onDragOver($event)\" (dragleave)=\"adorner.onDragLeave($event)\" (drop)=\"adorner.onDrop($event)\">\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\"\n        class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew && !adorner.isUploading\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span *ngIf=\"adorner.isDraggable && adorner.canRenderControls\"\n          class=\"svc-context-button svc-image-item-value-controls__drag-area-indicator\"\n          (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-24x24'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </span>\n        <div *ngIf=\"adorner.canRenderControls\" class=\"svc-context-container svc-image-item-value-controls\">\n          <ng-container *ngIf=\"adorner.allowRemove && !adorner.isUploading\">\n            <span class=\"svc-context-button\" (click)=\"adorner.chooseFile(adorner)\" [key2click] [attr.title]=\"undefined\"\n              [attr.aria-label]=\"undefined\">\n              <svg role=\"button\" [iconName]=\"'icon-choosefile'\" [size]=\"'auto'\" [title]=\"adorner.selectFileTitle\"\n                sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-context-button svc-context-button--danger\" (click)=\"adorner.remove(adorner)\" [key2click]\n              [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg role=\"button\" [iconName]=\"'icon-delete'\" [size]=\"'auto'\" [title]=\"adorner.removeFileTitle\"\n                sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew || adorner.isUploading\">\n        <div class=\"svc-image-item-value__item\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\">\n                <div class=\"svc-image-item-value__loading\" *ngIf=\"adorner.isUploading\">\n                  <sv-ng-loading-indicator></sv-ng-loading-indicator>\n                </div>\n              </div>\n            </label>\n          </div>\n        </div>\n        <div class=\"svc-image-item-value-controls\" *ngIf=\"adorner.allowAdd && !adorner.isUploading\">\n          <span class=\"svc-image-item-value__placeholder\"\n            *ngIf=\"adorner.showPlaceholder\">{{adorner.placeholderText}}</span>\n          <span [class]=\"adorner.addButtonCss\" (click)=\"adorner.chooseNewFile(adorner)\" [key2click]=\"{}\">\n            <svg [iconName]=\"'icon-add-lg'\" [size]=\"'auto'\" [title]=\"adorner.addFileTitle\"\n              *ngIf=\"adorner.showChooseButtonAsIcon\" sv-ng-svg-icon></svg>\n            <span *ngIf=\"!adorner.showChooseButtonAsIcon\">{{adorner.chooseImageText}}</span>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  ImageItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageItemValueDesignerComponent, selector: "svc-image-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div (pointerdown)=\"adorner.onPointerDown($event)\" [class]=\"adorner.getRootCss()\"\n    [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container\n    (dragstart)=\"preventDragHandler($event)\" (dragenter)=\"adorner.onDragEnter($event)\"\n    (dragover)=\"adorner.onDragOver($event)\" (dragleave)=\"adorner.onDragLeave($event)\" (drop)=\"adorner.onDrop($event)\">\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\"\n        class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew && !adorner.isUploading\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <sv-ng-action-bar [model]=\"adorner.topActionsContainer\" *ngIf=\"adorner.canRenderControls\"></sv-ng-action-bar>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew || adorner.isUploading\">\n        <div class=\"svc-image-item-value__item\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\">\n                <div class=\"svc-image-item-value__loading\" *ngIf=\"adorner.isUploading\">\n                  <sv-ng-loading-indicator></sv-ng-loading-indicator>\n                </div>\n              </div>\n            </label>\n          </div>\n        </div>\n        <div class=\"svc-image-item-value-controls\" *ngIf=\"adorner.allowAdd && !adorner.isUploading\">\n          <span class=\"svc-image-item-value__placeholder\"\n            *ngIf=\"adorner.showPlaceholder\">{{adorner.placeholderText}}</span>\n          <sv-ng-action-bar [model]=\"adorner.actionsContainer\"></sv-ng-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemValueDesignerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2421,7 +2383,7 @@
       return QuestionDropdownAdornerDesignerComponent;
   }(i1.EmbeddedViewContentComponent));
   QuestionDropdownAdornerDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDropdownAdornerDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionDropdownAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownAdornerDesignerComponent, selector: "svc-dropdown-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-question__dropdown-choices--wrapper\">\n    <div>\n      <div class=\"svc-question__dropdown-choices\">\n        <div *ngFor=\"let item of adorner.getRenderedItems()\" [class]=\"adorner.getChoiceCss()\"\n          data-bind=\"css: $parent.getChoiceCss()\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\">\n          </ng-template>\n        </div>\n      </div>\n      <svc-action-button *ngIf=\"adorner.needToCollapse\" [text]=\"adorner.getButtonText()\"\n        [click]=\"adorner.switchCollapse.bind(adorner)\" [allowBubble]=\"true\">\n      </svc-action-button>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ActionButtonComponent, selector: "svc-action-button", inputs: ["classes", "click", "selected", "disabled", "text", "title", "iconName", "allowBubble"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  QuestionDropdownAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownAdornerDesignerComponent, selector: "svc-dropdown-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-question__dropdown-choices--wrapper\">\n    <div>\n      <div class=\"svc-question__dropdown-choices\">\n        <div *ngFor=\"let item of adorner.getRenderedItems()\" [class]=\"adorner.getChoiceCss()\"\n          data-bind=\"css: $parent.getChoiceCss()\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\">\n          </ng-template>\n        </div>\n      </div>\n      <ng-container *ngIf=\"adorner.needToCollapse\">\n        <ng-template [component]=\"{ name: 'sv-action-bar-item', data: { model: adorner.collapseAction } }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDropdownAdornerDesignerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2490,7 +2452,7 @@
       return QuestionImageAdornerDesignerComponent;
   }(i1.EmbeddedViewContentComponent));
   QuestionImageAdornerDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageAdornerDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionImageAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageAdornerDesignerComponent, selector: "svc-image-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-image-question-controls\" *ngIf=\"!adorner.isUploading && !adorner.isEmptyElement\">\n    <ng-container *ngIf=\"adorner.allowEdit\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\"\n        class=\"svc-choose-file-input\" />\n      <span class=\"svc-context-button\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n        <svg [iconName]=\"'icon-choosefile'\" [size]=\"'auto'\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n      </span>\n    </ng-container>\n  </div>\n  <div class=\"svc-image-question__loading-placeholder\" *ngIf=\"adorner.isUploading && !adorner.isEmptyElement\">\n    <div class=\"svc-image-question__loading\">\n      <sv-ng-loading-indicator></sv-ng-loading-indicator>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  QuestionImageAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageAdornerDesignerComponent, selector: "svc-image-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\" class=\"svc-choose-file-input\" />\n  <sv-ng-action-bar *ngIf=\"!adorner.isUploading && !adorner.isEmptyElement\" [model]=\"adorner.imageActionsContainer\"></sv-ng-action-bar>\n  <div class=\"svc-image-question__loading-placeholder\" *ngIf=\"adorner.isUploading && !adorner.isEmptyElement\">\n    <div class=\"svc-image-question__loading\">\n      <sv-ng-loading-indicator></sv-ng-loading-indicator>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageAdornerDesignerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2510,10 +2472,15 @@
       function PanelDesignerComponent() {
           return _super !== null && _super.apply(this, arguments) || this;
       }
+      PanelDesignerComponent.prototype.createModel = function () {
+          if (this.componentData) {
+              this.adorner = new surveyCreatorCore.PanelAdornerViewModel(this.creator, this.model, null);
+          }
+      };
       return PanelDesignerComponent;
   }(QuestionDesignerComponent));
   PanelDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n    <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n      <sv-ng-element-title *ngIf=\"!!model.hasTitle\" [element]=\"model\" [renderActions]=\"false\"></sv-ng-element-title>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <span class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"'auto'\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-container *ngIf=\"adorner.needToRenderContent\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n          <div class=\"svc-panel__placeholder_frame\">\n            <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n            <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n              (click)=\"addNewQuestion($event)\">\n              <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"'auto'\"\n                sv-ng-svg-icon></svg>\n              <span class=\"svc-add-new-item-button__text\">\n                {{ adorner.addNewQuestionText }}\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n          [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n        </ng-template>\n\n        <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question-container\">\n          <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n              [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n          </div>\n\n          <div class=\"svc-panel__add-new-question-wrapper\">\n            <ng-template\n              [component]=\"{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }\">\n            </ng-template>\n          </div>\n        </div>\n\n        <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\"\n          (focusin)=\"adorner.select(adorner, $event)\">\n          <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  PanelDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\" (dblclick)=\"adorner.dblclick($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n    <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n      <sv-ng-element-title *ngIf=\"!!model.hasTitle\" [element]=\"model\" [renderActions]=\"false\"></sv-ng-element-title>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <span class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"'auto'\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-container *ngIf=\"adorner.needToRenderContent\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n          <div class=\"svc-panel__placeholder_frame\">\n            <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n            <sv-action-bar *ngIf=\"adorner.showAddQuestionButton\" [model]=\"adorner.addQuestionActionsContainer\"></sv-action-bar>\n          </div>\n        </div>\n\n        <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n          [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n        </ng-template>\n        <sv-action-bar *ngIf=\"!adorner.isEmptyElement &&adorner.showAddQuestionButton\" [model]=\"adorner.addQuestionActionsContainer\"></sv-action-bar>\n        <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\"\n          (focusin)=\"adorner.select(adorner, $event)\">\n          <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDesignerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2568,7 +2535,7 @@
       return ToolboxToolComponent;
   }(CreatorModelComponent));
   ToolboxToolComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolboxToolComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ToolboxToolComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: { creator: "creator", item: "item", parentModel: "parentModel", isCompact: "isCompact" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\" #container>\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"svc-toolbox__tool-content sv-action__content\" (pointerdown)=\"model.onPointerDown($event)\">\n            <ng-template [component]=\"{ name: model.itemComponent, default: 'svc-toolbox-item', \n            data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></ng-template>\n        </div>\n    </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ToolboxToolComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: { creator: "creator", item: "item", parentModel: "parentModel", isCompact: "isCompact" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\" #container>\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"svc-toolbox__tool-content\" (pointerdown)=\"model.onPointerDown($event)\">\n            <ng-template [component]=\"{ name: model.itemComponent, default: 'svc-toolbox-item', \n            data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></ng-template>\n        </div>\n    </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolboxToolComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3066,7 +3033,7 @@
       return MatrixCellComponent;
   }(CreatorModelComponent));
   MatrixCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "svc-matrix-cell", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div tabindex=\"-1\" class=\"svc-matrix-cell\" (click)=\"selectContext($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n    (mouseleave)=\"adorner.hover($event, $event.currentTarget)\">\n    <div class=\"svc-matrix-cell--selected\" [class.svc-visible]=\"adorner.isSelected\"></div>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n    <div *ngIf=\"isSupportCellEditor\" class=\"svc-matrix-cell__question-controls\">\n      <span class=\"svc-matrix-cell__question-controls-button svc-context-button\"\n        (click)=\"adorner.editQuestion(adorner, $event)\" [key2click]>\n        <svg [iconName]=\"'icon-edit'\" [size]=\"'auto'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n      </span>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  MatrixCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "svc-matrix-cell", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div tabindex=\"-1\" class=\"svc-matrix-cell\" (click)=\"selectContext($event)\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\"\n    (mouseleave)=\"adorner.hover($event, $event.currentTarget)\">\n    <div class=\"svc-matrix-cell--selected\" [class.svc-visible]=\"adorner.isSelected\"></div>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n    <div *ngIf=\"isSupportCellEditor\" class=\"svc-matrix-cell__question-controls\">\n      <ng-template [component]=\"{name: 'sv-action-bar-item', data: { model: adorner.editAction } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3332,7 +3299,7 @@
       return QuestionRatingAdornerDesignerComponent;
   }(CreatorModelComponent));
   QuestionRatingAdornerDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionRatingAdornerDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionRatingAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingAdornerDesignerComponent, selector: "svc-rating-question-content", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-rating-question-content\">\n    <div [class]=\"adorner.controlsClassNames\">\n      <span *ngIf=\"adorner.allowRemove\" [class]=\"adorner.removeClassNames\" [key2click] \n      (click)=\"adorner.removeItem(adorner)\" role=\"button\" [attr.aria-label]=\"adorner.removeTooltip\">\n        <svg [iconName]=\"'icon-remove_16x16'\" [size]=\"'auto'\" [attr.title]=\"adorner.removeTooltip\" sv-ng-svg-icon></svg>\n      </span>\n      <span *ngIf=\"adorner.allowAdd\" [class]=\"adorner.addClassNames\" [key2click]\n      (click)=\"adorner.addItem(adorner)\" role=\"button\" [attr.aria-label]=\"adorner.addTooltip\">\n        <svg [iconName]=\"'icon-add_16x16'\" [size]=\"'auto'\" [attr.title]=\"adorner.addTooltip\" sv-ng-svg-icon></svg>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  QuestionRatingAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingAdornerDesignerComponent, selector: "svc-rating-question-content", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-rating-question-content\">\n    <sv-action-bar [model]=\"adorner.rateActionsContainer\"></sv-action-bar>\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionRatingAdornerDesignerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3383,7 +3350,7 @@
       return CreatorLogoImageComponent;
   }(CreatorModelComponent));
   CreatorLogoImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreatorLogoImageComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CreatorLogoImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorLogoImageComponent, selector: "svc-logo-image", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-logo-image\" #container>\n    <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"model.acceptedTypes\" class=\"svc-choose-file-input\" />\n    <ng-container *ngIf=\"!survey.locLogo.renderedHtml\">\n      <ng-container *ngIf=\"model.allowEdit && !model.isUploading\">\n        <div class=\"svc-logo-image-placeholder\" (click)=\"model.chooseFile(model)\" [key2click]>\n          <svg>\n            <use xlink:href=\"#icon-image-48x48\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml && !model.isUploading\">\n      <div [class]=\"model.containerCss\">\n        <div class=\"svc-context-container svc-logo-image-controls\">\n          <span class=\"svc-context-button\" (click)=\"model.chooseFile(model)\" [key2click] [attr.title]=\"undefined\"\n            [attr.aria-label]=\"undefined\">\n            <svg [iconName]=\"'icon-choosefile'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          </span>\n          <span class=\"svc-context-button svc-context-button--danger\" (click)=\"model.remove(model)\" [key2click]\n            [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg [iconName]=\"'icon-clear'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          </span>\n        </div>\n        <sv-logo-image [data]=\"survey\"></sv-logo-image>\n      </div>\n    </ng-container>\n    <div class=\"svc-logo-image__loading\" *ngIf=\"model.isUploading\">\n      <sv-ng-loading-indicator></sv-ng-loading-indicator>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }, { type: i1__namespace.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  CreatorLogoImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorLogoImageComponent, selector: "svc-logo-image", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"svc-logo-image\" #container>\n    <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"model.acceptedTypes\" class=\"svc-choose-file-input\" />\n    <ng-container *ngIf=\"!survey.locLogo.renderedHtml\">\n      <ng-container *ngIf=\"model.allowEdit && !model.isUploading\">\n        <div class=\"svc-logo-image-placeholder\" (click)=\"model.chooseFile(model)\" [key2click]>\n          <svg>\n            <use xlink:href=\"#icon-image-48x48\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml && !model.isUploading\">\n      <div [class]=\"model.containerCss\">\n        <sv-ng-action-bar [model]=\"model.actionsContainer\"></sv-ng-action-bar>\n        <sv-logo-image [data]=\"survey\"></sv-logo-image>\n      </div>\n    </ng-container>\n    <div class=\"svc-logo-image__loading\" *ngIf=\"model.isUploading\">\n      <sv-ng-loading-indicator></sv-ng-loading-indicator>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }, { type: i1__namespace.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreatorLogoImageComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3407,7 +3374,7 @@
       return QuestionSpinEditorComponent;
   }(i1.QuestionAngular));
   QuestionSpinEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionSpinEditorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionSpinEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionSpinEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDown($event)\">\n  <input autocomplete=\"off\" role=\"spinbutton\" [disabled]=\"model.isInputReadOnly\" [attr.id]=\"model.inputId\"\n    [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n    [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n    [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n    (change)=\"model.onChange($event)\" (keydown)=\"model.onInputKeyDown($event)\" (keyup)=\"model.onKeyUp($event)\"\n    (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\" (beforeinput)=\"model.onBeforeInput($event)\"\n    [value]=\"model.renderedValue\" [class]=\"model.cssClasses.control\" />\n  <span [class]=\"model.cssClasses.buttonsContainer\">\n    <button [disabled]=\"model.isInputReadOnly\" [attr.aria-hidden]=\"'true'\" [class]=\"model.cssClasses.arrowButton\"\n      (click)=\"model.onDownButtonClick()\" (mousedown)=\"model.onDownButtonMouseDown()\"\n      (mouseup)=\"model.onButtonMouseUp()\" (mouseleave)=\"model.onButtonMouseLeave()\" (blur)=\"model.onBlur($event)\"\n      (focus)=\"model.onFocus($event)\" tabindex=\"-1\">\n      <svg [iconName]=\"model.cssClasses.decreaseButtonIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </button>\n    <button [disabled]=\"model.isInputReadOnly\" [attr.aria-hidden]=\"'true'\" [class]=\"model.cssClasses.arrowButton\"\n      (click)=\"model.onUpButtonClick()\" (mousedown)=\"model.onUpButtonMouseDown()\" (mouseup)=\"model.onButtonMouseUp()\"\n      (mouseleave)=\"model.onButtonMouseLeave()\" (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\"\n      tabindex=\"-1\">\n      <svg [iconName]=\"model.cssClasses.increaseButtonIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </button>\n  </span>\n</div>", components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+  QuestionSpinEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionSpinEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDown($event)\">\n  <input autocomplete=\"off\" role=\"spinbutton\" [disabled]=\"model.isInputReadOnly\" [attr.id]=\"model.inputId\"\n    [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n    [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n    [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n    (change)=\"model.onChange($event)\" (keydown)=\"model.onInputKeyDown($event)\" (keyup)=\"model.onKeyUp($event)\"\n    (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\" (beforeinput)=\"model.onBeforeInput($event)\"\n    [value]=\"model.renderedValue\" [class]=\"model.cssClasses.control\" />\n  <sv-ng-action-bar [model]=\"model.inputActionsContainer\"></sv-ng-action-bar>\n</div>", components: [{ type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionSpinEditorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3416,6 +3383,44 @@
           }] });
   i1.AngularComponentFactory.Instance.registerComponent("spinedit-question", QuestionSpinEditorComponent);
 
+  var SpinEditorButtonComponent = /** @class */ (function (_super) {
+      __extends(SpinEditorButtonComponent, _super);
+      function SpinEditorButtonComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      Object.defineProperty(SpinEditorButtonComponent.prototype, "modelAction", {
+          get: function () {
+              return this.model;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(SpinEditorButtonComponent.prototype, "question", {
+          get: function () {
+              return this.model.data.question;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      SpinEditorButtonComponent.prototype.getModel = function () {
+          return this.modelAction;
+      };
+      return SpinEditorButtonComponent;
+  }(i1.BaseAngular));
+  SpinEditorButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SpinEditorButtonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  SpinEditorButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SpinEditorButtonComponent, selector: "sv-ng-spin-edit-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <button [disabled]=\"modelAction.disabled\" [attr.aria-hidden]=\"'true'\" [class]=\"modelAction.getActionBarItemCss()\"\n        (click)=\"question.onDownButtonClick()\" (mousedown)=\"model.data.onMouseDown()\"\n        (mouseup)=\"question.onButtonMouseUp()\" (mouseleave)=\"question.onButtonMouseLeave()\" (blur)=\"question.onBlur($event)\"\n        (focus)=\"question.onFocus($event)\" tabindex=\"-1\">\n        <svg [class]=\"modelAction.cssClasses.itemIcon\" [iconName]=\"modelAction.iconName\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </button>\n</ng-template>\n", styles: ["{ :host { display: none; } }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SpinEditorButtonComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "sv-ng-spin-edit-button",
+                      templateUrl: "./spin-editor-button.component.html",
+                      styles: ["{ :host { display: none; } }"]
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("sv-spinedit-button", SpinEditorButtonComponent);
+
   var ColorItemComponent = /** @class */ (function (_super) {
       __extends(ColorItemComponent, _super);
       function ColorItemComponent() {
@@ -3451,7 +3456,7 @@
       return QuestionColorComponent;
   }(i1.QuestionAngular));
   QuestionColorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionColorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionColorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionColorComponent, selector: "svc-color", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDown($event)\">\n  <label [class]=\"model.getSwatchCss()\" [style]=\"model.getSwatchStyle()\">\n    <svg [iconName]=\"model.cssClasses.swatchIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <input type=\"color\" [disabled]=\"model.isInputReadOnly\" [class]=\"model.cssClasses.colorInput\"\n      [value]=\"model.renderedColorValue\" (change)=\"model.onColorInputChange($event)\" tabindex=\"-1\"\n      [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n      [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n      [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\" />\n  </label>\n  <input autocomplete=\"off\" [disabled]=\"model.isInputReadOnly\" [attr.id]=\"model.inputId\"\n    [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n    [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n    [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\" (change)=\"model.onChange($event)\"\n    (keyup)=\"model.onKeyUp($event)\" (blur)=\"model.onBlur($event)\" (beforeinput)=\"model.onBeforeInput($event)\"\n    [value]=\"model.renderedValue\" [class]=\"model.cssClasses.control\" />\n  <ng-container *ngIf=\"model.showDropdownAction\">\n    <div aria-hidden=\"true\" [class]=\"model.cssClasses.choicesButtonWrapper\">\n      <sv-action-bar-item [model]=\"model.dropdownAction\"></sv-action-bar-item>\n    </div>\n    <sv-ng-popup [popupModel]=\"model.dropdownAction.popupModel\"></sv-ng-popup>\n  </ng-container>\n</div>", components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarItemComponent, selector: "sv-action-bar-item", inputs: ["model"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  QuestionColorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionColorComponent, selector: "svc-color", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDown($event)\" #contentElement>\n  <label [class]=\"model.getSwatchCss()\" [style]=\"model.getSwatchStyle()\">\n    <svg [iconName]=\"model.cssClasses.swatchIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <input type=\"color\" [disabled]=\"model.isInputReadOnly\" [class]=\"model.cssClasses.colorInput\"\n      [value]=\"model.renderedColorValue\" (change)=\"model.onColorInputChange($event)\" tabindex=\"-1\"\n      [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n      [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n      [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\" />\n  </label>\n  <input autocomplete=\"off\" [disabled]=\"model.isInputReadOnly\" [attr.id]=\"model.inputId\"\n    [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n    [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n    [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\" (change)=\"model.onChange($event)\"\n    (keyup)=\"model.onKeyUp($event)\" (blur)=\"model.onBlur($event)\" (beforeinput)=\"model.onBeforeInput($event)\"\n    [value]=\"model.renderedValue\" [class]=\"model.cssClasses.control\" />\n  <sv-ng-action-bar *ngIf=\"model.hasVisibleInputActions\" [model]=\"model.inputActionsContainer\"></sv-ng-action-bar>\n</div>", components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionColorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3469,7 +3474,7 @@
       return QuestionFileEditorComponent;
   }(i1.QuestionAngular));
   QuestionFileEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionFileEditorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionFileEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionFileEditorComponent, selector: "svc-file-editor", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (dragenter)=\"model.onDragEnter($event)\" (dragover)=\"model.onDragOver($event)\"\n  (drop)=\"model.onDrop($event)\" (dragleave)=\"model.onDragLeave($event)\" (keydown)=\"model.onKeyDown($event)\"\n  #contentElement>\n  <input type=\"text\" [disabled]=\"model.isTextInputReadOnly\" [class]=\"model.cssClasses.control\"\n    [value]=\"model.renderedValue ||''\" (change)=\"model.onInputChange($event)\" (blur)=\"model.onInputBlur($event)\"\n    [attr.placeholder]=\"model.renderedPlaceholder\" />\n  <input type=\"file\" [disabled]=\"model.isInputReadOnly\" [class]=\"model.cssClasses.fileInput\" [attr.id]=\"model.inputId\"\n    [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"false\"\n    [title]=\"model.inputTitle\" [accept]=\"model.acceptedTypes\" (change)=\"model.onFileInputChange($event)\" tabindex=\"-1\">\n  <div [class]=\"model.cssClasses.buttonsContainer\">\n    <button type=\"button\" [class]=\"model.cssClasses.clearButton\" [disabled]=\"model.getIsClearButtonDisabled()\"\n      (click)=\"model.doClean()\" [key2click] [title]=\"model.clearButtonCaption\">\n      <svg [iconName]=\"model.cssClasses.clearButtonIcon\" size=\"'auto'\" sv-ng-svg-icon></svg>\n    </button>\n    <label [class]=\"model.getChooseButtonCss()\" [attr.for]=\"model.inputId\" [attr.aria-label]=\"model.chooseButtonCaption\"\n      (click)=\"model.chooseFiles($event)\" [key2click]>\n      <svg [iconName]=\"model.cssClasses.chooseButtonIcon\" size=\"'auto'\" [title]=\"model.chooseButtonCaption\"\n        sv-ng-svg-icon></svg>\n    </label>\n  </div>\n</div>", components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  QuestionFileEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionFileEditorComponent, selector: "svc-file-editor", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (dragenter)=\"model.onDragEnter($event)\" (dragover)=\"model.onDragOver($event)\"\n  (drop)=\"model.onDrop($event)\" (dragleave)=\"model.onDragLeave($event)\" (keydown)=\"model.onKeyDown($event)\"\n  #contentElement>\n  <input type=\"text\" [disabled]=\"model.isTextInputReadOnly\" [class]=\"model.cssClasses.control\"\n    [value]=\"model.renderedValue ||''\" (change)=\"model.onInputChange($event)\" (blur)=\"model.onInputBlur($event)\"\n    [attr.placeholder]=\"model.renderedPlaceholder\" />\n  <sv-ng-action-bar [model]=\"model.inputActionsContainer\" *ngIf=\"model.hasVisibleInputActions\"></sv-ng-action-bar>\n</div>", components: [{ type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionFileEditorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3479,6 +3484,37 @@
           }] });
   i1.AngularComponentFactory.Instance.registerComponent("fileedit-question", QuestionFileEditorComponent);
 
+  var FileEditorButtonComponent = /** @class */ (function (_super) {
+      __extends(FileEditorButtonComponent, _super);
+      function FileEditorButtonComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      Object.defineProperty(FileEditorButtonComponent.prototype, "question", {
+          get: function () {
+              return this.model.data.question;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      FileEditorButtonComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      return FileEditorButtonComponent;
+  }(i1.BaseAngular));
+  FileEditorButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileEditorButtonComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  FileEditorButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileEditorButtonComponent, selector: "sv-ng-file-editor-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div>\n    <label [class]=\"model.getActionBarItemCss()\" [attr.for]=\"question.inputId\" [attr.aria-label]=\"question.chooseButtonCaption\"\n      (click)=\"question.chooseFiles($event)\" [key2click]>\n      <svg [iconName]=\"model.iconName\" size=\"'auto'\" [title]=\"model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n    </label>\n    <input type=\"file\" [disabled]=\"model.disabled\" [class]=\"question.cssClasses.fileInput\" [attr.id]=\"question.inputId\"\n        [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\"\n        [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [attr.multiple]=\"false\"\n        [title]=\"question.inputTitle\" [accept]=\"question.acceptedTypes\" (change)=\"question.onFileInputChange($event)\" tabindex=\"-1\">\n  </div>\n</ng-template>\n", styles: ["{ :host { display: none; } }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileEditorButtonComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "sv-ng-file-editor-button",
+                      templateUrl: "./file-editor-button.component.html",
+                      styles: ["{ :host { display: none; } }"]
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("sv-fileedit-button", FileEditorButtonComponent);
+
   var BooleanSwitchComponent = /** @class */ (function (_super) {
       __extends(BooleanSwitchComponent, _super);
       function BooleanSwitchComponent() {
@@ -3487,7 +3523,7 @@
       return BooleanSwitchComponent;
   }(i1.QuestionAngular));
   BooleanSwitchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanSwitchComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  BooleanSwitchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanSwitchComponent, selector: "sv-ng-boolean-switch", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"spg-boolean-switch\" role=\"checkbox\" [attr.aria-checked]=\"model.booleanValue || false\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" (click)=\"model.value = !model.value\">\n  <div class=\"spg-boolean-switch__button\" tabindex=\"0\" [key2click]=\"{ disableTabStop: true }\"\n    [class]=\"model.value ? 'spg-boolean-switch__button--checked' : ''\">\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left\"></div>\n    </div>\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right\"></div>\n    </div>\n  </div>\n  <div class=\"spg-boolean-switch__caption\">\n    <div class=\"spg-boolean-switch__title\" [id]=\"model.labelRenderedAriaID\">\n      <span [model]=\"model.locTitle\" sv-ng-string></span>\n    </div>\n  </div>\n</div>", components: [{ type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+  BooleanSwitchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanSwitchComponent, selector: "sv-ng-boolean-switch", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"spg-boolean-switch\" role=\"checkbox\" [attr.aria-checked]=\"model.booleanValue || false\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" (click)=\"model.value = !model.value\">\n  <div class=\"spg-boolean-switch__button\" tabindex=\"0\" [key2click]\n    [class]=\"model.value ? 'spg-boolean-switch__button--checked' : ''\">\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left\"></div>\n    </div>\n    <div class=\"spg-boolean-switch__thumb\">\n      <div class=\"spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right\"></div>\n    </div>\n  </div>\n  <div class=\"spg-boolean-switch__caption\">\n    <div class=\"spg-boolean-switch__title\" [id]=\"model.labelRenderedAriaID\">\n      <span [model]=\"model.locTitle\" sv-ng-string></span>\n    </div>\n  </div>\n</div>", components: [{ type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanSwitchComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3550,45 +3586,95 @@
               }] } });
   i1.AngularComponentFactory.Instance.registerComponent("svc-translate-from-action", TranslateFromAction);
 
+  var ContainerTabComponent = /** @class */ (function (_super) {
+      __extends(ContainerTabComponent, _super);
+      function ContainerTabComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      ContainerTabComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      return ContainerTabComponent;
+  }(i1.BaseAngular));
+  ContainerTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ContainerTabComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  ContainerTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContainerTabComponent, selector: "svc-tab-container", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <svc-component-container [model]=\"model.containerModel\"></svc-component-container>\n</ng-template>\n\n", styles: [":host { display: none; }"], components: [{ type: ComponentContainerComponent, selector: "svc-component-container", inputs: ["model"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ContainerTabComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-tab-container",
+                      templateUrl: "./container-tab.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("svc-tab-container", ContainerTabComponent);
+
+  var ImageItemDragActionComponent = /** @class */ (function (_super) {
+      __extends(ImageItemDragActionComponent, _super);
+      function ImageItemDragActionComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      ImageItemDragActionComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      return ImageItemDragActionComponent;
+  }(i1.BaseAngular));
+  ImageItemDragActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemDragActionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  ImageItemDragActionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageItemDragActionComponent, selector: "svc-image-item-drag-action", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <span [class]=\"model.getActionBarItemCss()\"\n        (pointerdown)=\"model.data.model.onPointerDown($event)\">\n        <svg [iconName]=\"model.iconName\" [size]=\"'auto'\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n    </span>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemDragActionComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "svc-image-item-drag-action",
+                      templateUrl: "./image-item-drag-action.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+  i1.AngularComponentFactory.Instance.registerComponent("svc-image-item-drag-action", ImageItemDragActionComponent);
+
   var SurveyCreatorModule = /** @class */ (function () {
       function SurveyCreatorModule() {
       }
       return SurveyCreatorModule;
   }());
   SurveyCreatorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  SurveyCreatorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+  SurveyCreatorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
           AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
           QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
           ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
-          QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent,
-          BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent], imports: [i2.CommonModule, i3.FormsModule, i1.SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+          QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent,
+          BooleanSwitchComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent,
+          IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent], imports: [i2.CommonModule, i3.FormsModule, i1.SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
           AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
           QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
           ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
-          QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, BooleanSwitchComponent, TranslateFromAction,
-          AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent] });
+          QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, BooleanSwitchComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent,
+          IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent] });
   SurveyCreatorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, providers: [], imports: [[
               i2.CommonModule, i3.FormsModule, i1.SurveyModule
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+                      declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, ObjectSelectorComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                           AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                           QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                           ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
-                          QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent,
-                          BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent],
+                          QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent,
+                          BooleanSwitchComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent, ComponentContainerComponent,
+                          IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent],
                       imports: [
                           i2.CommonModule, i3.FormsModule, i1.SurveyModule
                       ],
                       exports: [
-                          CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+                          CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                           AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                           QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                           ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
-                          QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, BooleanSwitchComponent, TranslateFromAction,
-                          AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent
+                          QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, SpinEditorButtonComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, FileEditorButtonComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, BooleanSwitchComponent, TranslateFromAction, QuestionElementContentComponent, PageElementContentComponent, ComponentContainerComponent,
+                          IconItemComponent, SideBarLaunchCardComponent, ContainerTabComponent, ImageItemDragActionComponent
                       ],
                       providers: [],
                   }]
@@ -3602,12 +3688,12 @@
   exports.ActionButtonComponent = ActionButtonComponent;
   exports.AdaptiveToolboxComponent = AdaptiveToolboxComponent;
   exports.AddQuestionButtonComponent = AddQuestionButtonComponent;
-  exports.AddQuestionTypeSelectorComponent = AddQuestionTypeSelectorComponent;
   exports.BooleanSwitchComponent = BooleanSwitchComponent;
   exports.CellQuestionComponent = CellQuestionComponent;
   exports.CellQuestionDropdownComponent = CellQuestionDropdownComponent;
   exports.ColorItemComponent = ColorItemComponent;
   exports.ComponentContainerComponent = ComponentContainerComponent;
+  exports.ContainerTabComponent = ContainerTabComponent;
   exports.CreatorComponent = CreatorComponent;
   exports.CreatorLogoImageComponent = CreatorLogoImageComponent;
   exports.CreatorRowComponent = CreatorRowComponent;
@@ -3615,11 +3701,13 @@
   exports.DesignerSurveyComponent = DesignerSurveyComponent;
   exports.DesignerTabComponent = DesignerTabComponent;
   exports.EmbeddedSurveyQuestionComponent = EmbeddedSurveyQuestionComponent;
+  exports.FileEditorButtonComponent = FileEditorButtonComponent;
+  exports.IconItemComponent = IconItemComponent;
+  exports.ImageItemDragActionComponent = ImageItemDragActionComponent;
   exports.ImageItemValueDesignerComponent = ImageItemValueDesignerComponent;
   exports.ItemValueDesignerComponent = ItemValueDesignerComponent;
   exports.JsonErrorItemComponent = JsonErrorItemComponent;
   exports.LinkValueQuestionComponent = LinkValueQuestionComponent;
-  exports.LogicAddButtonComponent = LogicAddButtonComponent;
   exports.LogicOperatorComponent = LogicOperatorComponent;
   exports.LogicTabComponent = LogicTabComponent;
   exports.MatrixCellComponent = MatrixCellComponent;
@@ -3647,12 +3735,14 @@
   exports.QuestionSpinEditorComponent = QuestionSpinEditorComponent;
   exports.QuestionWidgetDesignerComponent = QuestionWidgetDesignerComponent;
   exports.SearchComponent = SearchComponent;
+  exports.SideBarLaunchCardComponent = SideBarLaunchCardComponent;
   exports.SidebarComponent = SidebarComponent;
   exports.SidebarDefaultHeaderComponent = SidebarDefaultHeaderComponent;
   exports.SidebarHeaderComponent = SidebarHeaderComponent;
   exports.SidebarPageComponent = SidebarPageComponent;
   exports.SidebarPropertyGridHeaderComponent = SidebarPropertyGridHeaderComponent;
   exports.SimulatorComponent = SimulatorComponent;
+  exports.SpinEditorButtonComponent = SpinEditorButtonComponent;
   exports.StringEditorComponent = StringEditorComponent;
   exports.SurfacePlaceholderComponent = SurfacePlaceholderComponent;
   exports.SurveyCreatorModule = SurveyCreatorModule;
@@ -3665,7 +3755,6 @@
   exports.TabbedMenuItemWrapperComponent = TabbedMenuItemWrapperComponent;
   exports.TabbledMenuComponent = TabbledMenuComponent;
   exports.TabsComponent = TabsComponent;
-  exports.TestAgainActionComponent = TestAgainActionComponent;
   exports.TestTabComponent = TestTabComponent;
   exports.TextareaJsonEditorComponent = TextareaJsonEditorComponent;
   exports.ThemeTabComponent = ThemeTabComponent;