survey-angular-ui 1.9.107 → 1.9.108

package/fesm2015/survey-angular-ui.js

@@ -1046,7 +1046,7 @@ class SurveyCommentComponent {
     }
 }
 SurveyCommentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SurveyCommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"question.commentId\" [attr.maxlength]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.placeholder]=\"question.renderedCommentPlaceholder\" \n  [value]=\"comment\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"question.onCommentChange($event)\"\n  (input)=\"question.onCommentInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ question.comment }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SurveyCommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"question.commentId\" [attr.maxlength]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired || question.a11y_input_ariaRequired\" [attr.aria-label]=\"question.ariaLabel || question.a11y_input_ariaLabel\" [attr.placeholder]=\"question.renderedCommentPlaceholder\" \n  [value]=\"comment\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"question.onCommentChange($event)\"\n  (input)=\"question.onCommentInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ question.comment }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCommentComponent, decorators: [{
             type: Component,
             args: [{
@@ -1435,7 +1435,7 @@ class SurveyCommentOtherComponent {
     }
 }
 SurveyCommentOtherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCommentOtherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SurveyCommentOtherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"otherId\" [attr.maxlength]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.placeholder]=\"otherPlaceholder\" \n  [value]=\"otherValue\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"onOtherValueChange($event)\"\n  (input)=\"onOtherValueInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ otherValue }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SurveyCommentOtherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"otherId\" [attr.maxlength]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired || question.a11y_input_ariaRequired\" [attr.aria-label]=\"question.ariaLabel || question.a11y_input_ariaLabel\" [attr.placeholder]=\"otherPlaceholder\" \n  [value]=\"otherValue\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"onOtherValueChange($event)\"\n  (input)=\"onOtherValueInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ otherValue }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCommentOtherComponent, decorators: [{
             type: Component,
             args: [{
@@ -1625,7 +1625,7 @@ class SelectBaseComponent extends QuestionAngular {
     }
 }
 SelectBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], 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"] }] });
+SelectBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\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>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseComponent, decorators: [{
             type: Component,
             args: [{
@@ -1645,7 +1645,7 @@ class RadiogroupComponent extends SelectBaseComponent {
     }
 }
 RadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], 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"] }] });
+RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\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>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1677,7 +1677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class CheckboxComponent extends SelectBaseComponent {
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], 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"] }] });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\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>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1698,7 +1698,7 @@ class CheckboxItemComponent {
     }
 }
 CheckboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model" }, ngImport: i0, template: "<input *ngIf=\"model == question.selectAllItem\" role=\"option\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isAllSelected\" [value]=\"''\" (change)=\"onSelectAllChange($event)\"/>\n<input *ngIf=\"model != question.selectAllItem\" role=\"option\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model" }, ngImport: i0, template: "<input *ngIf=\"model == question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isAllSelected\" [value]=\"''\" (change)=\"onSelectAllChange($event)\"/>\n<input *ngIf=\"model != question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2034,7 +2034,7 @@ class SelectBaseItemComponent extends BaseAngular {
     }
 }
 SelectBaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectBaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\">\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span> \n    </ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SelectBaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\">\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\" sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span> \n    </ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2432,7 +2432,7 @@ class ProgressButtonsComponent {
     }
 }
 ProgressButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressButtonsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ProgressButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.css.progressButtonsContainerCenter\">\n  <div [class]=\"model.css.progressButtonsContainer\">\n    <div\n      [class]=\"getScrollButtonCss(true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"model.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"model.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of model.visiblePages; index as index\"\n          [class]=\"getListElementCss(index)\"\n          (click)=\"isListElementClickable(index) ? clickListElement(index) : null\">\n          <div\n            [class]=\"model.css.progressButtonsPageTitle\"\n            [title]=\"page.locNavigationTitle.renderedHtml || page.name\"\n          >\n            {{ page.locNavigationTitle.renderedHtml || page.name }}\n          </div>\n          <div\n            [class]=\"model.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"getScrollButtonCss(false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n</div>", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ProgressButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.css.progressButtonsContainerCenter\">\n  <div [class]=\"model.css.progressButtonsContainer\">\n    <div\n      [class]=\"getScrollButtonCss(true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"model.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"model.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of model.visiblePages; index as index\"\n          [class]=\"getListElementCss(index)\"\n          (click)=\"isListElementClickable(index) ? clickListElement(index) : null\">\n          <div\n            [class]=\"model.css.progressButtonsPageTitle\"\n            [title]=\"page.renderedNavigationTitle\"\n          >\n            {{ page.renderedNavigationTitle }}\n          </div>\n          <div\n            [class]=\"model.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"getScrollButtonCss(false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n</div>", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -2582,7 +2582,7 @@ class FileQuestionComponent extends QuestionAngular {
     }
 }
 FileQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input [class]=\"model.cssClasses.fileInput\" *ngIf=\"!model.isReadOnly\" tabindex=\"-1\" type=\"file\"\n    [attr.id]=\"model.inputId\" (change)=\"model.doChange($event)\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" [attr.capture]=\"model.renderCapture\" />\n  <input *ngIf=\"model.isReadOnly\" type=\"file\" disabled [class]=\"model.getReadOnlyFileCss()\" [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\" [attr.placeholder]=\"model.title\" style=\"color: transparent\" />\n  <div [class]=\"model.cssClasses.dragArea\" (dragenter)=\"model.onDragEnter($event)\" (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\" (dragleave)=\"model.onDragLeave($event)\">\n    <div [class]=\"model.getFileDecoratorCss()\">\n      <ng-container *ngIf=\"model.showLoadingIndicator\">\n        <sv-ng-loading-indicator></sv-ng-loading-indicator>\n      </ng-container>\n      <ng-container *ngIf=\"model.showChooseButton\">\n        <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.renderedPlaceholder }}</span>\n        <div [class]=\"model.cssClasses.wrapper\">\n          <label *ngIf=\"!model.isReadOnly\" role=\"button\" tabindex=\"0\" [class]=\"model.getChooseFileCss()\"\n            [attr.for]=\"model.inputId\" [attr.aria-label]=\"model.chooseButtonText\" [key2click]>\n            <span>{{ model.chooseButtonText }}</span>\n            <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonText\"\n              [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          </label>\n          <span [class]=\"model.cssClasses.noFileChosen\" *ngIf=\"model.isEmpty()\">{{ model.noFileChosenCaption }}</span>\n        </div>\n      </ng-container>\n    </div>\n    <button type=\"button\" *ngIf=\"model.showRemoveButton\" [class]=\"model.cssClasses.removeButton\"\n      (click)=\"model.doClean($event)\">\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\"\n        [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"model.allowShowPreview\">\n      <span *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n        [visible]=\"val && model.isPreviewVisible(index)\" [class]=\"model.cssClasses.preview\">\n        <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n          <a (click)=\"model.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\" [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\" [style.width]=\"model.imageWidth\">{{ val.name }}</a>\n        </div>\n        <div [class]=\"model.cssClasses.imageWrapper\">\n          <img *ngIf=\"model.canPreviewImage(val)\" [attr.src]=\"val.content | safeUrl\" [style.height]=\"model.imageHeight\"\n            [style.width]=\"model.imageWidth\" alt=\"File preview\" />\n          <svg *ngIf=\"model.defaultImage(val)\" [iconName]=\"model.cssClasses.defaultImageIconId\"\n            [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\"\n            (click)=\"model.doRemoveFile(val)\">\n            <span [class]=\"model.cssClasses.removeFile\">{{ model.removeFileCaption }}</span>\n            <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\"\n              [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\"\n              [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          </div>\n        </div>\n        <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n          <a (click)=\"model.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\" [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\" [style.width]=\"model.imageWidth\">{{ val.name }}</a>\n        </div>\n      </span>\n    </div>\n    <button type=\"button\" *ngIf=\"model.showRemoveButtonBottom\" [class]=\"model.showRemoveButtonBottom\"\n      (click)=\"model.doClean($event)\">\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\"\n        [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <sv-action-bar *ngIf=\"model.mobileFileNavigatorVisible\" [model]=\"model.mobileFileNavigator\"></sv-action-bar>\n  </div>\n</div>", components: [{ type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
+FileQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input [class]=\"model.cssClasses.fileInput\" *ngIf=\"!model.isReadOnly\" tabindex=\"-1\" type=\"file\"\n    [attr.id]=\"model.inputId\" (change)=\"model.doChange($event)\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" [attr.capture]=\"model.renderCapture\" />\n  <input *ngIf=\"model.isReadOnly\" type=\"file\" disabled [class]=\"model.getReadOnlyFileCss()\" [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\" [attr.placeholder]=\"model.title\" style=\"color: transparent\" />\n  <div [class]=\"model.cssClasses.dragArea\" (dragenter)=\"model.onDragEnter($event)\" (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\" (dragleave)=\"model.onDragLeave($event)\">\n    <div [class]=\"model.getFileDecoratorCss()\">\n      <ng-container *ngIf=\"model.showLoadingIndicator\">\n        <sv-ng-loading-indicator></sv-ng-loading-indicator>\n      </ng-container>\n      <ng-container *ngIf=\"model.showChooseButton\">\n        <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.renderedPlaceholder }}</span>\n        <div [class]=\"model.cssClasses.wrapper\">\n          <label *ngIf=\"!model.isReadOnly\" role=\"button\" tabindex=\"0\" [class]=\"model.getChooseFileCss()\"\n            [attr.for]=\"model.inputId\" [attr.aria-label]=\"model.chooseButtonText\" [key2click]>\n            <span>{{ model.chooseButtonText }}</span>\n            <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonText\"\n              [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          </label>\n          <span [class]=\"model.cssClasses.noFileChosen\" *ngIf=\"model.isEmpty()\">{{ model.noFileChosenCaption }}</span>\n        </div>\n      </ng-container>\n    </div>\n    <button type=\"button\" *ngIf=\"model.showRemoveButton\" [class]=\"model.cssClasses.removeButton\"\n      (click)=\"model.doClean($event)\">\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\"\n        [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"model.allowShowPreview\">\n      <span *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n        [visible]=\"val && model.isPreviewVisible(index)\" [class]=\"model.cssClasses.preview\">\n        <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n          <a (click)=\"model.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\" [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\" [style.width]=\"model.imageWidth\">{{ val.name }}</a>\n        </div>\n        <div [class]=\"model.cssClasses.imageWrapper\">\n          <img *ngIf=\"model.canPreviewImage(val)\" [attr.src]=\"val.content | safeUrl\" [style.height]=\"model.imageHeight\"\n            [style.width]=\"model.imageWidth\" alt=\"File preview\" />\n          <svg *ngIf=\"model.defaultImage(val)\" [iconName]=\"model.cssClasses.defaultImageIconId\"\n            [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\"\n            (click)=\"model.doRemoveFile(val)\">\n            <span [class]=\"model.cssClasses.removeFile\">{{ model.removeFileCaption }}</span>\n            <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\"\n              [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\"\n              [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          </div>\n        </div>\n        <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n          <a (click)=\"model.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\" [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\" [style.width]=\"model.imageWidth\">{{ val.name }}</a>\n        </div>\n      </span>\n    </div>\n    <button type=\"button\" *ngIf=\"model.showRemoveButtonBottom\" [class]=\"model.showRemoveButtonBottom\"\n      (click)=\"model.doClean($event)\">\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\"\n        [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <sv-action-bar *ngIf=\"model.fileNavigatorVisible\" [model]=\"model.fileNavigator\"></sv-action-bar>\n  </div>\n</div>", components: [{ type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2696,7 +2696,7 @@ class MultipleTextComponent extends QuestionAngular {
     }
 }
 MultipleTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultipleTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MultipleTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MultipleTextComponent, selector: "sv-ng-multipletext-question", usesInheritance: true, ngImport: i0, template: "<table [class]=\"model.cssClasses.root\" #contentElement>\n  <tbody>\n    <ng-container *ngFor=\"let row of model.getRows(); index as rowIndex; trackBy: trackRowBy\">\n      <sv-ng-multipletext-row [model]=\"row\" [question]=\"model\"></sv-ng-multipletext-row>\n    </ng-container>\n  </tbody>\n</table>", components: [{ type: MultipleTextRowComponent, selector: "sv-ng-multipletext-row", inputs: ["question", "model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+MultipleTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MultipleTextComponent, selector: "sv-ng-multipletext-question", usesInheritance: true, ngImport: i0, template: "<table [class]=\"model.getQuestionRootCss()\" #contentElement>\n  <tbody>\n    <ng-container *ngFor=\"let row of model.getRows(); index as rowIndex; trackBy: trackRowBy\">\n      <sv-ng-multipletext-row [model]=\"row\" [question]=\"model\"></sv-ng-multipletext-row>\n    </ng-container>\n  </tbody>\n</table>", components: [{ type: MultipleTextRowComponent, selector: "sv-ng-multipletext-row", inputs: ["question", "model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultipleTextComponent, decorators: [{
             type: Component,
             args: [{