survey-angular-ui 1.9.113 → 1.9.115

package/fesm2015/survey-angular-ui.js

@@ -1295,7 +1295,7 @@ class DropdownComponent extends BaseAngular {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? 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.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\n            [attr.aria-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.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)\">\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$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.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? 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.inputReadOnly ? 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\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.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)\">\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -1315,7 +1315,7 @@ class TagboxFilterComponent extends BaseAngular {
     }
 }
 TagboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"question.cssClasses.hint\">\n    <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n        <span>{{ model.hintStringPrefix }}</span>\n    </div>\n    <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n        <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n            <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n            <span>{{ model.hintStringSuffix }}</span>\n        </div>\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"model.inputStringRendered\"\n      [attr.id]=\"question.getInputId()\"\n      [class]=\"question.cssClasses.filterStringInput\"\n      [attr.inputmode]=\"model.inputMode\"\n      [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n      [attr.readonly]=\"!model.searchEnabled ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-controls]=\"model.listElementId\"\n      [attr.aria-expanded]=\"question.ariaExpanded\"\n      [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n      [attr.placeholder]=\"model.filterStringPlaceholder\"\n      (keydown)=\"model.inputKeyHandler($event)\"\n      (blur)=\"model.onBlur($event)\"\n      (focus)=\"model.onFocus($event)\"\n    />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"question.cssClasses.hint\">\n    <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n        <span>{{ model.hintStringPrefix }}</span>\n    </div>\n    <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n        <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n            <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n            <span>{{ model.hintStringSuffix }}</span>\n        </div>\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"model.inputStringRendered\"\n      [attr.id]=\"question.getInputId()\"\n      [class]=\"question.cssClasses.filterStringInput\"\n      [attr.inputmode]=\"model.inputMode\"\n      [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n      [attr.readonly]=\"!model.searchEnabled ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -1636,7 +1636,7 @@ class SelectBaseComponent extends QuestionAngular {
     }
 }
 SelectBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+SelectBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n>\n  <legend *ngIf=\"showLegend\" 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseComponent, decorators: [{
             type: Component,
             args: [{
@@ -1656,7 +1656,7 @@ class RadiogroupComponent extends SelectBaseComponent {
     }
 }
 RadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n>\n  <legend *ngIf=\"showLegend\" 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1688,7 +1688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class CheckboxComponent extends SelectBaseComponent {
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\" [question]=\"model\" sv-ng-comment-other></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n>\n  <legend *ngIf=\"showLegend\" 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1709,7 +1709,7 @@ class CheckboxItemComponent {
     }
 }
 CheckboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model" }, ngImport: i0, template: "<input *ngIf=\"model == question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isAllSelected\" [value]=\"''\" (change)=\"onSelectAllChange($event)\"/>\n<input *ngIf=\"model != question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model" }, ngImport: i0, template: "<input *ngIf=\"model == question.selectAllItem\" type=\"checkbox\" role=\"option\" [name]=\"question.name+model.value\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isAllSelected\" [value]=\"''\" (change)=\"onSelectAllChange($event)\"/>\n<input *ngIf=\"model != question.selectAllItem\" type=\"checkbox\" role=\"option\" [name]=\"question.name+model.value\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1846,7 +1846,7 @@ class ImagePickerQuestionComponent extends QuestionAngular {
     }
 }
 ImagePickerQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImagePickerQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ImagePickerQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerQuestionComponent, selector: "sv-ng-imagepicker-question", usesInheritance: true, ngImport: i0, template: "  <fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\" role=\"radio\"></legend>\n      <ng-container *ngIf=\"!model.hasColumns\">\n        <ng-container *ngFor=\"let item of model.visibleChoices\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"model.hasColumns\">\n        <div *ngFor=\"let column of model.columns\" [class]=\"model.getColumnClass()\" role=\"presentation\">\n          <ng-container *ngFor=\"let item of column\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n  </fieldset>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ImagePickerQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerQuestionComponent, selector: "sv-ng-imagepicker-question", usesInheritance: true, ngImport: i0, template: "  <fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement>\n      <legend class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n      <ng-container *ngIf=\"!model.hasColumns\">\n        <ng-container *ngFor=\"let item of model.visibleChoices\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"model.hasColumns\">\n        <div *ngFor=\"let column of model.columns\" [class]=\"model.getColumnClass()\" role=\"presentation\">\n          <ng-container *ngFor=\"let item of column\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n  </fieldset>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImagePickerQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2140,7 +2140,7 @@ class ListItemComponent extends BaseAngular {
     }
 }
 ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [attr.id]=\"elementId\" [attr.aria-selected]=\"ariaSelected ? 'true' : 'false'\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style.paddingInlineStart]=\"paddingLeft\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" [class]=\"listModel.cssClasses.itemIcon\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\"\n        sv-ng-svg-icon></svg>\n      <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    </ng-container>\n    <ng-container *ngIf=\"model.component\">\n      <ng-template [component]=\"{ name: model.component, data: { model: model } }\"></ng-template>\n    </ng-container>\n    </div>\n  </li>\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: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [attr.id]=\"elementId\" [attr.aria-selected]=\"ariaSelected ? 'true' : 'false'\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style.paddingInlineStart]=\"paddingLeft\" [attr.title]=\"model.locTitle.calculatedText\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" [class]=\"listModel.cssClasses.itemIcon\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\"\n        sv-ng-svg-icon></svg>\n      <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    </ng-container>\n    <ng-container *ngIf=\"model.component\">\n      <ng-template [component]=\"{ name: model.component, data: { model: model } }\"></ng-template>\n    </ng-container>\n    </div>\n  </li>\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: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2548,7 +2548,7 @@ class FilePreviewComponent extends EmbeddedViewContentComponent {
     }
 }
 FilePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilePreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FilePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilePreviewComponent, selector: "sv-ng-file-preview", inputs: { question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <ng-container *ngIf=\"question.showPreviewContainer\">\n        <div [class]=\"question.cssClasses.fileList || undefined\">\n            <span *ngFor=\"let val of question.previewValue; index as index; trackBy: trackFilesFn\"\n                [visible]=\"val && question.isPreviewVisible(index)\" [class]=\"question.cssClasses.preview\">\n                <div *ngIf=\"val.name && question.cssClasses.fileSign\" [class]=\"question.cssClasses.fileSign\">\n                    <a (click)=\"question.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\"\n                        [attr.title]=\"val.name\" [attr.download]=\"val.name\" [style.width]=\"question.imageWidth\">{{\n                        val.name\n                        }}</a>\n                </div>\n                <div [class]=\"question.cssClasses.imageWrapper\">\n                    <img *ngIf=\"question.canPreviewImage(val)\" [attr.src]=\"val.content | safeUrl\"\n                        [style.height]=\"question.imageHeight\" [style.width]=\"question.imageWidth\" alt=\"File preview\" />\n                    <svg *ngIf=\"question.defaultImage(val)\" [iconName]=\"question.cssClasses.defaultImageIconId\"\n                        [partCss]=\"question.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n                    <div *ngIf=\"val.name && !question.isReadOnly\" [class]=\"question.getRemoveButtonCss()\"\n                        (click)=\"question.doRemoveFile(val)\">\n                        <span [class]=\"question.cssClasses.removeFile\">{{ question.removeFileCaption }}</span>\n                        <svg *ngIf=\"question.cssClasses.removeFileSvgIconId\" [title]=\"question.removeFileCaption\"\n                            [partCss]=\"question.cssClasses.removeFileSvg\"\n                            [iconName]=\"question.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n                    </div>\n                </div>\n                <div *ngIf=\"val.name && question.cssClasses.fileSignBottom\"\n                    [class]=\"question.cssClasses.fileSignBottom\">\n                    <a (click)=\"question.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\"\n                        [attr.title]=\"val.name\" [attr.download]=\"val.name\" [style.width]=\"question.imageWidth\">{{\n                        val.name\n                        }}</a>\n                </div>\n            </span>\n        </div>\n    </ng-container>\n</ng-template>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
+FilePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilePreviewComponent, selector: "sv-ng-file-preview", inputs: { question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <ng-container *ngIf=\"question.showPreviewContainer\">\n        <div [class]=\"question.cssClasses.fileList || undefined\">\n            <span *ngFor=\"let val of question.previewValue; index as index; trackBy: trackFilesFn\"\n                [visible]=\"val && question.isPreviewVisible(index)\" [class]=\"question.cssClasses.preview\">\n                <div *ngIf=\"val.name && question.cssClasses.fileSign\" [class]=\"question.cssClasses.fileSign\">\n                    <a (click)=\"question.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\"\n                        [attr.title]=\"val.name\" [attr.download]=\"val.name\" [style.width]=\"question.imageWidth\">{{\n                        val.name\n                        }}</a>\n                </div>\n                <div [class]=\"question.getImageWrapperCss(val)\">\n                    <img *ngIf=\"question.canPreviewImage(val)\" [attr.src]=\"val.content | safeUrl\"\n                        [style.height]=\"question.imageHeight\" [style.width]=\"question.imageWidth\" alt=\"File preview\" />\n                    <svg *ngIf=\"question.defaultImage(val)\" [iconName]=\"question.cssClasses.defaultImageIconId\"\n                        [partCss]=\"question.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n                    <div *ngIf=\"val.name && !question.isReadOnly\" [class]=\"question.getRemoveButtonCss()\"\n                        (click)=\"question.doRemoveFile(val)\">\n                        <span [class]=\"question.cssClasses.removeFile\">{{ question.removeFileCaption }}</span>\n                        <svg *ngIf=\"question.cssClasses.removeFileSvgIconId\" [title]=\"question.removeFileCaption\"\n                            [partCss]=\"question.cssClasses.removeFileSvg\"\n                            [iconName]=\"question.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n                    </div>\n                </div>\n                <div *ngIf=\"val.name && question.cssClasses.fileSignBottom\"\n                    [class]=\"question.cssClasses.fileSignBottom\">\n                    <a (click)=\"question.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\"\n                        [attr.title]=\"val.name\" [attr.download]=\"val.name\" [style.width]=\"question.imageWidth\">{{\n                        val.name\n                        }}</a>\n                </div>\n            </span>\n        </div>\n    </ng-container>\n</ng-template>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilePreviewComponent, decorators: [{
             type: Component,
             args: [{
@@ -2581,7 +2581,7 @@ class MatrixQuestionComponent extends QuestionAngular {
     }
 }
 MatrixQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n    <fieldset>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n      <table [class]=\"model.getTableCss()\">\n        <thead *ngIf=\"model.showHeader\">\n          <tr>\n            <td *ngIf=\"model.hasRows\"></td>\n            <th\n              *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n              <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n                <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n              </ng-template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n           <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n              <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n                <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n              </ng-template>\n            </td>\n            <ng-container *ngIf=\"model.hasCellText\">\n              <td *ngFor=\"let column of model.visibleColumns\"\n                [class]=\"model.getItemClass(row, column)\"\n                (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!model.hasCellText\">\n              <td\n              *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n              [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n              [class]=\"model.cssClasses.cell\">\n                <label (mousedown)=\"model.onMouseDown()\" [class]=\"model.getItemClass(row, column)\">\n                  <input\n                    type=\"radio\"\n                    [class]=\"model.cssClasses.itemValue\"\n                    [name]=\"row.fullName\"\n                    [value]=\"column.value\"\n                    [checked]=\"row.value === column.value\"\n                    [disabled]=\"model.isInputReadOnly\"\n                    [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n                    (change)=\"onChange(row, column)\"\n                    [attr.aria-required]=\"model.ariaRequired\"\n                    [attr.aria-label]=\"column.locText.renderedHtml\"\n                    [attr.aria-invalid]=\"model.ariaInvalid\"\n                    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n                  />\n                  <span [class]=\"model.cssClasses.materialDecorator\">\n                    <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n                      <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n                    </svg> \n                  </span>\n                  <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n                </label>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+MatrixQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n    <fieldset>\n      <legend class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n      <table [class]=\"model.getTableCss()\">\n        <thead *ngIf=\"model.showHeader\">\n          <tr>\n            <td *ngIf=\"model.hasRows\"></td>\n            <th\n              *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n              <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n                <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n              </ng-template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n           <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n              <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n                <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n              </ng-template>\n            </td>\n            <ng-container *ngIf=\"model.hasCellText\">\n              <td *ngFor=\"let column of model.visibleColumns\"\n                [class]=\"model.getItemClass(row, column)\"\n                (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!model.hasCellText\">\n              <td\n              *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n              [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n              [class]=\"model.cssClasses.cell\">\n                <label (mousedown)=\"model.onMouseDown()\" [class]=\"model.getItemClass(row, column)\">\n                  <input\n                    type=\"radio\"\n                    [class]=\"model.cssClasses.itemValue\"\n                    [name]=\"row.fullName\"\n                    [value]=\"column.value\"\n                    [checked]=\"row.value === column.value\"\n                    [disabled]=\"model.isInputReadOnly\"\n                    [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n                    (change)=\"onChange(row, column)\"\n                    [attr.aria-required]=\"model.ariaRequired\"\n                    [attr.aria-label]=\"column.locText.renderedHtml\"\n                    [attr.aria-invalid]=\"model.ariaInvalid\"\n                    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n                  />\n                  <span [class]=\"model.cssClasses.materialDecorator\">\n                    <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n                      <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n                    </svg> \n                  </span>\n                  <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n                </label>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2598,7 +2598,7 @@ class ChooseFileBtn extends EmbeddedViewContentComponent {
     }
 }
 ChooseFileBtn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChooseFileBtn, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ChooseFileBtn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: { data: "data", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <label *ngIf=\"!question.isReadOnly\" role=\"button\" tabindex=\"0\" [class]=\"question.getChooseFileCss()\"\n        [attr.for]=\"question.inputId\" [attr.aria-label]=\"question.chooseButtonText\" [key2click]>\n        <svg *ngIf=\"question.cssClasses.chooseFileIconId\" [title]=\"question.chooseButtonText\"\n            [iconName]=\"question.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        <span>{{ question.chooseButtonText }}</span>\n    </label>\n</ng-template>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+ChooseFileBtn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: { data: "data", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <label tabindex=\"0\" [class]=\"question.getChooseFileCss()\"\n        [attr.for]=\"question.inputId\" [attr.aria-label]=\"question.chooseButtonText\" [key2click]>\n        <svg *ngIf=\"question.cssClasses.chooseFileIconId\" [title]=\"question.chooseButtonText\"\n            [iconName]=\"question.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        <span>{{ question.chooseButtonText }}</span>\n</label>\n</ng-template>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChooseFileBtn, decorators: [{
             type: Component,
             args: [{
@@ -2628,7 +2628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class FileQuestionComponent extends QuestionAngular {
 }
 FileQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input [class]=\"model.cssClasses.fileInput\" *ngIf=\"!model.isReadOnly && model.hasFileUI\" tabindex=\"-1\" type=\"file\"\n    [attr.id]=\"model.inputId\" (change)=\"model.doChange($event)\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" [attr.capture]=\"model.renderCapture\" />\n  <input *ngIf=\"model.isReadOnly\" type=\"file\" disabled [class]=\"model.getReadOnlyFileCss()\" [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\" [attr.placeholder]=\"model.title\" style=\"color: transparent\" />\n  <div [class]=\"model.cssClasses.dragArea\" (dragenter)=\"model.onDragEnter($event)\" (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\" (dragleave)=\"model.onDragLeave($event)\">\n    <div [class]=\"model.getFileDecoratorCss()\" *ngIf=\"model.showFileDecorator\">\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.renderedPlaceholder }}</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: 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+FileQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input [class]=\"model.cssClasses.fileInput\" *ngIf=\"!model.isReadOnly && model.hasFileUI\" tabindex=\"-1\" type=\"file\"\n    [attr.id]=\"model.inputId\" (change)=\"model.doChange($event)\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" [attr.capture]=\"model.renderCapture\" />\n  <input *ngIf=\"model.isReadOnly\" type=\"file\" disabled [class]=\"model.getReadOnlyFileCss()\" [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\" [attr.placeholder]=\"model.title\" style=\"color: transparent\" />\n  <div [class]=\"model.cssClasses.dragArea\" (dragenter)=\"model.onDragEnter($event)\" (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\" (dragleave)=\"model.onDragLeave($event)\">\n    <div [class]=\"model.getFileDecoratorCss()\" *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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2658,7 +2658,7 @@ AngularComponentFactory.Instance.registerComponent("comment-question", CommentQu
 class SignaturePadQuestionComponent extends QuestionAngular {
 }
 SignaturePadQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SignaturePadQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SignaturePadQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.height]=\"model.signatureHeight + 'px'\" [style.width]=\"model.signatureWidth + 'px'\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\">{{ model.placeHolderText }}</div>\n<div>\n  <img *ngIf=\"!!model.backgroundImage\" [src]=\"model.backgroundImage\" [width]=\"model.signatureWidth\" [height]=\"model.signatureHeight\" [class]=\"model.cssClasses.backgroundImage\">\n  <canvas tabindex=\"0\" [class]=\"model.cssClasses.canvas\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" [visible]=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValue()\"\n  >\n    <span *ngIf=\"!model.cssClasses.clearButtonIconId\">\u2716</span>\n    <svg\n      *ngIf=\"model.cssClasses.clearButtonIconId\"\n      [iconName]=\"model.cssClasses.clearButtonIconId\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n</div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SignaturePadQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.height]=\"model.signatureHeight + 'px'\" [style.width]=\"model.signatureWidth + 'px'\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\" [model]=\"$any(model).locPlaceholder\" sv-ng-string></div>\n<div>\n  <img *ngIf=\"!!model.backgroundImage\" [src]=\"model.backgroundImage\" [width]=\"model.signatureWidth\" [height]=\"model.signatureHeight\" [class]=\"model.cssClasses.backgroundImage\">\n  <canvas tabindex=\"0\" [class]=\"model.cssClasses.canvas\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" [visible]=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValue()\"\n  >\n    <span *ngIf=\"!model.cssClasses.clearButtonIconId\">\u2716</span>\n    <svg\n      *ngIf=\"model.cssClasses.clearButtonIconId\"\n      [iconName]=\"model.cssClasses.clearButtonIconId\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\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"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SignaturePadQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2787,7 +2787,7 @@ class RankingItemComponent extends BaseAngular {
     }
 }
 RankingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.getItemIndexClasses(model)\">{{ unrankedItem ? \"\" : question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg [class]=\"question.getIconHoverCss()\">\n          <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n        </svg> \n        <svg [class]=\"question.getIconFocusCss()\">\n          <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n        </svg> \n      </div>\n\n      <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n      <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n        <svg>\n          <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n        </svg> \n      </div></ng-template>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -3389,15 +3389,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 AngularComponentFactory.Instance.registerComponent("composite-question", CompositeQuestionComponent);
 
-class CoverCellComponent extends EmbeddedViewContentComponent {
+class HeaderCellComponent extends EmbeddedViewContentComponent {
 }
-CoverCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CoverCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoverCellComponent, selector: "sv-ng-cover-cell", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.css\" [style]=\"model.style\">\n    <div class=\"sv-cover__cell-content\" [style]=\"model.contentStyle\">\n      <div *ngIf=\"model.showLogo\" class=\"sv-cover__logo\">\n        <div [class]=\"model.survey.logoClassNames\">\n          <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n        </div>\n      </div>\n      <div *ngIf=\"model.showTitle\" class=\"sv-cover__title\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n      </div>\n      <div *ngIf=\"model.showDescription\" class=\"sv-cover__description\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <h5 *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></h5>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverCellComponent, decorators: [{
+HeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+HeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderCellComponent, selector: "sv-ng-header-cell", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.css\" [style]=\"model.style\">\n    <div class=\"sv-header__cell-content\" [style]=\"model.contentStyle\">\n      <div *ngIf=\"model.showLogo\" class=\"sv-header__logo\">\n        <div [class]=\"model.survey.logoClassNames\">\n          <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n        </div>\n      </div>\n      <div *ngIf=\"model.showTitle\" class=\"sv-header__title\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n      </div>\n      <div *ngIf=\"model.showDescription\" class=\"sv-header__description\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <h5 *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></h5>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderCellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "sv-ng-cover-cell",
-                    templateUrl: "./cover-cell.component.html",
+                    selector: "sv-ng-header-cell",
+                    templateUrl: "./header-cell.component.html",
                     styles: [":host { display: none; }"],
                 }]
         }], propDecorators: { model: [{
@@ -3406,21 +3406,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: ViewChild,
                 args: ["actionContent", { read: ViewContainerRef, static: true }]
             }] } });
-AngularComponentFactory.Instance.registerComponent("sv-cover-cell", CoverCellComponent);
+AngularComponentFactory.Instance.registerComponent("sv-header-cell", HeaderCellComponent);
 
-class CoverComponent extends BaseAngular {
+class HeaderMobileComponent extends EmbeddedViewContentComponent {
+}
+HeaderMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+HeaderMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderMobileComponent, selector: "sv-ng-header-mobile", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div class=\"sv-header--mobile\">\n    <div *ngIf=\"model.survey.hasLogo\" class=\"sv-header__logo\">\n      <div [class]=\"model.survey.logoClassNames\">\n        <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n      </div>\n    </div>\n    <div *ngIf=\"model.survey.hasTitle\" class=\"sv-header__title\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n      <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n    </div>\n    <div *ngIf=\"model.survey.renderedHasDescription\" class=\"sv-header__description\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n      <h5 *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></h5>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-header-mobile",
+                    templateUrl: "./header-mobile.component.html",
+                    styles: [":host { display: none; }"],
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], actionContent: [{
+                type: ViewChild,
+                args: ["actionContent", { read: ViewContainerRef, static: true }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-header-cell", HeaderMobileComponent);
+
+class HeaderComponent extends BaseAngular {
     getModel() {
         this.model.survey = this.survey;
         return this.model;
     }
 }
-CoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoverComponent, selector: "sv-cover, sv-ng-cover", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"(survey.headerView === 'advanced' && survey.renderedHasHeader)\" [class]=\"model.coverClasses\" [style]=\"{ height: model.renderedHeight }\">\n    <div *ngIf=\"!!model.backgroundImage\" [style]=\"model.backgroundImageStyle\" [class]=\"model.backgroundImageClasses\"></div>\n    <div [class]=\"model.contentClasses\" [style.width]=\"model.maxWidth\">\n      <ng-container *ngFor=\"let cell of model.cells\">\n        <sv-ng-cover-cell [model]=\"cell\"></sv-ng-cover-cell>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: CoverCellComponent, selector: "sv-ng-cover-cell", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverComponent, decorators: [{
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderComponent, selector: "sv-header, sv-ng-header", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"(survey.headerView === 'advanced' && survey.renderedHasHeader)\" [class]=\"model.headerClasses\" [style]=\"{ height: model.renderedHeight }\">\n    <div *ngIf=\"!!model.backgroundImage\" [style]=\"model.backgroundImageStyle\" [class]=\"model.backgroundImageClasses\"></div>\n    <div *ngIf=\"!survey.isMobile\" [class]=\"model.contentClasses\" [style.width]=\"model.maxWidth\">\n      <ng-container *ngFor=\"let cell of model.cells\">\n        <sv-ng-header-cell [model]=\"cell\"></sv-ng-header-cell>\n      </ng-container>\n    </div>\n    <div *ngIf=\"survey.isMobile\">\n      <sv-ng-header-mobile [model]=\"model\"></sv-ng-header-mobile>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: HeaderCellComponent, selector: "sv-ng-header-cell", inputs: ["model"] }, { type: HeaderMobileComponent, selector: "sv-ng-header-mobile", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "sv-cover, sv-ng-cover",
-                    templateUrl: "./cover.component.html",
+                    selector: "sv-header, sv-ng-header",
+                    templateUrl: "./header.component.html",
                     styles: [":host { display: none }"]
                 }]
         }], propDecorators: { model: [{
@@ -3431,7 +3450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: ViewChild,
                 args: ["container"]
             }] } });
-AngularComponentFactory.Instance.registerComponent("sv-cover", CoverComponent);
+AngularComponentFactory.Instance.registerComponent("sv-header", HeaderComponent);
 
 class SurveyModule {
 }
@@ -3450,7 +3469,7 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn, FilePreviewComponent], imports: [CommonModule, FormsModule], exports: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
+        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, ChooseFileBtn, FilePreviewComponent], imports: [CommonModule, FormsModule], exports: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
         CharacterCounterComponent,
@@ -3465,7 +3484,7 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, FilePreviewComponent] });
+        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, FilePreviewComponent] });
 SurveyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyModule, providers: [PopupService], imports: [[
             CommonModule, FormsModule
         ]] });
@@ -3487,7 +3506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
                         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
                         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn, FilePreviewComponent
+                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, ChooseFileBtn, FilePreviewComponent
                     ],
                     imports: [
                         CommonModule, FormsModule
@@ -3508,7 +3527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
                         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
                         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, FilePreviewComponent
+                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, FilePreviewComponent
                     ],
                     providers: [PopupService],
                 }]
@@ -3518,5 +3537,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CharacterCounterComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, ComponentsContainerComponent, CompositeQuestionComponent, CoverCellComponent, CoverComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FilePreviewComponent, FileQuestionComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, MultipleTextRowComponent, NotifierComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PaneldynamicRemoveButtonComponent, PopupBaseContainerComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, ProgressTocComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SkeletonComponent, StringEditorComponent, StringViewerComponent, SurveyCommentComponent, SurveyCommentOtherComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyNavigationButton, SurveyStringComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
+export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CharacterCounterComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, ComponentsContainerComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FilePreviewComponent, FileQuestionComponent, HeaderCellComponent, HeaderComponent, HeaderMobileComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, MultipleTextRowComponent, NotifierComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PaneldynamicRemoveButtonComponent, PopupBaseContainerComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, ProgressTocComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SkeletonComponent, StringEditorComponent, StringViewerComponent, SurveyCommentComponent, SurveyCommentOtherComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyNavigationButton, SurveyStringComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
 //# sourceMappingURL=survey-angular-ui.js.map