survey-angular-ui 1.10.6 → 1.11.2

package/fesm2015/survey-angular-ui.js

@@ -86,6 +86,7 @@ class BaseAngular extends EmbeddedViewContentComponent {
                     this.update(key);
                 }
             };
+            stateElement.enableOnElementRenderedEvent();
         }
     }
     unMakeBaseElementAngular(stateElement) {
@@ -100,6 +101,7 @@ class BaseAngular extends EmbeddedViewContentComponent {
                     val["onArrayChanged"] = () => { };
                 }
             });
+            stateElement.disableOnElementRenderedEvent();
         }
     }
     update(key) {
@@ -137,6 +139,10 @@ class BaseAngular extends EmbeddedViewContentComponent {
     }
     afterUpdate(isSync = false) {
         this.setIsRendering(false);
+        const model = this.getModel();
+        if (model && !this.isDestroyed) {
+            model.afterRerender();
+        }
     }
     ngAfterViewChecked() {
         this.setIsRendering(false);
@@ -267,7 +273,7 @@ class ActionBarComponent extends BaseAngular {
         var _a;
         super.onModelChanged();
         (_a = this.previousModel) === null || _a === void 0 ? void 0 : _a.resetResponsivityManager();
-        if (!!this.model.hasActions && !!this.container) {
+        if (!!this.model.hasActions && !!this.container && !!this.container.nativeElement) {
             this.model.initResponsivityManager(this.container.nativeElement);
         }
     }
@@ -1252,7 +1258,7 @@ class PopupComponent extends BaseAngular {
         var _a, _b;
         if (!!((_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
             const container = this.containerRef.nativeElement;
-            this.model.setComponentElement(container, this.getTarget ? this.getTarget(container.parentElement) : (_b = container === null || container === void 0 ? void 0 : container.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement);
+            this.model.setComponentElement(container, this.getTarget ? this.getTarget(container.parentElement) : (_b = container === null || container === void 0 ? void 0 : container.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement, this.getArea ? this.getArea(container.parentElement) : undefined);
         }
     }
     ngOnInit() {
@@ -1265,7 +1271,7 @@ class PopupComponent extends BaseAngular {
     }
 }
 PopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: { popupModel: "popupModel", getTarget: "getTarget" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #containerRef><sv-ng-popup-container [model]='model' ></sv-ng-popup-container></div>", isInline: true, components: [{ type: PopupBaseContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: ["model"] }] });
+PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: { popupModel: "popupModel", getTarget: "getTarget", getArea: "getArea" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #containerRef><sv-ng-popup-container [model]='model' ></sv-ng-popup-container></div>", isInline: true, components: [{ type: PopupBaseContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: ["model"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1276,6 +1282,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], getTarget: [{
                 type: Input
+            }], getArea: [{
+                type: Input
             }], containerRef: [{
                 type: ViewChild,
                 args: ["containerRef"]
@@ -1348,7 +1356,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.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-errormessage]=\"model.ariaErrormessage\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n            <span>{{ dropdownModel.hintStringPrefix }}</span>\n        </div>\n        <div [class]=\"model.cssClasses.controlValue\">\n            <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n                <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n                <span>{{ dropdownModel.hintStringSuffix }}</span>\n            </div>\n            <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n                <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.inputmode]=\"dropdownModel.inputMode\"\n            [attr.tabindex]=\"dropdownModel.noTabIndex ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\n            [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n            [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n            [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n            [attr.aria-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" \n            [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" aria-hidden=\"true\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.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.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-errormessage]=\"model.ariaErrormessage\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n            <span>{{ dropdownModel.hintStringPrefix }}</span>\n        </div>\n        <div [class]=\"model.cssClasses.controlValue\">\n            <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n                <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n                <span>{{ dropdownModel.hintStringSuffix }}</span>\n            </div>\n            <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n                <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.inputmode]=\"dropdownModel.inputMode\"\n            [attr.tabindex]=\"dropdownModel.noTabIndex ? null : -1\"\n            [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\n            [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n            [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n            [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n            [attr.aria-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" \n            [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" aria-hidden=\"true\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\" \n    [attr.tabindex]=\"model.isDisabledAttr ? null : 0\"\n    [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n    [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n    [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n    [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], 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: [{
@@ -1368,7 +1376,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.filterReadOnly ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.a11y_input_ariaLabel\"\n      [attr.aria-labelledby]=\"question.a11y_input_ariaLabelledBy\"\n      [attr.aria-describedby]=\"question.a11y_input_ariaDescribedBy\"\n      [attr.aria-controls]=\"model.listElementId\"\n      [attr.aria-expanded]=\"question.ariaExpanded\"\n      [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n      [attr.placeholder]=\"model.filterStringPlaceholder\"\n      (keydown)=\"model.inputKeyHandler($event)\"\n      (blur)=\"model.onBlur($event)\"\n      (focus)=\"model.onFocus($event)\"\n    />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2.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.filterReadOnly ? true : null\"\n      [attr.disabled]=\"question.isDisabledAttr ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.a11y_input_ariaLabel\"\n      [attr.aria-labelledby]=\"question.a11y_input_ariaLabelledBy\"\n      [attr.aria-describedby]=\"question.a11y_input_ariaDescribedBy\"\n      [attr.aria-controls]=\"model.listElementId\"\n      [attr.aria-expanded]=\"question.ariaExpanded\"\n      [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n      [attr.placeholder]=\"model.filterStringPlaceholder\"\n      (keydown)=\"model.inputKeyHandler($event)\"\n      (blur)=\"model.onBlur($event)\"\n      (focus)=\"model.onFocus($event)\"\n    />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2.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: [{
@@ -1442,7 +1450,7 @@ class TagboxComponent {
     }
 }
 TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-errormessage]=\"model.ariaErrormessage\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"model.showClearButton\" aria-hidden=\"true\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.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"] }] });
+TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-errormessage]=\"model.ariaErrormessage\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"model.showClearButton\" aria-hidden=\"true\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n    [attr.tabindex]=\"model.isDisabledAttr ? null : 0\"\n    [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n    [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n    [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n    [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\">\n        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }, { 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: TagboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1620,7 +1628,7 @@ class TextQuestionComponent extends QuestionAngular {
     }
 }
 TextQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0, template: "  <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n  <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n    <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n    <datalist [id]=\"model.dataListId\">\n      <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n    </datalist>\n  </div>\n  <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ value }}</div>\n  <ng-template #input>\n    <input [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\"\n    (change)=\"model.onChange($event)\" [value]=\"value\" [disabled]=\"model.isInputReadOnly\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n    (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n    [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n    [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n    [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" [attr.autocomplete]=\"model.autocomplete\" #contentElement/>\n    <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n    [counter]=\"model.characterCounter\"\n    [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n  </sv-ng-character-counter>\n  </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+TextQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0, template: "  <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n  <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n    <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n    <datalist [id]=\"model.dataListId\">\n      <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n    </datalist>\n  </div>\n  <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ value }}</div>\n  <ng-template #input>\n    <input [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\"\n    (change)=\"model.onChange($event)\" [value]=\"value\" [disabled]=\"model.isDisabledAttr\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n    (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n    [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\" [readonly]=\"model.isReadOnlyAttr\"\n    [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n    [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" [attr.autocomplete]=\"model.autocomplete\" #contentElement/>\n    <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n    [counter]=\"model.characterCounter\"\n    [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n  </sv-ng-character-counter>\n  </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -1724,7 +1732,7 @@ class RadiogroupItemComponent {
     }
 }
 RadiogroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadiogroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: { question: "question", model: "model" }, ngImport: i0, template: "<input type=\"radio\" [name]=\"question.questionName\" [attr.name]=\"question.questionName\" [id]=\"question.getItemId(model)\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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"] }] });
+RadiogroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: { question: "question", model: "model" }, ngImport: i0, template: "<input type=\"radio\" [name]=\"question.questionName\" [attr.name]=\"question.questionName\" [id]=\"question.getItemId(model)\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [readonly]=\"question.isReadOnlyAttr\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: RadiogroupItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1762,7 +1770,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 type=\"checkbox\" role=\"option\" [name]=\"question.name+model.id\" [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: [""] });
+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 type=\"checkbox\" role=\"option\" [name]=\"question.name+model.id\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [readonly]=\"question.isReadOnlyAttr\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1828,7 +1836,7 @@ class BooleanQuestionComponent extends QuestionAngular {
     }
 }
 BooleanQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" \n        [attr.role]=\"model.a11y_input_ariaRole\"\n        [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n        [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n        [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n        [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n        [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n        [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(model.swapOrder)\" [model]=\"model.locLabelLeft\" sv-ng-string></span>\n      </div>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\" [style.marginLeft]=\"model.thumbMargin\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, !model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(!model.swapOrder)\" [model]=\"model.locLabelRight\"  sv-ng-string></span>\n      </div>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BooleanQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" \n        [attr.role]=\"model.a11y_input_ariaRole\"\n        [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n        [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n        [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n        [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n        [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n        [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(model.swapOrder)\" [model]=\"model.locLabelLeft\" sv-ng-string></span>\n      </div>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\" [style.marginLeft]=\"model.thumbMargin\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, !model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(!model.swapOrder)\" [model]=\"model.locLabelRight\"  sv-ng-string></span>\n      </div>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -1843,6 +1851,8 @@ class ImagePickerItemComponent extends BaseAngular {
         return this.model;
     }
     onChange(event) {
+        if (this.question.isReadOnlyAttr)
+            return;
         if (this.question.multiSelect) {
             if (event.target.checked) {
                 this.question.value = this.question.value.concat(event.target.value);
@@ -1868,7 +1878,7 @@ class ImagePickerItemComponent extends BaseAngular {
     }
 }
 ImagePickerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImagePickerItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ImagePickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerItemComponent, selector: "sv-ng-imagepicker-item", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"question.getItemClass(model)\">\n    <label [class]=\"question.cssClasses.label\">\n        <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-errormessage]=\"question.ariaErrormessage\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <span *ngIf=\"question.cssClasses.checkedItemDecorator\" [class]=\"question.cssClasses.checkedItemDecorator\">\n                <svg *ngIf=\"question.cssClasses.checkedItemSvgIconId\" [class]=\"question.cssClasses.checkedItemSvgIcon\" [iconName]=\"question.cssClasses.checkedItemSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n              </span>\n              <img *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'\" [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [attr.alt]=\"model.locText.renderedHtml\"  [style.objectFit]=\"question.imageFit\" (load)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'video'\" controls [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\" (loadedmetadata)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth + 'px'\" [style.height]=\"question.renderedImageHeight + 'px'\" [style.objectFit]=\"question.imageFit\">\n                <svg *ngIf=\"question.cssClasses.itemNoImageSvgIconId\" [class]=\"question.cssClasses.itemNoImageSvgIcon\" [iconName]=\"question.cssClasses.itemNoImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n              </div>\n            </div>\n            <span *ngIf=\"question.showLabel\" [class]=\"question.cssClasses.itemText\" [model]=\"model.locText\" sv-ng-string></span>\n        </div>\n    </label>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ImagePickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerItemComponent, selector: "sv-ng-imagepicker-item", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"question.getItemClass(model)\">\n    <label [class]=\"question.cssClasses.label\">\n        <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-errormessage]=\"question.ariaErrormessage\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [readonly]=\"question.isReadOnlyAttr\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <span *ngIf=\"question.cssClasses.checkedItemDecorator\" [class]=\"question.cssClasses.checkedItemDecorator\">\n                <svg *ngIf=\"question.cssClasses.checkedItemSvgIconId\" [class]=\"question.cssClasses.checkedItemSvgIcon\" [iconName]=\"question.cssClasses.checkedItemSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n              </span>\n              <img *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'\" [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [attr.alt]=\"model.locText.renderedHtml\"  [style.objectFit]=\"question.imageFit\" (load)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'video'\" controls [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\" (loadedmetadata)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth + 'px'\" [style.height]=\"question.renderedImageHeight + 'px'\" [style.objectFit]=\"question.imageFit\">\n                <svg *ngIf=\"question.cssClasses.itemNoImageSvgIconId\" [class]=\"question.cssClasses.itemNoImageSvgIcon\" [iconName]=\"question.cssClasses.itemNoImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n              </div>\n            </div>\n            <span *ngIf=\"question.showLabel\" [class]=\"question.cssClasses.itemText\" [model]=\"model.locText\" sv-ng-string></span>\n        </div>\n    </label>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImagePickerItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2075,7 +2085,7 @@ class ActionBarItemDropdownComponent extends BaseAngular {
     }
 }
 ActionBarItemDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActionBarItemDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionBarItemDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarItemDropdownComponent, selector: "sv-action-bar-item-dropdown", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <button type=\"button\" (click)=\"model.action(model, model.getIsTrusted($event))\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\" [attr.role]=\"model.ariaRole\">\n        <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n        <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n    </button>\n    <sv-ng-popup [popupModel]=\"model.popupModel\" [getTarget]=\"getTarget\"></sv-ng-popup>\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: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ActionBarItemDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarItemDropdownComponent, selector: "sv-action-bar-item-dropdown", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <button type=\"button\" (click)=\"model.action(model, model.getIsTrusted($event))\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\" [attr.role]=\"model.ariaRole\">\n        <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n        <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n    </button>\n    <sv-ng-popup [popupModel]=\"model.popupModel\" [getTarget]=\"getTarget\"></sv-ng-popup>\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: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], 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: ActionBarItemDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -2193,7 +2203,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]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [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"] }] });
+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]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [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    (mouseover)=\"listModel.onItemHover(model)\"\n    (mouseleave)=\"listModel.onItemLeave(model)\">\n    <ng-template [component]=\"{ name: model.component || 'sv-list-item-content', data: { model: model, listModel: listModel } }\"></ng-template>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], 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: [{
@@ -2263,6 +2273,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("sv-list", ListComponent);
 
+class ListItemContentComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+ListItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListItemContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ListItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemContentComponent, selector: "sv-ng-list-item-content, '[sv-ng-list-item-content]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\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<svg *ngIf=\"model.markerIconName\" [class]=\"model.cssClasses.itemMarkerIcon\" [iconName]=\"model.markerIconName\" [size]=\"model.markerIconSize\"\n  sv-ng-svg-icon></svg>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListItemContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-list-item-content, '[sv-ng-list-item-content]'",
+                    templateUrl: "./list-item-content.component.html",
+                    styleUrls: ["../../hide-host.scss"],
+                }]
+        }], propDecorators: { element: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], listModel: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-list-item-content", ListItemContentComponent);
+
+class ListItemGroupComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+ListItemGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListItemGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ListItemGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemGroupComponent, selector: "sv-ng-list-item-group, '[sv-ng-list-item-group]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <sv-ng-list-item-content [model]=\"model\" [listModel]=\"listModel\"></sv-ng-list-item-content>\n  <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ListItemContentComponent, selector: "sv-ng-list-item-content, '[sv-ng-list-item-content]'", inputs: ["element", "model", "listModel"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListItemGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-list-item-group, '[sv-ng-list-item-group]'",
+                    templateUrl: "./list-item-group.component.html",
+                    styleUrls: ["../../hide-host.scss"],
+                }]
+        }], propDecorators: { element: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], listModel: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-list-item-group", ListItemGroupComponent);
+
 class RatingItemComponent extends BaseAngular {
     onClick(event) {
         this.model.setValueFromClick(event.target.value);
@@ -2273,7 +2329,7 @@ class RatingItemComponent extends BaseAngular {
     }
 }
 RatingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RatingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+RatingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2302,7 +2358,7 @@ class RatingItemStarComponent extends BaseAngular {
     }
 }
 RatingItemStarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemStarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RatingItemStarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n      <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+RatingItemStarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n      <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemStarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2331,7 +2387,7 @@ class RatingItemSmileyComponent extends BaseAngular {
     }
 }
 RatingItemSmileyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemSmileyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RatingItemSmileyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+RatingItemSmileyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemSmileyComponent, decorators: [{
             type: Component,
             args: [{
@@ -2390,7 +2446,7 @@ RendererFactory.Instance.registerRenderer("rating", "dropdown", "rating-dropdown
 class BooleanCheckboxComponent {
 }
 BooleanCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n        <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n      </span>\n    </label>\n    <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n        <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n      </span>\n    </label>\n    <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanCheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2408,7 +2464,7 @@ class BooleanRadioItemComponent {
     }
 }
 BooleanRadioItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanRadioItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n  <label [class]=\"question.cssClasses.radioLabel\">\n    <input\n      type=\"radio\"\n      [attr.name]=\"question.name\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [value]=\"value\" [(ngModel)]=\"question.booleanValue\"\n      [disabled]=\"question.isInputReadOnly\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\">\n      <svg\n        *ngIf=\"question.itemSvgIcon\"\n        [class]=\"question.cssClasses.itemRadioDecorator\"\n      >\n        <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n      </svg>\n    </span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BooleanRadioItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n  <label [class]=\"question.cssClasses.radioLabel\">\n    <input\n      type=\"radio\"\n      [attr.name]=\"question.name\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [value]=\"value\" [(ngModel)]=\"question.booleanValue\"\n      [disabled]=\"question.isDisabledAttr\" [readonly]=\"question.isReadOnlyAttr\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\">\n      <svg\n        *ngIf=\"question.itemSvgIcon\"\n        [class]=\"question.cssClasses.itemRadioDecorator\"\n      >\n        <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n      </svg>\n    </span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2537,7 +2593,7 @@ class ProgressTocComponent extends EmbeddedViewContentComponent {
     }
 }
 ProgressTocComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressTocComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProgressTocComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressTocComponent, selector: "sv-navigation-toc, sv-ng-navigation-toc", inputs: { model: "model" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.containerCss\">\n    <sv-ng-list *ngIf=\"!model.isMobile\" [model]=\"model.listModel\"></sv-ng-list>\n    <div *ngIf=\"model.isMobile\" (click)=\"model.togglePopup()\" data-bind=\"key2click\">\n        <svg [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </div>\n  </div>  \n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", 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"] }] });
+ProgressTocComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressTocComponent, selector: "sv-navigation-toc, sv-ng-navigation-toc", inputs: { model: "model" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.containerCss\">\n    <sv-ng-list *ngIf=\"!model.isMobile\" [model]=\"model.listModel\"></sv-ng-list>\n    <div *ngIf=\"model.isMobile\" (click)=\"model.togglePopup()\" data-bind=\"key2click\">\n        <svg [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </div>\n  </div>  \n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", 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", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressTocComponent, decorators: [{
             type: Component,
             args: [{
@@ -2617,7 +2673,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.previewItem\">\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 } });
+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.previewItem\"\n                (click)=\"question.doDownloadFileFromContainer($event)\">\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, $event)\">\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: [{
@@ -2695,7 +2751,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\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-errormessage]=\"model.ariaErrormessage\" [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" [attr.capture]=\"model.renderCapture\" />\n  <input *ngIf=\"model.isReadOnly\" type=\"file\" disabled [class]=\"model.getReadOnlyFileCss()\" [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\" [attr.placeholder]=\"model.title\" style=\"color: transparent\" />\n  <div [class]=\"model.cssClasses.dragArea\" (dragenter)=\"model.onDragEnter($event)\" (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\" (dragleave)=\"model.onDragLeave($event)\">\n    <div [class]=\"model.getFileDecoratorCss()\" *ngIf=\"model.showFileDecorator\">\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\" [model]=\"model.locRenderedPlaceholder\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <sv-ng-choose-file-btn [data]=\"{ question: model }\" *ngIf=\"model.showChooseButton\"></sv-ng-choose-file-btn>\n        <sv-ng-action-bar [model]=\"model.actionsContainer\" *ngIf=\"model.actionsContainerVisible\"></sv-ng-action-bar>\n        <span [class]=\"model.cssClasses.noFileChosen\" *ngIf=\"model.isEmpty()\">{{ model.noFileChosenCaption }}</span>\n      </div>\n    </div>\n    <ng-container *ngIf=\"model.showLoadingIndicator\">\n      <div [class]=\"model.cssClasses.loadingIndicator\">\n        <sv-ng-loading-indicator></sv-ng-loading-indicator>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"model.isPlayingVideo\">\n      <ng-container *ngTemplateOutlet=\"fileVideo\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButton\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButton }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.allowShowPreview\">\n      <ng-template [component]=\"{ name: 'sv-file-preview', data: { question: model } }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButtonBottom\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButtonBottom }\"></ng-container>\n    </ng-container>\n    <sv-action-bar *ngIf=\"model.fileNavigatorVisible\" [model]=\"model.fileNavigator\"></sv-action-bar>\n  </div>\n</div>\n<ng-template #fileCleanButton let-css=\"css\">\n  <button type=\"button\" [class]=\"css\" (click)=\"model.doClean()\">\n    <span>{{ model.clearButtonCaption }}</span>\n    <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\"\n      [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n  </button>\n</ng-template>\n<ng-template #fileVideo>\n  <div [class]=\"model.cssClasses.videoContainer\">\n    <sv-ng-action [model]=\"model.changeCameraAction\"></sv-ng-action>\n    <sv-ng-action [model]=\"model.closeCameraAction\"></sv-ng-action>\n    <video autoplay playsinline [attr.id]=\"model.videoId\" [class]=\"model.cssClasses.video\"></video>\n    <sv-ng-action [model]=\"model.takePictureAction\"></sv-ng-action>\n  </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: ["data", "model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2.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.isReadOnlyAttr && !model.isDisabledAttr && model.hasFileUI\" tabindex=\"-1\" type=\"file\"\n    [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-errormessage]=\"model.ariaErrormessage\" [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" [attr.capture]=\"model.renderCapture\" />\n  <input *ngIf=\"model.isReadOnlyAttr\" type=\"file\" readonly [class]=\"model.getReadOnlyFileCss()\" [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\" [attr.placeholder]=\"model.title\" style=\"color: transparent\" />\n  <input *ngIf=\"model.isDisabledAttr\" 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: [{
@@ -2712,7 +2768,7 @@ class CommentQuestionComponent extends QuestionAngular {
     }
 }
 CommentQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CommentQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0, template: "<textarea\n*ngIf=\"!model.isReadOnlyRenderDiv()\"\n[readonly]=\"model.isInputReadOnly\"\n[attr.disabled]=\"model.renderedInputDisabled\"\n[id]=\"model.inputId\"\n[attr.maxlength]=\"model.getMaxLength()\"\n[attr.cols]=\"model.cols\"\n[attr.rows]=\"model.rows\"\n[attr.placeholder]=\"model.renderedPlaceholder\"\n[class]=\"model.className\"\n[value]=\"model.value || null\"\n(input)=\"model.onInput($event)\"\n(keydown)=\"model.onKeyDown($event)\"\n(change)=\"onChange($event)\"\n[attr.aria-required]=\"model.a11y_input_ariaRequired\"\n[attr.aria-label]=\"model.a11y_input_ariaLabel\"\n[attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n[attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n[attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n[style.resize]=\"model.resizeStyle\"\n#contentElement></textarea>\n<sv-ng-character-counter *ngIf=\"!model.isReadOnlyRenderDiv() && model.getMaxLength()\" \n[counter]=\"model.characterCounter\"\n[remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n</sv-ng-character-counter>\n<div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>", components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CommentQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0, template: "<textarea\n*ngIf=\"!model.isReadOnlyRenderDiv()\"\n[readonly]=\"model.isReadOnlyAttr\"\n[disabled]=\"model.isDisabledAttr\"\n[id]=\"model.inputId\"\n[attr.maxlength]=\"model.getMaxLength()\"\n[attr.cols]=\"model.cols\"\n[attr.rows]=\"model.rows\"\n[attr.placeholder]=\"model.renderedPlaceholder\"\n[class]=\"model.className\"\n[value]=\"model.value || null\"\n(input)=\"model.onInput($event)\"\n(keydown)=\"model.onKeyDown($event)\"\n(change)=\"onChange($event)\"\n[attr.aria-required]=\"model.a11y_input_ariaRequired\"\n[attr.aria-label]=\"model.a11y_input_ariaLabel\"\n[attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n[attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n[attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n[style.resize]=\"model.resizeStyle\"\n#contentElement></textarea>\n<sv-ng-character-counter *ngIf=\"!model.isReadOnlyRenderDiv() && model.getMaxLength()\" \n[counter]=\"model.characterCounter\"\n[remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n</sv-ng-character-counter>\n<div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>", components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2838,7 +2894,7 @@ class RankingQuestionComponent extends SelectBaseComponent {
     }
 }
 RankingQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RankingQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingQuestionComponent, selector: "sv-ng-ranking-question", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!model.selectToRankEnabled\" [class]=\"model.rootClass\" #contentElement>\n  <ng-container *ngFor=\"let item of model.rankingChoices; index as index; trackBy: trackItemBy\">\n    <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }\"></ng-template>\n  </ng-container>\n</div>\n\n<div *ngIf=\"model.selectToRankEnabled\" [class]=\"model.rootClass\" #contentElement>\n  <div [class]='model.getContainerClasses(\"from\")' data-ranking=\"from-container\">\n    <ng-container *ngFor=\"let item of model.unRankingChoices; index as index; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index, true) }\"></ng-template>\n    </ng-container>\n\n    <div *ngIf=\"model.unRankingChoices.length === 0\" [class]=\"model.cssClasses.containerPlaceholder\" [model]=\"$any(model).locSelectToRankEmptyRankedAreaText\" sv-ng-string></div>\n  </div>\n\n  <div [class]=\"model.cssClasses.containersDivider\"></div>\n\n  <div [class]='model.getContainerClasses(\"to\")' data-ranking=\"to-container\">\n    <ng-container *ngFor=\"let item of model.rankingChoices; index as index; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }\"></ng-template>\n    </ng-container>\n\n    <div *ngIf=\"model.rankingChoices.length === 0\" [class]=\"model.cssClasses.containerPlaceholder\" [model]=\"$any(model).locSelectToRankEmptyUnrankedAreaText\" sv-ng-string></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"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+RankingQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingQuestionComponent, selector: "sv-ng-ranking-question", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!model.selectToRankEnabled\" [class]=\"model.rootClass\" #contentElement>\n  <ng-container *ngFor=\"let item of model.renderedRankingChoices; index as index; trackBy: trackItemBy\">\n    <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }\"></ng-template>\n  </ng-container>\n</div>\n\n<div *ngIf=\"model.selectToRankEnabled\" [class]=\"model.rootClass\" #contentElement>\n  <div [class]='model.getContainerClasses(\"from\")' data-ranking=\"from-container\">\n    <ng-container *ngFor=\"let item of model.renderedUnRankingChoices; index as index; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index, true) }\"></ng-template>\n    </ng-container>\n\n    <div *ngIf=\"model.renderedUnRankingChoices.length === 0\" [class]=\"model.cssClasses.containerPlaceholder\" [model]=\"$any(model).locSelectToRankEmptyRankedAreaText\" sv-ng-string></div>\n  </div>\n\n  <div [class]=\"model.cssClasses.containersDivider\"></div>\n\n  <div [class]='model.getContainerClasses(\"to\")' data-ranking=\"to-container\">\n    <ng-container *ngFor=\"let item of model.renderedRankingChoices; index as index; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }\"></ng-template>\n    </ng-container>\n\n    <div *ngIf=\"model.renderedRankingChoices.length === 0\" [class]=\"model.cssClasses.containerPlaceholder\" [model]=\"$any(model).locSelectToRankEmptyUnrankedAreaText\" sv-ng-string></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"] }, { 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: RankingQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2854,7 +2910,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    (pointerup)=\"question.handlePointerUp($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"] }] });
+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    (pointerup)=\"question.handlePointerUp($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\n      <ng-template [component]=\"{ name: question.itemContentComponent, data: { item: model, cssClasses: question.cssClasses } }\"></ng-template>\n    </div>\n  </div>\n</div>", 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: RankingItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2872,6 +2928,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("sv-ng-ranking-item", RankingItemComponent);
 
+class RankingItemContentComponent extends EmbeddedViewContentComponent {
+}
+RankingItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingItemContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RankingItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemContentComponent, selector: "sv-ranking-item-content", inputs: { item: "item", cssClasses: "cssClasses" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"cssClasses.controlLabel\">\n    <sv-ng-string [model]=\"item.locText\"></sv-ng-string>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingItemContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ranking-item-content",
+                    templateUrl: "./ranking-item-content.component.html",
+                    styles: [":host { display: none; }"]
+                }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], cssClasses: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-ranking-item-content", RankingItemContentComponent);
+
 class StringEditorComponent {
     constructor() {
         this.onInput = (event) => {
@@ -3131,7 +3205,7 @@ class MatrixCellComponent extends BaseAngular {
     }
 }
 MatrixCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "sv-ng-matrix-cell, '[sv-ng-matrix-cell]'", inputs: { question: "question", column: "column", row: "row", columnIndex: "columnIndex", cellChangedOwner: "cellChangedOwner" }, usesInheritance: true, ngImport: i0, template: "<label (mousedown)=\"question.onMouseDown()\" [class]=\"question.getItemClass(row, column)\">\n  <input\n    type=\"radio\"\n    [class]=\"question.cssClasses.itemValue\"\n    [name]=\"row.fullName\"\n    [value]=\"column.value\"\n    [checked]=\"row.value === column.value\"\n    [disabled]=\"row.isReadOnly\"\n    [attr.id]=\"question.inputId + '_' + row.name + '_' + columnIndex\"\n    (change)=\"onChange()\"\n    [attr.aria-required]=\"question.a11y_input_ariaRequired\"\n    [attr.aria-label]=\"question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)\"\n    [attr.aria-invalid]=\"question.a11y_input_ariaInvalid\"\n    [attr.aria-errormessage]=\"question.a11y_input_ariaErrormessage\"\n  />\n  <span [class]=\"question.cssClasses.materialDecorator\">\n    <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n      <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n    </svg> \n  </span>\n  <span *ngIf=\"question.isMobile\" [class]=\"question.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n</label>\n<ng-content></ng-content>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MatrixCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "sv-ng-matrix-cell, '[sv-ng-matrix-cell]'", inputs: { question: "question", column: "column", row: "row", columnIndex: "columnIndex", cellChangedOwner: "cellChangedOwner" }, usesInheritance: true, ngImport: i0, template: "<label (mousedown)=\"question.onMouseDown()\" [class]=\"question.getItemClass(row, column)\">\n  <input\n    type=\"radio\"\n    [class]=\"question.cssClasses.itemValue\"\n    [name]=\"row.fullName\"\n    [value]=\"column.value\"\n    [checked]=\"row.value === column.value\"\n    [readonly]=\"row.isReadOnlyAttr\"\n    [disabled]=\"row.isDisabledAttr\"\n    [attr.id]=\"question.inputId + '_' + row.name + '_' + columnIndex\"\n    (change)=\"onChange()\"\n    [attr.aria-required]=\"question.a11y_input_ariaRequired\"\n    [attr.aria-label]=\"question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)\"\n    [attr.aria-invalid]=\"question.a11y_input_ariaInvalid\"\n    [attr.aria-errormessage]=\"question.a11y_input_ariaErrormessage\"\n  />\n  <span [class]=\"question.cssClasses.materialDecorator\">\n    <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n      <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n    </svg> \n  </span>\n  <span *ngIf=\"question.isMobile\" [class]=\"question.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n</label>\n<ng-content></ng-content>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -3601,13 +3675,13 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
         PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-        CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+        CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
         SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
         RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
-        MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
+        MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent, QuestionErrorComponent,
         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
@@ -3617,13 +3691,13 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         CharacterCounterComponent,
         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
         PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-        CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+        CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
         SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
         RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
-        MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
+        MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
@@ -3640,13 +3714,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
                         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
                         PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-                        CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+                        CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
                         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
                         SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
                         RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
                         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
-                        MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
+                        MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
                         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
                         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent, QuestionErrorComponent,
                         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
@@ -3662,13 +3736,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         CharacterCounterComponent,
                         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
                         PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-                        CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+                        CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
                         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
                         SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
                         RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
                         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
-                        MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
+                        MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
                         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
                         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
                         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
@@ -3682,5 +3756,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, 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, MatrixDropdownCellComponent, 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, QuestionErrorComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingDropdownItemComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SkeletonComponent, StringEditorComponent, StringViewerComponent, SurveyCommentComponent, SurveyCommentOtherComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyNavigationButton, SurveyStringComponent, SvgBundleComponent, 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, ListItemContentComponent, ListItemGroupComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownCellComponent, 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, QuestionErrorComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingItemContentComponent, RankingQuestionComponent, RatingDropdownComponent, RatingDropdownItemComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SkeletonComponent, StringEditorComponent, StringViewerComponent, SurveyCommentComponent, SurveyCommentOtherComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyNavigationButton, SurveyStringComponent, SvgBundleComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
 //# sourceMappingURL=survey-angular-ui.js.map