survey-creator-angular 1.11.13 → 1.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,19 +1,25 @@
1
+ import { AfterViewInit, ElementRef } from "@angular/core";
1
2
  import { ItemValue, QuestionSelectBase } from "survey-core";
2
3
  import { ItemValueWrapperViewModel } from "survey-creator-core";
3
4
  import { CreatorModelComponent } from "../creator-model.component";
4
5
  import * as i0 from "@angular/core";
5
- export declare class ItemValueDesignerComponent extends CreatorModelComponent<ItemValueWrapperViewModel> {
6
+ export declare class ItemValueDesignerComponent extends CreatorModelComponent<ItemValueWrapperViewModel> implements AfterViewInit {
6
7
  componentName: string;
7
8
  componentData: any;
9
+ container: ElementRef<HTMLDivElement>;
8
10
  adorner: ItemValueWrapperViewModel;
11
+ private prevItem;
9
12
  private get creator();
10
13
  get question(): QuestionSelectBase;
11
14
  get item(): ItemValue;
12
15
  onBlur(event: any): void;
16
+ private setupContainer;
17
+ private cleanContainer;
13
18
  protected createModel(): void;
14
19
  protected getPropertiesToTrack(): string[];
15
20
  protected getModel(): ItemValueWrapperViewModel;
16
21
  ngOnDestroy(): void;
22
+ ngAfterViewInit(): void;
17
23
  static ɵfac: i0.ɵɵFactoryDeclaration<ItemValueDesignerComponent, never>;
18
24
  static ɵcmp: i0.ɵɵComponentDeclaration<ItemValueDesignerComponent, "svc-item-value", never, { "componentName": "componentName"; "componentData": "componentData"; }, {}, never, never>;
19
25
  }
@@ -610,7 +610,7 @@
610
610
  return SidebarComponent;
611
611
  }(i1.BaseAngular));
612
612
  SidebarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SidebarComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
613
- SidebarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<ng-template #template>\n <div class=\"svc-side-bar\" [class.svc-flyout-side-bar]=\"model.flyoutPanelMode\" [visible]=\"model.hasVisibleTabs\">\n <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\"></div>\n <div class=\"svc-flex-column svc-side-bar__wrapper\">\n <div class=\"svc-side-bar__container\" [visible]=\"model.visible\" #container>\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.headerText\" class=\"svc-side-bar__container-title\">{{model.headerText}}</div>\n </div>\n <div class=\"svc-side-bar__container-content\">\n <ng-container *ngFor=\"let tab of model.tabs\">\n <svc-side-bar-tab [model]=\"tab\"></svc-side-bar-tab> \n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarTabComponent, selector: "svc-side-bar-tab", inputs: ["model"] }], directives: [{ type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
613
+ SidebarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<ng-template #template>\n <div class=\"svc-side-bar\" [class.svc-flyout-side-bar]=\"model.flyoutPanelMode\" [visible]=\"model.hasVisibleTabs\">\n <div class=\"svc-side-bar__shadow\" (click)=\"model.collapseSidebar()\"></div>\n <div class=\"svc-flex-column svc-side-bar__wrapper\">\n <div class=\"svc-side-bar__container\" [visible]=\"model.renderedIsVisible\" #container>\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.headerText\" class=\"svc-side-bar__container-title\">{{model.headerText}}</div>\n </div>\n <div class=\"svc-side-bar__container-content\">\n <ng-container *ngFor=\"let tab of model.tabs\">\n <svc-side-bar-tab [model]=\"tab\"></svc-side-bar-tab>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarTabComponent, selector: "svc-side-bar-tab", inputs: ["model"] }], directives: [{ type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
614
614
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SidebarComponent, decorators: [{
615
615
  type: i0.Component,
616
616
  args: [{
@@ -665,7 +665,7 @@
665
665
  return CreatorComponent;
666
666
  }(i1.BaseAngular));
667
667
  CreatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreatorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
668
- CreatorComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n <sv-ng-modal-container></sv-ng-modal-container>\n <div class=\"svc-creator\" [class.svc-creator--mobile]=\"creator.isMobileView\"\n [class.svc-creator--touch]=\"creator.isTouch\" #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 creator.tabs\">\n <div class=\"svc-creator-tab\" *ngIf=\"creator.viewType == tab.id && tab.visible\"\n [attr.id]=\"'scrollableDiv-' + 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 <div *ngIf=\"creator.sidebar\" [class.sv-mobile-side-bar]=\"creator.isMobileView\">\n <svc-side-bar [model]=\"creator.sidebar\"></svc-side-bar>\n </div>\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__namespace.ModalComponent, selector: "sv-ng-modal-container" }, { type: i1__namespace.SvgBundleComponent, selector: "sv-svg-bundle" }, { type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: ["model"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarComponent, selector: "svc-side-bar", inputs: ["model"] }, { type: i1__namespace.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1__namespace.SafeHtmlPipe } });
668
+ CreatorComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!creator.isCreatorDisposed\">\n <sv-ng-modal-container></sv-ng-modal-container>\n <div [class]=\"creator.getRootCss()\" #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 creator.tabs\">\n <div class=\"svc-creator-tab\" *ngIf=\"creator.viewType == tab.id && tab.visible\"\n [attr.id]=\"'scrollableDiv-' + 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 <div *ngIf=\"creator.sidebar\" [class.sv-mobile-side-bar]=\"creator.isMobileView\">\n <svc-side-bar [model]=\"creator.sidebar\"></svc-side-bar>\n </div>\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__namespace.ModalComponent, selector: "sv-ng-modal-container" }, { type: i1__namespace.SvgBundleComponent, selector: "sv-svg-bundle" }, { type: TabbledMenuComponent, selector: "svc-tabbed-menu", inputs: ["model"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SidebarComponent, selector: "svc-side-bar", inputs: ["model"] }, { type: i1__namespace.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": i1__namespace.SafeHtmlPipe } });
669
669
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreatorComponent, decorators: [{
670
670
  type: i0.Component,
671
671
  args: [{
@@ -859,7 +859,7 @@
859
859
  return AdaptiveToolboxComponent;
860
860
  }(i1.BaseAngular));
861
861
  AdaptiveToolboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AdaptiveToolboxComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
862
- AdaptiveToolboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AdaptiveToolboxComponent, selector: "svc-adaptive-toolbox", inputs: { creator: "creator" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div [class]=\"model.classNames\" #container>\n <div (focusout)=\"model.focusOut($event)\" class=\"svc-toolbox__panel\">\n <div class=\"svc-toolbox__scroller\" (scroll)=\"model.onScroll(model, $event)\">\n <div *ngIf=\"model.showSearch\" class=\"svc-toolbox__search-container\">\n <ng-container *ngIf=\"model.isCompactRendered\">\n <svc-toolbox-tool [creator]=\"creator\" [item]=\"searchItem\" [parentModel]=\"model\" [isCompact]=\"model.isCompactRendered\"></svc-toolbox-tool>\n <div class=\"svc-toolbox__category-separator svc-toolbox__category-separator--search\"></div>\n </ng-container>\n <svc-search [model]=\"model.searchManager\"></svc-search>\n </div>\n <div *ngIf=\"model.showPlaceholder\" class=\"svc-toolbox__placeholder\">{{model.toolboxNoResultsFound}}</div>\n <div class=\"svc-toolbox__container\">\n <ng-container *ngIf=\"!model.showInSingleCategory\">\n <svc-toolbox-category *ngFor=\"let category of model.categories\" [category]=\"category\" [toolbox]=\"model\"></svc-toolbox-category>\n </ng-container>\n <ng-container *ngIf=\"model.showInSingleCategory\">\n <div class=\"svc-toolbox__category\">\n <ng-container *ngFor=\"let item of model.renderedActions\">\n <svc-toolbox-tool [creator]=\"creator\" [item]=\"item\" [parentModel]=\"model\" [isCompact]=\"model.isCompactRendered\"></svc-toolbox-tool>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "parentModel", "isCompact"] }, { type: SearchComponent, selector: "svc-search", inputs: ["model"] }, { type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: ["category", "toolbox"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
862
+ AdaptiveToolboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AdaptiveToolboxComponent, selector: "svc-adaptive-toolbox", inputs: { creator: "creator" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div [class]=\"model.classNames\" #container>\n <div (focusout)=\"model.focusOut($event)\" class=\"svc-toolbox__panel\">\n <div class=\"svc-toolbox__scroller sv-drag-target-skipped\" (scroll)=\"model.onScroll(model, $event)\">\n <div *ngIf=\"model.showSearch\" class=\"svc-toolbox__search-container\">\n <ng-container *ngIf=\"model.isCompactRendered\">\n <svc-toolbox-tool [creator]=\"creator\" [item]=\"searchItem\" [parentModel]=\"model\" [isCompact]=\"model.isCompactRendered\"></svc-toolbox-tool>\n <div class=\"svc-toolbox__category-separator svc-toolbox__category-separator--search\"></div>\n </ng-container>\n <svc-search [model]=\"model.searchManager\"></svc-search>\n </div>\n <div *ngIf=\"model.showPlaceholder\" class=\"svc-toolbox__placeholder\">{{model.toolboxNoResultsFound}}</div>\n <div class=\"svc-toolbox__container\">\n <ng-container *ngIf=\"!model.showInSingleCategory\">\n <svc-toolbox-category *ngFor=\"let category of model.categories\" [category]=\"category\" [toolbox]=\"model\"></svc-toolbox-category>\n </ng-container>\n <ng-container *ngIf=\"model.showInSingleCategory\">\n <div class=\"svc-toolbox__category\">\n <ng-container *ngFor=\"let item of model.renderedActions\">\n <svc-toolbox-tool [creator]=\"creator\" [item]=\"item\" [parentModel]=\"model\" [isCompact]=\"model.isCompactRendered\"></svc-toolbox-tool>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ToolboxToolComponent, selector: "svc-toolbox-tool", inputs: ["creator", "item", "parentModel", "isCompact"] }, { type: SearchComponent, selector: "svc-search", inputs: ["model"] }, { type: ToolboxCategoryComponent, selector: "svc-toolbox-category ", inputs: ["category", "toolbox"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
863
863
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AdaptiveToolboxComponent, decorators: [{
864
864
  type: i0.Component,
865
865
  args: [{
@@ -1807,7 +1807,7 @@
1807
1807
  return QuestionDesignerComponent;
1808
1808
  }(CreatorModelComponent));
1809
1809
  QuestionDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
1810
- QuestionDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n </div>\n </div>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n </svc-question-banner>\n <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1810
+ QuestionDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n </div>\n </div>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n </svc-question-banner>\n <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1811
1811
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDesignerComponent, decorators: [{
1812
1812
  type: i0.Component,
1813
1813
  args: [{
@@ -1851,9 +1851,25 @@
1851
1851
  ItemValueDesignerComponent.prototype.onBlur = function (event) {
1852
1852
  this.adorner.onFocusOut(event);
1853
1853
  };
1854
+ ItemValueDesignerComponent.prototype.setupContainer = function () {
1855
+ var _a;
1856
+ if (this.item && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
1857
+ this.item.setRootElement(this.container.nativeElement);
1858
+ }
1859
+ };
1860
+ ItemValueDesignerComponent.prototype.cleanContainer = function (item) {
1861
+ if (!!item) {
1862
+ item.setRootElement(undefined);
1863
+ }
1864
+ };
1854
1865
  ItemValueDesignerComponent.prototype.createModel = function () {
1855
1866
  if (this.componentData) {
1856
1867
  this.adorner = new surveyCreatorCore.ItemValueWrapperViewModel(this.creator, this.question, this.item);
1868
+ if (this.prevItem !== this.item) {
1869
+ this.setupContainer();
1870
+ this.cleanContainer(this.prevItem);
1871
+ this.prevItem = this.item;
1872
+ }
1857
1873
  }
1858
1874
  };
1859
1875
  ItemValueDesignerComponent.prototype.getPropertiesToTrack = function () {
@@ -1865,11 +1881,15 @@
1865
1881
  ItemValueDesignerComponent.prototype.ngOnDestroy = function () {
1866
1882
  _super.prototype.ngOnDestroy.call(this);
1867
1883
  this.adorner.dispose();
1884
+ this.cleanContainer(this.item);
1885
+ };
1886
+ ItemValueDesignerComponent.prototype.ngAfterViewInit = function () {
1887
+ this.setupContainer();
1868
1888
  };
1869
1889
  return ItemValueDesignerComponent;
1870
1890
  }(CreatorModelComponent));
1871
1891
  ItemValueDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ItemValueDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
1872
- ItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemValueDesignerComponent, selector: "svc-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div class=\"svc-item-value-wrapper\" (pointerdown)=\"adorner.onPointerDown($event)\"\n [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? item.value : null\"\n [ngClass]=\"{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}\">\n <div class=\"svc-item-value__ghost\"></div>\n <div class=\"svc-item-value-controls\">\n <span *ngIf=\"adorner.isDraggable\" class=\"svc-item-value-controls__button svc-item-value-controls__drag\">\n <svg class=\"svc-item-value-controls__drag-icon\" [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\"\n [attr.title]=\"adorner.dragTooltip\" sv-ng-svg-icon></svg>\n </span>\n <span *ngIf=\"adorner.allowAdd\" class=\"svc-item-value-controls__button svc-item-value-controls__add\" [key2click]\n (click)=\"adorner.add(adorner)\" [attr.aria-label]=\"undefined\"><svg [iconName]=\"'icon-add_16x16'\" [size]=\"16\"\n [attr.title]=\"undefined\" sv-ng-svg-icon></svg></span>\n <span *ngIf=\"adorner.allowRemove\" class=\"svc-item-value-controls__button svc-item-value-controls__remove\"\n [key2click] (click)=\"adorner.remove(adorner)\" (blur)=\"onBlur($event)\" [attr.aria-label]=\"undefined\"><svg\n [iconName]=\"'icon-remove_16x16'\" [size]=\"16\" [attr.title]=\"undefined\" sv-ng-svg-icon></svg></span>\n </div>\n\n <div class=\"svc-item-value__item\" (click)=\"adorner.select(adorner, $event)\">\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1892
+ ItemValueDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemValueDesignerComponent, selector: "svc-item-value", inputs: { componentName: "componentName", componentData: "componentData" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div class=\"svc-item-value-wrapper\" (pointerdown)=\"adorner.onPointerDown($event)\"\n [attr.data-sv-drop-target-item-value]=\"adorner.isDraggable ? item.value : null\"\n [ngClass]=\"{'svc-item-value--new': adorner.isNew, 'svc-item-value--dragging': adorner.isDragging, 'svc-item-value--ghost': adorner.isDragDropGhost, 'svc-item-value--movedown': adorner.isDragDropMoveDown, 'svc-item-value--moveup': adorner.isDragDropMoveUp}\"\n #container>\n <div class=\"svc-item-value__ghost\"></div>\n <div class=\"svc-item-value-controls\">\n <span *ngIf=\"adorner.isDraggable\" class=\"svc-item-value-controls__button svc-item-value-controls__drag\">\n <svg class=\"svc-item-value-controls__drag-icon\" [iconName]=\"'icon-drag-area-indicator'\" [size]=\"24\"\n [attr.title]=\"adorner.dragTooltip\" sv-ng-svg-icon></svg>\n </span>\n <span *ngIf=\"adorner.allowAdd\" class=\"svc-item-value-controls__button svc-item-value-controls__add\" [key2click]\n (click)=\"adorner.add(adorner)\" [attr.aria-label]=\"undefined\"><svg [iconName]=\"'icon-add_16x16'\" [size]=\"16\"\n [attr.title]=\"undefined\" sv-ng-svg-icon></svg></span>\n <span *ngIf=\"adorner.allowRemove\" class=\"svc-item-value-controls__button svc-item-value-controls__remove\"\n [key2click] (click)=\"adorner.remove(adorner)\" (blur)=\"onBlur($event)\" [attr.aria-label]=\"undefined\"><svg\n [iconName]=\"'icon-remove_16x16'\" [size]=\"16\" [attr.title]=\"undefined\" sv-ng-svg-icon></svg></span>\n </div>\n\n <div class=\"svc-item-value__item\" (click)=\"adorner.select(adorner, $event)\">\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1873
1893
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ItemValueDesignerComponent, decorators: [{
1874
1894
  type: i0.Component,
1875
1895
  args: [{
@@ -1881,6 +1901,9 @@
1881
1901
  type: i0.Input
1882
1902
  }], componentData: [{
1883
1903
  type: i0.Input
1904
+ }], container: [{
1905
+ type: i0.ViewChild,
1906
+ args: ["container", { read: i0.ElementRef }]
1884
1907
  }] } });
1885
1908
  i1.AngularComponentFactory.Instance.registerComponent("svc-item-value", ItemValueDesignerComponent);
1886
1909
 
@@ -1981,7 +2004,7 @@
1981
2004
  return QuestionDropdownDesignerComponent;
1982
2005
  }(QuestionDesignerComponent));
1983
2006
  QuestionDropdownDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDropdownDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
1984
- QuestionDropdownDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n </div>\n </div>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n </svc-question-banner>\n <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2007
+ QuestionDropdownDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n </div>\n </div>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n </svc-question-banner>\n <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1985
2008
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDropdownDesignerComponent, decorators: [{
1986
2009
  type: i0.Component,
1987
2010
  args: [{
@@ -2068,7 +2091,7 @@
2068
2091
  return QuestionImageDesignerComponent;
2069
2092
  }(QuestionDesignerComponent));
2070
2093
  QuestionImageDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
2071
- QuestionImageDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n </div>\n </div>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n </svc-question-banner>\n <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2094
+ QuestionImageDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageDesignerComponent, selector: "svc-image-question", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n </div>\n </div>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n </svc-question-banner>\n <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2072
2095
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageDesignerComponent, decorators: [{
2073
2096
  type: i0.Component,
2074
2097
  args: [{
@@ -2112,7 +2135,7 @@
2112
2135
  return PanelDesignerComponent;
2113
2136
  }(QuestionDesignerComponent));
2114
2137
  PanelDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
2115
- PanelDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n (click)=\"addNewQuestion($event)\">\n <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\"\n [size]=\"24\" sv-ng-svg-icon></svg>\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n </div>\n\n <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n\n <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </div>\n <div class=\"svc-panel__add-new-question-wrapper\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\" sv-ng-svg-icon></svg>\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n class=\"svc-panel__question-type-selector\">\n <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n [size]=\"24\" sv-ng-svg-icon></svg>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2138
+ PanelDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n (click)=\"addNewQuestion($event)\">\n <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\"\n [size]=\"24\" sv-ng-svg-icon></svg>\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n </div>\n\n <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n\n <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </div>\n <div class=\"svc-panel__add-new-question-wrapper\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\" sv-ng-svg-icon></svg>\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n class=\"svc-panel__question-type-selector\">\n <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n [size]=\"24\" sv-ng-svg-icon></svg>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2116
2139
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDesignerComponent, decorators: [{
2117
2140
  type: i0.Component,
2118
2141
  args: [{
@@ -2364,7 +2387,7 @@
2364
2387
  return StringEditorComponent;
2365
2388
  }(CreatorModelComponent));
2366
2389
  StringEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringEditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
2367
- StringEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringEditorComponent, selector: "svc-string-edtior", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <span [class]=\"className\">\n <span class=\"svc-string-editor__content\">\n <div class=\"svc-string-editor__border\">\n <svg [iconName]=\"'icon-arrow-up'\" class=\"svc-string-editor__button svc-string-editor__button--edit\" [size]=\"24\" sv-ng-svg-icon \n (click)=\"edit($event)\" [iconName]=\"'icon-edit'\" [size]=\"16\"></svg>\n </div>\n <span class=\"svc-string-editor__input\">\n <span role=\"textbox\" *ngIf=\"!locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n (focus)=\"onFocus($event)\" (paste)=\"onPaste($event)\" (blur)=\"onBlur($event)\" (input)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (compositionstart)=\"baseModel.onCompositionStart($event)\" (compositionend)=\"baseModel.onCompositionEnd($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [textContent]=\"locString.renderedHtml\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" #container></span>\n <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor sv-string-editor--html\" spellcheck=\"false\"\n (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (compositionstart)=\"baseModel.onCompositionStart($event)\" (compositionend)=\"baseModel.onCompositionEnd($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"locString.renderedHtml | safeHtml\" #container></span>\n <sv-ng-character-counter *ngIf=\"showCharacterCounter\" [counter]=\"characterCounter\" [remainingCharacterCounter]=\"getCharacterCounterClass\"></sv-ng-character-counter>\n </span>\n </span>\n <span *ngIf=\"errorText\" class=\"svc-string-editor__error\">{{errorText}}</span>\n </span>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeHtml": i1__namespace.SafeHtmlPipe } });
2390
+ StringEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringEditorComponent, selector: "svc-string-edtior", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <span [class]=\"className\">\n <span class=\"svc-string-editor__content\">\n <div class=\"svc-string-editor__border svc-string-editor__border--hover\"></div>\n <div class=\"svc-string-editor__border svc-string-editor__border--focus\"></div>\n <span class=\"svc-string-editor__input\">\n <span role=\"textbox\" *ngIf=\"!locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n (focus)=\"onFocus($event)\" (paste)=\"onPaste($event)\" (blur)=\"onBlur($event)\" (input)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (compositionstart)=\"baseModel.onCompositionStart($event)\" (compositionend)=\"baseModel.onCompositionEnd($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [textContent]=\"locString.renderedHtml\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" #container></span>\n <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor sv-string-editor--html\" spellcheck=\"false\"\n (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (compositionstart)=\"baseModel.onCompositionStart($event)\" (compositionend)=\"baseModel.onCompositionEnd($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"locString.renderedHtml | safeHtml\" #container></span>\n <sv-ng-character-counter *ngIf=\"showCharacterCounter\" [counter]=\"characterCounter\" [remainingCharacterCounter]=\"getCharacterCounterClass\"></sv-ng-character-counter>\n </span>\n </span>\n <span *ngIf=\"errorText\" class=\"svc-string-editor__error\">{{errorText}}</span>\n </span>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeHtml": i1__namespace.SafeHtmlPipe } });
2368
2391
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringEditorComponent, decorators: [{
2369
2392
  type: i0.Component,
2370
2393
  args: [{
@@ -2677,7 +2700,7 @@
2677
2700
  return CreatorRowComponent;
2678
2701
  }(CreatorModelComponent));
2679
2702
  CreatorRowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreatorRowComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
2680
- CreatorRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorRowComponent, selector: "svc-row", inputs: { componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div [class]=\"model.cssClasses\">\n <sv-ng-row [row]=\"row\"></sv-ng-row>\n </div>\n</ng-template>", components: [{ type: i1__namespace.RowComponent, selector: "sv-ng-row", inputs: ["row"] }] });
2703
+ CreatorRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreatorRowComponent, selector: "svc-row", inputs: { componentData: "componentData" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div [class]=\"model.cssClasses\">\n <div class=\"svc-row__drop-indicator svc-row__drop-indicator--top\"></div>\n <div class=\"svc-row__drop-indicator svc-row__drop-indicator--bottom\"></div>\n <sv-ng-row [row]=\"row\"></sv-ng-row>\n </div>\n</ng-template>", components: [{ type: i1__namespace.RowComponent, selector: "sv-ng-row", inputs: ["row"] }] });
2681
2704
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreatorRowComponent, decorators: [{
2682
2705
  type: i0.Component,
2683
2706
  args: [{
@@ -2754,7 +2777,7 @@
2754
2777
  return QuestionRatingDesignerComponent;
2755
2778
  }(QuestionDesignerComponent));
2756
2779
  QuestionRatingDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionRatingDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
2757
- QuestionRatingDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n </div>\n </div>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n </svc-question-banner>\n <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2780
+ QuestionRatingDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n (dblclick)=\"adorner.dblclick($event)\"\n (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\" (click)=\"adorner.select(adorner, $event)\">\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\n <div *ngIf=\"adorner.allowDragging\" class=\"svc-question__drag-area\" (pointerdown)=\"adorner.onPointerDown($event)\">\n <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n sv-ng-svg-icon></svg>\n <div class=\"svc-question__top-actions\">\n <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n <div [class]=\"adorner.cssCollapsedHiddenTitle\">\n <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n </div>\n </div>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame-wrapper\">\n <div class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <svc-question-banner *ngIf=\"adorner.isBannerShowing\" [model]=\"adorner.createBannerParams()\">\n </svc-question-banner>\n <div class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1__namespace.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: QuestionBannerComponent, selector: "svc-question-banner", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1__namespace.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2758
2781
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionRatingDesignerComponent, decorators: [{
2759
2782
  type: i0.Component,
2760
2783
  args: [{