survey-angular-ui 1.9.131 → 1.9.132

package/bundles/survey-angular-ui.umd.js

@@ -1692,7 +1692,7 @@
       return ElementHeaderComponent;
   }());
   ElementHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"!!element.additionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"!!element.additionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1769,7 +1769,7 @@
       return QuestionComponent;
   }(EmbeddedViewContentComponent));
   QuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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    <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\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: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></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.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [model]=\"model.locDescription\" sv-ng-string></div>\n      </div>\n    </ng-template>\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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  QuestionComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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-describedby]=\"model.ariaDescribedBy\" [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    <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\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: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></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.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n      </div>\n    </ng-template>\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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1986,7 +1986,7 @@
       return DropdownComponent;
   }(BaseAngular));
   DropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  DropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (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=\"model.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.noTabIndex ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\n            [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n            [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n            [attr.aria-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" \n            [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" aria-hidden=\"true\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\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 *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\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", "getTarget"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  DropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (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-errormessage]=\"model.ariaErrormessage\" [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=\"model.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.noTabIndex ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\n            [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n            [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n            [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n            [attr.aria-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" \n            [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" aria-hidden=\"true\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\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 *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\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", "getTarget"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2011,7 +2011,7 @@
       return TagboxFilterComponent;
   }(BaseAngular));
   TagboxFilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxFilterComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TagboxFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, 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.filterReadOnly ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.a11y_input_ariaLabel\"\n      [attr.aria-labelledby]=\"question.a11y_input_ariaLabelledBy\"\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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  TagboxFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, 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.filterReadOnly ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.a11y_input_ariaLabel\"\n      [attr.aria-labelledby]=\"question.a11y_input_ariaLabelledBy\"\n      [attr.aria-describedby]=\"question.a11y_input_ariaDescribedBy\"\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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxFilterComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2097,7 +2097,7 @@
       return TagboxComponent;
   }());
   TagboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TagboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (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.showClearButton\" aria-hidden=\"true\">\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        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\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", "getTarget"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  TagboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (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-errormessage]=\"model.ariaErrormessage\" [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.showClearButton\" aria-hidden=\"true\">\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        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\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", "getTarget"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2211,7 +2211,7 @@
       return DropdownSelectComponent;
   }());
   DropdownSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownSelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DropdownSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.renderCssRoot\">\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n      [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n      [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autocomplete\" [required]=\"model.isRequired\"\n      [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n      [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\">\n      <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n      <ng-template *ngFor=\"let item of model.visibleChoices\" [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n    </select>\n    <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\">\n      <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n  </div>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\"\n    [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment-other></div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  DropdownSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.renderCssRoot\">\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n      [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n      [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autocomplete\" [required]=\"model.isRequired\"\n      [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n      [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\">\n      <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n      <ng-template *ngFor=\"let item of model.visibleChoices\" [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n    </select>\n    <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\">\n      <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n  </div>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\"\n    [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment-other></div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownSelectComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2326,7 +2326,7 @@
       return TextQuestionComponent;
   }(QuestionAngular));
   TextQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TextQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0__namespace, 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\" [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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+  TextQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0__namespace, 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\" [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-describedby]=\"model.a11y_input_ariaDescribedBy\"[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" [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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2404,7 +2404,7 @@
       return SelectBaseComponent;
   }(QuestionAngular));
   SelectBaseComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SelectBaseComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  SelectBaseComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, 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-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2429,7 +2429,7 @@
       return RadiogroupComponent;
   }(SelectBaseComponent));
   RadiogroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  RadiogroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0__namespace, 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\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  RadiogroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0__namespace, 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-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2445,7 +2445,7 @@
       return RadiogroupItemComponent;
   }());
   RadiogroupItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  RadiogroupItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: { question: "question", model: "model" }, ngImport: i0__namespace, template: "<input type=\"radio\" [name]=\"question.questionName\" [attr.name]=\"question.questionName\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  RadiogroupItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: { question: "question", model: "model" }, ngImport: i0__namespace, template: "<input type=\"radio\" [name]=\"question.questionName\" [attr.name]=\"question.questionName\" [id]=\"question.getItemId(model)\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2467,7 +2467,7 @@
       return CheckboxComponent;
   }(SelectBaseComponent));
   CheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0__namespace, 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\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0__namespace, 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-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2575,7 +2575,7 @@
       return BooleanQuestionComponent;
   }(QuestionAngular));
   BooleanQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  BooleanQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" \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        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(model.swapOrder)\" [model]=\"model.locLabelLeft\" sv-ng-string></span>\n      </div>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, !model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(!model.swapOrder)\" [model]=\"model.locLabelRight\"  sv-ng-string></span>\n      </div>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  BooleanQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" \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-describedby]=\"model.a11y_input_ariaDescribedBy\"\n        [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n        [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(model.swapOrder)\" [model]=\"model.locLabelLeft\" sv-ng-string></span>\n      </div>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, !model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(!model.swapOrder)\" [model]=\"model.locLabelRight\"  sv-ng-string></span>\n      </div>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2621,7 +2621,7 @@
       return ImagePickerItemComponent;
   }(BaseAngular));
   ImagePickerItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImagePickerItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ImagePickerItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerItemComponent, selector: "sv-ng-imagepicker-item", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.getItemClass(model)\">\n    <label [class]=\"question.cssClasses.label\">\n        <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-describedby]=\"question.ariaDescribedBy\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <span *ngIf=\"question.cssClasses.checkedItemDecorator\" [class]=\"question.cssClasses.checkedItemDecorator\">\n                <svg *ngIf=\"question.cssClasses.checkedItemSvgIconId\" [class]=\"question.cssClasses.checkedItemSvgIcon\" [iconName]=\"question.cssClasses.checkedItemSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n              </span>\n              <img *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'\" [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [attr.alt]=\"model.locText.renderedHtml\"  [style.objectFit]=\"question.imageFit\" (load)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'video'\" controls [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\" (loadedmetadata)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth + 'px'\" [style.height]=\"question.renderedImageHeight + 'px'\" [style.objectFit]=\"question.imageFit\">\n                <svg *ngIf=\"question.cssClasses.itemNoImageSvgIconId\" [class]=\"question.cssClasses.itemNoImageSvgIcon\" [iconName]=\"question.cssClasses.itemNoImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n              </div>\n            </div>\n            <span *ngIf=\"question.showLabel\" [class]=\"question.cssClasses.itemText\" [model]=\"model.locText\" sv-ng-string></span>\n        </div>\n    </label>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ImagePickerItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerItemComponent, selector: "sv-ng-imagepicker-item", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.getItemClass(model)\">\n    <label [class]=\"question.cssClasses.label\">\n        <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-errormessage]=\"question.ariaErrormessage\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <span *ngIf=\"question.cssClasses.checkedItemDecorator\" [class]=\"question.cssClasses.checkedItemDecorator\">\n                <svg *ngIf=\"question.cssClasses.checkedItemSvgIconId\" [class]=\"question.cssClasses.checkedItemSvgIcon\" [iconName]=\"question.cssClasses.checkedItemSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n              </span>\n              <img *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'\" [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [attr.alt]=\"model.locText.renderedHtml\"  [style.objectFit]=\"question.imageFit\" (load)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'video'\" controls [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\" (loadedmetadata)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth + 'px'\" [style.height]=\"question.renderedImageHeight + 'px'\" [style.objectFit]=\"question.imageFit\">\n                <svg *ngIf=\"question.cssClasses.itemNoImageSvgIconId\" [class]=\"question.cssClasses.itemNoImageSvgIcon\" [iconName]=\"question.cssClasses.itemNoImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n              </div>\n            </div>\n            <span *ngIf=\"question.showLabel\" [class]=\"question.cssClasses.itemText\" [model]=\"model.locText\" sv-ng-string></span>\n        </div>\n    </label>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImagePickerItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2681,7 +2681,7 @@
       return ButtonGroupItemComponent;
   }(BaseAngular));
   ButtonGroupItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ButtonGroupItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ButtonGroupItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: { item: "item", question: "question", index: "index" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label role=\"radio\" [class]=\"model.css.label\" [attr.title]=\"model.caption.renderedHtml\">\n    <input type=\"radio\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.id\" [attr.aria-required]=\"model.isRequired\" [attr.aria-label]=\"model.caption.renderedHtml\" role=\"radio\" [attr.aria-invalid]=\"model.hasErrors\" [attr.aria-describedby]=\"model.describedBy\" [disabled]=\"model.readOnly\" [class]=\"model.css.control\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"/>\n    <div data-bind=\"css: model.css.decorator\">\n      <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [class]=\"model.css.icon\" sv-ng-svg-icon></svg>\n      <span [class]=\"model.css.caption\" *ngIf=\"model.showCaption\" [attr.title]=\"model.caption.renderedHtml\" sv-ng-string [model]=\"model.caption\">\n      </span>\n    </div>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ButtonGroupItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: { item: "item", question: "question", index: "index" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label role=\"radio\" [class]=\"model.css.label\" [attr.title]=\"model.caption.renderedHtml\">\n    <input type=\"radio\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.id\" [attr.aria-required]=\"model.isRequired\" [attr.aria-label]=\"model.caption.renderedHtml\" role=\"radio\" [attr.aria-invalid]=\"model.hasErrors\" [attr.aria-errormessage]=\"model.describedBy\" [disabled]=\"model.readOnly\" [class]=\"model.css.control\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"/>\n    <div data-bind=\"css: model.css.decorator\">\n      <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [class]=\"model.css.icon\" sv-ng-svg-icon></svg>\n      <span [class]=\"model.css.caption\" *ngIf=\"model.showCaption\" [attr.title]=\"model.caption.renderedHtml\" sv-ng-string [model]=\"model.caption\">\n      </span>\n    </div>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ButtonGroupItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3116,7 +3116,7 @@
       return RatingItemComponent;
   }(BaseAngular));
   RatingItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  RatingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+  RatingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3150,7 +3150,7 @@
       return RatingItemStarComponent;
   }(BaseAngular));
   RatingItemStarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemStarComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  RatingItemStarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n      <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+  RatingItemStarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n      <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemStarComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3184,7 +3184,7 @@
       return RatingItemSmileyComponent;
   }(BaseAngular));
   RatingItemSmileyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemSmileyComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  RatingItemSmileyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+  RatingItemSmileyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemSmileyComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3254,7 +3254,7 @@
       return BooleanCheckboxComponent;
   }());
   BooleanCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanCheckboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  BooleanCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n        <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n      </span>\n    </label>\n    <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  BooleanCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n        <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n      </span>\n    </label>\n    <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanCheckboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3273,7 +3273,7 @@
       return BooleanRadioItemComponent;
   }());
   BooleanRadioItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanRadioItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  BooleanRadioItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0__namespace, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n  <label [class]=\"question.cssClasses.radioLabel\">\n    <input\n      type=\"radio\"\n      [attr.name]=\"question.name\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [value]=\"value\" [(ngModel)]=\"question.booleanValue\"\n      [disabled]=\"question.isInputReadOnly\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\"></span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  BooleanRadioItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0__namespace, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n  <label [class]=\"question.cssClasses.radioLabel\">\n    <input\n      type=\"radio\"\n      [attr.name]=\"question.name\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [value]=\"value\" [(ngModel)]=\"question.booleanValue\"\n      [disabled]=\"question.isInputReadOnly\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\"></span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$1.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: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanRadioItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3605,7 +3605,7 @@
       return FileQuestionComponent;
   }(QuestionAngular));
   FileQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  FileQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input [class]=\"model.cssClasses.fileInput\" *ngIf=\"!model.isReadOnly && model.hasFileUI\" tabindex=\"-1\" type=\"file\"\n    [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.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()\" *ngIf=\"model.showFileDecorator\">\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\" [model]=\"model.locRenderedPlaceholder\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <sv-ng-choose-file-btn [data]=\"{ question: model }\" *ngIf=\"model.showChooseButton\"></sv-ng-choose-file-btn>\n        <sv-ng-action-bar [model]=\"model.actionsContainer\" *ngIf=\"model.actionsContainerVisible\"></sv-ng-action-bar>\n        <span [class]=\"model.cssClasses.noFileChosen\" *ngIf=\"model.isEmpty()\">{{ model.noFileChosenCaption }}</span>\n      </div>\n    </div>\n    <ng-container *ngIf=\"model.showLoadingIndicator\">\n      <div [class]=\"model.cssClasses.loadingIndicator\">\n        <sv-ng-loading-indicator></sv-ng-loading-indicator>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"model.isPlayingVideo\">\n      <ng-container *ngTemplateOutlet=\"fileVideo\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButton\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButton }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.allowShowPreview\">\n      <ng-template [component]=\"{ name: 'sv-file-preview', data: { question: model } }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButtonBottom\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButtonBottom }\"></ng-container>\n    </ng-container>\n    <sv-action-bar *ngIf=\"model.fileNavigatorVisible\" [model]=\"model.fileNavigator\"></sv-action-bar>\n  </div>\n</div>\n<ng-template #fileCleanButton let-css=\"css\">\n  <button type=\"button\" [class]=\"css\" (click)=\"model.doClean()\">\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</ng-template>\n<ng-template #fileVideo>\n  <div [class]=\"model.cssClasses.videoContainer\">\n    <sv-ng-action [model]=\"model.changeCameraAction\"></sv-ng-action>\n    <sv-ng-action [model]=\"model.closeCameraAction\"></sv-ng-action>\n    <video autoplay playsinline [attr.id]=\"model.videoId\" [class]=\"model.cssClasses.video\"></video>\n    <sv-ng-action [model]=\"model.takePictureAction\"></sv-ng-action>\n  </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: ["data", "model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  FileQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input [class]=\"model.cssClasses.fileInput\" *ngIf=\"!model.isReadOnly && model.hasFileUI\" tabindex=\"-1\" type=\"file\"\n    [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-errormessage]=\"model.ariaErrormessage\" [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()\" *ngIf=\"model.showFileDecorator\">\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\" [model]=\"model.locRenderedPlaceholder\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <sv-ng-choose-file-btn [data]=\"{ question: model }\" *ngIf=\"model.showChooseButton\"></sv-ng-choose-file-btn>\n        <sv-ng-action-bar [model]=\"model.actionsContainer\" *ngIf=\"model.actionsContainerVisible\"></sv-ng-action-bar>\n        <span [class]=\"model.cssClasses.noFileChosen\" *ngIf=\"model.isEmpty()\">{{ model.noFileChosenCaption }}</span>\n      </div>\n    </div>\n    <ng-container *ngIf=\"model.showLoadingIndicator\">\n      <div [class]=\"model.cssClasses.loadingIndicator\">\n        <sv-ng-loading-indicator></sv-ng-loading-indicator>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"model.isPlayingVideo\">\n      <ng-container *ngTemplateOutlet=\"fileVideo\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButton\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButton }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.allowShowPreview\">\n      <ng-template [component]=\"{ name: 'sv-file-preview', data: { question: model } }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButtonBottom\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButtonBottom }\"></ng-container>\n    </ng-container>\n    <sv-action-bar *ngIf=\"model.fileNavigatorVisible\" [model]=\"model.fileNavigator\"></sv-action-bar>\n  </div>\n</div>\n<ng-template #fileCleanButton let-css=\"css\">\n  <button type=\"button\" [class]=\"css\" (click)=\"model.doClean()\">\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</ng-template>\n<ng-template #fileVideo>\n  <div [class]=\"model.cssClasses.videoContainer\">\n    <sv-ng-action [model]=\"model.changeCameraAction\"></sv-ng-action>\n    <sv-ng-action [model]=\"model.closeCameraAction\"></sv-ng-action>\n    <video autoplay playsinline [attr.id]=\"model.videoId\" [class]=\"model.cssClasses.video\"></video>\n    <sv-ng-action [model]=\"model.takePictureAction\"></sv-ng-action>\n  </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: ["data", "model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3627,7 +3627,7 @@
       return CommentQuestionComponent;
   }(QuestionAngular));
   CommentQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CommentQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CommentQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  CommentQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0__namespace, 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-describedby]=\"model.a11y_input_ariaDescribedBy\"\n[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n[attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CommentQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4172,7 +4172,7 @@
       return MatrixCellComponent;
   }(BaseAngular));
   MatrixCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "sv-ng-matrix-cell, '[sv-ng-matrix-cell]'", inputs: { question: "question", column: "column", row: "row", columnIndex: "columnIndex", cellChangedOwner: "cellChangedOwner" }, usesInheritance: true, ngImport: i0__namespace, template: "<label (mousedown)=\"question.onMouseDown()\" [class]=\"question.getItemClass(row, column)\">\n  <input\n    type=\"radio\"\n    [class]=\"question.cssClasses.itemValue\"\n    [name]=\"row.fullName\"\n    [value]=\"column.value\"\n    [checked]=\"row.value === column.value\"\n    [disabled]=\"row.isReadOnly\"\n    [attr.id]=\"question.inputId + '_' + row.name + '_' + columnIndex\"\n    (change)=\"onChange()\"\n    [attr.aria-required]=\"question.a11y_input_ariaRequired\"\n    [attr.aria-label]=\"question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)\"\n    [attr.aria-invalid]=\"question.a11y_input_ariaInvalid\"\n    [attr.aria-describedby]=\"question.a11y_input_ariaDescribedBy\"\n  />\n  <span [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 *ngIf=\"question.isMobile\" [class]=\"question.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n</label>\n<ng-content></ng-content>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  MatrixCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "sv-ng-matrix-cell, '[sv-ng-matrix-cell]'", inputs: { question: "question", column: "column", row: "row", columnIndex: "columnIndex", cellChangedOwner: "cellChangedOwner" }, usesInheritance: true, ngImport: i0__namespace, template: "<label (mousedown)=\"question.onMouseDown()\" [class]=\"question.getItemClass(row, column)\">\n  <input\n    type=\"radio\"\n    [class]=\"question.cssClasses.itemValue\"\n    [name]=\"row.fullName\"\n    [value]=\"column.value\"\n    [checked]=\"row.value === column.value\"\n    [disabled]=\"row.isReadOnly\"\n    [attr.id]=\"question.inputId + '_' + row.name + '_' + columnIndex\"\n    (change)=\"onChange()\"\n    [attr.aria-required]=\"question.a11y_input_ariaRequired\"\n    [attr.aria-label]=\"question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)\"\n    [attr.aria-invalid]=\"question.a11y_input_ariaInvalid\"\n    [attr.aria-errormessage]=\"question.a11y_input_ariaErrormessage\"\n  />\n  <span [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 *ngIf=\"question.isMobile\" [class]=\"question.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n</label>\n<ng-content></ng-content>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, decorators: [{
               type: i0.Component,
               args: [{