UNPKG

survey-creator-angular

Version:

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

583 lines (562 loc) 240 kB
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 { 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 { 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; } initResponsivityManager() { var _a; if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) { this.model.initResponsivityManager(this.container.nativeElement); } } ngAfterViewInit() { this.initResponsivityManager(); } afterUpdate(isSync) { super.afterUpdate(isSync); this.initResponsivityManager(); } ngAfterViewChecked() { super.ngAfterViewChecked(); this.initResponsivityManager(); } ngOnDestroy() { super.ngOnDestroy(); this.model.resetResponsivityManager(); } 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\" [style]=\"model.getRootStyle()\">\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 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 PageWrapperComponent extends EmbeddedViewContentComponent { constructor(viewContainerRef, changeDetectorRef) { super(viewContainerRef); this.changeDetectorRef = changeDetectorRef; this.id = `PageWrapperCallback_${++PageWrapperComponent.ID}`; } setupCallback(page) { if (!page) return; page.registerFunctionOnPropertyValueChanged("name", () => { this.embeddedView ? this.embeddedView.detectChanges() : this.changeDetectorRef.detectChanges(); }, this.id); } clearCallback(page) { if (!page) return; page.unRegisterFunctionOnPropertyValueChanged("name"); } ngOnChanges(changes) { if (changes.page && changes.page.currentValue !== changes.page.previousValue) { this.clearCallback(changes.page.previousValue); this.setupCallback(changes.page.currentValue); } } ngOnDestroy() { this.clearCallback(this.page); } } 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-wrapper", templateUrl: "./page-wrapper.component.html", styles: [":host { display: none; }"] }] }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { page: [{ type: Input }], isGhost: [{ type: Input }], creator: [{ type: Input }], className: [{ type: Input }] } }); 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 <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: [{ selector: "svc-designer-pages", templateUrl: "./designer-pages.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { model: [{ 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; } 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>\n <div role=\"button\" class=\"svc-page-navigator__selector svc-page-navigator__button\"\n (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__button--pressed]=\"model.isPopupOpened\">\n <svg class=\"svc-page-navigator__button-icon\" [iconName]=\"model.icon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n </div>\n <div>\n <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.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 <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: [{ 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 <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: [{ selector: "svc-tab-designer", templateUrl: "./designer.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { model: [{ type: Input }] } }); AngularComponentFactory.Instance.registerComponent("svc-tab-designer", DesignerTabComponent); class TabbedMenuItemComponent extends BaseAngular { getModel() { return this.model; } } TabbedMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabbedMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); TabbedMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabbedMenuItemComponent, selector: "svc-tabbed-menu-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div\n [class]=\"model.getRootCss()\"\n (click)=\"model.doAction()\"\n [key2click]\n role=\"tab\"\n [attr.id]=\"'tab-' + model.id\"\n [attr.aria-selected]=\"model.active\"\n [attr.aria-controls]=\"'scrollableDiv-' + model.id\"\n >\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getTitleCss()\">\n {{ model.title }}\n </span>\n <svg\n *ngIf=\"model.hasIcon\"\n [iconName]=\"model.iconName\"\n [size]=\"'auto'\"\n [class]=\"model.getIconCss()\"\n [title]=\"model.tooltip || model.title\"\n sv-ng-svg-icon\n ></svg>\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"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabbedMenuItemComponent, decorators: [{ type: Component, args: [{ selector: "svc-tabbed-menu-item", templateUrl: "./tabbed-menu-item.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { model: [{ type: Input }] } }); AngularComponentFactory.Instance.registerComponent("svc-tabbed-menu-item", TabbedMenuItemComponent); class SidebarDefaultHeaderComponent extends BaseAngular { getModel() { return this.model; } } SidebarDefaultHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarDefaultHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); SidebarDefaultHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarDefaultHeaderComponent, selector: "svc-side-bar-default-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div class=\"svc-side-bar__container-header\">\n <div class=\"svc-side-bar__container-actions\">\n <sv-action-bar [model]=\"model.toolbar\"></sv-action-bar>\n </div>\n <div *ngIf=\"!!model.title\" class=\"svc-side-bar__container-title\">{{model.title}}</div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarDefaultHeaderComponent, decorators: [{ type: Component, args: [{ selector: "svc-side-bar-default-header", templateUrl: "./side-bar-default-header.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { model: [{ type: Input }] } }); AngularComponentFactory.Instance.registerComponent("svc-side-bar-default-header", SidebarDefaultHeaderComponent); class TabButtonComponent extends BaseAngular { getModel() { return this.model; } } TabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabButtonComponent, selector: "svc-tab-button", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"model.visible\" class=\"svc-menu-action\">\n <div [class]=\"model.buttonClassName\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\"\n [attr.title]=\"model.tooltip\" (click)=\"model.action()\">\n <div class=\"svc-menu-action__icon\">\n <div class=\"svc-menu-action__icon-container\">\n <svg [iconName]=\"model.iconName\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabButtonComponent, decorators: [{ type: Component, args: [{ selector: "svc-tab-button", templateUrl: "./tab-button.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { model: [{ type: Input }] } }); AngularComponentFactory.Instance.registerComponent("svc-tab-button", TabButtonComponent); class TabsComponent extends BaseAngular { getModel() { return this.model; } } TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabsComponent, selector: "svc-tabs", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <ng-container *ngFor=\"let action of model.actions\">\n <svc-tab-button [model]=\"action\"></svc-tab-button>\n </ng-container>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: TabButtonComponent, selector: "svc-tab-button", 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: TabsComponent, decorators: [{ type: Component, args: [{ selector: "svc-tabs", templateUrl: "./tabs.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { model: [{ type: Input }] } }); class TabControlComponent extends BaseAngular { getModel() { return this.model; } } TabControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); TabControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabControlComponent, selector: "svc-tab-control", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.sideBarClassName\">\n <div class=\"svc-sidebar-tabs__top-container\">\n <div class=\"svc-sidebar-tabs__collapse-button\">\n <svc-tab-button [model]=\"model.expandCollapseAction\"></svc-tab-button>\n </div>\n <div class=\"svc-sidebar-tabs__separator\">\n <div></div>\n </div>\n <sv-scroll>\n <div class=\"svc-sidebar-tabs__items\">\n <svc-tabs [model]=\"model.topToolbar\"></svc-tabs>\n </div>\n </sv-scroll>\n </div>\n <div class=\"svc-sidebar-tabs__bottom-container\">\n <div class=\"svc-sidebar-tabs__items\">\n <svc-tabs [model]=\"model.bottomToolbar\"></svc-tabs>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: TabButtonComponent, selector: "svc-tab-button", inputs: ["model"] }, { type: i1.ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: TabsComponent, selector: "svc-tabs", inputs: ["model"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabControlComponent, decorators: [{ type: Component, args: [{ selector: "svc-tab-control", templateUrl: "./tab-control.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { model: [{ type: Input }] } }); AngularComponentFactory.Instance.registerComponent("svc-tab-control", TabControlComponent); class SidebarPropertyGridHeaderComponent extends BaseAngular { constructor() { super(...arguments); this.getTarget = getActionDropdownButtonTarget; } getModel() { return this.model; } } SidebarPropertyGridHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPropertyGridHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); SidebarPropertyGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidebarPropertyGridHeaderComponent, selector: "svc-side-bar-property-grid-header", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div class=\"svc-sidebar__header svc-sidebar__header--tabbed\">\n <div class=\"svc-sidebar__header-container svc-sidebar__header-container--with-subtitle\">\n <div class=\"svc-sidebar__header-content\">\n <div [class]=\"model.buttonClassName\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\">\n <div class=\"svc-sidebar__header-caption\">\n <span class=\"svc-sidebar__header-title\">{{model.title}}</span>\n <span class=\"svc-sidebar__header-subtitle\">{{model.tooltip}}</span>\n </div>\n </div>\n <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidebarPropertyGridHeaderComponent, decorators: [{ type: Component, args: [{ selector: "svc-side-bar-property-grid-header", templateUrl: "./side-bar-property-grid-header.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { model: [{ type: Input }] } }); AngularComponentFactory.Instance.registerComponent("svc-side-bar-property-grid-header", SidebarPropertyGridHeaderComponent); class PropertyGridPlaceholderComponent extends EmbeddedViewContentComponent { constructor() { super(...arguments); this.editorLocalization = editorLocalization; } } PropertyGridPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PropertyGridPlaceholderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); PropertyGridPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PropertyGridPlaceholderComponent, selector: "svc-property-grid-placeholder", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div class=\"svc-property-grid-placeholder\">\n <div class=\"svc-property-grid-placeholder__header\">\n <span\n class=\"svc-property-grid-placeholder__title\">{{editorLocalization.getString(\"ed.propertyGridPlaceholderTitle\")}}</span>\n <span\n class=\"svc-property-grid-placeholder__description\">{{editorLocalization.getString(\"ed.propertyGridPlaceholderDescription\")}}</span>\n </div>\n <div class=\"svc-property-grid-placeholder__content\">\n <div class=\"svc-property-grid-placeholder__gap\"></div>\n <div class=\"svc-property-grid-placeholder__image\"></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: PropertyGridPlaceholderComponent, decorators: [{ type: Component, args: [{ selector: "svc-property-grid-placeholder", templateUrl: "./property-grid-placeholder.component.html", styles: [":host { display: none; }"] }] }] }); AngularComponentFactory.Instance.registerComponent("svc-property-grid-placeholder", PropertyGridPlaceholderComponent); class SidebarHeaderComponent extends BaseAngular { getModel() { return this.model; } } SidebarHe