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.
@@ -7,6 +7,11 @@ export declare class QuestionImageDesignerComponent extends QuestionDesignerComp
7
7
  container: ElementRef<HTMLDivElement>;
8
8
  protected createModel(): void;
9
9
  adornerComponent: string;
10
+ get placeholderComponent(): string;
11
+ get placeholderComponentData(): {
12
+ model: import("survey-core").QuestionFileModel;
13
+ };
14
+ get showPlaceholderComponent(): boolean;
10
15
  ngAfterViewInit(): void;
11
16
  static ɵfac: i0.ɵɵFactoryDeclaration<QuestionImageDesignerComponent, never>;
12
17
  static ɵcmp: i0.ɵɵComponentDeclaration<QuestionImageDesignerComponent, "svc-image-question", never, {}, {}, never, never>;
@@ -1514,6 +1514,27 @@
1514
1514
  QuestionDesignerComponent.prototype.getModel = function () {
1515
1515
  return this.adorner;
1516
1516
  };
1517
+ Object.defineProperty(QuestionDesignerComponent.prototype, "placeholderComponent", {
1518
+ get: function () {
1519
+ return "";
1520
+ },
1521
+ enumerable: false,
1522
+ configurable: true
1523
+ });
1524
+ Object.defineProperty(QuestionDesignerComponent.prototype, "placeholderComponentData", {
1525
+ get: function () {
1526
+ return null;
1527
+ },
1528
+ enumerable: false,
1529
+ configurable: true
1530
+ });
1531
+ Object.defineProperty(QuestionDesignerComponent.prototype, "showPlaceholderComponent", {
1532
+ get: function () {
1533
+ return false;
1534
+ },
1535
+ enumerable: false,
1536
+ configurable: true
1537
+ });
1517
1538
  QuestionDesignerComponent.prototype.selectQuestionType = function (event) {
1518
1539
  var _a;
1519
1540
  event.stopPropagation();
@@ -1526,7 +1547,7 @@
1526
1547
  return QuestionDesignerComponent;
1527
1548
  }(CreatorModelComponent));
1528
1549
  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 });
1529
- 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 (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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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"] }] });
1550
+ 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 (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__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"] }], 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"] }] });
1530
1551
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDesignerComponent, decorators: [{
1531
1552
  type: i0.Component,
1532
1553
  args: [{
@@ -1696,7 +1717,7 @@
1696
1717
  return QuestionDropdownDesignerComponent;
1697
1718
  }(QuestionDesignerComponent));
1698
1719
  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 });
1699
- 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 (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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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"] }] });
1720
+ 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 (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__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"] }], 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"] }] });
1700
1721
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionDropdownDesignerComponent, decorators: [{
1701
1722
  type: i0.Component,
1702
1723
  args: [{
@@ -1756,13 +1777,34 @@
1756
1777
  this.adorner = new surveyCreatorCore.QuestionImageAdornerViewModel(this.creator, this.model, null, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.nextSibling);
1757
1778
  }
1758
1779
  };
1780
+ Object.defineProperty(QuestionImageDesignerComponent.prototype, "placeholderComponent", {
1781
+ get: function () {
1782
+ return "file-question";
1783
+ },
1784
+ enumerable: false,
1785
+ configurable: true
1786
+ });
1787
+ Object.defineProperty(QuestionImageDesignerComponent.prototype, "placeholderComponentData", {
1788
+ get: function () {
1789
+ return { model: this.adorner.filePresentationModel };
1790
+ },
1791
+ enumerable: false,
1792
+ configurable: true
1793
+ });
1794
+ Object.defineProperty(QuestionImageDesignerComponent.prototype, "showPlaceholderComponent", {
1795
+ get: function () {
1796
+ return !!this.placeholderComponentData;
1797
+ },
1798
+ enumerable: false,
1799
+ configurable: true
1800
+ });
1759
1801
  QuestionImageDesignerComponent.prototype.ngAfterViewInit = function () {
1760
1802
  this.adorner.questionRoot = this.container.nativeElement;
1761
1803
  };
1762
1804
  return QuestionImageDesignerComponent;
1763
1805
  }(QuestionDesignerComponent));
1764
1806
  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 });
1765
- 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 (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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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"] }] });
1807
+ 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 (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__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"] }], 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"] }] });
1766
1808
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageDesignerComponent, decorators: [{
1767
1809
  type: i0.Component,
1768
1810
  args: [{
@@ -1783,7 +1825,7 @@
1783
1825
  return QuestionImageAdornerDesignerComponent;
1784
1826
  }(i1.EmbeddedViewContentComponent));
1785
1827
  QuestionImageAdornerDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageAdornerDesignerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
1786
- QuestionImageAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
1828
+ QuestionImageAdornerDesignerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
1787
1829
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionImageAdornerDesignerComponent, decorators: [{
1788
1830
  type: i0.Component,
1789
1831
  args: [{
@@ -1806,12 +1848,12 @@
1806
1848
  return PanelDesignerComponent;
1807
1849
  }(QuestionDesignerComponent));
1808
1850
  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 });
1809
- 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 (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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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"] }] });
1851
+ 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 (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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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
1852
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDesignerComponent, decorators: [{
1811
1853
  type: i0.Component,
1812
1854
  args: [{
1813
1855
  selector: "svc-panel",
1814
- templateUrl: "./question.component.html",
1856
+ templateUrl: "./panel.component.html",
1815
1857
  styles: [":host { display: none; }"]
1816
1858
  }]
1817
1859
  }] });
@@ -1998,7 +2040,7 @@
1998
2040
  return StringEditorComponent;
1999
2041
  }(CreatorModelComponent));
2000
2042
  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 });
2001
- 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)\" (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__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"] }] });
2043
+ 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)\" (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__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"] }] });
2002
2044
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StringEditorComponent, decorators: [{
2003
2045
  type: i0.Component,
2004
2046
  args: [{
@@ -2378,7 +2420,7 @@
2378
2420
  return QuestionRatingDesignerComponent;
2379
2421
  }(QuestionDesignerComponent));
2380
2422
  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 });
2381
- 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 (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__namespace.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1__namespace.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: i1__namespace.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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"] }] });
2423
+ 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 (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__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"] }], 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"] }] });
2382
2424
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionRatingDesignerComponent, decorators: [{
2383
2425
  type: i0.Component,
2384
2426
  args: [{