survey-creator-angular 2.3.4 → 2.3.6

package/fesm2015/survey-creator-angular.js

@@ -6,7 +6,7 @@ import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from 'survey-angular-ui';
 import { BaseAngular, AngularComponentFactory, SurveyContentComponent, EmbeddedViewContentComponent, ButtonGroupQuestionComponent, QuestionAngular, SurveyModule } from 'survey-angular-ui';
-import { PageAdorner, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, ToolboxToolViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
+import { PageNavigatorViewModel, editorLocalization, SurveyResultsModel, PageAdorner, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, ToolboxToolViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';
 import { getActionDropdownButtonTarget, DropdownListModel, RendererFactory } from 'survey-core';
 
 class TabbedMenuItemWrapperComponent extends BaseAngular {
@@ -212,124 +212,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-surface-placeholder", SurfacePlaceholderComponent);
 
-class CreatorModelComponent extends BaseAngular {
-    createHash() {
-        this.hash = {};
-        this.getPropertiesToTrack().forEach((prop) => {
-            this.hash[prop] = this[prop];
-        });
-    }
-    ngOnInit() {
-        this.createModel();
-        this.createHash();
-        super.ngOnInit();
+class PageWrapperComponent extends EmbeddedViewContentComponent {
+    constructor(viewContainerRef, changeDetectorRef) {
+        super(viewContainerRef);
+        this.changeDetectorRef = changeDetectorRef;
+        this.id = `PageWrapperCallback_${++PageWrapperComponent.ID}`;
     }
-    ngDoCheck() {
-        if (this.needUpdateModel())
-            this.createModel();
-        super.ngDoCheck();
+    setupCallback(page) {
+        if (!page)
+            return;
+        page.registerFunctionOnPropertyValueChanged("name", () => {
+            this.embeddedView ? this.embeddedView.detectChanges() : this.changeDetectorRef.detectChanges();
+        }, this.id);
     }
-    needUpdateModel() {
-        let res = false;
-        Object.keys(this.hash).forEach(key => {
-            if (this.hash[key] != this[key]) {
-                this.hash[key] = this[key];
-                res = true;
-            }
-        });
-        return res;
-    }
-}
-CreatorModelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorModelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CreatorModelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorModelComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorModelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ""
-                }]
-        }] });
-
-class PageElementContentComponent extends EmbeddedViewContentComponent {
-    ngAfterViewInit() {
-        var _a;
-        (_a = this.embeddedView) === null || _a === void 0 ? void 0 : _a.detach();
+    clearCallback(page) {
+        if (!page)
+            return;
+        page.unRegisterFunctionOnPropertyValueChanged("name");
     }
     ngOnChanges(changes) {
-        var _a;
-        (_a = this.embeddedView) === null || _a === void 0 ? void 0 : _a.detectChanges();
-    }
-}
-PageElementContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageElementContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageElementContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageElementContentComponent, selector: "svc-page-element-content", inputs: { model: "model", survey: "survey" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template><page [model]=\"model\" [survey]=\"survey\"></page></ng-template>", isInline: true, styles: [":host { display: none }"], components: [{ type: i1.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageElementContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "svc-page-element-content",
-                    template: "<ng-template #template><page [model]=\"model\" [survey]=\"survey\"></page></ng-template>",
-                    styles: [":host { display: none }"]
-                }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], survey: [{
-                type: Input
-            }] } });
-
-class PageDesignerComponent extends CreatorModelComponent {
-    createModel() {
-        if (this.adorner) {
-            this.adorner.dispose();
-        }
-        if (this.model) {
-            this.adorner = new PageAdorner(this.creator, this.model);
-            this.adorner.isGhost = this.isGhost;
-        }
-    }
-    ngDoCheck() {
-        super.ngDoCheck();
-        if (this.adorner) {
-            this.adorner.isGhost = this.isGhost;
-        }
-    }
-    getModel() {
-        return this.adorner;
-    }
-    getPropertiesToTrack() {
-        return ["creator", "model"];
-    }
-    ngAfterViewChecked() {
-        var _a;
-        super.ngAfterViewChecked();
-        if (this.adorner && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
-            this.adorner.setRootElement(this.container.nativeElement);
+        if (changes.page && changes.page.currentValue !== changes.page.previousValue) {
+            this.clearCallback(changes.page.previousValue);
+            this.setupCallback(changes.page.currentValue);
         }
     }
     ngOnDestroy() {
-        super.ngOnDestroy();
-        this.adorner.dispose();
+        this.clearCallback(this.page);
     }
 }
-PageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageDesignerComponent, selector: "svc-page", inputs: { model: "model", survey: "survey", creator: "creator", isGhost: "isGhost" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n<div *ngIf=\"model && adorner\" class=\"svc-page__content\" [class]=\"adorner.css\" [key2click]\n  (click)=\"adorner.select(adorner, $event)\" (dblclick)=\"adorner.dblclick($event)\"\n  (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.target)\"\n  [id]=\"adorner.page.id\" [attr.data-sv-drop-target-survey-page]=\"adorner.dropTargetName\" #container>\n  <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n  <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n  <svc-page-element-content\n    *ngIf=\"adorner.needRenderContent\" \n    [model]=\"adorner.page\" \n    [survey]=\"survey\">\n  </svc-page-element-content>\n  <div *ngIf=\"!adorner.needRenderContent\" class=\"svc-page__loading-content\">\n    <sv-ng-loading-indicator></sv-ng-loading-indicator>\n  </div>\n  <div *ngIf=\"adorner.showPlaceholder\" class=\"svc-page__placeholder_frame\">\n    <div class=\"svc-panel__placeholder_frame\">\n      <div class=\"svc-panel__placeholder\">{{adorner.placeholderText}}</div>\n    </div>\n  </div>\n  <div *ngIf=\"adorner.allowDragging && !adorner.isGhost\" class=\"svc-question__drag-area\"\n    (pointerdown)=\"adorner.onPointerDown($event)\">\n    <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"'auto'\"\n      sv-ng-svg-icon></svg>\n    <div class=\"svc-page__content-actions\">\n      <sv-action-bar [model]=\"adorner.actionContainer\" #container></sv-action-bar>\n      <sv-action-bar *ngIf=\"adorner.topActionContainer.hasActions\" [model]=\"adorner.topActionContainer\"></sv-action-bar>\n    </div>\n  </div>\n  <div *ngIf=\"!adorner.allowDragging || adorner.isGhost\" class=\"svc-page__content-actions\">\n    <sv-action-bar [model]=\"adorner.actionContainer\"></sv-action-bar>\n    <sv-action-bar *ngIf=\"adorner.topActionContainer.hasActions\" [model]=\"adorner.topActionContainer\"></sv-action-bar>\n  </div>\n  <sv-action-bar [model]=\"adorner.footerActionsBar\"></sv-action-bar>\n</div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: PageElementContentComponent, selector: "svc-page-element-content", inputs: ["model", "survey"] }, { type: i1.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, decorators: [{
+PageWrapperComponent.ID = 0;
+PageWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageWrapperComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PageWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageWrapperComponent, selector: "svc-page-wrapper", inputs: { page: "page", isGhost: "isGhost", creator: "creator", className: "className" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template>\n    <div\n      [class]=\"className\"\n      [attr.data-sv-drop-target-page]=\"page?.name\"\n      [attr.data-sv-drop-target-survey-element]=\"isGhost ? 'newGhostPage' : page?.name\"\n    >\n      <ng-container *ngIf=\"!!page\">\n           <ng-template [component]=\"{ name: 'svc-page', data: { model: page, creator, survey: creator.survey, isGhost }}\"></ng-template>\n      </ng-container>\n    </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageWrapperComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "svc-page",
-                    templateUrl: "./page.component.html",
+                    selector: "svc-page-wrapper",
+                    templateUrl: "./page-wrapper.component.html",
                     styles: [":host { display: none; }"]
                 }]
-        }], propDecorators: { model: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { page: [{
                 type: Input
-            }], survey: [{
+            }], isGhost: [{
                 type: Input
             }], creator: [{
                 type: Input
-            }], isGhost: [{
+            }], className: [{
                 type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ["container", { read: ElementRef }]
             }] } });
-AngularComponentFactory.Instance.registerComponent("svc-page", PageDesignerComponent);
 
 class DesignerPagesComponent extends BaseAngular {
     getModel() {
@@ -343,7 +272,7 @@ class DesignerPagesComponent extends BaseAngular {
     }
 }
 DesignerPagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerPagesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DesignerPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page\" [attr.data-sv-drop-target-survey-element]=\"model.displayPageDropTarget\"\n    [attr.data-sv-drop-target-page]=\"model.pagesController.page2Display.name\">\n    <ng-template\n      [component]=\"{ name: 'svc-page', data: { model: model.pagesController.page2Display, creator, survey, isGhost: model.pagesController.page2Display == model.newPage }}\"></ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+DesignerPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <svc-page-wrapper [page]=\"model.pagesController.page2Display\" [creator]=\"creator\" [isGhost]=\"model.pagesController.page2Display == model.newPage\" [className]=\"'svc-page'\"></svc-page-wrapper>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: PageWrapperComponent, selector: "svc-page-wrapper", inputs: ["page", "isGhost", "creator", "className"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerPagesComponent, decorators: [{
             type: Component,
             args: [{
@@ -355,6 +284,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
+class CreatorModelComponent extends BaseAngular {
+    createHash() {
+        this.hash = {};
+        this.getPropertiesToTrack().forEach((prop) => {
+            this.hash[prop] = this[prop];
+        });
+    }
+    ngOnInit() {
+        this.createModel();
+        this.createHash();
+        super.ngOnInit();
+    }
+    ngDoCheck() {
+        if (this.needUpdateModel())
+            this.createModel();
+        super.ngDoCheck();
+    }
+    needUpdateModel() {
+        let res = false;
+        Object.keys(this.hash).forEach(key => {
+            if (this.hash[key] != this[key]) {
+                this.hash[key] = this[key];
+                res = true;
+            }
+        });
+        return res;
+    }
+}
+CreatorModelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorModelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CreatorModelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorModelComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorModelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ""
+                }]
+        }] });
+
 class PageNavigatorItemComponent extends BaseAngular {
     getModel() {
         return this.model;
@@ -437,7 +403,7 @@ class DesignerSurveyComponent extends BaseAngular {
     }
 }
 DesignerSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerSurveyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DesignerSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.designerCss\" [style.maxWidth]=\"survey.renderedWidth\" [style]=\"model.surfaceCssVariables\">\n    <div *ngIf=\"creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n      <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n    </div>\n\n    <ng-container *ngIf=\"creator.pageEditMode !== 'bypage'\">\n      <ng-container *ngFor=\"let page of model.pages; trackBy: trackPageBy \">\n        <ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"pageContainer; context: { page, isGhost: model.newPage == page }\"></ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.pagesController.page2Display && creator.pageEditMode === 'bypage'\">\n      <svc-designer-pages [model]=\"model\"></svc-designer-pages>\n    </ng-container>\n\n  </div>\n\n  <div *ngIf=\"model.showSurfaceTools\" class=\"svc-tab-designer__tools\">\n    <div *ngIf=\"creator.showPageNavigator\" class=\"svc-tab-designer__page-navigator\">\n      <svc-page-navigator [pagesController]=\"model.pagesController\" [pageEditMode]=\"creator.pageEditMode\">\n      </svc-page-navigator>\n    </div>\n    <div *ngIf=\"model.showSurfaceToolbar\" class=\"svc-tab-designer__toolbar\">\n      <sv-action-bar [model]=\"model.surfaceToolbar\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template let-page=\"page\" let-isGhost=\"isGhost\" #pageContainer>\n  <div class=\"svc-page\" [attr.data-sv-drop-target-survey-element]=\"isGhost ? 'newGhostPage' : page.name\"\n    [attr.data-sv-drop-target-page]=\"page.name\">\n    <ng-template\n      [component]=\"{ name: 'svc-page', data: { model: page, creator, survey, isGhost: isGhost }}\"></ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: ["model"] }, { type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: ["pagesController", "pageEditMode"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+DesignerSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.designerCss\" [style.maxWidth]=\"survey.renderedWidth\" [style]=\"model.surfaceCssVariables\">\n    <div *ngIf=\"creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n      <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header></div>\n    </div>\n\n    <ng-container *ngIf=\"creator.pageEditMode !== 'bypage'\">\n      <ng-container *ngFor=\"let page of model.pages; trackBy: trackPageBy \">\n        <svc-page-wrapper [page]=\"page\" [creator]=\"creator\" [isGhost]=\"model.newPage == page\" [className]=\"'svc-page'\"></svc-page-wrapper>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.pagesController.page2Display && creator.pageEditMode === 'bypage'\">\n      <svc-designer-pages [model]=\"model\"></svc-designer-pages>\n    </ng-container>\n\n  </div>\n\n  <div *ngIf=\"model.showSurfaceTools\" class=\"svc-tab-designer__tools\">\n    <div *ngIf=\"creator.showPageNavigator\" class=\"svc-tab-designer__page-navigator\">\n      <svc-page-navigator [pagesController]=\"model.pagesController\" [pageEditMode]=\"creator.pageEditMode\">\n      </svc-page-navigator>\n    </div>\n    <div *ngIf=\"model.showSurfaceToolbar\" class=\"svc-tab-designer__toolbar\">\n      <sv-action-bar [model]=\"model.surfaceToolbar\"></sv-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageWrapperComponent, selector: "svc-page-wrapper", inputs: ["page", "isGhost", "creator", "className"] }, { type: DesignerPagesComponent, selector: "svc-designer-pages", inputs: ["model"] }, { type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: ["pagesController", "pageEditMode"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerSurveyComponent, decorators: [{
             type: Component,
             args: [{
@@ -461,7 +427,7 @@ class DesignerTabComponent extends BaseAngular {
     }
 }
 DesignerTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DesignerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerTabComponent, selector: "svc-tab-designer", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-flex-column\">\n    <ng-container *ngIf=\"model.isToolboxVisible\">\n      <ng-template [component]=\"{name: 'svc-toolbox', data: { model: creator }}\"></ng-template>\n    </ng-container>\n  </div>\n  <div class=\"svc-tab-designer\" [class]=\"model.getRootCss()\" (click)=\"model.clickDesigner()\">\n    <sv-scroll>\n      <div class=\"svc-tab-designer_content\">\n        <ng-container *ngIf=\"model.showPlaceholder\">\n          <div *ngIf=\"creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n            <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header>\n            </div>\n          </div>\n          <div class=\"svc-designer__placeholder-container\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\">\n            <svc-surface-placeholder [name]=\"'designer'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n              [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n            </svc-surface-placeholder>\n            <div class=\"svc-designer-placeholder-page\">\n              <svc-page [model]=\"model.newPage\" [survey]=\"survey\" [creator]=\"creator\" [isGhost]=\"true\"></svc-page>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!model.showPlaceholder\">\n          <svc-designer-survey [model]=\"model\"></svc-designer-survey>\n        </ng-container>\n      </div>\n    </sv-scroll>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: PageDesignerComponent, selector: "svc-page", inputs: ["model", "survey", "creator", "isGhost"] }, { type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+DesignerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerTabComponent, selector: "svc-tab-designer", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-flex-column\">\n    <ng-container *ngIf=\"model.isToolboxVisible\">\n      <ng-template [component]=\"{name: 'svc-toolbox', data: { model: creator }}\"></ng-template>\n    </ng-container>\n  </div>\n  <div class=\"svc-tab-designer\" [class]=\"model.getRootCss()\" (click)=\"model.clickDesigner()\">\n    <sv-scroll>\n      <div class=\"svc-tab-designer_content\">\n        <ng-container *ngIf=\"model.showPlaceholder\">\n          <div *ngIf=\"creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle\" class=\"svc-designer-header\">\n            <div *ngIf=\"survey.renderedHasHeader\" [class]=\"survey.css.header\" [survey]=\"survey\" sv-ng-survey-header>\n            </div>\n          </div>\n          <div class=\"svc-designer__placeholder-container\" [attr.data-sv-drop-target-survey-element]=\"'newGhostPage'\">\n            <svc-surface-placeholder [name]=\"'designer'\" [placeholderTitleText]=\"model.placeholderTitleText\"\n              [placeholderDescriptionText]=\"model.placeholderDescriptionText\">\n            </svc-surface-placeholder>\n            <svc-page-wrapper [page]=\"model.newPage\" [creator]=\"creator\" [isGhost]=\"true\" [className]=\"'svc-designer-placeholder-page'\"></svc-page-wrapper>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!model.showPlaceholder\">\n          <svc-designer-survey [model]=\"model\"></svc-designer-survey>\n        </ng-container>\n      </div>\n    </sv-scroll>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: ["name", "placeholderTitleText", "placeholderDescriptionText"] }, { type: PageWrapperComponent, selector: "svc-page-wrapper", inputs: ["page", "isGhost", "creator", "className"] }, { type: DesignerSurveyComponent, selector: "svc-designer-survey", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -1079,6 +1045,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tab-theme", ThemeTabComponent);
 
+class PageElementContentComponent extends EmbeddedViewContentComponent {
+    ngAfterViewInit() {
+        var _a;
+        (_a = this.embeddedView) === null || _a === void 0 ? void 0 : _a.detach();
+    }
+    ngOnChanges(changes) {
+        var _a;
+        (_a = this.embeddedView) === null || _a === void 0 ? void 0 : _a.detectChanges();
+    }
+}
+PageElementContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageElementContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PageElementContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageElementContentComponent, selector: "svc-page-element-content", inputs: { model: "model", survey: "survey" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template><page [model]=\"model\" [survey]=\"survey\"></page></ng-template>", isInline: true, styles: [":host { display: none }"], components: [{ type: i1.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageElementContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-page-element-content",
+                    template: "<ng-template #template><page [model]=\"model\" [survey]=\"survey\"></page></ng-template>",
+                    styles: [":host { display: none }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], survey: [{
+                type: Input
+            }] } });
+
+class PageDesignerComponent extends CreatorModelComponent {
+    createModel() {
+        if (this.adorner) {
+            this.adorner.dispose();
+        }
+        if (this.model) {
+            this.adorner = new PageAdorner(this.creator, this.model);
+            this.adorner.isGhost = this.isGhost;
+        }
+    }
+    ngDoCheck() {
+        super.ngDoCheck();
+        if (this.adorner) {
+            this.adorner.isGhost = this.isGhost;
+        }
+    }
+    getModel() {
+        return this.adorner;
+    }
+    getPropertiesToTrack() {
+        return ["creator", "model"];
+    }
+    ngAfterViewChecked() {
+        var _a;
+        super.ngAfterViewChecked();
+        if (this.adorner && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.adorner.setRootElement(this.container.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.adorner.dispose();
+    }
+}
+PageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageDesignerComponent, selector: "svc-page", inputs: { model: "model", survey: "survey", creator: "creator", isGhost: "isGhost" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n<div *ngIf=\"model && adorner\" class=\"svc-page__content\" [class]=\"adorner.css\" [key2click]\n  (click)=\"adorner.select(adorner, $event)\" (dblclick)=\"adorner.dblclick($event)\"\n  (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.target)\"\n  [id]=\"adorner.page.id\" [attr.data-sv-drop-target-survey-page]=\"adorner.dropTargetName\" #container>\n  <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n  <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n  <svc-page-element-content\n    *ngIf=\"adorner.needRenderContent\" \n    [model]=\"adorner.page\" \n    [survey]=\"survey\">\n  </svc-page-element-content>\n  <div *ngIf=\"!adorner.needRenderContent\" class=\"svc-page__loading-content\">\n    <sv-ng-loading-indicator></sv-ng-loading-indicator>\n  </div>\n  <div *ngIf=\"adorner.showPlaceholder\" class=\"svc-page__placeholder_frame\">\n    <div class=\"svc-panel__placeholder_frame\">\n      <div class=\"svc-panel__placeholder\">{{adorner.placeholderText}}</div>\n    </div>\n  </div>\n  <div *ngIf=\"adorner.allowDragging && !adorner.isGhost\" class=\"svc-question__drag-area\"\n    (pointerdown)=\"adorner.onPointerDown($event)\">\n    <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"'auto'\"\n      sv-ng-svg-icon></svg>\n    <div class=\"svc-page__content-actions\">\n      <sv-action-bar [model]=\"adorner.actionContainer\" #container></sv-action-bar>\n      <sv-action-bar *ngIf=\"adorner.topActionContainer.hasActions\" [model]=\"adorner.topActionContainer\"></sv-action-bar>\n    </div>\n  </div>\n  <div *ngIf=\"!adorner.allowDragging || adorner.isGhost\" class=\"svc-page__content-actions\">\n    <sv-action-bar [model]=\"adorner.actionContainer\"></sv-action-bar>\n    <sv-action-bar *ngIf=\"adorner.topActionContainer.hasActions\" [model]=\"adorner.topActionContainer\"></sv-action-bar>\n  </div>\n  <sv-action-bar [model]=\"adorner.footerActionsBar\"></sv-action-bar>\n</div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: PageElementContentComponent, selector: "svc-page-element-content", inputs: ["model", "survey"] }, { type: i1.LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "svc-page",
+                    templateUrl: "./page.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], survey: [{
+                type: Input
+            }], creator: [{
+                type: Input
+            }], isGhost: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container", { read: ElementRef }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("svc-page", PageDesignerComponent);
+
 class AddQuestionButtonComponent extends CreatorModelComponent {
     constructor() {
         super(...arguments);
@@ -2321,7 +2369,7 @@ SurveyCreatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
         QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent,
-        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent], imports: [CommonModule, FormsModule, SurveyModule], exports: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarPageComponent, SidebarDefaultHeaderComponent, SidebarPropertyGridHeaderComponent, PropertyGridPlaceholderComponent, SidebarHeaderComponent, TabControlComponent, TabsComponent, TabButtonComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, QuestionPgErrorComponent, SurfacePlaceholderComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
         AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxItemGroupComponent, ToolboxListComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
@@ -2338,7 +2386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
                         ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, CreatorLogoImageComponent,
                         QuestionRatingAdornerDesignerComponent, QuestionRatingDesignerComponent, QuestionSpinEditorComponent, ColorItemComponent, QuestionColorComponent, QuestionFileEditorComponent, AddQuestionButtonComponent, QuestionBannerComponent, JsonErrorItemComponent, QuestionTextWithResetComponent,
-                        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent],
+                        BooleanSwitchComponent, TranslateFromAction, AddQuestionTypeSelectorComponent, QuestionElementContentComponent, PageElementContentComponent, PageWrapperComponent],
                     imports: [
                         CommonModule, FormsModule, SurveyModule
                     ],