survey-creator-angular 1.9.87 → 1.9.88

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.
@@ -893,6 +893,15 @@ class QuestionDesignerComponent extends CreatorModelComponent {
893
893
  getModel() {
894
894
  return this.adorner;
895
895
  }
896
+ get placeholderComponent() {
897
+ return "";
898
+ }
899
+ get placeholderComponentData() {
900
+ return null;
901
+ }
902
+ get showPlaceholderComponent() {
903
+ return false;
904
+ }
896
905
  selectQuestionType(event) {
897
906
  var _a;
898
907
  event.stopPropagation();
@@ -904,7 +913,7 @@ class QuestionDesignerComponent extends CreatorModelComponent {
904
913
  }
905
914
  }
906
915
  QuestionDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
907
- QuestionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <!-- ko if: adornerComponent -->\n <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n <!-- /ko -->\n <!-- /ko -->\n\n <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n <div class=\"svc-question__content-actions\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n\n <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement\" 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)\" data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n </ng-container>\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: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
916
+ QuestionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDesignerComponent, selector: "svc-question", inputs: { componentName: "componentName", componentData: "componentData" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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] (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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n\n <div class=\"svc-question__content-actions\">\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.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
908
917
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDesignerComponent, decorators: [{
909
918
  type: Component,
910
919
  args: [{
@@ -1029,7 +1038,7 @@ class QuestionDropdownDesignerComponent extends QuestionDesignerComponent {
1029
1038
  }
1030
1039
  }
1031
1040
  QuestionDropdownDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDropdownDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1032
- QuestionDropdownDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <!-- ko if: adornerComponent -->\n <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n <!-- /ko -->\n <!-- /ko -->\n\n <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n <div class=\"svc-question__content-actions\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n\n <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement\" 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)\" data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n </ng-container>\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: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1041
+ QuestionDropdownDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDropdownDesignerComponent, selector: "svc-dropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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] (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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n\n <div class=\"svc-question__content-actions\">\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.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1033
1042
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDropdownDesignerComponent, decorators: [{
1034
1043
  type: Component,
1035
1044
  args: [{
@@ -1082,12 +1091,21 @@ class QuestionImageDesignerComponent extends QuestionDesignerComponent {
1082
1091
  this.adorner = new QuestionImageAdornerViewModel(this.creator, this.model, null, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.nextSibling);
1083
1092
  }
1084
1093
  }
1094
+ get placeholderComponent() {
1095
+ return "file-question";
1096
+ }
1097
+ get placeholderComponentData() {
1098
+ return { model: this.adorner.filePresentationModel };
1099
+ }
1100
+ get showPlaceholderComponent() {
1101
+ return !!this.placeholderComponentData;
1102
+ }
1085
1103
  ngAfterViewInit() {
1086
1104
  this.adorner.questionRoot = this.container.nativeElement;
1087
1105
  }
1088
1106
  }
1089
1107
  QuestionImageDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1090
- QuestionImageDesignerComponent.ɵcmp = i0.ɵɵ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: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <!-- ko if: adornerComponent -->\n <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n <!-- /ko -->\n <!-- /ko -->\n\n <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n <div class=\"svc-question__content-actions\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n\n <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement\" 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)\" data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n </ng-container>\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: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1108
+ QuestionImageDesignerComponent.ɵcmp = i0.ɵɵ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: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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] (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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n\n <div class=\"svc-question__content-actions\">\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.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1091
1109
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageDesignerComponent, decorators: [{
1092
1110
  type: Component,
1093
1111
  args: [{
@@ -1103,7 +1121,7 @@ AngularComponentFactory.Instance.registerComponent("svc-image-question", Questio
1103
1121
  class QuestionImageAdornerDesignerComponent extends EmbeddedViewContentComponent {
1104
1122
  }
1105
1123
  QuestionImageAdornerDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageAdornerDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1106
- QuestionImageAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageAdornerDesignerComponent, selector: "svc-image-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div class=\"svc-image-question-controls\">\n <ng-container *ngIf=\"adorner.allowEdit && !adorner.isUploading\">\n <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n <span class=\"svc-image-question-controls__button\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n <svg [iconName]=\"'icon-file'\" [size]=\"24\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n </span>\n </ng-container>\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"] }] });
1124
+ QuestionImageAdornerDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionImageAdornerDesignerComponent, selector: "svc-image-question-adorner", inputs: { adorner: "adorner", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div class=\"svc-image-question-controls\">\n <ng-container *ngIf=\"adorner.allowEdit && !adorner.isUploading && !adorner.isEmptyElement\">\n <input type=\"file\" aria-hidden=\"true\" tabindex=\"-1\" accept=\"image/*\" class=\"svc-choose-file-input\" />\n <span class=\"svc-image-question-controls__button\" [key2click] [attr.title]=\"undefined\" [attr.aria-label]=\"undefined\">\n <svg [iconName]=\"'icon-file'\" [size]=\"24\" (click)=\"adorner.chooseFile(adorner)\" sv-ng-svg-icon></svg>\n </span>\n </ng-container>\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"] }] });
1107
1125
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionImageAdornerDesignerComponent, decorators: [{
1108
1126
  type: Component,
1109
1127
  args: [{
@@ -1121,12 +1139,12 @@ AngularComponentFactory.Instance.registerComponent("svc-image-question-adorner",
1121
1139
  class PanelDesignerComponent extends QuestionDesignerComponent {
1122
1140
  }
1123
1141
  PanelDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1124
- PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <!-- ko if: adornerComponent -->\n <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n <!-- /ko -->\n <!-- /ko -->\n\n <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n <div class=\"svc-question__content-actions\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n\n <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement\" 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)\" data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n </ng-container>\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: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1142
+ PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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]\n (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\"\n [attr.tabindex]=\"adorner.element.isInteractiveDesignElement ? undefined : -1\">\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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement\" 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 <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\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__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n </div>\n\n <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\">\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.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: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1125
1143
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, decorators: [{
1126
1144
  type: Component,
1127
1145
  args: [{
1128
1146
  selector: "svc-panel",
1129
- templateUrl: "./question.component.html",
1147
+ templateUrl: "./panel.component.html",
1130
1148
  styles: [":host { display: none; }"]
1131
1149
  }]
1132
1150
  }] });
@@ -1258,7 +1276,7 @@ class StringEditorComponent extends CreatorModelComponent {
1258
1276
  }
1259
1277
  }
1260
1278
  StringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StringEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
1261
- StringEditorComponent.ɵcmp = i0.ɵɵ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, 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)\" (blur)=\"onBlur($event)\" (input)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerText]=\"editValue\" #container></span>\n <span role=\"textbox\" *ngIf=\"locString.hasHtml\" class=\"sv-string-editor\" spellcheck=\"false\"\n (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"editValue\" #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.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1279
+ StringEditorComponent.ɵcmp = i0.ɵɵ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, 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)\" (blur)=\"onBlur($event)\" (input)=\"baseModel.onInput($event)\" (keydown)=\"baseModel.onKeyDown($event)\" (keyup)=\"baseModel.onKeyUp($event)\" (mouseup)=\"baseModel.onMouseUp($event)\" (click)=\"edit($event)\" [textContent]=\"editValue\" [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)\" (mouseup)=\"baseModel.onMouseUp($event)\"\n (click)=\"edit($event)\" [attr.aria-placeholder]=\"placeholder\" [attr.contenteditable]=\"contentEditable\" [innerHtml]=\"editValue\" #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.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1262
1280
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StringEditorComponent, decorators: [{
1263
1281
  type: Component,
1264
1282
  args: [{
@@ -1535,7 +1553,7 @@ class QuestionRatingDesignerComponent extends QuestionDesignerComponent {
1535
1553
  }
1536
1554
  }
1537
1555
  QuestionRatingDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionRatingDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1538
- QuestionRatingDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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 *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content\" [class]=\"adorner.css()\"\n [key2click] (click)=\"adorner.select(adorner, $event)\" data-bind=\"clickBubble: false\">\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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n <div *ngIf=\"adorner.element.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n <!-- ko if: adornerComponent -->\n <!-- ko component: { name: adornerComponent, params: { model: $data } } -->\n <!-- /ko -->\n <!-- /ko -->\n\n <div *ngIf=\"!adorner.isEmptyElement && model.isPanel && adorner.showAddQuestionButton\"\n class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n <div class=\"svc-question__content-actions\">\n <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n </div>\n </div>\n\n <ng-container *ngIf=\"!adorner.element.isInteractiveDesignElement\">\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n <div *ngIf=\"adorner.isEmptyElement\" 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)\" data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n </div>\n\n <div *ngIf=\"!adorner.isEmptyElement\" class=\"svc-panel__add-new-question-container\">\n <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\"\n data-bind=\"clickBubble: false\">\n <span class=\"svc-text svc-text--normal svc-text--bold\">\n {{ adorner.addNewQuestionText }}\n </span>\n </div>\n <!-- ko with: questionTypeSelectorModel -->\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 <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n </button>\n <!-- /ko -->\n </div>\n\n </ng-container>\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: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1556
+ QuestionRatingDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionRatingDesignerComponent, selector: "svc-rating-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\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] (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>\n\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n <div *ngIf=\"adorner.isEmptyElement && !showPlaceholderComponent\" class=\"svc-panel__placeholder_frame\">\n <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n </div>\n <ng-template *ngIf=\"adorner.isEmptyElement && !!showPlaceholderComponent\"\n [component]=\"{ name: placeholderComponent, data: placeholderComponentData }\">\n </ng-template>\n\n <ng-template *ngIf=\"adornerComponent\"\n [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n </ng-template>\n\n <div class=\"svc-question__content-actions\">\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.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1539
1557
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionRatingDesignerComponent, decorators: [{
1540
1558
  type: Component,
1541
1559
  args: [{