survey-creator-angular/fesm2015/survey-creator-angular.js

Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.

import * as i0 from '@angular/core';
import { Component, Input, ViewChild, ElementRef, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
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 { ResponsivityManager, VerticalResponsivityManager, getActionDropdownButtonTarget, DropdownListModel, RendererFactory } from 'survey-core';
import { ToolboxToolViewModel, PageAdorner, PageNavigatorViewModel, editorLocalization, SurveyResultsModel, QuestionAdornerViewModel, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, StringEditorViewModelBase, editableStringRendererName, initLogicOperator, MatrixCellWrapperViewModel, RowViewModel, QuestionRatingAdornerViewModel, LogoImageViewModel } from 'survey-creator-core';

class TabbedMenuItemWrapperComponent extends BaseAngular {
    getModel() {
        return this.model;
    }
    ngOnDestroy() {
        super.ngOnDestroy();
        this.model.updateModeCallback = undefined;
    }
    ngAfterViewInit() {
        if (this.model) {
            this.model.updateModeCallback = (mode, callback) => {
                this.model.mode = mode;
                queueMicrotask(() => {
                    var _a;
                    callback(mode, (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement);
                });
            };
            this.model.afterRender();
        }
    }
}
TabbedMenuItemWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabbedMenuItemWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
TabbedMenuItemWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbedMenuItemWrapperComponent, selector: "svc-tabbed-menu-item-wrapper", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <span class=\"svc-tabbed-menu-item-container\" [class.sv-action--hidden]=\"!model.isVisible\" [class]=\"model.css\"\n    #container>\n    <div class=\"sv-action__content\">\n      <ng-template [component]=\"{ name: model.component || 'svc-tabbed-menu-item', data: { model } }\"></ng-template>\n    </div>\n  </span>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabbedMenuItemWrapperComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-tabbed-menu-item-wrapper",
                    templateUrl: "./tabbed-menu-item-wrapper.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }], container: [{
                type: ViewChild,
                args: ["container"]
            }] } });

class TabbledMenuComponent extends BaseAngular {
    getModel() {
        return this.model;
    }
    ngAfterViewInit() {
        this.responsivityManager = new ResponsivityManager(this.container.nativeElement, this.model);
    }
    ngOnDestroy() {
        super.ngOnDestroy();
        this.responsivityManager.dispose();
    }
    trackItemBy(_, item) {
        return item.renderedId;
    }
}
TabbledMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabbledMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
TabbledMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-tabbed-menu\" #container role=\"tablist\">\n    <ng-container *ngFor=\"let action of model.renderedActions; trackBy: trackItemBy\">\n      <svc-tabbed-menu-item-wrapper [model]=\"action\"></svc-tabbed-menu-item-wrapper>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: TabbedMenuItemWrapperComponent, selector: "svc-tabbed-menu-item-wrapper", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabbledMenuComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-tabbed-menu",
                    templateUrl: "./tabbed-menu.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }], container: [{
                type: ViewChild,
                args: ["container"]
            }] } });
AngularComponentFactory.Instance.registerComponent("svc-tabbed-menu", TabbledMenuComponent);

class SidebarPageComponent extends BaseAngular {
    getModel() {
        return this.model;
    }
}
SidebarPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
SidebarPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPageComponent, selector: "svc-side-bar-page", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngIf=\"model.visible\">\n    <ng-template [component]=\"{ name: model.componentName, data: { model: model.componentData } }\"></ng-template>\n  </ng-container>\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: SidebarPageComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-side-bar-page",
                    templateUrl: "./side-bar-page.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }] } });

class SidebarComponent extends BaseAngular {
    getModel() {
        return this.model;
    }
    ngOnDestroy() {
        this.model.resetResizeManager();
        super.ngOnDestroy();
    }
    ngAfterViewInit() {
        this.model.initResizeManager(this.container.nativeElement);
    }
}
SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarComponent, selector: "svc-side-bar", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.rootCss\" [visible]=\"model.renderRoot\">\n    <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\" [visible]=\"model.renderContainer\"></div>\n    <div class=\"svc-flex-row svc-side-bar__wrapper\">\n      <div class=\"svc-side-bar__container-wrapper\" [visible]=\"model.renderContainer\">\n        <div class=\"svc-side-bar__container\" [visible]=\"model.renderedIsVisible\" #container>\n          <ng-template\n            [component]=\"{ name: model.header.component, data: { model: model.header.componentModel } }\"></ng-template>\n          <div class=\"svc-side-bar__container-content\">\n            <ng-container *ngFor=\"let page of model.pages\">\n              <svc-side-bar-page [model]=\"page\"></svc-side-bar-page>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"model.sideAreaComponentName\">\n        <ng-template\n          [component]=\"{ name: model.sideAreaComponentName, data: { model: model.sideAreaComponentData } }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SidebarPageComponent, selector: "svc-side-bar-page", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-side-bar",
                    templateUrl: "./side-bar.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }], container: [{
                type: ViewChild,
                args: ["container"]
            }] } });

class CreatorComponent extends BaseAngular {
    constructor(changeDetectorRef) {
        super(changeDetectorRef);
        changeDetectorRef.detach();
    }
    getModel() {
        return this.model;
    }
    get creator() {
        return this.model;
    }
    getShouldReattachChangeDetector() {
        return false;
    }
    onModelChanged() {
        this.changeDetectorRef.detectChanges();
        if (this.previousModel) {
            this.previousModel.unsubscribeRootElement();
        }
        if (this.creator && this.container.nativeElement) {
            this.creator.setRootElement(this.container.nativeElement);
        }
    }
    ngAfterViewInit() {
        this.creator.setRootElement(this.container.nativeElement);
        super.ngOnInit();
    }
    ngOnDestroy() {
        this.creator.unsubscribeRootElement();
        super.ngOnDestroy();
    }
    get visibleTabs() {
        return this.creator.tabs.filter(tab => this.creator.viewType == tab.id && tab.visible);
    }
    trackTabBy(_, tab) {
        return tab.id;
    }
}
CreatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorComponent, selector: "survey-creator", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n  <sv-ng-modal-container></sv-ng-modal-container>\n  <div [class]=\"creator.getRootCss()\" [style]=\"creator.themeVariables\" #container>\n    <div>\n      <sv-svg-bundle></sv-svg-bundle>\n    </div>\n    <div class=\"svc-full-container svc-creator__area svc-flex-column\"\n      [class.svc-creator__area--with-banner]=\"!creator.haveCommercialLicense\">\n      <div class=\"svc-flex-row svc-full-container\"\n        [class.svc-creator__side-bar--left]=\"creator.sidebarLocation == 'left'\">\n        <div class=\"svc-flex-column svc-flex-row__element svc-flex-row__element--growing\">\n          <div class=\"svc-top-bar\">\n            <div class=\"svc-tabbed-menu-wrapper\" [visible]=\"creator.showTabs\">\n              <svc-tabbed-menu [model]=\"creator.tabbedMenu\"></svc-tabbed-menu>\n            </div>\n            <div *ngIf=\"creator.showToolbar\" class=\"svc-toolbar-wrapper\" [visible]=\"creator.showToolbar\">\n              <sv-action-bar [model]=\"creator.toolbar\"></sv-action-bar>\n            </div>\n          </div>\n          <div class=\"svc-creator__content-wrapper svc-flex-row\"\n            [class.svc-creator__content-wrapper--footer-toolbar]=\"creator.isMobileView\">\n            <div class=\"svc-creator__content-holder svc-flex-column\">\n              <ng-container *ngFor=\"let tab of visibleTabs; trackBy: trackTabBy\">\n                <div role=\"tabpanel\" class=\"svc-creator-tab\" [attr.id]=\"'scrollableDiv-' + tab.id\"\n                  [attr.aria-labelledby]=\"'tab-' + tab.id\"\n                  [class.svc-creator__toolbox--right]=\"creator.toolboxLocation == 'right'\">\n                  <ng-template\n                    [component]=\"{ name: tab.componentContent, data: { model: tab.data.model } }\"></ng-template>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"creator.isMobileView\" class=\"svc-footer-bar\">\n            <div class=\"svc-toolbar-wrapper\" [visible]=\"creator.isMobileView\">\n              <sv-action-bar [model]=\"creator.footerToolbar\"></sv-action-bar>\n            </div>\n          </div>\n        </div>\n        <svc-side-bar [model]=\"creator.sidebar\" *ngIf=\"creator.sidebar\"></svc-side-bar>\n      </div>\n      <div class=\"svc-creator__banner\" *ngIf=\"!creator.haveCommercialLicense\">\n        <span class=\"svc-creator__non-commercial-text\" [innerHTML]=\"creator.licenseText | safeHtml\"></span>\n      </div>\n      <sv-notifier [notifier]=\"creator.notifier\"></sv-notifier>\n    </div>\n  </div>\n</ng-container>", components: [{ type: i1.ModalComponent, selector: "sv-ng-modal-container" }, { type: i1.SvgBundleComponent, selector: "sv-svg-bundle" }, { type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: ["model"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarComponent, selector: "svc-side-bar", inputs: ["model"] }, { type: i1.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1.SafeHtmlPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreatorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "survey-creator",
                    templateUrl: "./creator.component.html"
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
                type: Input
            }], container: [{
                type: ViewChild,
                args: ["container", { read: ElementRef }]
            }] } });
AngularComponentFactory.Instance.registerComponent("survey-widget", SurveyContentComponent);

class CreatorModelComponent extends BaseAngular {
    createHash() {
        this.hash = {};
        this.getPropertiesToTrack().forEach((prop) => {
            this.hash[prop] = this[prop];
        });
    }
    ngOnInit() {
        this.createModel();
        this.createHash();
        super.ngOnInit();
    }
    ngDoCheck() {
        if (this.needUpdateModel())
            this.createModel();
        super.ngDoCheck();
    }
    needUpdateModel() {
        let res = false;
        Object.keys(this.hash).forEach(key => {
            if (this.hash[key] != this[key]) {
                this.hash[key] = this[key];
                res = true;
            }
        });
        return res;
    }
}
CreatorModelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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 ToolboxToolComponent extends CreatorModelComponent {
    constructor() {
        super(...arguments);
        this.isCompact = false;
    }
    createModel() {
        this.model = new ToolboxToolViewModel(this.item, this.creator, this.parentModel);
    }
    getPropertiesToTrack() {
        return ["creator", "item"];
    }
    getModel() {
        return this.item;
    }
    get itemCssClasses() {
        return this.item.css;
    }
    ngOnDestroy() {
        super.ngOnDestroy();
        this.model.dispose();
        this.item.updateModeCallback = undefined;
    }
    ngAfterViewInit() {
        if (this.item) {
            this.item.updateModeCallback = (mode, callback) => {
                var _a;
                this.item.mode = mode;
                callback(mode, (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement);
            };
            queueMicrotask(() => {
                this.item.afterRender();
            });
        }
    }
}
ToolboxToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolboxToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
ToolboxToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: { creator: "creator", item: "item", parentModel: "parentModel", isCompact: "isCompact" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"itemCssClasses\" #container>\n        <div class=\"svc-toolbox__category-separator\" *ngIf=\"item.needSeparator && !creator.toolbox.showCategoryTitles\">\n        </div>\n        <div class=\"svc-toolbox__tool-content sv-action__content\" (pointerdown)=\"model.onPointerDown($event)\">\n            <ng-template [component]=\"{ name: model.itemComponent, default: 'svc-toolbox-item', \n            data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }\"></ng-template>\n        </div>\n    </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.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: ToolboxToolComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-toolbox-tool",
                    templateUrl: "./toolbox-tool.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { creator: [{
                type: Input
            }], item: [{
                type: Input
            }], parentModel: [{
                type: Input
            }], isCompact: [{
                type: Input
            }], container: [{
                type: ViewChild,
                args: ["container"]
            }] } });

class SearchComponent extends BaseAngular {
    getModel() {
        return this.model;
    }
}
SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SearchComponent, selector: "svc-search", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div *ngIf=\"model.isVisible\" class=\"svc-search\">\n        <div class=\"svc-search__search-icon\">\n            <svg [iconName]=\"'icon-search'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n        <input type=\"text\" class=\"svc-search__input\" [(ngModel)]=\"model.filterString\"\n            [attr.aria-label]=\"model.filterStringPlaceholder\" [attr.placeholder]=\"model.filterStringPlaceholder\" />\n        <div class=\"svc-search__toolbar\">\n            <div class=\"svc-search__toolbar-counter\">{{model.matchCounterText}}</div>\n            <sv-action-bar [model]=\"model.searchActionBar\"></sv-action-bar>\n        </div>\n    </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-search",
                    templateUrl: "./search.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }] } });
AngularComponentFactory.Instance.registerComponent("svc-search", SearchComponent);

class ToolboxCategoryComponent extends BaseAngular {
    getModel() {
        return this.category;
    }
    trackItemBy(_, item) {
        return item.renderedId;
    }
}
ToolboxCategoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolboxCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
ToolboxCategoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: { category: "category", toolbox: "toolbox" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-toolbox__category\" [class.svc-toolbox__category--collapsed]=\"category.collapsed\"\n    [class.svc-toolbox__category--empty]=\"category.empty\">\n    <div class=\"svc-toolbox__category-header-wrapper\">\n      <div class=\"svc-toolbox__category-header\"\n        (click)=\"category.toggleState()\" [key2click] [class.svc-toolbox__category-header--collapsed]=\"toolbox.canCollapseCategories\" >\n        <span class=\"svc-toolbox__category-title\">{{category.title}}</span>\n        <div *ngIf=\"toolbox.canCollapseCategories\" class=\"svc-toolbox__category-header__controls\">\n          <svg [iconName]=\"'icon-arrow-down'\" class=\"svc-toolbox__category-header__button svc-string-editor__button--expand\" [size]=\"'auto'\" sv-ng-svg-icon [visible]=\"category.collapsed\"></svg>\n          <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-toolbox__category-header__button svc-string-editor__button--collapse\" [size]=\"'auto'\" sv-ng-svg-icon [visible]=\"!category.collapsed\"></svg>\n        </div>\n      </div>\n    </div>\n      <ng-container *ngFor=\"let item of category.items; trackBy: trackItemBy\">\n        <svc-toolbox-tool [item]=\"item\" [creator]=\"toolbox.creator\" [parentModel]=\"toolbox\" [isCompact]=\"false\" ></svc-toolbox-tool>\n      </ng-container>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "parentModel", "isCompact"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolboxCategoryComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-toolbox-category ",
                    templateUrl: "./toolbox-category.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { category: [{
                type: Input
            }], toolbox: [{
                type: Input
            }] } });

class AdaptiveToolboxComponent extends BaseAngular {
    get toolbox() {
        return this.model.toolbox;
    }
    get creator() {
        return this.model;
    }
    get searchItem() {
        return this.toolbox.searchItem;
    }
    ngAfterViewInit() {
        this.toolbox.setRootElement(this.container.nativeElement);
        this.responsivityManager =
            new VerticalResponsivityManager(this.toolbox.containerElement, this.toolbox);
    }
    getModel() {
        return this.toolbox;
    }
    ngOnDestroy() {
        var _a;
        (_a = this.responsivityManager) === null || _a === void 0 ? void 0 : _a.dispose();
        this.toolbox.setRootElement(undefined);
        super.ngOnDestroy();
    }
    trackItemBy(_, item) {
        return item.renderedId;
    }
}
AdaptiveToolboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AdaptiveToolboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
AdaptiveToolboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AdaptiveToolboxComponent, selector: "svc-toolbox", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"toolbox.classNames\" #container>\n    <div (focusout)=\"toolbox.focusOut($event)\" class=\"svc-toolbox__panel\">\n      <div *ngIf=\"toolbox.showSearch\" class=\"svc-toolbox__search-container\">\n        <ng-container *ngIf=\"toolbox.isCompactRendered\">\n          <svc-toolbox-tool [creator]=\"creator\" [item]=\"searchItem\" [parentModel]=\"toolbox\"\n            [isCompact]=\"toolbox.isCompactRendered\"></svc-toolbox-tool>\n        </ng-container>\n        <svc-search [model]=\"toolbox.searchManager\"></svc-search>\n        <div class=\"svc-toolbox__category-separator svc-toolbox__category-separator--search\"></div>\n      </div>\n      <div *ngIf=\"toolbox.showPlaceholder\" class=\"svc-toolbox__placeholder\">{{toolbox.toolboxNoResultsFound}}</div>\n      <sv-scroll>\n        <ng-container *ngIf=\"!toolbox.showInSingleCategory\">\n          <svc-toolbox-category *ngFor=\"let category of toolbox.categories\" [category]=\"category\"\n            [toolbox]=\"toolbox\"></svc-toolbox-category>\n        </ng-container>\n        <ng-container *ngIf=\"toolbox.showInSingleCategory\">\n          <div class=\"svc-toolbox__category\">\n            <ng-container *ngFor=\"let item of toolbox.renderedActions;  trackBy: trackItemBy\">\n              <svc-toolbox-tool [creator]=\"creator\" [item]=\"item\" [parentModel]=\"toolbox\"\n                [isCompact]=\"toolbox.isCompactRendered\"></svc-toolbox-tool>\n            </ng-container>\n          </div>\n        </ng-container>\n      </sv-scroll>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "parentModel", "isCompact"] }, { type: SearchComponent, selector: "svc-search", inputs: ["model"] }, { type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled"] }, { type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: ["category", "toolbox"] }], 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: AdaptiveToolboxComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-toolbox",
                    templateUrl: "./adaptive-toolbox.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }], container: [{
                type: ViewChild,
                args: ["container"]
            }] } });
AngularComponentFactory.Instance.registerComponent("svc-toolbox", AdaptiveToolboxComponent);

class SurfacePlaceholderComponent extends EmbeddedViewContentComponent {
}
SurfacePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurfacePlaceholderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
SurfacePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurfacePlaceholderComponent, selector: "svc-surface-placeholder", inputs: { name: "name", placeholderTitleText: "placeholderTitleText", placeholderDescriptionText: "placeholderDescriptionText" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-surface-placeholder\">\n    <div class=\"svc-surface-placeholder__image\" [class]=\"'svc-surface-placeholder__image--' + name\"></div>\n    <div class=\"svc-surface-placeholder__text\">\n      <div class=\"svc-surface-placeholder__title\">{{placeholderTitleText}}</div>\n      <div class=\"svc-surface-placeholder__description\">{{placeholderDescriptionText}}</div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurfacePlaceholderComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-surface-placeholder",
                    templateUrl: "./surface-placeholder.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { name: [{
                type: Input
            }], placeholderTitleText: [{
                type: Input
            }], placeholderDescriptionText: [{
                type: Input
            }] } });
AngularComponentFactory.Instance.registerComponent("svc-surface-placeholder", SurfacePlaceholderComponent);

class PageDesignerComponent extends CreatorModelComponent {
    createModel() {
        if (this.adorner) {
            this.adorner.dispose();
        }
        if (this.model) {
            this.adorner = new PageAdorner(this.creator, this.model);
            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.rootElement = this.container.nativeElement;
        }
    }
    ngOnDestroy() {
        super.ngOnDestroy();
        this.adorner.dispose();
    }
}
PageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
PageDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageDesignerComponent, selector: "svc-page", inputs: { model: "model", survey: "survey", creator: "creator", isGhost: "isGhost" }, 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  <page [model]=\"model\" [survey]=\"survey\"></page>\n  <div *ngIf=\"adorner.showPlaceholder\" class=\"svc-page__placeholder_frame\">\n    <div class=\"svc-panel__placeholder_frame\">\n      <div class=\"svc-panel__placeholder\">{{adorner.placeholderText}}</div>\n    </div>\n  </div>\n  <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: i1.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { 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 DesignerPagesComponent extends BaseAngular {
    getModel() {
        return this.model.pagesController;
    }
    get creator() {
        return this.model.creator;
    }
    get survey() {
        return this.creator.survey;
    }
}
DesignerPagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerPagesComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-designer-pages",
                    templateUrl: "./designer-pages.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }] } });

class PageNavigatorItemComponent extends BaseAngular {
    getModel() {
        return this.model;
    }
    get anyModel() {
        return this.model;
    }
    click(event) {
        this.getModel().action();
        event.stopPropagation();
        event.preventDefault();
    }
}
PageNavigatorItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
PageNavigatorItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator-item\">\n    <div role=\"button\" class=\"svc-page-navigator-item-content\" (click)=\"click($event)\" [key2click]\n      [class.svc-page-navigator-item--selected]=\"model.active\"\n      [class.svc-page-navigator-item--disabled]=\"anyModel.disabled\">\n      <div class=\"svc-page-navigator-item__dot\" [attr.title]=\"model.title\">\n        <div class=\"svc-page-navigator-item__dot-content\"></div>\n      </div>\n\n      <div class=\"svc-page-navigator-item__banner\">\n        <span class=\"svc-page-navigator-item__text\">{{ model.title }}</span>\n        <span class=\"svc-page-navigator-item__dot\"><span class=\"svc-page-navigator-item__dot-content\"></span></span>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorItemComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-page-navigator-item",
                    templateUrl: "./page-navigator-item.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }] } });

class PageNavigatorComponent extends CreatorModelComponent {
    createModel() {
        this.model = new PageNavigatorViewModel(this.pagesController, this.pageEditMode);
    }
    getModel() {
        return this.model;
    }
    getPropertiesToTrack() {
        return ["pagesController", "pageEditMode"];
    }
    ngAfterViewInit() {
        if (this.pageEditMode !== "bypage") {
            const el = this.container.nativeElement;
            this.model.attachToUI(el);
        }
    }
    ngOnDestroy() {
        super.ngOnDestroy();
        this.model.stopItemsContainerHeightObserver();
        this.model.setScrollableContainer(undefined);
        this.model.dispose();
    }
}
PageNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
PageNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div role=\"button\" class=\"svc-page-navigator__selector svc-page-navigator__button\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__button--pressed]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__button-icon\" [iconName]=\"model.icon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-page-navigator",
                    templateUrl: "./page-navigator.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { pagesController: [{
                type: Input
            }], pageEditMode: [{
                type: Input
            }], container: [{
                type: ViewChild,
                args: ["container"]
            }] } });

class DesignerSurveyComponent extends BaseAngular {
    getModel() {
        return this.model.survey;
    }
    get creator() {
        return this.model.creator;
    }
    get survey() {
        return this.creator.survey;
    }
    trackPageBy(index, page) {
        return page.id;
    }
}
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"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerSurveyComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "svc-designer-survey",
                    templateUrl: "./designer-survey.component.html",
                    styles: [":host { display: none; }"]
                }]
        }], propDecorators: { model: [{
                type: Input
            }] } });

class DesignerTabComponent extends BaseAngular {
    get survey() {
        return this.creator.survey;
    }
    get creator() {
        return this.model.creator;
    }
    getModel() {
        return this.model;
    }
}
DesignerTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
DesignerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerTabComponent, selector: "svc-tab-designer", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-flex-column\">\n    <svc-toolbox *ngIf=\"model.isToolboxVisible\" [model]=\"creator\"></svc-toolbox>\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