survey-creator-angular 1.9.87 → 1.9.89

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

@@ -120,11 +120,11 @@
                 if (_ = accept(result.set))
                     descriptor.set = _;
                 if (_ = accept(result.init))
-                    initializers.push(_);
+                    initializers.unshift(_);
             }
             else if (_ = accept(result)) {
                 if (kind === "field")
-                    initializers.push(_);
+                    initializers.unshift(_);
                 else
                     descriptor[key] = _;
             }
@@ -411,6 +411,33 @@
             throw new TypeError("Cannot use 'in' operator on non-object");
         return typeof state === "function" ? receiver === state : state.has(receiver);
     }
+    var tslib_es6 = {
+        __extends: __extends,
+        __assign: __assign,
+        __rest: __rest,
+        __decorate: __decorate,
+        __param: __param,
+        __metadata: __metadata,
+        __awaiter: __awaiter,
+        __generator: __generator,
+        __createBinding: __createBinding,
+        __exportStar: __exportStar,
+        __values: __values,
+        __read: __read,
+        __spread: __spread,
+        __spreadArrays: __spreadArrays,
+        __spreadArray: __spreadArray,
+        __await: __await,
+        __asyncGenerator: __asyncGenerator,
+        __asyncDelegator: __asyncDelegator,
+        __asyncValues: __asyncValues,
+        __makeTemplateObject: __makeTemplateObject,
+        __importStar: __importStar,
+        __importDefault: __importDefault,
+        __classPrivateFieldGet: __classPrivateFieldGet,
+        __classPrivateFieldSet: __classPrivateFieldSet,
+        __classPrivateFieldIn: __classPrivateFieldIn,
+    };
 
     var SvgBundleComponent = /** @class */ (function () {
         function SvgBundleComponent() {
@@ -1369,7 +1396,7 @@
         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()\" (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\" [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator-frame\" [style.width]=\"simulatorFrame.landscapedFrameWidth + 'px'\" [style.height]=\"simulatorFrame.landscapedFrameHeight + 'px'\" [class]=\"simulatorFrame.cssClass\"></div>\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\" [style.height]=\"simulatorFrame.deviceHeight + 'px'\" [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\">\n          <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!model.hasFrame\" class=\"svd-simulator-content\">\n      <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["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()\" [style]=\"model.themeVariables\" (keydown)=\"model.tryToZoom($event, $event)\" (mouseover)=\"activateZoom()\" (mouseout)=\"deactivateZoom()\">\n    <div *ngIf=\"model.hasFrame\" class=\"svd-simulator-wrapper\" id=\"svd-simulator-wrapper\" [style.width]=\"simulatorFrame.frameWidth + 'px'\" [style.height]=\"simulatorFrame.frameHeight + 'px'\">\n      <div class=\"svd-simulator-frame\" [style.width]=\"simulatorFrame.landscapedFrameWidth + 'px'\" [style.height]=\"simulatorFrame.landscapedFrameHeight + 'px'\" [class]=\"simulatorFrame.cssClass\"></div>\n      <div class=\"svd-simulator\" [style.width]=\"simulatorFrame.deviceWidth + 'px'\" [style.height]=\"simulatorFrame.deviceHeight + 'px'\" [style.transform]=\"'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'\">\n        <div class=\"svd-simulator-content\">\n          <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!model.hasFrame\" class=\"svd-simulator-content\">\n      <ng-template [component]=\"{ name: 'survey-widget', data: { model: model.survey } }\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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: [{
@@ -1482,6 +1509,30 @@
                 }] } });
     i1.AngularComponentFactory.Instance.registerComponent("svc-tab-test", TestTabComponent);
 
+    var ThemeTabComponent = /** @class */ (function (_super) {
+        __extends(ThemeTabComponent, _super);
+        function ThemeTabComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ThemeTabComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        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\" [class.svc-creator-tab__content--with-toolbar]=\"model.isPageToolbarVisible\">\n    <div class=\"svc-plugin-tab__content\">\n      <survey-simulator [model]=\"model.simulator\"></survey-simulator>\n      <ng-container *ngIf=\"!model.isRunning\">\n        <survey-test-again [model]=\"model.testAgainAction\"></survey-test-again>\n        <survey-results [survey]=\"model.survey\"></survey-results>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.isPageToolbarVisible\" class=\"svc-plugin-tab__content-actions svc-test-tab__content-actions\">\n      <sv-action-bar [model]=\"model.pages\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SimulatorComponent, selector: "survey-simulator", inputs: ["model"] }, { type: TestAgainActionComponent, selector: "survey-test-again", inputs: ["model"] }, { type: SurveyResultsComponent, selector: "survey-results", inputs: ["survey"] }, { type: i1__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: ThemeTabComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "svc-tab-theme",
+                        templateUrl: "./theme.component.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    i1.AngularComponentFactory.Instance.registerComponent("svc-tab-theme", ThemeTabComponent);
+
     var QuestionDesignerComponent = /** @class */ (function (_super) {
         __extends(QuestionDesignerComponent, _super);
         function QuestionDesignerComponent() {
@@ -1514,6 +1565,27 @@
         QuestionDesignerComponent.prototype.getModel = function () {
             return this.adorner;
         };
+        Object.defineProperty(QuestionDesignerComponent.prototype, "placeholderComponent", {
+            get: function () {
+                return "";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QuestionDesignerComponent.prototype, "placeholderComponentData", {
+            get: function () {
+                return null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QuestionDesignerComponent.prototype, "showPlaceholderComponent", {
+            get: function () {
+                return false;
+            },
+            enumerable: false,
+            configurable: true
+        });
         QuestionDesignerComponent.prototype.selectQuestionType = function (event) {
             var _a;
             event.stopPropagation();
@@ -1526,7 +1598,7 @@
         return QuestionDesignerComponent;
     }(CreatorModelComponent));
     QuestionDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    QuestionDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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: 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"] }] });
+    QuestionDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click] (click)=\"adorner.select(adorner, $event)\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </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.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: QuestionDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1663,7 +1735,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()\" [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container>\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__drag-area-indicator\" (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </span>\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <ng-container *ngIf=\"adorner.allowRemove && !adorner.isUploading\">\n            <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__choose-file\" (click)=\"adorner.chooseFile(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__remove\" (click)=\"adorner.remove(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-delete'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew\">\n        <div class=\"svc-image-item-value__item\"\n          data-bind=\"event: { dragover: dragover, drop: drop, dragleave: dragleave }\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\"></div>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <span class=\"svc-image-item-value-controls__button svc-image-item-value-controls__add\" [key2click] (click)=\"adorner.chooseNewFile(adorner)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg *ngIf=\"adorner.allowAdd && !adorner.isUploading\" [iconName]=\"'icon-add-lg'\" [size]=\"24\" sv-ng-svg-icon></svg>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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.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()\" [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? this.item.value : null\" #container>\n    <div class=\"svc-image-item-value-wrapper__ghost\" [style]=\"getNewItemStyle()\"></div>\n\n    <div class=\"svc-image-item-value-wrapper__content\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" [accept]=\"adorner.acceptedTypes\" class=\"svc-choose-file-input\" />\n\n      <ng-container *ngIf=\"!adorner.isNew\">\n        <div *ngIf=\"!adorner.isNew\" class=\"svc-image-item-value__item\">\n          <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n        </div>\n        <span class=\"svc-context-button svc-image-item-value-controls__drag-area-indicator\" (pointerdown)=\"adorner.onPointerDown($event)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n          <svg [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </span>\n        <div class=\"svc-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\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-context-button svc-context-button--danger\" (click)=\"adorner.remove(adorner)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-delete'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"adorner.isNew\">\n        <div class=\"svc-image-item-value__item\"\n          data-bind=\"event: { dragover: dragover, drop: drop, dragleave: dragleave }\">\n          <div class=\"sd-imagepicker__item sd-imagepicker__item--inline\">\n            <label class=\"sd-imagepicker__label\">\n              <div [style]=\"getNewItemStyle()\" class=\"sd-imagepicker__image\"></div>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"svc-image-item-value-controls\" data-bind=\"event: { pointerdown: blockEvent }\">\n          <span class=\"svc-context-button svc-image-item-value-controls__add\" [key2click] (click)=\"adorner.chooseNewFile(adorner)\" [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n            <svg *ngIf=\"adorner.allowAdd && !adorner.isUploading\" [iconName]=\"'icon-add-lg'\" [size]=\"24\" sv-ng-svg-icon></svg>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageItemValueDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1696,7 +1768,7 @@
         return QuestionDropdownDesignerComponent;
     }(QuestionDesignerComponent));
     QuestionDropdownDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDropdownDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    QuestionDropdownDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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: 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"] }] });
+    QuestionDropdownDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click] (click)=\"adorner.select(adorner, $event)\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </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.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: QuestionDropdownDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1756,13 +1828,34 @@
                 this.adorner = new surveyCreatorCore.QuestionImageAdornerViewModel(this.creator, this.model, null, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.nextSibling);
             }
         };
+        Object.defineProperty(QuestionImageDesignerComponent.prototype, "placeholderComponent", {
+            get: function () {
+                return "file-question";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QuestionImageDesignerComponent.prototype, "placeholderComponentData", {
+            get: function () {
+                return { model: this.adorner.filePresentationModel };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QuestionImageDesignerComponent.prototype, "showPlaceholderComponent", {
+            get: function () {
+                return !!this.placeholderComponentData;
+            },
+            enumerable: false,
+            configurable: true
+        });
         QuestionImageDesignerComponent.prototype.ngAfterViewInit = function () {
             this.adorner.questionRoot = this.container.nativeElement;
         };
         return QuestionImageDesignerComponent;
     }(QuestionDesignerComponent));
     QuestionImageDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    QuestionImageDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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: 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"] }] });
+    QuestionImageDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click] (click)=\"adorner.select(adorner, $event)\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </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.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: QuestionImageDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1783,7 +1876,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\">\n    <ng-container *ngIf=\"adorner.allowEdit && !adorner.isUploading\">\n      <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n      <span class=\"svc-image-question-controls__button\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n        <svg  [iconName]=\"'icon-file'\" [size]=\"24\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n      </span>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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"] }] });
+    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\">\n    <ng-container *ngIf=\"adorner.allowEdit && !adorner.isUploading && !adorner.isEmptyElement\">\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\"\n        [attr.aria-label]=\"undefined\">\n        <svg [iconName]=\"'icon-file'\" [size]=\"24\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n      </span>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageAdornerDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1806,12 +1899,12 @@
         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()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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: 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"] }] });
+    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()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\"\n      [attr.tabindex]=\"adorner.element.isInteractiveDesignElement ? undefined : -1\">\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && 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__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__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: 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: [{
                         selector: "svc-panel",
-                        templateUrl: "./question.component.html",
+                        templateUrl: "./panel.component.html",
                         styles: [":host { display: none; }"]
                     }]
             }] });
@@ -1998,7 +2091,7 @@
         return StringEditorComponent;
     }(CreatorModelComponent));
     StringEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringEditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    StringEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringEditorComponent, selector: "svc-string-edtior", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <span [class]=\"className\">\n    <span class=\"svc-string-editor__content\">\n        <div class=\"svc-string-editor__border\">\n          <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-string-editor__button svc-string-editor__button--edit\" [size]=\"24\" sv-ng-svg-icon \n            (click)=\"edit($event)\" [iconName]=\"'icon-edit'\" [size]=\"16\"></svg>\n        </div>\n        <span class=\"svc-string-editor__input\">\n          <span role=\"textbox\" *ngIf=\"!locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n              (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"  (input)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerText]=\"editValue\" #container></span>\n          <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n          (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n          (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"editValue\" #container></span>\n          <sv-ng-character-counter *ngIf=\"showCharacterCounter\" [counter]=\"characterCounter\" [remainingCharacterCounter]=\"getCharacterCounterClass\"></sv-ng-character-counter>\n        </span>\n    </span>\n    <span *ngIf=\"errorText\" class=\"svc-string-editor__error\">{{errorText}}</span>\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"] }, { type: i1__namespace.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    StringEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringEditorComponent, selector: "svc-string-edtior", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <span [class]=\"className\">\n    <span class=\"svc-string-editor__content\">\n        <div class=\"svc-string-editor__border\">\n          <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-string-editor__button svc-string-editor__button--edit\" [size]=\"24\" sv-ng-svg-icon \n            (click)=\"edit($event)\" [iconName]=\"'icon-edit'\" [size]=\"16\"></svg>\n        </div>\n        <span class=\"svc-string-editor__input\">\n          <span role=\"textbox\" *ngIf=\"!locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n              (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"  (input)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [textContent]=\"editValue\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" #container></span>\n          <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor sv-string-editor--html\" spellcheck=\"false\"\n          (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n          (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"editValue\" #container></span>\n          <sv-ng-character-counter *ngIf=\"showCharacterCounter\" [counter]=\"characterCounter\" [remainingCharacterCounter]=\"getCharacterCounterClass\"></sv-ng-character-counter>\n        </span>\n    </span>\n    <span *ngIf=\"errorText\" class=\"svc-string-editor__error\">{{errorText}}</span>\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"] }, { type: i1__namespace.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], 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: StringEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2108,8 +2201,9 @@
             configurable: true
         });
         MatrixCellComponent.prototype.createModel = function () {
+            var _a;
             if (this.componentData) {
-                this.adorner = new surveyCreatorCore.MatrixCellWrapperViewModel(this.creator, this.element, this.question, this.row, this.column);
+                this.adorner = new surveyCreatorCore.MatrixCellWrapperViewModel(this.creator, this.element, this.question, this.row, this.column || ((_a = this.element.cell) === null || _a === void 0 ? void 0 : _a.column));
             }
         };
         MatrixCellComponent.prototype.getPropertiesToTrack = function () {
@@ -2121,7 +2215,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\" (click)=\"adorner.editQuestion(adorner)\" [key2click]>\n        <svg [iconName]=\"'icon-edit'\" [size]=\"24\" [size]=\"24\" sv-ng-svg-icon></svg>\n      </span>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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      <span class=\"svc-matrix-cell__question-controls-button\" (click)=\"adorner.editQuestion(adorner, $event)\" [key2click]>\n        <svg [iconName]=\"'icon-edit'\" [size]=\"24\" [size]=\"24\" sv-ng-svg-icon></svg>\n      </span>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2378,7 +2472,7 @@
         return QuestionRatingDesignerComponent;
     }(QuestionDesignerComponent));
     QuestionRatingDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionRatingDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    QuestionRatingDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n      [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n          class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n      <!-- ko if: adornerComponent -->\n      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n      <!-- /ko -->\n      <!-- /ko -->\n\n      <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n        <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n          (click)=\"addNewQuestion($event)\" data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n      </div>\n\n      <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n          data-bind=\"clickBubble: false\">\n          <span class=\"svc-text svc-text--normal svc-text--bold\">\n            {{ adorner.addNewQuestionText }}\n          </span>\n        </div>\n        <!-- ko with: questionTypeSelectorModel -->\n        <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n          class=\"svc-panel__question-type-selector\">\n          <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </button>\n        <!-- /ko -->\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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: 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"] }] });
+    QuestionRatingDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click] (click)=\"adorner.select(adorner, $event)\">\n      <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame\">\n        <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n      </div>\n      <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n        [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n      </ng-template>\n\n      <ng-template *ngIf=\"adornerComponent\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div class=\"svc-question__content-actions\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </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.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: QuestionRatingDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2456,7 +2550,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=\"image/*\" 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-logo\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml\">\n      <div [class]=\"model.containerCss\" (click)=\"model.chooseFile(model)\" [key2click]>\n        <sv-logo-image [data]=\"survey\"></sv-logo-image>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.LogoImageComponent, selector: "sv-logo-image", inputs: ["data"] }], 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-logo\"></use>\n          </svg>\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"survey.locLogo.renderedHtml\">\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\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-file'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </span>\n            <span class=\"svc-context-button svc-context-button--danger\" (click)=\"model.remove(model)\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n              <svg [iconName]=\"'icon-clear'\" [size]=\"24\" 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>\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"] }], 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: [{
@@ -2515,7 +2609,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)\">\n  <input type=\"text\" [class]=\"model.cssClasses.control\" [value]=\"model.value ||''\"\n    (change)=\"model.onInputChange($event)\" (blur)=\"model.onInputBlur($event)\" />\n  <div [class]=\"model.cssClasses.buttonsContainer\">\n    <button type=\"button\" [class]=\"model.cssClasses.clearButton\" [disabled]=\"model.getIsClearButtonDisabled()\"\n      (click)=\"model.doClean($event)\">\n      <svg [iconName]=\"model.cssClasses.clearButtonIcon\" size=\"'auto'\" [title]=\"model.clearButtonCaption\"\n        sv-ng-svg-icon></svg>\n    </button>\n    <label tabindex=\"0\" role=\"button\" [class]=\"model.cssClasses.chooseButton\" [attr.for]=\"model.inputId\"\n      [attr.aria-label]=\"model.chooseButtonCaption\">\n      <svg [iconName]=\"model.cssClasses.chooseButtonIcon\" size=\"'auto'\" [title]=\"model.chooseButtonCaption\"\n        sv-ng-svg-icon></svg>\n      <input type=\"file\" tabindex=\"-1\" [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\" [attr.accept]=\"model.acceptedTypes\" (change)=\"model.doChange($event)\">\n    </label>\n  </div>\n</div>", components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+    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)\">\n  <input type=\"text\" [class]=\"model.cssClasses.control\" [value]=\"model.value ||''\"\n    (change)=\"model.onInputChange($event)\" (blur)=\"model.onInputBlur($event)\" />\n  <div [class]=\"model.cssClasses.buttonsContainer\">\n    <button type=\"button\" [class]=\"model.cssClasses.clearButton\" [disabled]=\"model.getIsClearButtonDisabled()\"\n      (click)=\"model.doClean($event)\">\n      <svg [iconName]=\"model.cssClasses.clearButtonIcon\" size=\"'auto'\" [title]=\"model.clearButtonCaption\"\n        sv-ng-svg-icon></svg>\n    </button>\n    <label tabindex=\"0\" role=\"button\" [class]=\"model.cssClasses.chooseButton\" [attr.for]=\"model.inputId\"\n      [attr.aria-label]=\"model.chooseButtonCaption\">\n      <svg [iconName]=\"model.cssClasses.chooseButtonIcon\" size=\"'auto'\" [title]=\"model.chooseButtonCaption\"\n        sv-ng-svg-icon></svg>\n      <input type=\"file\" tabindex=\"-1\" [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.doChange($event)\">\n    </label>\n  </div>\n</div>", 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: QuestionFileEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2531,11 +2625,11 @@
         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, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+    SurveyCreatorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyCreatorModule, declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
             AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
             QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
             ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
-            QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent], imports: [i2.CommonModule, i1$1.FormsModule, i1.SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+            QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, QuestionColorComponent, QuestionFileEditorComponent], imports: [i2.CommonModule, i1$1.FormsModule, i1.SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
             AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
             QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
             ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -2546,7 +2640,7 @@
     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, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+                        declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                             AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                             QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                             ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -2555,7 +2649,7 @@
                             i2.CommonModule, i1$1.FormsModule, i1.SurveyModule
                         ],
                         exports: [
-                            CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
+                            CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
                             AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
                             QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                             ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -2620,6 +2714,7 @@
     exports.TestAgainActionComponent = TestAgainActionComponent;
     exports.TestTabComponent = TestTabComponent;
     exports.TextareaJsonEditorComponent = TextareaJsonEditorComponent;
+    exports.ThemeTabComponent = ThemeTabComponent;
     exports.ToolboxCategoryComponent = ToolboxCategoryComponent;
     exports.ToolboxComponent = ToolboxComponent;
     exports.ToolboxItemComponent = ToolboxItemComponent;