survey-angular-ui 1.9.88 → 1.9.89

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.
@@ -1010,7 +1010,7 @@ class QuestionComponent extends EmbeddedViewContentComponent {
1010
1010
  }
1011
1011
  }
1012
1012
  QuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1013
- QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"model.getRootStyle()\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.ariaLabelledBy\">\n <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n </ng-template>\n <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n <div [model]=\"model.locCommentText\" sv-ng-string></div>\n <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n </div>\n <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [model]=\"model.locDescription\" sv-ng-string></div>\n </div>\n <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1013
+ QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"model.getRootStyle()\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-expanded]=\"model.ariaExpanded\">\n <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n </ng-template>\n <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n <div [model]=\"model.locCommentText\" sv-ng-string></div>\n <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n </div>\n <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [model]=\"model.locDescription\" sv-ng-string></div>\n </div>\n <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1014
1014
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionComponent, decorators: [{
1015
1015
  type: Component,
1016
1016
  args: [{
@@ -1025,6 +1025,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
1025
1025
  }] } });
1026
1026
  AngularComponentFactory.Instance.registerComponent("question", QuestionComponent);
1027
1027
 
1028
+ class SafeHtmlPipe {
1029
+ constructor(domSanitizer) {
1030
+ this.domSanitizer = domSanitizer;
1031
+ }
1032
+ transform(url) {
1033
+ return this.domSanitizer.bypassSecurityTrustHtml(url);
1034
+ }
1035
+ }
1036
+ SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
1037
+ SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
1038
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, decorators: [{
1039
+ type: Pipe,
1040
+ args: [{ name: "safeHtml" }]
1041
+ }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
1042
+
1028
1043
  class StringViewerComponent {
1029
1044
  constructor(changeDetectorRef) {
1030
1045
  this.changeDetectorRef = changeDetectorRef;
@@ -1048,7 +1063,7 @@ class StringViewerComponent {
1048
1063
  }
1049
1064
  }
1050
1065
  StringViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StringViewerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1051
- StringViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, ngImport: i0, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1066
+ StringViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, ngImport: i0, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml | safeHtml\"></span>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeHtml": SafeHtmlPipe } });
1052
1067
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StringViewerComponent, decorators: [{
1053
1068
  type: Component,
1054
1069
  args: [{
@@ -1253,7 +1268,7 @@ class DropdownComponent extends BaseAngular {
1253
1268
  }
1254
1269
  }
1255
1270
  DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1256
- DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\"\n [attr.aria-controls]=\"dropdownModel.listElementId\"\n [attr.aria-expanded]=\"model.ariaExpanded ? 'true' : 'false'\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n <span>{{ dropdownModel.hintStringPrefix }}</span>\n </div>\n <div [class]=\"model.cssClasses.controlValue\">\n <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n <span>{{ dropdownModel.hintStringSuffix }}</span>\n </div>\n <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n </ng-container>\n <sv-ng-string *ngIf=\"dropdownModel.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\" [class]=\"model.cssClasses.filterStringInput\"\n [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n [attr.id]=\"model.getInputId()\"\n [attr.inputmode]=\"dropdownModel.inputMode\"\n [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n [attr.aria-label]=\"model.placeholder\"\n [attr.aria-controls]=\"dropdownModel.listElementId\"\n [attr.aria-expanded]=\"model.ariaExpanded ? 'true' : 'false'\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n [attr.placeholder]=\"dropdownModel.placeholderRendered\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n </div>\n <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n <!-- /ko -->\n <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n <div>{{ model.readOnlyText }}</div>\n </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
1271
+ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\"\n [attr.aria-controls]=\"dropdownModel.listElementId\"\n [attr.aria-expanded]=\"model.ariaExpanded\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n <span>{{ dropdownModel.hintStringPrefix }}</span>\n </div>\n <div [class]=\"model.cssClasses.controlValue\">\n <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n <span>{{ dropdownModel.hintStringSuffix }}</span>\n </div>\n <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n </ng-container>\n <sv-ng-string *ngIf=\"dropdownModel.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\" [class]=\"model.cssClasses.filterStringInput\"\n [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n [attr.id]=\"model.getInputId()\"\n [attr.inputmode]=\"dropdownModel.inputMode\"\n [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n [attr.aria-label]=\"model.placeholder\"\n [attr.aria-controls]=\"dropdownModel.listElementId\"\n [attr.aria-expanded]=\"model.ariaExpanded\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n [attr.placeholder]=\"dropdownModel.placeholderRendered\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n </div>\n <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n <!-- /ko -->\n <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n <div>{{ model.readOnlyText }}</div>\n </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
1257
1272
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
1258
1273
  type: Component,
1259
1274
  args: [{
@@ -1273,7 +1288,7 @@ class TagboxFilterComponent extends BaseAngular {
1273
1288
  }
1274
1289
  }
1275
1290
  TagboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1276
- TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"question.cssClasses.hint\">\n <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n <span>{{ model.hintStringPrefix }}</span>\n </div>\n <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n <span>{{ model.hintStringSuffix }}</span>\n </div>\n <input\n type=\"text\"\n autocomplete=\"off\"\n [(ngModel)]=\"model.inputStringRendered\"\n [attr.id]=\"question.getInputId()\"\n [class]=\"question.cssClasses.filterStringInput\"\n [attr.inputmode]=\"model.inputMode\"\n [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n [attr.readonly]=\"!model.searchEnabled ? true : null\"\n [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n [attr.aria-label]=\"question.placeholder\"\n [attr.aria-controls]=\"model.listElementId\"\n [attr.aria-expanded]=\"question.ariaExpanded ? 'true' : 'false'\"\n [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n [attr.placeholder]=\"model.filterStringPlaceholder\"\n (keydown)=\"model.inputKeyHandler($event)\"\n (blur)=\"model.onBlur($event)\"\n (focus)=\"model.onFocus($event)\"\n />\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1291
+ TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"question.cssClasses.hint\">\n <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n <span>{{ model.hintStringPrefix }}</span>\n </div>\n <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n <span>{{ model.hintStringSuffix }}</span>\n </div>\n <input\n type=\"text\"\n autocomplete=\"off\"\n [(ngModel)]=\"model.inputStringRendered\"\n [attr.id]=\"question.getInputId()\"\n [class]=\"question.cssClasses.filterStringInput\"\n [attr.inputmode]=\"model.inputMode\"\n [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n [attr.readonly]=\"!model.searchEnabled ? true : null\"\n [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n [attr.aria-label]=\"question.placeholder\"\n [attr.aria-controls]=\"model.listElementId\"\n [attr.aria-expanded]=\"question.ariaExpanded\"\n [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n [attr.placeholder]=\"model.filterStringPlaceholder\"\n (keydown)=\"model.inputKeyHandler($event)\"\n (blur)=\"model.onBlur($event)\"\n (focus)=\"model.onFocus($event)\"\n />\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1277
1292
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, decorators: [{
1278
1293
  type: Component,
1279
1294
  args: [{
@@ -1343,7 +1358,7 @@ class TagboxComponent {
1343
1358
  }
1344
1359
  }
1345
1360
  TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1346
- TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\"\n [attr.aria-controls]=\"dropdownModel.listElementId\"\n [attr.aria-expanded]=\"model.ariaExpanded ? 'true' : 'false'\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n <div [class]=\"model.cssClasses.controlValue\">\n <ng-container *ngIf=\"!model.isEmpty()\">\n <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n </sv-ng-tagbox-item>\n </ng-container>\n <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n </div>\n <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n <!-- /ko -->\n <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n <div>{{ model.readOnlyText }}</div>\n </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
1361
+ TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\"\n [attr.aria-controls]=\"dropdownModel.listElementId\"\n [attr.aria-expanded]=\"model.ariaExpanded\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n <div [class]=\"model.cssClasses.controlValue\">\n <ng-container *ngIf=\"!model.isEmpty()\">\n <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n </sv-ng-tagbox-item>\n </ng-container>\n <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n </div>\n <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n <!-- /ko -->\n <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n <div>{{ model.readOnlyText }}</div>\n </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
1347
1362
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, decorators: [{
1348
1363
  type: Component,
1349
1364
  args: [{
@@ -1521,7 +1536,7 @@ class TextQuestionComponent extends QuestionAngular {
1521
1536
  }
1522
1537
  }
1523
1538
  TextQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1524
- TextQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0, template: " <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n <datalist [id]=\"model.dataListId\">\n <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n </datalist>\n </div>\n <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>\n <ng-template #input>\n <input [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\"\n (change)=\"model.onChange($event)\" [value]=\"value\" [disabled]=\"model.isInputReadOnly\" name=\"user\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autocomplete\" #contentElement/>\n <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n [counter]=\"model.characterCounter\"\n [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n </sv-ng-character-counter>\n </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
1539
+ TextQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0, template: " <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n <datalist [id]=\"model.dataListId\">\n <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n </datalist>\n </div>\n <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>\n <ng-template #input>\n <input [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\"\n (change)=\"model.onChange($event)\" [value]=\"value\" [disabled]=\"model.isInputReadOnly\" name=\"user\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\" [attr.autocomplete]=\"model.autocomplete\" #contentElement/>\n <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n [counter]=\"model.characterCounter\"\n [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n </sv-ng-character-counter>\n </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
1525
1540
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextQuestionComponent, decorators: [{
1526
1541
  type: Component,
1527
1542
  args: [{
@@ -1532,21 +1547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
1532
1547
  }] });
1533
1548
  AngularComponentFactory.Instance.registerComponent("text-question", TextQuestionComponent);
1534
1549
 
1535
- class SafeHtmlPipe {
1536
- constructor(domSanitizer) {
1537
- this.domSanitizer = domSanitizer;
1538
- }
1539
- transform(url) {
1540
- return this.domSanitizer.bypassSecurityTrustHtml(url);
1541
- }
1542
- }
1543
- SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
1544
- SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
1545
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, decorators: [{
1546
- type: Pipe,
1547
- args: [{ name: "safeHtml" }]
1548
- }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
1549
-
1550
1550
  class HtmlQuestionComponent extends QuestionAngular {
1551
1551
  onModelChanged() {
1552
1552
  super.onModelChanged();
@@ -1892,7 +1892,7 @@ class Key2ClickDirective {
1892
1892
  constructor(el) {
1893
1893
  this.el = el;
1894
1894
  this.isSubscribed = false;
1895
- this.options = Key2ClickDirective.defaultOptions;
1895
+ this.options = Object.assign({}, Key2ClickDirective.defaultOptions);
1896
1896
  this.onkeyup = (evt) => {
1897
1897
  evt.preventDefault();
1898
1898
  evt.stopPropagation();
@@ -1914,8 +1914,8 @@ class Key2ClickDirective {
1914
1914
  if (this.isSubscribed)
1915
1915
  return;
1916
1916
  this.element.tabIndex = 0;
1917
- this.element.addEventListener("keyup", this.onkeyup);
1918
- this.element.addEventListener("keydown", this.onkeydown);
1917
+ this.element.addEventListener("keyup", this.onkeyup.bind(this));
1918
+ this.element.addEventListener("keydown", this.onkeydown.bind(this));
1919
1919
  this.element.addEventListener("blur", this.blur);
1920
1920
  this.isSubscribed = true;
1921
1921
  }
@@ -1923,8 +1923,8 @@ class Key2ClickDirective {
1923
1923
  if (!this.isSubscribed)
1924
1924
  return;
1925
1925
  this.element.tabIndex = -1;
1926
- this.element.removeEventListener("keyup", this.onkeyup);
1927
- this.element.removeEventListener("keydown", this.onkeydown);
1926
+ this.element.removeEventListener("keyup", this.onkeyup.bind(this));
1927
+ this.element.removeEventListener("keydown", this.onkeydown.bind(this));
1928
1928
  this.element.removeEventListener("blur", this.blur);
1929
1929
  this.isSubscribed = false;
1930
1930
  }
@@ -2561,7 +2561,7 @@ class CommentQuestionComponent extends QuestionAngular {
2561
2561
  }
2562
2562
  }
2563
2563
  CommentQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2564
- CommentQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0, template: "<textarea\n*ngIf=\"!model.isReadOnlyRenderDiv()\"\n[readonly]=\"model.isInputReadOnly\"\n[attr.disabled]=\"model.renderedInputDisabled\"\n[id]=\"model.inputId\"\n[attr.maxlength]=\"model.getMaxLength()\"\n[attr.cols]=\"model.cols\"\n[attr.rows]=\"model.rows\"\n[attr.placeholder]=\"model.renderedPlaceholder\"\n[class]=\"model.className\"\n[value]=\"model.value || null\"\n(input)=\"model.onInput($event)\"\n(keydown)=\"model.onKeyDown($event)\"\n(change)=\"onChange($event)\"\n[attr.aria-required]=\"model.ariaRequired\"\n[attr.aria-label]=\"model.ariaLabel\"\n[attr.aria-invalid]=\"model.ariaInvalid\"\n[attr.aria-describedby]=\"model.ariaDescribedBy\"\n[style.resize]=\"model.resizeStyle\"\n#contentElement></textarea>\n<sv-ng-character-counter *ngIf=\"!model.isReadOnlyRenderDiv() && model.getMaxLength()\" \n[counter]=\"model.characterCounter\"\n[remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n</sv-ng-character-counter>\n<div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>", components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2564
+ CommentQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0, template: "<textarea\n*ngIf=\"!model.isReadOnlyRenderDiv()\"\n[readonly]=\"model.isInputReadOnly\"\n[attr.disabled]=\"model.renderedInputDisabled\"\n[id]=\"model.inputId\"\n[attr.maxlength]=\"model.getMaxLength()\"\n[attr.cols]=\"model.cols\"\n[attr.rows]=\"model.rows\"\n[attr.placeholder]=\"model.renderedPlaceholder\"\n[class]=\"model.className\"\n[value]=\"model.value || null\"\n(input)=\"model.onInput($event)\"\n(keydown)=\"model.onKeyDown($event)\"\n(change)=\"onChange($event)\"\n[attr.aria-required]=\"model.a11y_input_ariaRequired\"\n[attr.aria-label]=\"model.a11y_input_ariaLabel\"\n[attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n[attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n[style.resize]=\"model.resizeStyle\"\n#contentElement></textarea>\n<sv-ng-character-counter *ngIf=\"!model.isReadOnlyRenderDiv() && model.getMaxLength()\" \n[counter]=\"model.characterCounter\"\n[remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n</sv-ng-character-counter>\n<div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>", components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2565
2565
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentQuestionComponent, decorators: [{
2566
2566
  type: Component,
2567
2567
  args: [{
@@ -2853,7 +2853,7 @@ class PanelDynamicQuestionComponent extends QuestionAngular {
2853
2853
  }
2854
2854
  }
2855
2855
  PanelDynamicQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2856
- PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n </div>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n <!-- add track by [key]=\"panel.id\" -->\n <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n <div [class]=\"model.getPanelWrapperCss()\">\n <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n <ng-container *ngIf=\"model.panelRemoveButtonLocation ==='right'\">\n <sv-ng-paneldynamic-remove-btn *ngIf=\"model.canRemovePanel && panel.state != 'collapsed' && model.panelRemoveButtonLocation == 'right'\" [data]=\"{ panel: panel, question: model }\"></sv-ng-paneldynamic-remove-btn>\n </ng-container>\n </div>\n <!-- add track by [key]=\"'separator' + panel.id\" -->\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.panelCount !== 0 && !model.showLegacyNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n <hr [class]=\"model.cssClasses.separator\"/>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n</ng-template>\n<ng-template #progress>\n <div [class]=\"this.progressCssClass\">\n <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n <div [class]=\"model.cssClasses.progressContainer\">\n <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n </div>\n <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n </div>\n </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: PaneldynamicRemoveButtonComponent, selector: "sv-ng-paneldynamic-remove-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2856
+ PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n </div>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n <!-- add track by [key]=\"panel.id\" -->\n <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n <div [class]=\"model.getPanelWrapperCss()\">\n <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n <ng-container *ngIf=\"model.panelRemoveButtonLocation ==='right'\">\n <sv-ng-paneldynamic-remove-btn *ngIf=\"model.canRemovePanel && panel.state != 'collapsed' && model.panelRemoveButtonLocation == 'right'\" [data]=\"{ panel: panel, question: model }\"></sv-ng-paneldynamic-remove-btn>\n </ng-container>\n </div>\n <!-- add track by [key]=\"'separator' + panel.id\" -->\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\"/>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n <hr [class]=\"model.cssClasses.separator\"/>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n</ng-template>\n<ng-template #progress>\n <div [class]=\"this.progressCssClass\">\n <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n <div [class]=\"model.cssClasses.progressContainer\">\n <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n </div>\n <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n </div>\n </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: PaneldynamicRemoveButtonComponent, selector: "sv-ng-paneldynamic-remove-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2857
2857
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, decorators: [{
2858
2858
  type: Component,
2859
2859
  args: [{
@@ -3198,7 +3198,7 @@ class ImageQuestionComponent extends QuestionAngular {
3198
3198
  }
3199
3199
  }
3200
3200
  ImageQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3201
- ImageQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageQuestionComponent, selector: "sv-ng-image-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n <img\n *ngIf=\"model.renderedMode === 'image'\"\n [class]=\"model.getImageCss()\"\n [attr.src]=\"model.locImageLink.renderedHtml\"\n [attr.alt]=\"model.altText || model.title\"\n [attr.width]=\"model.renderedWidth\"\n [attr.height]=\"model.renderedHeight\"\n [style]=\"{ objectFit: model.imageFit }\"\n (loadedmetadata)=\"model.onLoadHandler()\"\n (error)=\"model.onErrorHandler()\"\n /><video\n controls\n *ngIf=\"model.renderedMode === 'video'\"\n [class]=\"model.getImageCss()\"\n [attr.src]=\"model.locImageLink.renderedHtml\"\n [attr.width]=\"model.renderedWidth\"\n [attr.height]=\"model.renderedHeight\"\n [style]=\"{ objectFit: model.imageFit }\"\n (loadedmetadata)=\"model.onLoadHandler()\"\n (error)=\"model.onErrorHandler()\"\n ></video>\n <iframe\n *ngIf=\"model.renderedMode === 'youtube'\"\n [class]=\"model.getImageCss()\"\n [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n [attr.width]=\"model.renderedWidth\"\n [attr.height]=\"model.renderedHeight\"\n [style]=\"{ objectFit: model.imageFit }\"\n ></iframe>\n <div *ngIf=\"!model.imageLink || model.contentNotLoaded\" [class]=\"model.cssClasses.noImage\">\n <svg [iconName]=\"model.cssClasses.noImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n </div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeResourceUrl": SafeResourceUrlPipe } });
3201
+ ImageQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageQuestionComponent, selector: "sv-ng-image-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n <img\n *ngIf=\"model.renderedMode === 'image'\"\n [visible]=\"!!model.locImageLink.renderedHtml && !model.contentNotLoaded\"\n [class]=\"model.getImageCss()\"\n [attr.src]=\"model.locImageLink.renderedHtml\"\n [attr.alt]=\"model.altText || model.title\"\n [attr.width]=\"model.renderedWidth\"\n [attr.height]=\"model.renderedHeight\"\n [style]=\"{ objectFit: model.imageFit }\"\n (load)=\"model.onLoadHandler()\"\n (error)=\"model.onErrorHandler()\"\n /><video\n controls\n *ngIf=\"model.renderedMode === 'video'\"\n [visible]=\"!!model.locImageLink.renderedHtml && !model.contentNotLoaded\"\n [class]=\"model.getImageCss()\"\n [attr.src]=\"model.locImageLink.renderedHtml\"\n [attr.width]=\"model.renderedWidth\"\n [attr.height]=\"model.renderedHeight\"\n [style]=\"{ objectFit: model.imageFit }\"\n (loadedmetadata)=\"model.onLoadHandler()\"\n (error)=\"model.onErrorHandler()\"\n ></video>\n <iframe\n *ngIf=\"model.renderedMode === 'youtube'\"\n [class]=\"model.getImageCss()\"\n [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n [attr.width]=\"model.renderedWidth\"\n [attr.height]=\"model.renderedHeight\"\n [style]=\"{ objectFit: model.imageFit }\"\n ></iframe>\n <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"model.cssClasses.noImage\">\n <svg [iconName]=\"model.cssClasses.noImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n </div>\n</div>", components: [{ type: 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: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeResourceUrl": SafeResourceUrlPipe } });
3202
3202
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageQuestionComponent, decorators: [{
3203
3203
  type: Component,
3204
3204
  args: [{