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

A white-label drag-and-drop form builder for Angular that lets you design complex, interactive forms and surveys without writing code. It generates JSON schemas used by the SurveyJS Form Library to render dynamic forms in your Angular app.

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 { cssVariablesToString, 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;
    }
    get themeVariablesString() {
        return cssVariablesToString(this.creator.themeVariables);
    }
}
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()\" [attr.style]=\"themeVariablesString\" #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: { data: creator, 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.isSidebarVisible\"></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;
    }
    get surfaceCssVariablesString() {
        const styles = Object.assign(Object.assign({}, this.model.surfaceCssVariables), { ["max-width"]: this.survey.renderedWidth || "" });
        return cssVariablesToString(styles);
    }
}
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\" [attr.style]=\"surfaceCssVariablesString\">\n    <div *ngIf=\"creator.showSurveyHeader\" 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.showSurveyHeader\" 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        <sv-action-bar [model]=\"model.bottomToolbar\"></sv-action-bar>\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"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }] });
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: [{