survey-angular-ui 1.9.52 → 1.9.54

package/fesm2015/survey-angular-ui.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ViewChild, Directive, Input, Injectable, ViewContainerRef, ElementRef, HostBinding, HostListener, Pipe, NgModule } from '@angular/core';
+import { TemplateRef, Component, ViewChild, Directive, Input, ViewContainerRef, Injectable, ElementRef, HostBinding, HostListener, Pipe, NgModule } from '@angular/core';
 import * as Survey from 'survey-core';
-import { createPopupModalViewModel, settings, createDialogOptions, SvgRegistry, TooltipManager, LocalizableString, PopupBaseViewModel, DropdownListModel, Helpers, DropdownMultiSelectListModel, RendererFactory, ButtonGroupItemModel, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, ActionDropdownViewModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel } from 'survey-core';
+import { createPopupModalViewModel, settings, createDialogOptions, SvgRegistry, TooltipManager, LocalizableString, createPopupViewModel, DropdownListModel, Helpers, DropdownMultiSelectListModel, RendererFactory, ButtonGroupItemModel, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, ActionDropdownViewModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel } from 'survey-core';
 import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1 from '@angular/platform-browser';
+import * as i1$1 from '@angular/platform-browser';
 
 class EmbeddedViewContentComponent {
     constructor(viewContainerRef) {
@@ -37,6 +37,7 @@ class BaseAngular extends EmbeddedViewContentComponent {
         super(viewContainerRef);
         this.changeDetectorRef = changeDetectorRef;
         this.isModelSubsribed = false;
+        this.isDestroyed = false;
     }
     get surveyModel() {
         return this.getModel().getSurvey();
@@ -44,9 +45,9 @@ class BaseAngular extends EmbeddedViewContentComponent {
     ngDoCheck() {
         if (this.previousModel !== this.getModel()) {
             this.unMakeBaseElementAngular(this.previousModel);
-            this.previousModel = this.getModel();
             this.makeBaseElementAngular(this.getModel());
             this.onModelChanged();
+            this.previousModel = this.getModel();
         }
         this.beforeUpdate();
     }
@@ -62,6 +63,7 @@ class BaseAngular extends EmbeddedViewContentComponent {
         return !!model && !!model.isRendering;
     }
     ngOnDestroy() {
+        this.isDestroyed = true;
         this.unMakeBaseElementAngular(this.getModel());
     }
     makeBaseElementAngular(stateElement) {
@@ -73,14 +75,14 @@ class BaseAngular extends EmbeddedViewContentComponent {
                 if (Array.isArray(val)) {
                     var val = val;
                     val["onArrayChanged"] = (arrayChanges) => {
-                        this.update();
+                        this.update(key);
                     };
                 }
             });
             stateElement.setPropertyValueCoreHandler = (hash, key, val) => {
                 if (hash[key] !== val) {
                     hash[key] = val;
-                    this.update();
+                    this.update(key);
                 }
             };
         }
@@ -99,12 +101,26 @@ class BaseAngular extends EmbeddedViewContentComponent {
             });
         }
     }
-    update() {
+    update(key) {
         if (this.getIsRendering())
             return;
         this.beforeUpdate();
-        this.detectChanges();
-        this.afterUpdate();
+        if (this.getPropertiesToUpdateSync().indexOf(key) > -1) {
+            this.detectChanges();
+            this.afterUpdate();
+        }
+        else {
+            (window["__zone_symbol__queueMicrotask"]
+                ? window["__zone_symbol__queueMicrotask"] : queueMicrotask)(() => {
+                if (!this.isDestroyed) {
+                    this.detectChanges();
+                }
+                this.afterUpdate();
+            });
+        }
+    }
+    getPropertiesToUpdateSync() {
+        return [];
     }
     detectChanges() {
         if (!!this.embeddedView) {
@@ -133,31 +149,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }]; } });
 
-class VisibleDirective {
-    constructor(el) {
-        this.el = el;
-    }
-    ngOnChanges(changes) {
-        changes["visible"].currentValue ? this.show() : this.hide();
-    }
-    hide() {
-        this.el.nativeElement.style.display = "none";
-    }
-    show() {
-        this.el.nativeElement.style.display = "";
-    }
-}
-VisibleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VisibleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-VisibleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: VisibleDirective, selector: "[visible]", inputs: { visible: "visible" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VisibleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[visible]"
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { visible: [{
-                type: Input
-            }] } });
-
 class AngularComponentFactory {
     constructor() {
         this.creatorHash = {};
@@ -234,7 +225,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }] } });
 
-class PopupContainerComponent extends BaseAngular {
+class ActionComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    getPropertiesToUpdateSync() {
+        return ["mode"];
+    }
+}
+ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionComponent, selector: "sv-ng-action", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sv-ng-action", styles: [":host { display: none; }"], template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], actionContent: [{
+                type: ViewChild,
+                args: ["actionContent", { read: ViewContainerRef, static: true }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-action", ActionComponent);
+
+class ActionBarComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    get allowOnClick() {
+        return this.handleClick !== undefined ? this.handleClick : true;
+    }
+    onClick(event) {
+        if (this.allowOnClick) {
+            event.stopPropagation();
+        }
+    }
+    ngAfterViewInit() {
+        if (!!this.model.hasActions) {
+            this.model.initResponsivityManager(this.container.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.model.resetResponsivityManager();
+    }
+}
+ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: { model: "model", handleClick: "handleClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sv-action-bar, sv-ng-action-bar", styles: [":host { display: none }"], template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], handleClick: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-action-bar", ActionBarComponent);
+
+class VisibleDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnChanges(changes) {
+        changes["visible"].currentValue ? this.show() : this.hide();
+    }
+    hide() {
+        this.el.nativeElement.style.display = "none";
+    }
+    show() {
+        this.el.nativeElement.style.display = "";
+    }
+}
+VisibleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VisibleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+VisibleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: VisibleDirective, selector: "[visible]", inputs: { visible: "visible" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VisibleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[visible]"
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { visible: [{
+                type: Input
+            }] } });
+
+class PopupBaseContainerComponent extends BaseAngular {
     constructor(changeDetectorRef) {
         super(changeDetectorRef);
         this.prevIsVisible = false;
@@ -244,6 +318,18 @@ class PopupContainerComponent extends BaseAngular {
     getModel() {
         return this.model;
     }
+    get applyButtonText() {
+        const popupModalModel = this.model;
+        if (!popupModalModel)
+            return null;
+        return popupModalModel.applyButtonText;
+    }
+    apply() {
+        const popupModalModel = this.model;
+        if (!popupModalModel)
+            return;
+        popupModalModel.apply();
+    }
     onModelChanged() {
         this.changeDetectorRef.detectChanges();
     }
@@ -267,11 +353,11 @@ class PopupContainerComponent extends BaseAngular {
         super.afterUpdate();
     }
 }
-PopupContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PopupContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [style.visibility]=\"isShow ? 'visible' : 'hidden'\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n        <div class=\"sv-popup__shadow\">\n            <span *ngIf=\"model.showPointer\" class=\"sv-popup__pointer\" [style]=\"{ left: model.pointerTarget.left, top: model.pointerTarget.top }\"></span>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <button type=\"button\" (click)=\"model.cancel()\"\n                        class=\"sv-popup__body-footer-item sv-popup__button sv-popup__button--cancel\">{{ model.cancelButtonText }}</button>\n                    <button type=\"button\" *ngIf=\"model.isModal\" (click)=\"model.apply()\" \n                    class=\"sv-popup__body-footer-item sv-popup__button sv-popup__button--apply\">{{ model.applyButtonText }}</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", directives: [{ 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: "13.0.3", ngImport: i0, type: PopupContainerComponent, decorators: [{
+PopupBaseContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupBaseContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PopupBaseContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupBaseContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [style.visibility]=\"isShow ? 'visible' : 'hidden'\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n        <div class=\"sv-popup__shadow\">\n            <ng-container *ngIf=\"model.showHeader\">\n                <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n            </ng-container>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupBaseContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [style.visibility]=\"isShow ? 'visible' : 'hidden'\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n        <div class=\"sv-popup__shadow\">\n            <span *ngIf=\"model.showPointer\" class=\"sv-popup__pointer\" [style]=\"{ left: model.pointerTarget.left, top: model.pointerTarget.top }\"></span>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <button type=\"button\" (click)=\"model.cancel()\"\n                        class=\"sv-popup__body-footer-item sv-popup__button sv-popup__button--cancel\">{{ model.cancelButtonText }}</button>\n                    <button type=\"button\" *ngIf=\"model.isModal\" (click)=\"model.apply()\" \n                    class=\"sv-popup__body-footer-item sv-popup__button sv-popup__button--apply\">{{ model.applyButtonText }}</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [style.visibility]=\"isShow ? 'visible' : 'hidden'\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n        <div class=\"sv-popup__shadow\">\n            <ng-container *ngIf=\"model.showHeader\">\n                <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n            </ng-container>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
                 type: Input
             }] } });
@@ -284,7 +370,7 @@ class PopupService {
     }
     createComponent(popupViewModel) {
         const portalHost = new DomPortalOutlet(popupViewModel.container, this.componentFactoryResolver, this.applicationRef, this.injector);
-        const portal = new ComponentPortal(PopupContainerComponent);
+        const portal = new ComponentPortal(PopupBaseContainerComponent);
         const componentRef = portalHost.attach(portal);
         popupViewModel.container = popupViewModel.container.children[0];
         componentRef.instance.model = popupViewModel;
@@ -312,6 +398,7 @@ class ModalComponent {
         };
         this.portalHost = this.popupService.createComponent(this.model);
         this.model.model.isVisible = true;
+        return this.model;
     }
     ngOnInit() {
         if (!!settings.showModal)
@@ -319,7 +406,7 @@ class ModalComponent {
         this.functionDefined = true;
         settings.showModal = (componentName, data, onApply, onCancel, cssClass, title, displayMode = "popup") => {
             const options = createDialogOptions(componentName, data, onApply, onCancel, undefined, undefined, cssClass, title, displayMode);
-            this.showDialog(options);
+            return this.showDialog(options);
         };
     }
     ngOnDestroy() {
@@ -341,7 +428,7 @@ class DynamicHeadComponent extends EmbeddedViewContentComponent {
     }
 }
 DynamicHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DynamicHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container [ngSwitch]=\"tagName\">\n    <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n    <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n    <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n    <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n    <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n    <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n  </ng-container>\n  <ng-template #titleContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+DynamicHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container [ngSwitch]=\"tagName\">\n    <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n    <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n    <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n    <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n    <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n    <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n  </ng-container>\n  <ng-template #titleContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicHeadComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-dynamic-head", template: "<ng-template #template>\n  <ng-container [ngSwitch]=\"tagName\">\n    <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n    <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n    <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n    <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n    <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n    <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n  </ng-container>\n  <ng-template #titleContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -351,61 +438,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }] } });
 
-class ActionComponent extends BaseAngular {
-    getModel() {
-        return this.model;
-    }
-}
-ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionComponent, selector: "sv-ng-action", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "sv-ng-action", styles: [":host { display: none; }"], template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>" }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], actionContent: [{
-                type: ViewChild,
-                args: ["actionContent", { read: ViewContainerRef, static: true }]
-            }] } });
-AngularComponentFactory.Instance.registerComponent("sv-action", ActionComponent);
-
-class ActionBarComponent extends BaseAngular {
-    getModel() {
-        return this.model;
-    }
-    get allowOnClick() {
-        return this.handleClick !== undefined ? this.handleClick : true;
-    }
-    onClick(event) {
-        if (this.allowOnClick) {
-            event.stopPropagation();
-        }
-    }
-    ngAfterViewInit() {
-        if (!!this.model.hasActions) {
-            this.model.initResponsivityManager(this.container.nativeElement);
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.model.resetResponsivityManager();
-    }
-}
-ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: { model: "model", handleClick: "handleClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "sv-action-bar, sv-ng-action-bar", styles: [":host { display: none }"], template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>" }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], handleClick: [{
-                type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ["container"]
-            }] } });
-AngularComponentFactory.Instance.registerComponent("sv-action-bar", ActionBarComponent);
-
 class SurveyStringComponent {
 }
 SurveyStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyStringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -423,7 +455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ElementTitleComponent extends EmbeddedViewContentComponent {
 }
 ElementTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ElementTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ElementTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: { element: "element" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <sv-ng-dynamic-head [tagName]=\"element.titleTagName\" [element]=\"element\" *ngIf=\"element.hasTitle\">\n    <ng-container *ngIf=\"!element.hasTitleActions\">\n      <ng-container *ngTemplateOutlet=\"elementTitleContent\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"element.hasTitleActions\">\n      <div class=\"sv-title-actions\">\n        <span class=\"sv-title-actions__title\">\n          <ng-container *ngTemplateOutlet=\"elementTitleContent\"></ng-container>\n        </span>\n        <sv-ng-action-bar [model]=\"element.getTitleToolbar()\"></sv-ng-action-bar>\n      </div>\n    </ng-container>\n  </sv-ng-dynamic-head>\n  <ng-template #elementTitleContent>\n    <sv-ng-string *ngIf=\"!element.isTitleOwner\" [model]=\"element.locTitle\"></sv-ng-string>\n    <ng-container *ngIf=\"element.isTitleOwner\">\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextOnStart\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.no\"\n        style=\"position: static\"\n        [class]=\"element.cssClasses.number\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.no }}</span>\n      <span *ngIf=\"element.isTitleOwner && element.no\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextBeforeTitle\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span>\n      <span *ngIf=\"element.isTitleOwner && element.isRequireTextBeforeTitle\">&nbsp;</span>\n      <sv-ng-string *ngIf=\"element.isTitleOwner\" [model]=\"element.locTitle\"></sv-ng-string>\n      <span *ngIf=\"element.isTitleOwner && element.isRequireTextAfterTitle\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextAfterTitle\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span> \n  </ng-container>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: ["tagName", "element"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+ElementTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: { element: "element" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <sv-ng-dynamic-head [tagName]=\"element.titleTagName\" [element]=\"element\" *ngIf=\"element.hasTitle\">\n    <ng-container *ngIf=\"!element.hasTitleActions\">\n      <ng-container *ngTemplateOutlet=\"elementTitleContent\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"element.hasTitleActions\">\n      <div class=\"sv-title-actions\">\n        <span class=\"sv-title-actions__title\">\n          <ng-container *ngTemplateOutlet=\"elementTitleContent\"></ng-container>\n        </span>\n        <sv-ng-action-bar [model]=\"element.getTitleToolbar()\"></sv-ng-action-bar>\n      </div>\n    </ng-container>\n  </sv-ng-dynamic-head>\n  <ng-template #elementTitleContent>\n    <sv-ng-string *ngIf=\"!element.isTitleOwner\" [model]=\"element.locTitle\"></sv-ng-string>\n    <ng-container *ngIf=\"element.isTitleOwner\">\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextOnStart\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.no\"\n        style=\"position: static\"\n        [class]=\"element.cssClasses.number\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.no }}</span>\n      <span *ngIf=\"element.isTitleOwner && element.no\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextBeforeTitle\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span>\n      <span *ngIf=\"element.isTitleOwner && element.isRequireTextBeforeTitle\">&nbsp;</span>\n      <sv-ng-string *ngIf=\"element.isTitleOwner\" [model]=\"element.locTitle\"></sv-ng-string>\n      <span *ngIf=\"element.isTitleOwner && element.isRequireTextAfterTitle\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextAfterTitle\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span> \n  </ng-container>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: ["tagName", "element"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ElementTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-element-title", template: "<ng-template #template>\n  <sv-ng-dynamic-head [tagName]=\"element.titleTagName\" [element]=\"element\" *ngIf=\"element.hasTitle\">\n    <ng-container *ngIf=\"!element.hasTitleActions\">\n      <ng-container *ngTemplateOutlet=\"elementTitleContent\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"element.hasTitleActions\">\n      <div class=\"sv-title-actions\">\n        <span class=\"sv-title-actions__title\">\n          <ng-container *ngTemplateOutlet=\"elementTitleContent\"></ng-container>\n        </span>\n        <sv-ng-action-bar [model]=\"element.getTitleToolbar()\"></sv-ng-action-bar>\n      </div>\n    </ng-container>\n  </sv-ng-dynamic-head>\n  <ng-template #elementTitleContent>\n    <sv-ng-string *ngIf=\"!element.isTitleOwner\" [model]=\"element.locTitle\"></sv-ng-string>\n    <ng-container *ngIf=\"element.isTitleOwner\">\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextOnStart\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.no\"\n        style=\"position: static\"\n        [class]=\"element.cssClasses.number\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.no }}</span>\n      <span *ngIf=\"element.isTitleOwner && element.no\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextBeforeTitle\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span>\n      <span *ngIf=\"element.isTitleOwner && element.isRequireTextBeforeTitle\">&nbsp;</span>\n      <sv-ng-string *ngIf=\"element.isTitleOwner\" [model]=\"element.locTitle\"></sv-ng-string>\n      <span *ngIf=\"element.isTitleOwner && element.isRequireTextAfterTitle\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isTitleOwner && element.isRequireTextAfterTitle\"\n        [class]=\"element.cssClasses.requiredText\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredText }}</span> \n  </ng-container>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -447,7 +479,7 @@ class SurveyHeaderComponent {
     }
 }
 SurveyHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyHeaderComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SurveyHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: { survey: "survey" }, ngImport: i0, template: "<div *ngIf=\"survey.isLogoBefore\" [class]=\"survey.logoClassNames\">\n  <ng-template [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n</div>\n<div\n  *ngIf=\"survey.renderedHasTitle\"\n  [class]=\"survey.css.headerText\"\n  [style.maxWidth]=\"survey.titleMaxWidth\"\n>\n  <sv-ng-element-title [element]=\"survey\"></sv-ng-element-title>\n  <h5 *ngIf=\"survey.renderedHasDescription\" [class]=\"survey.css.description\" [model]=\"survey.locDescription\" sv-ng-string></h5>\n</div>\n\n<div *ngIf=\"survey.isLogoAfter\" [class]=\"survey.logoClassNames\">\n  <ng-template [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n</div>\n<div [class]=\"survey.css.headerClose\"></div>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+SurveyHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: { survey: "survey" }, ngImport: i0, template: "<div *ngIf=\"survey.isLogoBefore\" [class]=\"survey.logoClassNames\">\n  <ng-template [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n</div>\n<div\n  *ngIf=\"survey.renderedHasTitle\"\n  [class]=\"survey.css.headerText\"\n  [style.maxWidth]=\"survey.titleMaxWidth\"\n>\n  <sv-ng-element-title [element]=\"survey\"></sv-ng-element-title>\n  <h5 *ngIf=\"survey.renderedHasDescription\" [class]=\"survey.css.description\" [model]=\"survey.locDescription\" sv-ng-string></h5>\n</div>\n\n<div *ngIf=\"survey.isLogoAfter\" [class]=\"survey.logoClassNames\">\n  <ng-template [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n</div>\n<div [class]=\"survey.css.headerClose\"></div>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: "'[sv-ng-survey-header]'", template: "<div *ngIf=\"survey.isLogoBefore\" [class]=\"survey.logoClassNames\">\n  <ng-template [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n</div>\n<div\n  *ngIf=\"survey.renderedHasTitle\"\n  [class]=\"survey.css.headerText\"\n  [style.maxWidth]=\"survey.titleMaxWidth\"\n>\n  <sv-ng-element-title [element]=\"survey\"></sv-ng-element-title>\n  <h5 *ngIf=\"survey.renderedHasDescription\" [class]=\"survey.css.description\" [model]=\"survey.locDescription\" sv-ng-string></h5>\n</div>\n\n<div *ngIf=\"survey.isLogoAfter\" [class]=\"survey.logoClassNames\">\n  <ng-template [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n</div>\n<div [class]=\"survey.css.headerClose\"></div>" }]
@@ -472,6 +504,15 @@ class ElementComponent extends BaseAngular {
         }
         return this.elementComponentName;
     }
+    get rootStyle() {
+        //use this if to check if cssClassses are calculated and allowRootStyle flag was set
+        if (!!this.model.cssClasses) {
+            return this.model.rootStyle;
+        }
+        else {
+            return {};
+        }
+    }
     get componentData() {
         const survey = this.surveyModel;
         let data;
@@ -488,10 +529,10 @@ class ElementComponent extends BaseAngular {
     }
 }
 ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.questionWrapper\" [style]=\"model.rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div *ngIf=\"!!model\" [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-element", template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.questionWrapper\" [style]=\"model.rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
+            args: [{ selector: "sv-ng-element", template: "<ng-template #template>\n    <div *ngIf=\"!!model\" [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -505,7 +546,7 @@ class RowComponent extends BaseAngular {
     }
 }
 RowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"row.getRowCss()\" *ngIf=\"row.visible\">\n    <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n      <sv-ng-element [model]=\"$any(element)\"></sv-ng-element>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"row.getRowCss()\" *ngIf=\"row.visible\">\n    <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n      <sv-ng-element [model]=\"$any(element)\"></sv-ng-element>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RowComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-row", template: "<ng-template #template>\n  <div [class]=\"row.getRowCss()\" *ngIf=\"row.visible\">\n    <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n      <sv-ng-element [model]=\"$any(element)\"></sv-ng-element>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -528,7 +569,7 @@ class PageComponent extends BaseAngular {
     }
 }
 PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PageComponent, selector: "page", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "pageContainerRef", first: true, predicate: ["pageContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey\">\n  <div [class]=\"model.cssRoot\" #pageContainer>\n    <sv-ng-element-title [element]=\"model\"></sv-ng-element-title>\n    <div *ngIf=\"model._showDescription\" [class]=\"model.cssClasses.page.description\">\n      <sv-ng-string [model]=\"model.locDescription\"></sv-ng-string>\n    </div>\n    <ng-container *ngFor=\"let row of model.rows\">\n      <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n        <sv-ng-row [row]=\"row\"></sv-ng-row>\n      </ng-template>\n    </ng-container>\n  </div>\n</ng-container>", styles: [""], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }], 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"] }] });
+PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PageComponent, selector: "page", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "pageContainerRef", first: true, predicate: ["pageContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey\">\n  <div [class]=\"model.cssRoot\" #pageContainer>\n    <sv-ng-element-title [element]=\"model\"></sv-ng-element-title>\n    <div *ngIf=\"model._showDescription\" [class]=\"model.cssClasses.page.description\">\n      <sv-ng-string [model]=\"model.locDescription\"></sv-ng-string>\n    </div>\n    <ng-container *ngFor=\"let row of model.rows\">\n      <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n        <sv-ng-row [row]=\"row\"></sv-ng-row>\n      </ng-template>\n    </ng-container>\n  </div>\n</ng-container>", styles: [""], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
             args: [{ selector: "page", template: "<ng-container *ngIf=\"!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey\">\n  <div [class]=\"model.cssRoot\" #pageContainer>\n    <sv-ng-element-title [element]=\"model\"></sv-ng-element-title>\n    <div *ngIf=\"model._showDescription\" [class]=\"model.cssClasses.page.description\">\n      <sv-ng-string [model]=\"model.locDescription\"></sv-ng-string>\n    </div>\n    <ng-container *ngFor=\"let row of model.rows\">\n      <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n        <sv-ng-row [row]=\"row\"></sv-ng-row>\n      </ng-template>\n    </ng-container>\n  </div>\n</ng-container>", styles: [""] }]
@@ -575,7 +616,7 @@ class SurveyContentComponent extends BaseAngular {
     }
 }
 SurveyContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SurveyContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\">\n    <form onsubmit=\"return false;\">\n      <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n      <div [class]=\"model.css.container\">\n        <div *ngIf=\"model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n        <ng-container *ngIf=\"model.isShowProgressBarOnTop && !model.isShowStartingPage\">\n          <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n        </ng-container>\n        <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyCss\" [style.width]=\"model.renderedWidth\" [style.maxWidth]=\"model.renderedWidth\">\n          <!-- ko if: isTimerPanelShowingOnTop && !isShowStartingPage -->\n          <!-- ko template: { name: 'survey-timerpanel' } -->\n          <!-- /ko -->\n          <!-- /ko -->\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnTop\" [model]=\"model.navigationBar\"></sv-action-bar>\n          <!-- ko if: activePage -->\n            <ng-container *ngIf=\"model.activePage\">\n              <div [id]=\"model.activePage.id\">\n                <page [model]=\"model.activePage\" [survey]=\"model\"></page>\n              </div>\n            </ng-container>\n            <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n            <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n            <!-- /ko -->\n            <!-- /ko -->\n          <!-- /ko -->\n          <!-- ko if: isTimerPanelShowingOnBottom && !isShowStartingPage -->\n          <!-- ko template: { name: 'survey-timerpanel' } -->\n          <!-- /ko -->\n          <!-- /ko -->\n          <ng-container *ngIf=\"model.isShowProgressBarOnBottom && !model.isShowStartingPage\">\n            <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n          </ng-container>\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnBottom\" [model]=\"model.navigationBar\"></sv-action-bar>\n        </div>\n        <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n          [innerHtml]=\"model.processedCompletedHtml\"></div>\n        <div [hidden]=\"model.completedState === ''\" [class]=\"model.css.saveData.root\">\n          <div [class]=\"model.completedStateCss\">\n            <span>{{model.completedStateText}}</span>\n            <input type=\"button\" [hidden]=\"model.completedState != 'error'\"\n              [value]=\"model.getLocString('saveAgainButton')\" (click)=\"model.doComplete()\"\n              [class]=\"model.css.saveData.saveAgainButton\">\n          </div>\n        </div>\n        <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.css.body\"\n          [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n        <div *ngIf=\"model.state === 'loading'\" [class]=\"model.css.body\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n        <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n      </div>\n    </form>\n    <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n  </div>\n</ng-template>", components: [{ type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PageComponent, selector: "page", inputs: ["model", "survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+SurveyContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\">\n    <form onsubmit=\"return false;\">\n      <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n      <div [class]=\"model.css.container\">\n        <div *ngIf=\"model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n        <ng-container *ngIf=\"model.isShowProgressBarOnTop && !model.isShowStartingPage\">\n          <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n        </ng-container>\n        <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyCss\" [style.width]=\"model.renderedWidth\" [style.maxWidth]=\"model.renderedWidth\">\n          <!-- ko if: isTimerPanelShowingOnTop && !isShowStartingPage -->\n          <!-- ko template: { name: 'survey-timerpanel' } -->\n          <!-- /ko -->\n          <!-- /ko -->\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnTop\" [model]=\"model.navigationBar\"></sv-action-bar>\n          <!-- ko if: activePage -->\n            <ng-container *ngIf=\"model.activePage\">\n              <div [id]=\"model.activePage.id\">\n                <page [model]=\"model.activePage\" [survey]=\"model\"></page>\n              </div>\n            </ng-container>\n            <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n            <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n            <!-- /ko -->\n            <!-- /ko -->\n          <!-- /ko -->\n          <!-- ko if: isTimerPanelShowingOnBottom && !isShowStartingPage -->\n          <!-- ko template: { name: 'survey-timerpanel' } -->\n          <!-- /ko -->\n          <!-- /ko -->\n          <ng-container *ngIf=\"model.isShowProgressBarOnBottom && !model.isShowStartingPage\">\n            <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n          </ng-container>\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnBottom\" [model]=\"model.navigationBar\"></sv-action-bar>\n        </div>\n        <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n          [innerHtml]=\"model.processedCompletedHtml\"></div>\n        <div [hidden]=\"model.completedState === ''\" [class]=\"model.css.saveData.root\">\n          <div [class]=\"model.completedStateCss\">\n            <span>{{model.completedStateText}}</span>\n            <input type=\"button\" [hidden]=\"model.completedState != 'error'\"\n              [value]=\"model.getLocString('saveAgainButton')\" (click)=\"model.doComplete()\"\n              [class]=\"model.css.saveData.saveAgainButton\">\n          </div>\n        </div>\n        <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.css.body\"\n          [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n        <div *ngIf=\"model.state === 'loading'\" [class]=\"model.css.body\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n        <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n      </div>\n    </form>\n    <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n  </div>\n</ng-template>", components: [{ type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PageComponent, selector: "page", inputs: ["model", "survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyContentComponent, decorators: [{
             type: Component,
             args: [{ selector: "survey-content", template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\">\n    <form onsubmit=\"return false;\">\n      <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n      <div [class]=\"model.css.container\">\n        <div *ngIf=\"model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n        <ng-container *ngIf=\"model.isShowProgressBarOnTop && !model.isShowStartingPage\">\n          <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n        </ng-container>\n        <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyCss\" [style.width]=\"model.renderedWidth\" [style.maxWidth]=\"model.renderedWidth\">\n          <!-- ko if: isTimerPanelShowingOnTop && !isShowStartingPage -->\n          <!-- ko template: { name: 'survey-timerpanel' } -->\n          <!-- /ko -->\n          <!-- /ko -->\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnTop\" [model]=\"model.navigationBar\"></sv-action-bar>\n          <!-- ko if: activePage -->\n            <ng-container *ngIf=\"model.activePage\">\n              <div [id]=\"model.activePage.id\">\n                <page [model]=\"model.activePage\" [survey]=\"model\"></page>\n              </div>\n            </ng-container>\n            <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n            <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n            <!-- /ko -->\n            <!-- /ko -->\n          <!-- /ko -->\n          <!-- ko if: isTimerPanelShowingOnBottom && !isShowStartingPage -->\n          <!-- ko template: { name: 'survey-timerpanel' } -->\n          <!-- /ko -->\n          <!-- /ko -->\n          <ng-container *ngIf=\"model.isShowProgressBarOnBottom && !model.isShowStartingPage\">\n            <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n          </ng-container>\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnBottom\" [model]=\"model.navigationBar\"></sv-action-bar>\n        </div>\n        <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n          [innerHtml]=\"model.processedCompletedHtml\"></div>\n        <div [hidden]=\"model.completedState === ''\" [class]=\"model.css.saveData.root\">\n          <div [class]=\"model.completedStateCss\">\n            <span>{{model.completedStateText}}</span>\n            <input type=\"button\" [hidden]=\"model.completedState != 'error'\"\n              [value]=\"model.getLocString('saveAgainButton')\" (click)=\"model.doComplete()\"\n              [class]=\"model.css.saveData.saveAgainButton\">\n          </div>\n        </div>\n        <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.css.body\"\n          [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n        <div *ngIf=\"model.state === 'loading'\" [class]=\"model.css.body\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n        <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n      </div>\n    </form>\n    <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n  </div>\n</ng-template>" }]
@@ -628,7 +669,7 @@ class PopupSurveyComponent extends BaseAngular {
     }
 }
 PopupSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupSurveyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PopupSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!!model && model.isShowing\" [class]=\"model.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px; max-width: 60%;\">\n  <div [class]=\"model.cssHeaderRoot\">\n      <span (click)=\"model.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">{{model.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"model.cssButton\"></span>\n      </span>\n      <span *ngIf=\"model.isExpanded\" (click)=\"model.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"model.isExpanded\" [class]=\"model.cssBody\">\n    <survey [model]=\"model.survey\"></survey>\n  </div>\n</div>", styles: [""], components: [{ type: SurveyComponent, selector: "survey", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+PopupSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!!model && model.isShowing\" [class]=\"model.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px; max-width: 60%;\">\n  <div [class]=\"model.cssHeaderRoot\">\n      <span (click)=\"model.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">{{model.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"model.cssButton\"></span>\n      </span>\n      <span *ngIf=\"model.isExpanded\" (click)=\"model.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"model.isExpanded\" [class]=\"model.cssBody\">\n    <survey [model]=\"model.survey\"></survey>\n  </div>\n</div>", styles: [""], components: [{ type: SurveyComponent, selector: "survey", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupSurveyComponent, decorators: [{
             type: Component,
             args: [{ selector: "popup-survey", template: "<div *ngIf=\"!!model && model.isShowing\" [class]=\"model.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px; max-width: 60%;\">\n  <div [class]=\"model.cssHeaderRoot\">\n      <span (click)=\"model.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">{{model.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"model.cssButton\"></span>\n      </span>\n      <span *ngIf=\"model.isExpanded\" (click)=\"model.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"model.isExpanded\" [class]=\"model.cssBody\">\n    <survey [model]=\"model.survey\"></survey>\n  </div>\n</div>", styles: [""] }]
@@ -664,7 +705,7 @@ class ErrorsComponent {
     }
 }
 ErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ErrorsComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-ErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { properties: { "attr.role": "this.role", "id": "this.id", "attr.aria-live": "this.ariaLive", "class": "this.class" } }, viewQueries: [{ propertyName: "errorsContainerRef", first: true, predicate: ["errorsContainer"], descendants: true, static: true }], ngImport: i0, template: "<div *ngFor=\"let error of element.errors;\">\n  <span\n    [class]=\"element.cssClasses ? element.cssClasses.error.icon : 'panel-error-icon'\"\n    aria-hidden=\"true\"\n  ></span>\n  <span [class]=\"element.cssClasses ? element.cssClasses.error.item : 'panel-error-item'\" [model]=\"error.locText\" sv-ng-string>\n  </span>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { properties: { "attr.role": "this.role", "id": "this.id", "attr.aria-live": "this.ariaLive", "class": "this.class" } }, viewQueries: [{ propertyName: "errorsContainerRef", first: true, predicate: ["errorsContainer"], descendants: true, static: true }], ngImport: i0, template: "<div *ngFor=\"let error of element.errors;\">\n  <span\n    [class]=\"element.cssClasses ? element.cssClasses.error.icon : 'panel-error-icon'\"\n    aria-hidden=\"true\"\n  ></span>\n  <span [class]=\"element.cssClasses ? element.cssClasses.error.item : 'panel-error-item'\" [model]=\"error.locText\" sv-ng-string>\n  </span>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ErrorsComponent, decorators: [{
             type: Component,
             args: [{ selector: "'[sv-ng-errors]'", template: "<div *ngFor=\"let error of element.errors;\">\n  <span\n    [class]=\"element.cssClasses ? element.cssClasses.error.icon : 'panel-error-icon'\"\n    aria-hidden=\"true\"\n  ></span>\n  <span [class]=\"element.cssClasses ? element.cssClasses.error.item : 'panel-error-item'\" [model]=\"error.locText\" sv-ng-string>\n  </span>\n</div>" }]
@@ -700,7 +741,7 @@ class ElementHeaderComponent {
     }
 }
 ElementHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ElementHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElementHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click()" }, properties: { "class": "this.rootClass" } }, ngImport: i0, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" sv-ng-string></div>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ElementHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click()" }, properties: { "class": "this.rootClass" } }, ngImport: i0, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" sv-ng-string></div>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ElementHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: "'[sv-ng-element-header]'", template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" sv-ng-string></div>" }]
@@ -724,7 +765,7 @@ class SurveyCommentComponent {
     }
 }
 SurveyCommentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SurveyCommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [attr.max-length]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.placeholder]=\"question.commentOrOtherPlaceholder\" \n  [value]=\"comment\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"question.onCommentChange($event)\"\n  (input)=\"question.onCommentInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ question.comment }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SurveyCommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [attr.max-length]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.placeholder]=\"question.commentOrOtherPlaceholder\" \n  [value]=\"comment\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"question.onCommentChange($event)\"\n  (input)=\"question.onCommentInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ question.comment }}</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyCommentComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-comment, '[sv-ng-comment]'", template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [attr.max-length]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.placeholder]=\"question.commentOrOtherPlaceholder\" \n  [value]=\"comment\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"question.onCommentChange($event)\"\n  (input)=\"question.onCommentInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ question.comment }}</div>\n" }]
@@ -750,12 +791,24 @@ class QuestionComponent extends EmbeddedViewContentComponent {
         }
         return this.model.getComponentName();
     }
+    getQuestionContentWrapperComponentName() {
+        return this.model.survey.getQuestionContentWrapperComponentName(this.model) || this.getComponentName();
+    }
+    getQuestionContentWrapperComponentData() {
+        return {
+            componentName: this.getComponentName(),
+            componentData: {
+                model: this.model,
+                data: this.model.survey.getElementWrapperComponentData(this.model)
+            }
+        };
+    }
 }
 QuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.hasTitle ? model.ariaTitleId : null\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getComponentName(), data: { model }, default: 'skeleton-question' }\" ></ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.cssClasses.formGroup\">\n        <div>{{ model.commentText }}</div>\n        <div [question]=\"model\" sv-ng-comment></div>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.hasTitle ? model.ariaTitleId : null\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n      </ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.cssClasses.formGroup\">\n        <div>{{ model.commentText }}</div>\n        <div [question]=\"model\" sv-ng-comment></div>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-question", template: "<ng-template #template>\n  <div #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.hasTitle ? model.ariaTitleId : null\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getComponentName(), data: { model }, default: 'skeleton-question' }\" ></ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.cssClasses.formGroup\">\n        <div>{{ model.commentText }}</div>\n        <div [question]=\"model\" sv-ng-comment></div>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>" }]
+            args: [{ selector: "sv-ng-question", template: "<ng-template #template>\n  <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.hasTitle ? model.ariaTitleId : null\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n      </ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.cssClasses.formGroup\">\n        <div>{{ model.commentText }}</div>\n        <div [question]=\"model\" sv-ng-comment></div>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>" }]
         }], propDecorators: { model: [{
                 type: Input
             }], rootEl: [{
@@ -768,11 +821,16 @@ class StringViewerComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
     }
-    ngOnChanges(changes) {
-        const currentValue = changes["model"].currentValue;
-        const previousValue = changes["model"].previousValue;
-        currentValue.onChanged = () => { this.changeDetectorRef.detectChanges(); };
-        !!previousValue && this.clearOnChanged(previousValue);
+    ngDoCheck() {
+        if (this.model !== this.previousModel) {
+            if (!!this.previousModel) {
+                this.clearOnChanged(this.previousModel);
+            }
+            if (!!this.model) {
+                this.model.onChanged = () => { this.changeDetectorRef.detectChanges(); };
+            }
+            this.previousModel = this.model;
+        }
     }
     clearOnChanged(model) {
         model.onChanged = () => { };
@@ -782,7 +840,7 @@ class StringViewerComponent {
     }
 }
 StringViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringViewerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StringViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StringViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, ngImport: i0, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""] }]
@@ -791,6 +849,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }] } });
 AngularComponentFactory.Instance.registerComponent(LocalizableString.defaultRenderer, StringViewerComponent);
 
+class PopupPointerComponent extends BaseAngular {
+    get popupModel() {
+        return this.model;
+    }
+    getModel() {
+        return this.model;
+    }
+}
+PopupPointerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupPointerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PopupPointerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupPointerComponent, selector: "sv-ng-popup-pointer, '[sv-ng-popup-pointer]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<span class=\"sv-popup__pointer\" [style]=\"{ left: popupModel.pointerTarget.left, top: popupModel.pointerTarget.top }\"></span>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupPointerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sv-ng-popup-pointer, '[sv-ng-popup-pointer]'", template: "<span class=\"sv-popup__pointer\" [style]=\"{ left: popupModel.pointerTarget.left, top: popupModel.pointerTarget.top }\"></span>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("popup-pointer", PopupPointerComponent);
+
 class PopupComponent extends BaseAngular {
     constructor(viewContainerRef, changeDetectorRef, popupService) {
         super(changeDetectorRef, viewContainerRef);
@@ -799,17 +875,24 @@ class PopupComponent extends BaseAngular {
     getModel() {
         return this.popupModel;
     }
-    ngOnInit() {
+    onModelChanged() {
         var _a;
-        this.model = new PopupBaseViewModel(this.popupModel, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.parentElement);
+        this.destroyModel();
+        this.model = createPopupViewModel(this.popupModel, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.parentElement);
         this.model.initializePopupContainer();
         this.portalHost = this.popupService.createComponent(this.model);
     }
+    ngOnInit() {
+        this.onModelChanged();
+    }
+    destroyModel() {
+        var _a, _b;
+        (_a = this.portalHost) === null || _a === void 0 ? void 0 : _a.detach();
+        (_b = this.model) === null || _b === void 0 ? void 0 : _b.unmountPopupContainer();
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this.portalHost.detach();
-        this.model.container.remove();
-        this.model.unmountPopupContainer();
+        this.destroyModel();
     }
 }
 PopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: PopupService }], target: i0.ɵɵFactoryTarget.Component });
@@ -842,7 +925,7 @@ class SvgIconComponent {
     }
     createSvg() {
         if (!!this.iconName) {
-            Survey.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement);
+            Survey.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement, this.title);
         }
     }
     get rootClass() {
@@ -949,10 +1032,10 @@ class DropdownComponent extends BaseAngular {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.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.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: 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: "13.0.3", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.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.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.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: "13.0.3", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.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.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\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>" }]
+            args: [{ selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.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.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>" }]
         }], propDecorators: { model: [{
                 type: Input
             }], inputElementRef: [{
@@ -966,7 +1049,7 @@ class TagboxFilterComponent extends BaseAngular {
     }
 }
 TagboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <input\n    type=\"text\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"model.filterString\"\n    [attr.id]=\"question.getInputId()\"\n    [class]=\"question.cssClasses.filterStringInput\"\n    [attr.readonly]=\"!model.searchEnabled ? true : null\"\n    [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n    [attr.size]=\"!model.filterString ? 1 : null\"\n    [attr.placeholder]=\"model.filterStringPlaceholder\"\n    (keydown)=\"model.inputKeyHandler($event)\"\n    (blur)=\"model.onBlur($event)\"\n  />\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ 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: "13.0.3", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <input\n    type=\"text\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"model.filterString\"\n    [attr.id]=\"question.getInputId()\"\n    [class]=\"question.cssClasses.filterStringInput\"\n    [attr.readonly]=\"!model.searchEnabled ? true : null\"\n    [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n    [attr.size]=\"!model.filterString ? 1 : null\"\n    [attr.placeholder]=\"model.filterStringPlaceholder\"\n    (keydown)=\"model.inputKeyHandler($event)\"\n    (blur)=\"model.onBlur($event)\"\n  />\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-tagbox-filter", template: "<ng-template #template>\n  <input\n    type=\"text\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"model.filterString\"\n    [attr.id]=\"question.getInputId()\"\n    [class]=\"question.cssClasses.filterStringInput\"\n    [attr.readonly]=\"!model.searchEnabled ? true : null\"\n    [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n    [attr.size]=\"!model.filterString ? 1 : null\"\n    [attr.placeholder]=\"model.filterStringPlaceholder\"\n    (keydown)=\"model.inputKeyHandler($event)\"\n    (blur)=\"model.onBlur($event)\"\n  />\n</ng-template>\n", styles: [":host{display:none}\n"] }]
@@ -1030,10 +1113,10 @@ class TagboxComponent {
     }
 }
 TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.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: "13.0.3", ngImport: i0, type: TagboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>" }]
+            args: [{ selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n</div>" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1044,7 +1127,7 @@ class DropdownOptionItemComponent extends BaseAngular {
     }
 }
 DropdownOptionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownOptionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownOptionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownOptionItemComponent, selector: "sv-ng-dropdown-option-item, '[sv-ng-dropdown-option-item]'", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: '<ng-template #template><option [value]="item.value" [disabled]="!item.isEnabled">{{ item.text }}</option><ng-template>', isInline: true, directives: [{ type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+DropdownOptionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownOptionItemComponent, selector: "sv-ng-dropdown-option-item, '[sv-ng-dropdown-option-item]'", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: '<ng-template #template><option [value]="item.value" [disabled]="!item.isEnabled">{{ item.text }}</option><ng-template>', isInline: true, directives: [{ type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownOptionItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1076,7 +1159,7 @@ class DropdownSelectComponent {
     }
 }
 DropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\">\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n      [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n      [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autoComplete\" [required]=\"model.isRequired\"\n      [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n      [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\">\n      <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n      <ng-template *ngFor=\"let item of model.visibleChoices\" [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n    </select>\n    <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n  </div>\n  <div *ngIf=\" model.isOtherSelected\" class=\"form-group\"\n    [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment></div>\n</div>", components: [{ type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+DropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\">\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n      [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n      [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autoComplete\" [required]=\"model.isRequired\"\n      [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n      [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\">\n      <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n      <ng-template *ngFor=\"let item of model.visibleChoices\" [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n    </select>\n    <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n  </div>\n  <div *ngIf=\" model.isOtherSelected\" class=\"form-group\"\n    [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment></div>\n</div>", components: [{ type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-dropdown-select-question", template: "<div [class]=\"model.renderCssRoot\">\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n      [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n      [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autoComplete\" [required]=\"model.isRequired\"\n      [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n      [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\">\n      <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n      <ng-template *ngFor=\"let item of model.visibleChoices\" [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n    </select>\n    <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n  </div>\n  <div *ngIf=\" model.isOtherSelected\" class=\"form-group\"\n    [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment></div>\n</div>" }]
@@ -1095,12 +1178,12 @@ class SafeUrlPipe {
         return this.domSanitizer.bypassSecurityTrustUrl(url);
     }
 }
-SafeUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
 SafeUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeUrlPipe, name: "safeUrl" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeUrlPipe, decorators: [{
             type: Pipe,
             args: [{ name: "safeUrl" }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
 class SafeResourceUrlPipe {
     constructor(domSanitizer) {
         this.domSanitizer = domSanitizer;
@@ -1109,12 +1192,12 @@ class SafeResourceUrlPipe {
         return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
     }
 }
-SafeResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeResourceUrlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeResourceUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
 SafeResourceUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeResourceUrlPipe, name: "safeResourceUrl" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeResourceUrlPipe, decorators: [{
             type: Pipe,
             args: [{ name: "safeResourceUrl" }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
 
 class LogoImageComponent extends EmbeddedViewContentComponent {
     get survey() {
@@ -1176,7 +1259,7 @@ class TextQuestionComponent extends QuestionAngular {
     }
 }
 TextQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0, template: "  <input *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\" [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\"\n  (change)=\"onChange($event)\" [attr.value]=\"model.value\" [disabled]=\"model.isInputReadOnly\" name=\"user\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n  (keyup)=\"keyup($event)\" [attr.size] = \"model.renderedInputSize\" [attr.max-length]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n    [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autoComplete\"\n    [attr.ar] #contentElement/>\n  <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\" #contentElement>\n    <input\n      [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\"\n      (change)=\"onChange($event)\" [attr.value]=\"model.value\"\n      [disabled]=\"model.isInputReadOnly\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n      (keyup)=\"keyup($event)\" [attr.size] = \"model.renderedInputSize\" [attr.max-length]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n      [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n      [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autoComplete\"\n    />\n    <datalist [id]=\"model.dataListId\">\n      <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n    </datalist>\n  </div>\n  <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "13.0.3", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0, template: "  <input *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\" [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\"\n  (change)=\"onChange($event)\" [attr.value]=\"model.value\" [disabled]=\"model.isInputReadOnly\" name=\"user\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n  (keyup)=\"keyup($event)\" [attr.size] = \"model.renderedInputSize\" [attr.max-length]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n    [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autoComplete\"\n    [attr.ar] #contentElement/>\n  <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\" #contentElement>\n    <input\n      [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\"\n      (change)=\"onChange($event)\" [attr.value]=\"model.value\"\n      [disabled]=\"model.isInputReadOnly\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n      (keyup)=\"keyup($event)\" [attr.size] = \"model.renderedInputSize\" [attr.max-length]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n      [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n      [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autoComplete\"\n    />\n    <datalist [id]=\"model.dataListId\">\n      <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n    </datalist>\n  </div>\n  <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-text-question", template: "  <input *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\" [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\"\n  (change)=\"onChange($event)\" [attr.value]=\"model.value\" [disabled]=\"model.isInputReadOnly\" name=\"user\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n  (keyup)=\"keyup($event)\" [attr.size] = \"model.renderedInputSize\" [attr.max-length]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n    [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autoComplete\"\n    [attr.ar] #contentElement/>\n  <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\" #contentElement>\n    <input\n      [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\"\n      (change)=\"onChange($event)\" [attr.value]=\"model.value\"\n      [disabled]=\"model.isInputReadOnly\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n      (keyup)=\"keyup($event)\" [attr.size] = \"model.renderedInputSize\" [attr.max-length]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n      [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n      [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autoComplete\"\n    />\n    <datalist [id]=\"model.dataListId\">\n      <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n    </datalist>\n  </div>\n  <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>\n", styles: [""] }]
@@ -1191,12 +1274,12 @@ class SafeHtmlPipe {
         return this.domSanitizer.bypassSecurityTrustHtml(url);
     }
 }
-SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
 SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{ name: "safeHtml" }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
 
 class HtmlQuestionComponent extends QuestionAngular {
     onModelChanged() {
@@ -1243,7 +1326,7 @@ class SelectBaseComponent extends QuestionAngular {
     }
 }
 SelectBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+SelectBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectBaseComponent, decorators: [{
             type: Component,
             args: [{ selector: "['sv-ng-selectbase']", template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>" }]
@@ -1260,7 +1343,7 @@ class RadiogroupComponent extends SelectBaseComponent {
     }
 }
 RadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RadiogroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RadiogroupComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-radiogroup-question", template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>" }]
@@ -1272,7 +1355,7 @@ class RadiogroupItemComponent {
     }
 }
 RadiogroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RadiogroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadiogroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2$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: "13.0.3", 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\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RadiogroupItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", template: "<input type=\"radio\" [name]=\"question.questionName\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""] }]
@@ -1285,7 +1368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class CheckboxComponent extends SelectBaseComponent {
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", components: [{ type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-checkbox-question", template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" role=\"presentation\" #contentElement>\n  <legend *ngIf=\"showLegend\" role=\"presentation\" class=\"sv-hidden\"></legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>" }]
@@ -1315,7 +1398,7 @@ class CheckboxItemComponent {
     }
 }
 CheckboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CheckboxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model" }, ngImport: i0, template: "<input *ngIf=\"model == question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isAllSelected\" [value]=\"''\" (change)=\"onSelectAllChange($event)\"/>\n<input *ngIf=\"model != question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model" }, ngImport: i0, template: "<input *ngIf=\"model == question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isAllSelected\" [value]=\"''\" (change)=\"onSelectAllChange($event)\"/>\n<input *ngIf=\"model != question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CheckboxItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", template: "<input *ngIf=\"model == question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isAllSelected\" [value]=\"''\" (change)=\"onSelectAllChange($event)\"/>\n<input *ngIf=\"model != question.selectAllItem\" type=\"checkbox\" [name]=\"question.name\" [id]=\"question.getItemId(model)\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [class]=\"question.cssClasses.itemControl\"\n  [disabled]=\"!question.getItemEnabled(model)\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""] }]
@@ -1328,7 +1411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class DropdownQuestionComponent extends QuestionAngular {
 }
 DropdownQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownQuestionComponent, selector: "sv-ng-dropdown-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\" #contentElement>\n  <sv-ng-dropdown [model]=\"model\"></sv-ng-dropdown>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n</div>", components: [{ type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DropdownQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownQuestionComponent, selector: "sv-ng-dropdown-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\" #contentElement>\n  <sv-ng-dropdown [model]=\"model\"></sv-ng-dropdown>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n</div>", components: [{ type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-dropdown-question", template: "<div [class]=\"model.renderCssRoot\" #contentElement>\n  <sv-ng-dropdown [model]=\"model\"></sv-ng-dropdown>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n</div>" }]
@@ -1338,7 +1421,7 @@ AngularComponentFactory.Instance.registerComponent("dropdown-question", Dropdown
 class TagboxQuestionComponent extends QuestionAngular {
 }
 TagboxQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TagboxQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxQuestionComponent, selector: "sv-ng-tagbox-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\" #contentElement>\n  <sv-ng-tagbox [model]=\"model\"></sv-ng-tagbox>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n</div>", components: [{ type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TagboxQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxQuestionComponent, selector: "sv-ng-tagbox-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\" #contentElement>\n  <sv-ng-tagbox [model]=\"model\"></sv-ng-tagbox>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n</div>", components: [{ type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-tagbox-question", template: "<div [class]=\"model.renderCssRoot\" #contentElement>\n  <sv-ng-tagbox [model]=\"model\"></sv-ng-tagbox>\n  <div *ngIf=\"model.isOtherSelected\" class=\"form-group\" [question]=\"model\" sv-ng-comment></div>\n</div>" }]
@@ -1355,7 +1438,7 @@ class RatingQuestionComponent extends QuestionAngular {
     }
 }
 RatingQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RatingQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RatingQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RatingQuestionComponent, selector: "sv-ng-rating-question", usesInheritance: true, ngImport: i0, template: "  <div [class]=\"model.ratingRootCss\" #contentElement>\n      <fieldset role=\"radiogroup\">\n          <legend role=\"presentation\" class=\"sv-hidden\"></legend>\n          <span *ngIf=\"model.hasMinLabel\" [class]=\"model.cssClasses.minText\" [model]=\"model.locMinRateDescription\" sv-ng-string>\n          </span>\n          <label *ngFor=\"let item of model.renderedRateItems; index as index; trackBy: trackByFn\" [class]=\"model.getItemClass(item.itemValue)\" >\n            <input type=\"radio\"\n              class=\"sv-visuallyhidden\"\n              [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n              [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n              />\n              <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n          </label>\n          <span *ngIf=\"model.hasMaxLabel\" [class]=\"model.cssClasses.maxText\" [model]=\"model.locMaxRateDescription\" sv-ng-string></span>\n      </fieldset>\n  </div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+RatingQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RatingQuestionComponent, selector: "sv-ng-rating-question", usesInheritance: true, ngImport: i0, template: "  <div [class]=\"model.ratingRootCss\" #contentElement>\n      <fieldset role=\"radiogroup\">\n          <legend role=\"presentation\" class=\"sv-hidden\"></legend>\n          <span *ngIf=\"model.hasMinLabel\" [class]=\"model.cssClasses.minText\" [model]=\"model.locMinRateDescription\" sv-ng-string>\n          </span>\n          <label *ngFor=\"let item of model.renderedRateItems; index as index; trackBy: trackByFn\" [class]=\"model.getItemClass(item.itemValue)\" >\n            <input type=\"radio\"\n              class=\"sv-visuallyhidden\"\n              [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n              [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n              />\n              <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n          </label>\n          <span *ngIf=\"model.hasMaxLabel\" [class]=\"model.cssClasses.maxText\" [model]=\"model.locMaxRateDescription\" sv-ng-string></span>\n      </fieldset>\n  </div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RatingQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-rating-question", template: "  <div [class]=\"model.ratingRootCss\" #contentElement>\n      <fieldset role=\"radiogroup\">\n          <legend role=\"presentation\" class=\"sv-hidden\"></legend>\n          <span *ngIf=\"model.hasMinLabel\" [class]=\"model.cssClasses.minText\" [model]=\"model.locMinRateDescription\" sv-ng-string>\n          </span>\n          <label *ngFor=\"let item of model.renderedRateItems; index as index; trackBy: trackByFn\" [class]=\"model.getItemClass(item.itemValue)\" >\n            <input type=\"radio\"\n              class=\"sv-visuallyhidden\"\n              [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n              [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n              />\n              <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n          </label>\n          <span *ngIf=\"model.hasMaxLabel\" [class]=\"model.cssClasses.maxText\" [model]=\"model.locMaxRateDescription\" sv-ng-string></span>\n      </fieldset>\n  </div>\n" }]
@@ -1364,14 +1447,14 @@ AngularComponentFactory.Instance.registerComponent("rating-question", RatingQues
 
 class BooleanQuestionComponent extends QuestionAngular {
     onChange(event) {
-        this.model.checkedValue = event.target.value;
+        this.model.booleanValue = event.target.value;
     }
 }
 BooleanQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.checkedValue\" [(ngModel)]=\"model.checkedValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\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: "13.0.3", 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\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanQuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-boolean-question", 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\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.checkedValue\" [(ngModel)]=\"model.checkedValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\n    </label>\n</div>" }]
+            args: [{ selector: "sv-ng-boolean-question", 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\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\n    </label>\n</div>" }]
         }] });
 AngularComponentFactory.Instance.registerComponent("boolean-question", BooleanQuestionComponent);
 
@@ -1405,7 +1488,7 @@ class ImagePickerItemComponent extends BaseAngular {
     }
 }
 ImagePickerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ImagePickerItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ImagePickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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-describedby]=\"question.ariaDescribedBy\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <img *ngIf=\"model.locImageLink.renderedHtml && 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)\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && 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)\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth\" [style.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\">\n                <svg [class]=\"question.cssClasses.itemNoImageSvgIcon\" *ngIf=\"question.cssClasses.itemNoImageSvgIcon\">\n                  <use [attr.xlink:href]=\"question.cssClasses.itemNoImageSvgIconId\"></use>\n                </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}\n"], components: [{ 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: "13.0.3", 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-describedby]=\"question.ariaDescribedBy\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <img *ngIf=\"model.locImageLink.renderedHtml && 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)\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && 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)\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth\" [style.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\">\n                <svg [class]=\"question.cssClasses.itemNoImageSvgIcon\" *ngIf=\"question.cssClasses.itemNoImageSvgIcon\">\n                  <use [attr.xlink:href]=\"question.cssClasses.itemNoImageSvgIconId\"></use>\n                </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}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ImagePickerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-imagepicker-item", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div [class]=\"question.getItemClass(model)\">\n    <label [class]=\"question.cssClasses.label\">\n        <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-describedby]=\"question.ariaDescribedBy\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <img *ngIf=\"model.locImageLink.renderedHtml && 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)\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && 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)\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth\" [style.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\">\n                <svg [class]=\"question.cssClasses.itemNoImageSvgIcon\" *ngIf=\"question.cssClasses.itemNoImageSvgIcon\">\n                  <use [attr.xlink:href]=\"question.cssClasses.itemNoImageSvgIconId\"></use>\n                </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>" }]
@@ -1432,7 +1515,7 @@ class ImagePickerQuestionComponent extends QuestionAngular {
     }
 }
 ImagePickerQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ImagePickerQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ImagePickerQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ImagePickerQuestionComponent, selector: "sv-ng-imagepicker-question", usesInheritance: true, ngImport: i0, template: "  <fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\" role=\"radio\"></legend>\n      <ng-container *ngIf=\"!model.hasColumns\">\n        <ng-container *ngFor=\"let item of model.visibleChoices\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"model.hasColumns\">\n        <div *ngFor=\"let column of model.columns\" [class]=\"model.getColumnClass()\" role=\"presentation\">\n          <ng-container *ngFor=\"let item of column\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n  </fieldset>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ImagePickerQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ImagePickerQuestionComponent, selector: "sv-ng-imagepicker-question", usesInheritance: true, ngImport: i0, template: "  <fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\" role=\"radio\"></legend>\n      <ng-container *ngIf=\"!model.hasColumns\">\n        <ng-container *ngFor=\"let item of model.visibleChoices\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"model.hasColumns\">\n        <div *ngFor=\"let column of model.columns\" [class]=\"model.getColumnClass()\" role=\"presentation\">\n          <ng-container *ngFor=\"let item of column\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n  </fieldset>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ImagePickerQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-imagepicker-question", template: "  <fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\" role=\"radio\"></legend>\n      <ng-container *ngIf=\"!model.hasColumns\">\n        <ng-container *ngFor=\"let item of model.visibleChoices\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"model.hasColumns\">\n        <div *ngFor=\"let column of model.columns\" [class]=\"model.getColumnClass()\" role=\"presentation\">\n          <ng-container *ngFor=\"let item of column\">\n            <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n  </fieldset>" }]
@@ -1448,7 +1531,7 @@ class ButtonGroupItemComponent extends BaseAngular {
     }
 }
 ButtonGroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ButtonGroupItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: { item: "item", question: "question", index: "index" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template>\n  <label role=\"radio\" [class]=\"model.css.label\" [attr.title]=\"model.caption.renderedHtml\">\n    <input type=\"radio\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.id\" [attr.aria-required]=\"model.isRequired\" [attr.aria-label]=\"model.caption.renderedHtml\" role=\"radio\" [attr.aria-invalid]=\"model.hasErrors\" [attr.aria-describedby]=\"model.describedBy\" [disabled]=\"model.readOnly\" [class]=\"model.css.control\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"/>\n    <div data-bind=\"css: model.css.decorator\">\n      <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [class]=\"model.css.icon\" sv-ng-svg-icon></svg>\n      <span [class]=\"model.css.caption\" *ngIf=\"model.showCaption\" [attr.title]=\"model.caption.renderedHtml\" sv-ng-string [model]=\"model.caption\">\n      </span>\n    </div>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$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"] }] });
+ButtonGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: { item: "item", question: "question", index: "index" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template>\n  <label role=\"radio\" [class]=\"model.css.label\" [attr.title]=\"model.caption.renderedHtml\">\n    <input type=\"radio\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.id\" [attr.aria-required]=\"model.isRequired\" [attr.aria-label]=\"model.caption.renderedHtml\" role=\"radio\" [attr.aria-invalid]=\"model.hasErrors\" [attr.aria-describedby]=\"model.describedBy\" [disabled]=\"model.readOnly\" [class]=\"model.css.control\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"/>\n    <div data-bind=\"css: model.css.decorator\">\n      <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [class]=\"model.css.icon\" sv-ng-svg-icon></svg>\n      <span [class]=\"model.css.caption\" *ngIf=\"model.showCaption\" [attr.title]=\"model.caption.renderedHtml\" sv-ng-string [model]=\"model.caption\">\n      </span>\n    </div>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ButtonGroupItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-button-group-item", template: "<ng-template #template>\n  <label role=\"radio\" [class]=\"model.css.label\" [attr.title]=\"model.caption.renderedHtml\">\n    <input type=\"radio\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.id\" [attr.aria-required]=\"model.isRequired\" [attr.aria-label]=\"model.caption.renderedHtml\" role=\"radio\" [attr.aria-invalid]=\"model.hasErrors\" [attr.aria-describedby]=\"model.describedBy\" [disabled]=\"model.readOnly\" [class]=\"model.css.control\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"/>\n    <div data-bind=\"css: model.css.decorator\">\n      <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [class]=\"model.css.icon\" sv-ng-svg-icon></svg>\n      <span [class]=\"model.css.caption\" *ngIf=\"model.showCaption\" [attr.title]=\"model.caption.renderedHtml\" sv-ng-string [model]=\"model.caption\">\n      </span>\n    </div>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -1463,7 +1546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ButtonGroupQuestionComponent extends QuestionAngular {
 }
 ButtonGroupQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ButtonGroupQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ButtonGroupQuestionComponent, selector: "sv-ng-buttongroup-question", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [class]=\"model.cssClasses.root\">\n  <sv-button-group-item *ngFor=\"let item of model.visibleChoices; index as index\" [question]=\"model\" [item]=\"item\" [index]=\"index\" ></sv-button-group-item>\n</div>\n", components: [{ type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: ["item", "question", "index"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ButtonGroupQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ButtonGroupQuestionComponent, selector: "sv-ng-buttongroup-question", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [class]=\"model.cssClasses.root\">\n  <sv-button-group-item *ngFor=\"let item of model.visibleChoices; index as index\" [question]=\"model\" [item]=\"item\" [index]=\"index\" ></sv-button-group-item>\n</div>\n", components: [{ type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: ["item", "question", "index"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ButtonGroupQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-buttongroup-question", template: "<div role=\"group\" [class]=\"model.cssClasses.root\">\n  <sv-button-group-item *ngFor=\"let item of model.visibleChoices; index as index\" [question]=\"model\" [item]=\"item\" [index]=\"index\" ></sv-button-group-item>\n</div>\n" }]
@@ -1541,7 +1624,7 @@ class ActionBarItemComponent extends BaseAngular {
     }
 }
 ActionBarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarItemComponent, selector: "sv-action-bar-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\" \n    data-bind=\"key2click: { processEsc: false }\">\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<ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ActionBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarItemComponent, selector: "sv-action-bar-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\" \n    data-bind=\"key2click: { processEsc: false }\">\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<ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-action-bar-item", template: "<ng-template #template>\n  <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\" \n    data-bind=\"key2click: { processEsc: false }\">\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<ng-template>", styles: [":host{display:none}\n"] }]
@@ -1564,7 +1647,7 @@ class ActionBarItemDropdownComponent extends BaseAngular {
     }
 }
 ActionBarItemDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarItemDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionBarItemDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\">\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        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </button>\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"] }], 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: "13.0.3", 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()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\">\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        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </button>\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"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarItemDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-action-bar-item-dropdown", template: "<ng-template #template>\n    <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\">\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        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </button>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -1583,7 +1666,7 @@ class SelectBaseItemComponent extends BaseAngular {
     }
 }
 SelectBaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectBaseItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectBaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\">\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" [visible]=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span> \n    </ng-template>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+SelectBaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\">\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" [visible]=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span> \n    </ng-template>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectBaseItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\">\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" [class]=\"question.getLabelClass(model)\"  [attr.aria-label]=\"question.getAriaItemLabel(model)\" [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" [visible]=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span> \n    </ng-template>\n  </div>\n</ng-template>" }]
@@ -1620,7 +1703,7 @@ class ListItemComponent extends BaseAngular {
     }
 }
 ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [attr.aria-selected]=\"ariaSelected\" (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.paddingLeft]=\"paddingLeft\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" [class]=\"listModel.cssClasses.itemIcon\" [iconName]=\"model.iconName\" [size]=\"24\"\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: "13.0.3", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [attr.aria-selected]=\"ariaSelected\" (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.paddingLeft]=\"paddingLeft\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" [class]=\"listModel.cssClasses.itemIcon\" [iconName]=\"model.iconName\" [size]=\"24\"\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-list-item, '[sv-ng-list-item]'", template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [attr.aria-selected]=\"ariaSelected\" (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.paddingLeft]=\"paddingLeft\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" [class]=\"listModel.cssClasses.itemIcon\" [iconName]=\"model.iconName\" [size]=\"24\"\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"] }]
@@ -1651,7 +1734,7 @@ class ListComponent extends BaseAngular {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.root\">\n        <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n            <div [class]=\"model.cssClasses.filterIcon\">\n                <svg [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </div>\n            <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n                [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n                [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n                (keyup)=\"onGoToItems($event)\" />\n        </div>\n        <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n            <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n        </div>\n        <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n            <sv-ng-list-item *ngFor=\"let item of model.renderedActions\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n            <!--ko foreach: model.renderedActions -->\n            <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n            <!-- /ko -->\n            <!-- /ko -->\n        </ul>\n    </div>\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: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], 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"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.root\">\n        <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n            <div [class]=\"model.cssClasses.filterIcon\">\n                <svg [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </div>\n            <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n                [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n                [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n                (keyup)=\"onGoToItems($event)\" />\n        </div>\n        <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n            <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n        </div>\n        <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n            <sv-ng-list-item *ngFor=\"let item of model.renderedActions\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n            <!--ko foreach: model.renderedActions -->\n            <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n            <!-- /ko -->\n            <!-- /ko -->\n        </ul>\n    </div>\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: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-list, '[sv-ng-list]'", template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.root\">\n        <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n            <div [class]=\"model.cssClasses.filterIcon\">\n                <svg [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </div>\n            <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n                [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n                [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n                (keyup)=\"onGoToItems($event)\" />\n        </div>\n        <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n            <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n        </div>\n        <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n            <sv-ng-list-item *ngFor=\"let item of model.renderedActions\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n            <!--ko foreach: model.renderedActions -->\n            <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n            <!-- /ko -->\n            <!-- /ko -->\n        </ul>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -1676,10 +1759,10 @@ RendererFactory.Instance.registerRenderer("rating", "dropdown", "rating-dropdown
 class BooleanCheckboxComponent {
 }
 BooleanCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.checkedValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.checkedValue\" [value]=\"model.checkedValue\"\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.titleLocation === 'hidden'\" [class]=\"model.cssClasses.checkboxControlLabel\" [model]=\"model.locDisplayLabel\" sv-ng-string></span>\n    </label>\n  </div>\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"] }] });
+BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.titleLocation === 'hidden'\" [class]=\"model.cssClasses.checkboxControlLabel\" [model]=\"model.locDisplayLabel\" sv-ng-string></span>\n    </label>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-boolean-checkbox-question", 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.checkedValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.checkedValue\" [value]=\"model.checkedValue\"\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.titleLocation === 'hidden'\" [class]=\"model.cssClasses.checkboxControlLabel\" [model]=\"model.locDisplayLabel\" sv-ng-string></span>\n    </label>\n  </div>\n</div>" }]
+            args: [{ selector: "sv-ng-boolean-checkbox-question", template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.titleLocation === 'hidden'\" [class]=\"model.cssClasses.checkboxControlLabel\" [model]=\"model.locDisplayLabel\" sv-ng-string></span>\n    </label>\n  </div>\n</div>" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1691,7 +1774,7 @@ class BooleanRadioItemComponent {
     }
 }
 BooleanRadioItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanRadioItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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-describedby]=\"question.ariaDescribedBy\" [value]=\"value\" [(ngModel)]=\"question.value\"\n      [disabled]=\"question.isInputReadOnly\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\"></span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$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: "13.0.3", 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-describedby]=\"question.ariaDescribedBy\" [value]=\"value\" [(ngModel)]=\"question.value\"\n      [disabled]=\"question.isInputReadOnly\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\"></span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanRadioItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-boolean-radio-item", template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n  <label [class]=\"question.cssClasses.radioLabel\">\n    <input\n      type=\"radio\"\n      [attr.name]=\"question.name\" [attr.aria-describedby]=\"question.ariaDescribedBy\" [value]=\"value\" [(ngModel)]=\"question.value\"\n      [disabled]=\"question.isInputReadOnly\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\"></span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n" }]
@@ -1789,7 +1872,7 @@ class ProgressButtonsComponent {
     }
 }
 ProgressButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ProgressButtonsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ProgressButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.css.progressButtonsContainerCenter\">\n  <div [class]=\"model.css.progressButtonsContainer\">\n    <div\n      [class]=\"getScrollButtonCss(true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"model.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"model.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of model.visiblePages; index as index\"\n          [class]=\"getListElementCss(index)\"\n          (click)=\"isListElementClickable(index) ? clickListElement(index) : null\">\n          <div\n            [class]=\"model.css.progressButtonsPageTitle\"\n            [title]=\"page.locNavigationTitle.renderedHtml || page.name\"\n          >\n            {{ page.locNavigationTitle.renderedHtml || page.name }}\n          </div>\n          <div\n            [class]=\"model.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"getScrollButtonCss(false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n</div>", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ProgressButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.css.progressButtonsContainerCenter\">\n  <div [class]=\"model.css.progressButtonsContainer\">\n    <div\n      [class]=\"getScrollButtonCss(true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"model.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"model.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of model.visiblePages; index as index\"\n          [class]=\"getListElementCss(index)\"\n          (click)=\"isListElementClickable(index) ? clickListElement(index) : null\">\n          <div\n            [class]=\"model.css.progressButtonsPageTitle\"\n            [title]=\"page.locNavigationTitle.renderedHtml || page.name\"\n          >\n            {{ page.locNavigationTitle.renderedHtml || page.name }}\n          </div>\n          <div\n            [class]=\"model.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"getScrollButtonCss(false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n</div>", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ProgressButtonsComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-progress-buttons", template: "<div [class]=\"model.css.progressButtonsContainerCenter\">\n  <div [class]=\"model.css.progressButtonsContainer\">\n    <div\n      [class]=\"getScrollButtonCss(true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"model.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"model.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of model.visiblePages; index as index\"\n          [class]=\"getListElementCss(index)\"\n          (click)=\"isListElementClickable(index) ? clickListElement(index) : null\">\n          <div\n            [class]=\"model.css.progressButtonsPageTitle\"\n            [title]=\"page.locNavigationTitle.renderedHtml || page.name\"\n          >\n            {{ page.locNavigationTitle.renderedHtml || page.name }}\n          </div>\n          <div\n            [class]=\"model.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"getScrollButtonCss(false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n</div>" }]
@@ -1819,10 +1902,10 @@ class PanelComponent extends BaseAngular {
     }
 }
 PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.isVisible\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <!-- ko template: { name: 'survey-question-errors', data: $data } -->\n    <!-- /ko -->\n    <div *ngIf=\"!model.isCollapsed\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" [attr.id]=\"model.contentId\">\n      <ng-container *ngFor=\"let row of model.rows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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"] }] });
+PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"!!model && model.isVisible\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <!-- ko template: { name: 'survey-question-errors', data: $data } -->\n    <!-- /ko -->\n    <div *ngIf=\"!model.isCollapsed\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" [attr.id]=\"model.contentId\">\n      <ng-container *ngFor=\"let row of model.rows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-panel, '[sv-ng-panel]'", template: "<ng-template #template>\n  <div *ngIf=\"model.isVisible\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <!-- ko template: { name: 'survey-question-errors', data: $data } -->\n    <!-- /ko -->\n    <div *ngIf=\"!model.isCollapsed\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" [attr.id]=\"model.contentId\">\n      <ng-container *ngFor=\"let row of model.rows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>" }]
+            args: [{ selector: "sv-ng-panel, '[sv-ng-panel]'", template: "<ng-template #template>\n  <div *ngIf=\"!!model && model.isVisible\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <!-- ko template: { name: 'survey-question-errors', data: $data } -->\n    <!-- /ko -->\n    <div *ngIf=\"!model.isCollapsed\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" [attr.id]=\"model.contentId\">\n      <ng-container *ngFor=\"let row of model.rows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>" }]
         }], propDecorators: { model: [{
                 type: Input
             }], panelContainerRef: [{
@@ -1840,7 +1923,7 @@ class SurveyNavigationButton {
     }
 }
 SurveyNavigationButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyNavigationButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SurveyNavigationButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyNavigationButton, selector: "sv-ng-nav-btn", inputs: { model: "model" }, ngImport: i0, template: "<input *ngIf=\"model.visible\" type=\"button\" [value]=\"model.title\" [class]=\"model.innerCss\" (mousedown)=\"buttonMouseDown()\" (click)=\"model.action()\" [disabled]=\"model.disabled\"/>", styles: [":host{display:contents}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SurveyNavigationButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SurveyNavigationButton, selector: "sv-ng-nav-btn", inputs: { model: "model" }, ngImport: i0, template: "<input *ngIf=\"model.visible\" type=\"button\" [value]=\"model.title\" [class]=\"model.innerCss\" (mousedown)=\"buttonMouseDown()\" (click)=\"model.action()\" [disabled]=\"model.disabled\"/>", styles: [":host{display:contents}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyNavigationButton, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-nav-btn", styles: [":host { display: contents; }"], template: "<input *ngIf=\"model.visible\" type=\"button\" [value]=\"model.title\" [class]=\"model.innerCss\" (mousedown)=\"buttonMouseDown()\" (click)=\"model.action()\" [disabled]=\"model.disabled\"/>" }]
@@ -1870,7 +1953,7 @@ class MatrixQuestionComponent extends QuestionAngular {
     }
 }
 MatrixQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n    <fieldset>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n      <table [class]=\"model.getTableCss()\">\n        <thead *ngIf=\"model.showHeader\">\n          <tr>\n            <td [visible]=\"model.hasRows\"></td>\n            <th\n              *ngFor=\"let column of model.visibleColumns\" [class]=\"model.cssClasses.headerCell\">\n              <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n                <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n              </ng-template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n           <td [class]=\"model.cssClasses.rowTextCell\" *ngIf=\"model.hasRows\">\n              <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n                <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n              </ng-template>\n            </td>\n            <ng-container *ngIf=\"model.hasCellText\">\n              <td *ngFor=\"let column of model.visibleColumns\"\n                [class]=\"model.getItemClass(row, column)\"\n                (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!model.hasCellText\">\n              <td\n              *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n              [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n              [class]=\"model.cssClasses.cell\">\n                <label [class]=\"model.getItemClass(row, column)\">\n                  <input\n                    type=\"radio\"\n                    [class]=\"model.cssClasses.itemValue\"\n                    [name]=\"row.fullName\"\n                    [value]=\"column.value\"\n                    [checked]=\"row.value === column.value\"\n                    [disabled]=\"model.isInputReadOnly\"\n                    [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n                    (change)=\"onChange(row, column)\"\n                    [attr.aria-required]=\"model.ariaRequired\"\n                    [attr.aria-label]=\"column.locText.renderedHtml\"\n                    [attr.aria-invalid]=\"model.ariaInvalid\"\n                    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n                  />\n                  <span [class]=\"model.cssClasses.materialDecorator\">\n                    <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n                      <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n                    </svg> \n                  </span>\n                  <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n                </label>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+MatrixQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n    <fieldset>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n      <table [class]=\"model.getTableCss()\">\n        <thead *ngIf=\"model.showHeader\">\n          <tr>\n            <td [visible]=\"model.hasRows\"></td>\n            <th\n              *ngFor=\"let column of model.visibleColumns\" [class]=\"model.cssClasses.headerCell\">\n              <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n                <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n              </ng-template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n           <td [class]=\"model.cssClasses.rowTextCell\" *ngIf=\"model.hasRows\">\n              <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n                <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n              </ng-template>\n            </td>\n            <ng-container *ngIf=\"model.hasCellText\">\n              <td *ngFor=\"let column of model.visibleColumns\"\n                [class]=\"model.getItemClass(row, column)\"\n                (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!model.hasCellText\">\n              <td\n              *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n              [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n              [class]=\"model.cssClasses.cell\">\n                <label [class]=\"model.getItemClass(row, column)\">\n                  <input\n                    type=\"radio\"\n                    [class]=\"model.cssClasses.itemValue\"\n                    [name]=\"row.fullName\"\n                    [value]=\"column.value\"\n                    [checked]=\"row.value === column.value\"\n                    [disabled]=\"model.isInputReadOnly\"\n                    [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n                    (change)=\"onChange(row, column)\"\n                    [attr.aria-required]=\"model.ariaRequired\"\n                    [attr.aria-label]=\"column.locText.renderedHtml\"\n                    [attr.aria-invalid]=\"model.ariaInvalid\"\n                    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n                  />\n                  <span [class]=\"model.cssClasses.materialDecorator\">\n                    <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n                      <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n                    </svg> \n                  </span>\n                  <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n                </label>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-matrix-question", template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n    <fieldset>\n      <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n      <table [class]=\"model.getTableCss()\">\n        <thead *ngIf=\"model.showHeader\">\n          <tr>\n            <td [visible]=\"model.hasRows\"></td>\n            <th\n              *ngFor=\"let column of model.visibleColumns\" [class]=\"model.cssClasses.headerCell\">\n              <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n                <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n              </ng-template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n           <td [class]=\"model.cssClasses.rowTextCell\" *ngIf=\"model.hasRows\">\n              <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n                <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n              </ng-template>\n            </td>\n            <ng-container *ngIf=\"model.hasCellText\">\n              <td *ngFor=\"let column of model.visibleColumns\"\n                [class]=\"model.getItemClass(row, column)\"\n                (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!model.hasCellText\">\n              <td\n              *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n              [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n              [class]=\"model.cssClasses.cell\">\n                <label [class]=\"model.getItemClass(row, column)\">\n                  <input\n                    type=\"radio\"\n                    [class]=\"model.cssClasses.itemValue\"\n                    [name]=\"row.fullName\"\n                    [value]=\"column.value\"\n                    [checked]=\"row.value === column.value\"\n                    [disabled]=\"model.isInputReadOnly\"\n                    [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n                    (change)=\"onChange(row, column)\"\n                    [attr.aria-required]=\"model.ariaRequired\"\n                    [attr.aria-label]=\"column.locText.renderedHtml\"\n                    [attr.aria-invalid]=\"model.ariaInvalid\"\n                    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n                  />\n                  <span [class]=\"model.cssClasses.materialDecorator\">\n                    <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n                      <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n                    </svg> \n                  </span>\n                  <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n                </label>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -1886,10 +1969,10 @@ class FileQuestionComponent extends QuestionAngular {
     }
 }
 FileQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FileQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input\n    [class]=\"model.cssClasses.fileInput\"\n    *ngIf=\"!model.isReadOnly\"\n    type=\"file\"\n    [attr.id]=\"model.inputId\"\n    (change)=\"model.doChange($event)\"\n    [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\"\n    [attr.accept]=\"model.acceptedTypes\"\n  />\n  <input\n    *ngIf=\"model.isReadOnly\"\n    type=\"file\"\n    disabled\n    [class]=\"model.getReadOnlyFileCss()\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.placeholder]=\"model.title\"\n    style=\"color: transparent\"\n  />\n  <div\n    [class]=\"model.getFileDecoratorCss()\"\n    (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\"\n    (dragleave)=\"model.onDragLeave($event)\"\n  >\n    <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.dragAreaPlaceholder }}</span>\n    <div [class]=\"model.cssClasses.wrapper\">\n      <label\n        role=\"button\"\n        [class]=\"model.getChooseFileCss()\"\n        [attr.for]=\"model.inputId\"\n        [attr.aria-label]=\"model.chooseButtonCaption\"\n        >\n        <span>{{ model.chooseButtonCaption }}</span>\n        <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonCaption\" [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n      </label>\n      <span\n        [class]=\"model.cssClasses.noFileChosen\"\n        *ngIf=\"model.isEmpty()\"\n        >{{ model.noFileChosenCaption }}</span\n      >\n    </div>\n  </div>\n  <button\n    type=\"button\"\n    *ngIf=\"model.showRemoveButton\"\n    [class]=\"model.cssClasses.removeButton\"\n    (click)=\"model.doClean($event)\"\n  >\n    <span>{{ model.cleanButtonCaption }}</span>\n    <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n  <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"!model.isEmpty()\">\n    <span\n      *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n      [visible]=\"val && model.isPreviewVisible(index)\"\n      [class]=\"model.cssClasses.preview\"\n    >\n      <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n        <a\n          (click)=\"model.doDownloadFile($event, val)\"\n          [attr.href]=\"val.content | safeUrl\"\n          [attr.title]=\"val.name\"\n          [attr.download]=\"val.name\"\n          [attr.width]=\"model.imageWidth\"\n          >{{ val.name }}</a\n        >\n      </div>\n      <div [class]=\"model.cssClasses.imageWrapper\">\n        <img\n          *ngIf=\"model.canPreviewImage(val)\"\n          [attr.src]=\"val.content | safeUrl\"\n          [attr.height]=\"model.imageHeight\"\n          [attr.width]=\"model.imageWidth\"\n          alt=\"File preview\"\n        />\n        <svg *ngIf=\"model.defaultImage(val)\" \n          [iconName]=\"model.cssClasses.defaultImageIconId\" [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\" (click)=\"model.doRemoveFile(val)\">\n          <span\n            [class]=\"model.cssClasses.removeFile\"\n            >{{ model.removeFileCaption }}</span\n          >\n          <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\" [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon ></svg>\n        </div>\n      </div>\n      <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n        <a\n          (click)=\"model.doDownloadFile($event, val)\"\n          [attr.href]=\"val.content | safeUrl\"\n          [attr.title]=\"val.name\"\n          [attr.download]=\"val.name\"\n          [attr.width]=\"model.imageWidth\"\n          >{{ val.name }}</a\n        >\n      </div>\n    </span>\n  </div>\n  <button\n    type=\"button\"\n    *ngIf=\"model.showRemoveButtonBottom\"\n    [class]=\"model.showRemoveButtonBottom\"\n    (click)=\"model.doClean($event)\"\n  >\n    <span>{{ model.cleanButtonCaption }}</span>\n    <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n  <sv-action-bar *ngIf=\"model.mobileFileNavigatorVisible\" [model]=\"model.mobileFileNavigator\"></sv-action-bar>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
+FileQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input\n    [class]=\"model.cssClasses.fileInput\"\n    *ngIf=\"!model.isReadOnly\"\n    type=\"file\"\n    [attr.id]=\"model.inputId\"\n    (change)=\"model.doChange($event)\"\n    [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\"\n    [attr.accept]=\"model.acceptedTypes\"\n  />\n  <input\n    *ngIf=\"model.isReadOnly\"\n    type=\"file\"\n    disabled\n    [class]=\"model.getReadOnlyFileCss()\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.placeholder]=\"model.title\"\n    style=\"color: transparent\"\n  />\n  <div [class]=\"model.cssClasses.dragArea\"\n    (dragenter)=\"model.onDragEnter($event)\"\n    (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\"\n    (dragleave)=\"model.onDragLeave($event)\">  \n    <div\n      [class]=\"model.getFileDecoratorCss()\"\n    >\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.dragAreaPlaceholder }}</span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <label\n          role=\"button\"\n          [class]=\"model.getChooseFileCss()\"\n          [attr.for]=\"model.inputId\"\n          [attr.aria-label]=\"model.chooseButtonCaption\"\n          >\n          <span>{{ model.chooseButtonCaption }}</span>\n          <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonCaption\" [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </label>\n        <span\n          [class]=\"model.cssClasses.noFileChosen\"\n          *ngIf=\"model.isEmpty()\"\n          >{{ model.noFileChosenCaption }}</span\n        >\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButton\"\n      [class]=\"model.cssClasses.removeButton\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"!model.isEmpty()\">\n      <span\n        *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n        [visible]=\"val && model.isPreviewVisible(index)\"\n        [class]=\"model.cssClasses.preview\"\n      >\n        <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [attr.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n        <div [class]=\"model.cssClasses.imageWrapper\">\n          <img\n            *ngIf=\"model.canPreviewImage(val)\"\n            [attr.src]=\"val.content | safeUrl\"\n            [attr.height]=\"model.imageHeight\"\n            [attr.width]=\"model.imageWidth\"\n            alt=\"File preview\"\n          />\n          <svg *ngIf=\"model.defaultImage(val)\" \n            [iconName]=\"model.cssClasses.defaultImageIconId\" [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\" (click)=\"model.doRemoveFile(val)\">\n            <span\n              [class]=\"model.cssClasses.removeFile\"\n              >{{ model.removeFileCaption }}</span\n            >\n            <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\" [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon ></svg>\n          </div>\n        </div>\n        <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [attr.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n      </span>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButtonBottom\"\n      [class]=\"model.showRemoveButtonBottom\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <sv-action-bar *ngIf=\"model.mobileFileNavigatorVisible\" [model]=\"model.mobileFileNavigator\"></sv-action-bar>\n  </div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FileQuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-file-question", template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input\n    [class]=\"model.cssClasses.fileInput\"\n    *ngIf=\"!model.isReadOnly\"\n    type=\"file\"\n    [attr.id]=\"model.inputId\"\n    (change)=\"model.doChange($event)\"\n    [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\"\n    [attr.accept]=\"model.acceptedTypes\"\n  />\n  <input\n    *ngIf=\"model.isReadOnly\"\n    type=\"file\"\n    disabled\n    [class]=\"model.getReadOnlyFileCss()\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.placeholder]=\"model.title\"\n    style=\"color: transparent\"\n  />\n  <div\n    [class]=\"model.getFileDecoratorCss()\"\n    (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\"\n    (dragleave)=\"model.onDragLeave($event)\"\n  >\n    <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.dragAreaPlaceholder }}</span>\n    <div [class]=\"model.cssClasses.wrapper\">\n      <label\n        role=\"button\"\n        [class]=\"model.getChooseFileCss()\"\n        [attr.for]=\"model.inputId\"\n        [attr.aria-label]=\"model.chooseButtonCaption\"\n        >\n        <span>{{ model.chooseButtonCaption }}</span>\n        <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonCaption\" [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n      </label>\n      <span\n        [class]=\"model.cssClasses.noFileChosen\"\n        *ngIf=\"model.isEmpty()\"\n        >{{ model.noFileChosenCaption }}</span\n      >\n    </div>\n  </div>\n  <button\n    type=\"button\"\n    *ngIf=\"model.showRemoveButton\"\n    [class]=\"model.cssClasses.removeButton\"\n    (click)=\"model.doClean($event)\"\n  >\n    <span>{{ model.cleanButtonCaption }}</span>\n    <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n  <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"!model.isEmpty()\">\n    <span\n      *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n      [visible]=\"val && model.isPreviewVisible(index)\"\n      [class]=\"model.cssClasses.preview\"\n    >\n      <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n        <a\n          (click)=\"model.doDownloadFile($event, val)\"\n          [attr.href]=\"val.content | safeUrl\"\n          [attr.title]=\"val.name\"\n          [attr.download]=\"val.name\"\n          [attr.width]=\"model.imageWidth\"\n          >{{ val.name }}</a\n        >\n      </div>\n      <div [class]=\"model.cssClasses.imageWrapper\">\n        <img\n          *ngIf=\"model.canPreviewImage(val)\"\n          [attr.src]=\"val.content | safeUrl\"\n          [attr.height]=\"model.imageHeight\"\n          [attr.width]=\"model.imageWidth\"\n          alt=\"File preview\"\n        />\n        <svg *ngIf=\"model.defaultImage(val)\" \n          [iconName]=\"model.cssClasses.defaultImageIconId\" [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\" (click)=\"model.doRemoveFile(val)\">\n          <span\n            [class]=\"model.cssClasses.removeFile\"\n            >{{ model.removeFileCaption }}</span\n          >\n          <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\" [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon ></svg>\n        </div>\n      </div>\n      <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n        <a\n          (click)=\"model.doDownloadFile($event, val)\"\n          [attr.href]=\"val.content | safeUrl\"\n          [attr.title]=\"val.name\"\n          [attr.download]=\"val.name\"\n          [attr.width]=\"model.imageWidth\"\n          >{{ val.name }}</a\n        >\n      </div>\n    </span>\n  </div>\n  <button\n    type=\"button\"\n    *ngIf=\"model.showRemoveButtonBottom\"\n    [class]=\"model.showRemoveButtonBottom\"\n    (click)=\"model.doClean($event)\"\n  >\n    <span>{{ model.cleanButtonCaption }}</span>\n    <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n  <sv-action-bar *ngIf=\"model.mobileFileNavigatorVisible\" [model]=\"model.mobileFileNavigator\"></sv-action-bar>\n</div>", styles: [] }]
+            args: [{ selector: "sv-ng-file-question", template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input\n    [class]=\"model.cssClasses.fileInput\"\n    *ngIf=\"!model.isReadOnly\"\n    type=\"file\"\n    [attr.id]=\"model.inputId\"\n    (change)=\"model.doChange($event)\"\n    [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\"\n    [attr.accept]=\"model.acceptedTypes\"\n  />\n  <input\n    *ngIf=\"model.isReadOnly\"\n    type=\"file\"\n    disabled\n    [class]=\"model.getReadOnlyFileCss()\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.placeholder]=\"model.title\"\n    style=\"color: transparent\"\n  />\n  <div [class]=\"model.cssClasses.dragArea\"\n    (dragenter)=\"model.onDragEnter($event)\"\n    (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\"\n    (dragleave)=\"model.onDragLeave($event)\">  \n    <div\n      [class]=\"model.getFileDecoratorCss()\"\n    >\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.dragAreaPlaceholder }}</span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <label\n          role=\"button\"\n          [class]=\"model.getChooseFileCss()\"\n          [attr.for]=\"model.inputId\"\n          [attr.aria-label]=\"model.chooseButtonCaption\"\n          >\n          <span>{{ model.chooseButtonCaption }}</span>\n          <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonCaption\" [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </label>\n        <span\n          [class]=\"model.cssClasses.noFileChosen\"\n          *ngIf=\"model.isEmpty()\"\n          >{{ model.noFileChosenCaption }}</span\n        >\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButton\"\n      [class]=\"model.cssClasses.removeButton\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"!model.isEmpty()\">\n      <span\n        *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n        [visible]=\"val && model.isPreviewVisible(index)\"\n        [class]=\"model.cssClasses.preview\"\n      >\n        <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [attr.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n        <div [class]=\"model.cssClasses.imageWrapper\">\n          <img\n            *ngIf=\"model.canPreviewImage(val)\"\n            [attr.src]=\"val.content | safeUrl\"\n            [attr.height]=\"model.imageHeight\"\n            [attr.width]=\"model.imageWidth\"\n            alt=\"File preview\"\n          />\n          <svg *ngIf=\"model.defaultImage(val)\" \n            [iconName]=\"model.cssClasses.defaultImageIconId\" [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\" (click)=\"model.doRemoveFile(val)\">\n            <span\n              [class]=\"model.cssClasses.removeFile\"\n              >{{ model.removeFileCaption }}</span\n            >\n            <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\" [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon ></svg>\n          </div>\n        </div>\n        <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [attr.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n      </span>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButtonBottom\"\n      [class]=\"model.showRemoveButtonBottom\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <sv-action-bar *ngIf=\"model.mobileFileNavigatorVisible\" [model]=\"model.mobileFileNavigator\"></sv-action-bar>\n  </div>\n</div>", styles: [] }]
         }] });
 AngularComponentFactory.Instance.registerComponent("file-question", FileQuestionComponent);
 
@@ -1899,7 +1982,7 @@ class CommentQuestionComponent extends QuestionAngular {
     }
 }
 CommentQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CommentQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CommentQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0, template: "<textarea\n*ngIf=\"!model.isReadOnlyRenderDiv()\"\n[readonly]=\"model.isInputReadOnly\"\n[attr.disabled]=\"model.renderedInputDisabled\"\n[id]=\"model.inputId\"\n[attr.maxlength]=\"model.getMaxLength()\"\n[attr.cols]=\"model.cols\"\n[attr.rows]=\"model.rows\"\n[attr.placeholder]=\"model.renderedPlaceholder\"\n[class]=\"model.className\"\n[value]=\"model.value || null\"\n(input)=\"model.onInput($event)\"\n(keydown)=\"model.onKeyDown($event)\"\n(change)=\"onChange($event)\"\n[attr.aria-required]=\"model.ariaRequired\"\n[attr.aria-label]=\"model.ariaLabel\"\n[attr.aria-invalid]=\"model.ariaInvalid\"\n[attr.aria-describedby]=\"model.ariaDescribedBy\"\n[style.resize]=\"model.resizeStyle\"\n#contentElement></textarea>\n<div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CommentQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CommentQuestionComponent, selector: "sv-ng-question-comment", usesInheritance: true, ngImport: i0, template: "<textarea\n*ngIf=\"!model.isReadOnlyRenderDiv()\"\n[readonly]=\"model.isInputReadOnly\"\n[attr.disabled]=\"model.renderedInputDisabled\"\n[id]=\"model.inputId\"\n[attr.maxlength]=\"model.getMaxLength()\"\n[attr.cols]=\"model.cols\"\n[attr.rows]=\"model.rows\"\n[attr.placeholder]=\"model.renderedPlaceholder\"\n[class]=\"model.className\"\n[value]=\"model.value || null\"\n(input)=\"model.onInput($event)\"\n(keydown)=\"model.onKeyDown($event)\"\n(change)=\"onChange($event)\"\n[attr.aria-required]=\"model.ariaRequired\"\n[attr.aria-label]=\"model.ariaLabel\"\n[attr.aria-invalid]=\"model.ariaInvalid\"\n[attr.aria-describedby]=\"model.ariaDescribedBy\"\n[style.resize]=\"model.resizeStyle\"\n#contentElement></textarea>\n<div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CommentQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-question-comment", template: "<textarea\n*ngIf=\"!model.isReadOnlyRenderDiv()\"\n[readonly]=\"model.isInputReadOnly\"\n[attr.disabled]=\"model.renderedInputDisabled\"\n[id]=\"model.inputId\"\n[attr.maxlength]=\"model.getMaxLength()\"\n[attr.cols]=\"model.cols\"\n[attr.rows]=\"model.rows\"\n[attr.placeholder]=\"model.renderedPlaceholder\"\n[class]=\"model.className\"\n[value]=\"model.value || null\"\n(input)=\"model.onInput($event)\"\n(keydown)=\"model.onKeyDown($event)\"\n(change)=\"onChange($event)\"\n[attr.aria-required]=\"model.ariaRequired\"\n[attr.aria-label]=\"model.ariaLabel\"\n[attr.aria-invalid]=\"model.ariaInvalid\"\n[attr.aria-describedby]=\"model.ariaDescribedBy\"\n[style.resize]=\"model.resizeStyle\"\n#contentElement></textarea>\n<div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>" }]
@@ -1909,7 +1992,7 @@ AngularComponentFactory.Instance.registerComponent("comment-question", CommentQu
 class SignaturePadQuestionComponent extends QuestionAngular {
 }
 SignaturePadQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SignaturePadQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SignaturePadQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.height]=\"model.signatureHeight + 'px'\" [style.width]=\"model.signatureWidth + 'px'\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\">\n  {{ model.placeHolderText }}\n</div>\n<div>\n  <canvas tabindex=\"0\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" [visible]=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValue()\"\n  >\n    <span *ngIf=\"!model.cssClasses.clearButtonIconId\">\u2716</span>\n    <svg\n      *ngIf=\"model.cssClasses.clearButtonIconId\"\n      [iconName]=\"model.cssClasses.clearButtonIconId\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n</div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SignaturePadQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.height]=\"model.signatureHeight + 'px'\" [style.width]=\"model.signatureWidth + 'px'\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\">\n  {{ model.placeHolderText }}\n</div>\n<div>\n  <canvas tabindex=\"0\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" [visible]=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValue()\"\n  >\n    <span *ngIf=\"!model.cssClasses.clearButtonIconId\">\u2716</span>\n    <svg\n      *ngIf=\"model.cssClasses.clearButtonIconId\"\n      [iconName]=\"model.cssClasses.clearButtonIconId\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n</div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SignaturePadQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-signature-component", template: "<div\n[class]=\"model.cssClasses.root\"\n[style.height]=\"model.signatureHeight + 'px'\" [style.width]=\"model.signatureWidth + 'px'\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\">\n  {{ model.placeHolderText }}\n</div>\n<div>\n  <canvas tabindex=\"0\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" [visible]=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValue()\"\n  >\n    <span *ngIf=\"!model.cssClasses.clearButtonIconId\">\u2716</span>\n    <svg\n      *ngIf=\"model.cssClasses.clearButtonIconId\"\n      [iconName]=\"model.cssClasses.clearButtonIconId\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n</div>\n</div>" }]
@@ -1922,7 +2005,7 @@ class MultipleTextItemComponent extends BaseAngular {
     }
 }
 MultipleTextItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultipleTextItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MultipleTextItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultipleTextItemComponent, selector: "'[sv-ng-multipletext-item]'", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0, template: "<label [class]=\"question.getItemLabelCss(model)\">\n  <span [class]=\"question.getItemTitleCss()\">\n    <span *ngIf=\" model.editor.isRequireTextBeforeTitle || model.editor.isRequireTextOnStart\"\n      [class]=\"question.cssClasses.requiredText\">{{ model.editor.requiredText }}</span>\n    <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    <span\n      *ngIf=\"model.editor.isRequireTextAfterTitle\"\n      [class]=\"question.cssClasses.requiredText\"\n      >{{ model.editor.requiredText }}</span\n    >\n  </span>\n  <div [class]=\"question.getItemCss()\">\n    <div *ngIf=\"model.editor.showErrorOnTop && model.editor.hasVisibleErrors\" [element]=\"model.editor\" sv-ng-errors></div>\n    <sv-ng-text-question [model]=\"model.editor\"></sv-ng-text-question>\n    <div *ngIf=\"model.editor.showErrorOnBottom && model.editor.hasVisibleErrors\" [element]=\"model.editor\" sv-ng-errors></div>\n  </div>\n  <div *ngIf=\"model.editor.isErrorsModeTooltip && model.editor.hasVisibleErrors\" [element]=\"model.editor\" [location]=\"'tooltip'\" sv-ng-errors></div>\n</label>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: TextQuestionComponent, selector: "sv-ng-text-question" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MultipleTextItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultipleTextItemComponent, selector: "'[sv-ng-multipletext-item]'", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0, template: "<label [class]=\"question.getItemLabelCss(model)\">\n  <span [class]=\"question.getItemTitleCss()\">\n    <span *ngIf=\" model.editor.isRequireTextBeforeTitle || model.editor.isRequireTextOnStart\"\n      [class]=\"question.cssClasses.requiredText\">{{ model.editor.requiredText }}</span>\n    <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    <span\n      *ngIf=\"model.editor.isRequireTextAfterTitle\"\n      [class]=\"question.cssClasses.requiredText\"\n      >{{ model.editor.requiredText }}</span\n    >\n  </span>\n  <div [class]=\"question.getItemCss()\">\n    <div *ngIf=\"model.editor.showErrorOnTop && model.editor.hasVisibleErrors\" [element]=\"model.editor\" sv-ng-errors></div>\n    <sv-ng-text-question [model]=\"model.editor\"></sv-ng-text-question>\n    <div *ngIf=\"model.editor.showErrorOnBottom && model.editor.hasVisibleErrors\" [element]=\"model.editor\" sv-ng-errors></div>\n  </div>\n  <div *ngIf=\"model.editor.isErrorsModeTooltip && model.editor.hasVisibleErrors\" [element]=\"model.editor\" [location]=\"'tooltip'\" sv-ng-errors></div>\n</label>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: TextQuestionComponent, selector: "sv-ng-text-question" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultipleTextItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "'[sv-ng-multipletext-item]'", template: "<label [class]=\"question.getItemLabelCss(model)\">\n  <span [class]=\"question.getItemTitleCss()\">\n    <span *ngIf=\" model.editor.isRequireTextBeforeTitle || model.editor.isRequireTextOnStart\"\n      [class]=\"question.cssClasses.requiredText\">{{ model.editor.requiredText }}</span>\n    <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    <span\n      *ngIf=\"model.editor.isRequireTextAfterTitle\"\n      [class]=\"question.cssClasses.requiredText\"\n      >{{ model.editor.requiredText }}</span\n    >\n  </span>\n  <div [class]=\"question.getItemCss()\">\n    <div *ngIf=\"model.editor.showErrorOnTop && model.editor.hasVisibleErrors\" [element]=\"model.editor\" sv-ng-errors></div>\n    <sv-ng-text-question [model]=\"model.editor\"></sv-ng-text-question>\n    <div *ngIf=\"model.editor.showErrorOnBottom && model.editor.hasVisibleErrors\" [element]=\"model.editor\" sv-ng-errors></div>\n  </div>\n  <div *ngIf=\"model.editor.isErrorsModeTooltip && model.editor.hasVisibleErrors\" [element]=\"model.editor\" [location]=\"'tooltip'\" sv-ng-errors></div>\n</label>" }]
@@ -1944,7 +2027,7 @@ class MultipleTextComponent extends QuestionAngular {
     }
 }
 MultipleTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultipleTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MultipleTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultipleTextComponent, selector: "sv-ng-multipletext-question", usesInheritance: true, ngImport: i0, template: "<table [class]=\"model.cssClasses.root\" #contentElement>\n  <tbody>\n    <tr\n      *ngFor=\"let row of model.getRows(); index as rowIndex; trackBy: trackRowBy\"\n      [class]=\"model.cssClasses.row\"\n    >\n      <ng-container *ngFor=\"let item of row; trackBy: trackItemBy\" >\n        <td [class]=\"model.cssClasses.cell\" [question]=\"model\" [model]=\"item\" sv-ng-multipletext-item></td>\n      </ng-container>\n    </tr>\n  </tbody>\n</table>\n", components: [{ type: MultipleTextItemComponent, selector: "'[sv-ng-multipletext-item]'", inputs: ["question", "model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+MultipleTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultipleTextComponent, selector: "sv-ng-multipletext-question", usesInheritance: true, ngImport: i0, template: "<table [class]=\"model.cssClasses.root\" #contentElement>\n  <tbody>\n    <tr\n      *ngFor=\"let row of model.getRows(); index as rowIndex; trackBy: trackRowBy\"\n      [class]=\"model.cssClasses.row\"\n    >\n      <ng-container *ngFor=\"let item of row; trackBy: trackItemBy\" >\n        <td [class]=\"model.cssClasses.cell\" [question]=\"model\" [model]=\"item\" sv-ng-multipletext-item></td>\n      </ng-container>\n    </tr>\n  </tbody>\n</table>\n", components: [{ type: MultipleTextItemComponent, selector: "'[sv-ng-multipletext-item]'", inputs: ["question", "model"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultipleTextComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-multipletext-question", template: "<table [class]=\"model.cssClasses.root\" #contentElement>\n  <tbody>\n    <tr\n      *ngFor=\"let row of model.getRows(); index as rowIndex; trackBy: trackRowBy\"\n      [class]=\"model.cssClasses.row\"\n    >\n      <ng-container *ngFor=\"let item of row; trackBy: trackItemBy\" >\n        <td [class]=\"model.cssClasses.cell\" [question]=\"model\" [model]=\"item\" sv-ng-multipletext-item></td>\n      </ng-container>\n    </tr>\n  </tbody>\n</table>\n" }]
@@ -1969,7 +2052,7 @@ class RankingQuestionComponent extends SelectBaseComponent {
     }
 }
 RankingQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RankingQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RankingQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RankingQuestionComponent, selector: "sv-ng-ranking-question", usesInheritance: true, ngImport: i0, template: "<div [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>", directives: [{ 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: "13.0.3", type: RankingQuestionComponent, selector: "sv-ng-ranking-question", usesInheritance: true, ngImport: i0, template: "<div [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>", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RankingQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-ranking-question", template: "<div [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>" }]
@@ -1982,10 +2065,10 @@ class RankingItemComponent extends BaseAngular {
     }
 }
 RankingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RankingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div tabindex=\"0\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RankingItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-ranking-item", template: "\n\n\n<div tabindex=\"0\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: "sv-ng-ranking-item", template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>" }]
         }], propDecorators: { question: [{
                 type: Input
             }], model: [{
@@ -2007,10 +2090,10 @@ class StringEditorComponent {
     }
 }
 StringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringEditorComponent, selector: "sv-ng-string-editor", inputs: { model: "model" }, ngImport: i0, template: "<span style=\"position: static\">\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"model.hasHtml\"\n    [innerHtml]=\"model.renderedHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n  ></span>\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"!model.hasHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n    >{{ model.renderedHtml }}</span\n  >\n</span>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringEditorComponent, selector: "sv-ng-string-editor", inputs: { model: "model" }, ngImport: i0, template: "<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"model.hasHtml\"\n  [innerHtml]=\"model.renderedHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n></span>\n<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"!model.hasHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n  >{{ model.renderedHtml }}</span\n>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-string-editor", template: "<span style=\"position: static\">\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"model.hasHtml\"\n    [innerHtml]=\"model.renderedHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n  ></span>\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"!model.hasHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n    >{{ model.renderedHtml }}</span\n  >\n</span>" }]
+            args: [{ selector: "sv-ng-string-editor", template: "<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"model.hasHtml\"\n  [innerHtml]=\"model.renderedHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n></span>\n<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"!model.hasHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n  >{{ model.renderedHtml }}</span\n>\n" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -2040,7 +2123,7 @@ class PanelDynamicAddBtn extends PaneldynamicAction {
     }
 }
 PanelDynamicAddBtn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PanelDynamicAddBtn, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDynamicAddBtn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn", usesInheritance: true, ngImport: i0, template: "<button type=\"button\" *ngIf=\"question.canAddPanel\" [class]=\"question.getAddButtonCss()\" (click)=\"addPanelClick()\">\n<span [class]=\"question.cssClasses.buttonAddText\">{{question.panelAddText}}</span>\n</button>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+PanelDynamicAddBtn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn", usesInheritance: true, ngImport: i0, template: "<button type=\"button\" *ngIf=\"question.canAddPanel\" [class]=\"question.getAddButtonCss()\" (click)=\"addPanelClick()\">\n<span [class]=\"question.cssClasses.buttonAddText\">{{question.panelAddText}}</span>\n</button>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PanelDynamicAddBtn, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-paneldynamic-add-btn", template: "<button type=\"button\" *ngIf=\"question.canAddPanel\" [class]=\"question.getAddButtonCss()\" (click)=\"addPanelClick()\">\n<span [class]=\"question.cssClasses.buttonAddText\">{{question.panelAddText}}</span>\n</button>" }]
@@ -2142,7 +2225,7 @@ class PanelDynamicQuestionComponent extends QuestionAngular {
     }
 }
 PanelDynamicQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PanelDynamicQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n    <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n    <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  </div>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n    <div\n      [class]=\"model.cssClasses.progressBar\"\n      [style]=\"{ width: model.progress }\"\n      role=\"progressbar\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n  <!-- add track by [key]=\"panel.id\" -->\n  <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n    <div [class]=\"model.getPanelWrapperCss()\">\n      <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n      <ng-container *ngTemplateOutlet=\"removeBtn; context: { panel }\"></ng-container>\n    </div>\n    <!-- add track by [key]=\"'separator' + panel.id\" -->\n    <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\n  </ng-container>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.panelCount !== 0 && !model.showLegacyNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\"/>\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div\n        [class]=\"model.cssClasses.progressBar\"\n        [style]=\"{ width: model.progress }\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>\n<ng-template #progress>\n  <div [class]=\"this.progressCssClass\">\n    <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n      <div [class]=\"model.cssClasses.progressContainer\">\n        <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n        <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n          <div\n            [class]=\"model.cssClasses.progressBar\"\n            [style]=\"{ width: model.progress }\"\n            role=\"progressbar\"\n          ></div>\n        </div>\n          <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n      </div>\n      <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n      <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #removeBtn let-panel=\"panel\">\n  <button type=\"button\"\n      [visible]=\"model.canRemovePanel && panel.state != 'collapsed'\" (click)=\"model.removePanelUI(panel)\" [class]=\"model.getPanelRemoveButtonCss()\">\n      <span [class]=\"model.cssClasses.buttonRemoveText\">{{model.panelRemoveText}}</span>\n      <span [class]=\"model.cssClasses.iconRemove\"></span>\n    </button>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n    <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n    <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  </div>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n    <div\n      [class]=\"model.cssClasses.progressBar\"\n      [style]=\"{ width: model.progress }\"\n      role=\"progressbar\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n  <!-- add track by [key]=\"panel.id\" -->\n  <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n    <div [class]=\"model.getPanelWrapperCss()\">\n      <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n      <ng-container *ngTemplateOutlet=\"removeBtn; context: { panel }\"></ng-container>\n    </div>\n    <!-- add track by [key]=\"'separator' + panel.id\" -->\n    <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\n  </ng-container>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.panelCount !== 0 && !model.showLegacyNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\"/>\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div\n        [class]=\"model.cssClasses.progressBar\"\n        [style]=\"{ width: model.progress }\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>\n<ng-template #progress>\n  <div [class]=\"this.progressCssClass\">\n    <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n      <div [class]=\"model.cssClasses.progressContainer\">\n        <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n        <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n          <div\n            [class]=\"model.cssClasses.progressBar\"\n            [style]=\"{ width: model.progress }\"\n            role=\"progressbar\"\n          ></div>\n        </div>\n          <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n      </div>\n      <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n      <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #removeBtn let-panel=\"panel\">\n  <button type=\"button\"\n      [visible]=\"model.canRemovePanel && panel.state != 'collapsed'\" (click)=\"model.removePanelUI(panel)\" [class]=\"model.getPanelRemoveButtonCss()\">\n      <span [class]=\"model.cssClasses.buttonRemoveText\">{{model.panelRemoveText}}</span>\n      <span [class]=\"model.cssClasses.iconRemove\"></span>\n    </button>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.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: "13.0.3", ngImport: i0, type: PanelDynamicQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-paneldynamic-question", template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n    <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n    <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  </div>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n    <div\n      [class]=\"model.cssClasses.progressBar\"\n      [style]=\"{ width: model.progress }\"\n      role=\"progressbar\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n  <!-- add track by [key]=\"panel.id\" -->\n  <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n    <div [class]=\"model.getPanelWrapperCss()\">\n      <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n      <ng-container *ngTemplateOutlet=\"removeBtn; context: { panel }\"></ng-container>\n    </div>\n    <!-- add track by [key]=\"'separator' + panel.id\" -->\n    <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\n  </ng-container>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.panelCount !== 0 && !model.showLegacyNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\"/>\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div\n        [class]=\"model.cssClasses.progressBar\"\n        [style]=\"{ width: model.progress }\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>\n<ng-template #progress>\n  <div [class]=\"this.progressCssClass\">\n    <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n      <div [class]=\"model.cssClasses.progressContainer\">\n        <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n        <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n          <div\n            [class]=\"model.cssClasses.progressBar\"\n            [style]=\"{ width: model.progress }\"\n            role=\"progressbar\"\n          ></div>\n        </div>\n          <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n      </div>\n      <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n      <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #removeBtn let-panel=\"panel\">\n  <button type=\"button\"\n      [visible]=\"model.canRemovePanel && panel.state != 'collapsed'\" (click)=\"model.removePanelUI(panel)\" [class]=\"model.getPanelRemoveButtonCss()\">\n      <span [class]=\"model.cssClasses.buttonRemoveText\">{{model.panelRemoveText}}</span>\n      <span [class]=\"model.cssClasses.iconRemove\"></span>\n    </button>\n</ng-template>" }]
@@ -2152,7 +2235,7 @@ AngularComponentFactory.Instance.registerComponent("paneldynamic-question", Pane
 class TemplateRendererComponent extends EmbeddedViewContentComponent {
 }
 TemplateRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TemplateRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TemplateRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TemplateRendererComponent, selector: "sv-template-renderer", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngIf=\"!!componentName\">\n    <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"!componentName && contentTempl\">\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+TemplateRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TemplateRendererComponent, selector: "sv-template-renderer", inputs: { componentName: "componentName", componentData: "componentData", contentTempl: "contentTempl" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ng-container *ngIf=\"!!componentName\">\n    <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"!componentName && contentTempl\">\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TemplateRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-template-renderer", template: "<ng-template #template>\n  <ng-container *ngIf=\"!!componentName\">\n    <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"!componentName && contentTempl\">\n    <ng-container *ngTemplateOutlet=\"contentTempl\"></ng-container>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -2196,7 +2279,7 @@ class CustomWidgetComponent {
     }
 }
 CustomWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CustomWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CustomWidgetComponent, selector: "sv-ng-custom-widget", inputs: { css: "css", model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #content>\n  <div *ngIf=\"hasHtml\" [innerHTML]=\"customHtml | safeHtml\"></div>\n  <ng-container *ngIf=\"hasDefaultRender\">\n    <ng-template [component]=\"{ name: componentName, data: { model: model, css: css } }\"></ng-template>  \n  </ng-container>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": SafeHtmlPipe } });
+CustomWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CustomWidgetComponent, selector: "sv-ng-custom-widget", inputs: { css: "css", model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #content>\n  <div *ngIf=\"hasHtml\" [innerHTML]=\"customHtml | safeHtml\"></div>\n  <ng-container *ngIf=\"hasDefaultRender\">\n    <ng-template [component]=\"{ name: componentName, data: { model: model, css: css } }\"></ng-template>  \n  </ng-container>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": SafeHtmlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CustomWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-custom-widget", template: "<div #content>\n  <div *ngIf=\"hasHtml\" [innerHTML]=\"customHtml | safeHtml\"></div>\n  <ng-container *ngIf=\"hasDefaultRender\">\n    <ng-template [component]=\"{ name: componentName, data: { model: model, css: css } }\"></ng-template>  \n  </ng-container>\n</div>" }]
@@ -2216,7 +2299,7 @@ class MatrixDynamicDragDropIconComponent extends EmbeddedViewContentComponent {
     }
 }
 MatrixDynamicDragDropIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixDynamicDragDropIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixDynamicDragDropIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <svg *ngIf=\"question.iconDragElement\" [class]=\"question.cssClasses.dragElementDecorator\">\n    <use [attr.xlink:href]=\"question.iconDragElement\"></use>\n  </svg>\n  <span *ngIf=\"!question.iconDragElement\" data-bind=\"css: question.cssClasses.iconDrag\"></span>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MatrixDynamicDragDropIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <svg *ngIf=\"question.iconDragElement\" [class]=\"question.cssClasses.dragElementDecorator\">\n    <use [attr.xlink:href]=\"question.iconDragElement\"></use>\n  </svg>\n  <span *ngIf=\"!question.iconDragElement\" data-bind=\"css: question.cssClasses.iconDrag\"></span>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixDynamicDragDropIconComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-matrix-drag-drop-icon", template: "<ng-template #template>\n  <svg *ngIf=\"question.iconDragElement\" [class]=\"question.cssClasses.dragElementDecorator\">\n    <use [attr.xlink:href]=\"question.iconDragElement\"></use>\n  </svg>\n  <span *ngIf=\"!question.iconDragElement\" data-bind=\"css: question.cssClasses.iconDrag\"></span>\n</ng-template>", styles: [":host{display:none}\n"] }]
@@ -2290,7 +2373,7 @@ class MatrixCellComponent extends BaseAngular {
     }
 }
 MatrixCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <td [class]=\"cell.className\" [attr.data-responsive-title]=\"getHeaders()\" [title]=\"cell.getTitle()\" [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\" [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n    <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n    <ng-container *ngIf=\"cell.hasPanel\">\n      <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n    </ng-container>\n    <div *ngIf=\"cell.hasQuestion\" [class]=\"question.cssClasses.cellQuestionWrapper\" [visible]=\"cell.question.isVisible\">\n      <div *ngIf=\"cell.showErrorOnTop && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n          <ng-template [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n            <ng-template  [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n          </ng-template>\n      </ng-container>\n      <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\" [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <sv-ng-selebase-item\n        *ngIf=\"cell.isItemChoice\"\n        [showLabel]=\"false\"\n        [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n        [question]=\"cell.question\"\n        [model]=\"cell.item\"\n      ></sv-ng-selebase-item>\n      <div *ngIf=\"cell.isOtherChoice\" class=\"form-group\" [question]=\"cell.question\" sv-ng-comment></div>\n      <div *ngIf=\"cell.showErrorOnBottom && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <div *ngIf=\"cell.question.isErrorsModeTooltip && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n        <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!!cell.requiredText\" [class]=\"question.cssClasses.cellRequiredText\">{{ cell.requiredText }}</span>  \n      </ng-template>\n    </ng-container>\n</td>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+MatrixCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <td [class]=\"cell.className\" [attr.data-responsive-title]=\"getHeaders()\" [title]=\"cell.getTitle()\" [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\" [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n    <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n    <ng-container *ngIf=\"cell.hasPanel\">\n      <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n    </ng-container>\n    <div *ngIf=\"cell.hasQuestion\" [class]=\"question.cssClasses.cellQuestionWrapper\" [visible]=\"cell.question.isVisible\">\n      <div *ngIf=\"cell.showErrorOnTop && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n          <ng-template [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n            <ng-template  [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n          </ng-template>\n      </ng-container>\n      <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\" [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <sv-ng-selebase-item\n        *ngIf=\"cell.isItemChoice\"\n        [showLabel]=\"false\"\n        [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n        [question]=\"cell.question\"\n        [model]=\"cell.item\"\n      ></sv-ng-selebase-item>\n      <div *ngIf=\"cell.isOtherChoice\" class=\"form-group\" [question]=\"cell.question\" sv-ng-comment></div>\n      <div *ngIf=\"cell.showErrorOnBottom && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <div *ngIf=\"cell.question.isErrorsModeTooltip && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n        <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!!cell.requiredText\" [class]=\"question.cssClasses.cellRequiredText\">{{ cell.requiredText }}</span>  \n      </ng-template>\n    </ng-container>\n</td>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixCellComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-matrix-cell", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <td [class]=\"cell.className\" [attr.data-responsive-title]=\"getHeaders()\" [title]=\"cell.getTitle()\" [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\" [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n    <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n    <ng-container *ngIf=\"cell.hasPanel\">\n      <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n    </ng-container>\n    <div *ngIf=\"cell.hasQuestion\" [class]=\"question.cssClasses.cellQuestionWrapper\" [visible]=\"cell.question.isVisible\">\n      <div *ngIf=\"cell.showErrorOnTop && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n          <ng-template [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n            <ng-template  [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n          </ng-template>\n      </ng-container>\n      <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\" [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <sv-ng-selebase-item\n        *ngIf=\"cell.isItemChoice\"\n        [showLabel]=\"false\"\n        [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n        [question]=\"cell.question\"\n        [model]=\"cell.item\"\n      ></sv-ng-selebase-item>\n      <div *ngIf=\"cell.isOtherChoice\" class=\"form-group\" [question]=\"cell.question\" sv-ng-comment></div>\n      <div *ngIf=\"cell.showErrorOnBottom && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <div *ngIf=\"cell.question.isErrorsModeTooltip && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n        <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n        <span *ngIf=\"!!cell.requiredText\" [class]=\"question.cssClasses.cellRequiredText\">{{ cell.requiredText }}</span>  \n      </ng-template>\n    </ng-container>\n</td>\n</ng-template>" }]
@@ -2309,7 +2392,7 @@ class MatrixRequiredHeader extends BaseAngular {
     }
 }
 MatrixRequiredHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixRequiredHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixRequiredHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: { column: "column", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template><span *ngIf='column.isRenderedRequired' [class]='question.cssClasses.cellRequiredText'>{{ column.requiredText }}</span></ng-template>", isInline: true, styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MatrixRequiredHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: { column: "column", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template><span *ngIf='column.isRenderedRequired' [class]='question.cssClasses.cellRequiredText'>{{ column.requiredText }}</span></ng-template>", isInline: true, styles: [":host{display:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixRequiredHeader, decorators: [{
             type: Component,
             args: [{
@@ -2335,7 +2418,7 @@ class MatrixRowComponent extends BaseAngular {
     }
 }
 MatrixRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <tr [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\" [attr.data-sv-drop-target-matrix-row]=\"row && row.id\">\n    <sv-ng-matrix-cell\n      [cell]=\"cell\"\n      [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"\n    ></sv-ng-matrix-cell>\n  </tr>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: ["question", "cell"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+MatrixRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <tr [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\" [attr.data-sv-drop-target-matrix-row]=\"row && row.id\">\n    <sv-ng-matrix-cell\n      [cell]=\"cell\"\n      [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"\n    ></sv-ng-matrix-cell>\n  </tr>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: ["question", "cell"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixRowComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-matrix-row", styles: [":host { display: none; }"], template: "<ng-template #template>\n  <tr [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\" [attr.data-sv-drop-target-matrix-row]=\"row && row.id\">\n    <sv-ng-matrix-cell\n      [cell]=\"cell\"\n      [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"\n    ></sv-ng-matrix-cell>\n  </tr>\n</ng-template>" }]
@@ -2357,7 +2440,7 @@ class MatrixTableComponent extends BaseAngular {
     }
 }
 MatrixTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: { question: "question", table: "table" }, usesInheritance: true, ngImport: i0, template: "<table [class]=\"question.getTableCss()\">\n  <thead *ngIf=\"table.showHeader\">\n    <tr>\n      <ng-container\n        *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\"\n      >\n            <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n              <ng-template [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n                <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n                <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n                </sv-ng-matrixheaderrequired>\n              </ng-template>\n            </th>\n            \n            <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\"></td>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody>\n    <ng-container *ngFor=\"let row of table.rows; trackBy: trackRowBy\">\n      <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n    </ng-container>\n  </tbody>\n  <tfoot *ngIf=\"table.showFooter\">\n    <tr>\n      <sv-ng-matrix-cell [cell]=\"cell\" [question]=\"question\" *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n      </sv-ng-matrix-cell>\n    </tr>\n  </tfoot>\n</table>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: ["question", "cell"] }], 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"] }] });
+MatrixTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: { question: "question", table: "table" }, usesInheritance: true, ngImport: i0, template: "<table [class]=\"question.getTableCss()\">\n  <thead *ngIf=\"table.showHeader\">\n    <tr>\n      <ng-container\n        *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\"\n      >\n            <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n              <ng-template [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n                <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n                <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n                </sv-ng-matrixheaderrequired>\n              </ng-template>\n            </th>\n            \n            <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\"></td>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody>\n    <ng-container *ngFor=\"let row of table.rows; trackBy: trackRowBy\">\n      <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n    </ng-container>\n  </tbody>\n  <tfoot *ngIf=\"table.showFooter\">\n    <tr>\n      <sv-ng-matrix-cell [cell]=\"cell\" [question]=\"question\" *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n      </sv-ng-matrix-cell>\n    </tr>\n  </tfoot>\n</table>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: ["question", "cell"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixTableComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-matrix-table", template: "<table [class]=\"question.getTableCss()\">\n  <thead *ngIf=\"table.showHeader\">\n    <tr>\n      <ng-container\n        *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\"\n      >\n            <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n              <ng-template [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n                <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n                <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n                </sv-ng-matrixheaderrequired>\n              </ng-template>\n            </th>\n            \n            <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\"></td>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody>\n    <ng-container *ngFor=\"let row of table.rows; trackBy: trackRowBy\">\n      <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n    </ng-container>\n  </tbody>\n  <tfoot *ngIf=\"table.showFooter\">\n    <tr>\n      <sv-ng-matrix-cell [cell]=\"cell\" [question]=\"question\" *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n      </sv-ng-matrix-cell>\n    </tr>\n  </tfoot>\n</table>" }]
@@ -2370,7 +2453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class MatrixDropdownComponent extends QuestionAngular {
 }
 MatrixDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixDropdownComponent, selector: "sv-ng-matrixdropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [style]=\"{ overflowX: model.showHorizontalScroll ? 'scroll' : '' }\" #contentElement>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n  </div>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MatrixDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixDropdownComponent, selector: "sv-ng-matrixdropdown-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [style]=\"{ overflowX: model.showHorizontalScroll ? 'scroll' : '' }\" #contentElement>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n  </div>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-matrixdropdown-question", template: "<ng-template #template>\n  <div [style]=\"{ overflowX: model.showHorizontalScroll ? 'scroll' : '' }\" #contentElement>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n  </div>\n</ng-template>" }]
@@ -2380,7 +2463,7 @@ AngularComponentFactory.Instance.registerComponent("matrixdropdown-question", Ma
 class MatrixDynamicComponent extends QuestionAngular {
 }
 MatrixDynamicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixDynamicComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixDynamicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixDynamicComponent, selector: "sv-ng-matrixdynamic-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [style]=\"{ overflowX: model.showHorizontalScroll ? 'scroll' : '' }\" #contentElement>\n    <div *ngIf=\"model.renderedTable.showAddRowOnTop\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n    <div *ngIf=\"!model.renderedTable.showTable\" [class]=\"model.cssClasses.emptyRowsSection\">\n      <div [class]=\"model.cssClasses.emptyRowsText\" [model]=\"model.locEmptyRowsText\" sv-ng-string></div>\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <div *ngIf=\"model.renderedTable.showAddRowOnBottom\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n  </div>\n  <ng-template #addRowButton>\n    <button type=\"button\" [class]=\"model.getAddRowButtonCss(true)\" (click)=\"model.addRowUI()\">\n        <sv-ng-string [model]=\"model.locAddRowText\" ></sv-ng-string>\n        <span [class]=\"model.cssClasses.iconAdd\"></span>\n    </button>\n  </ng-template>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+MatrixDynamicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixDynamicComponent, selector: "sv-ng-matrixdynamic-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [style]=\"{ overflowX: model.showHorizontalScroll ? 'scroll' : '' }\" #contentElement>\n    <div *ngIf=\"model.renderedTable.showAddRowOnTop\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n    <div *ngIf=\"!model.renderedTable.showTable\" [class]=\"model.cssClasses.emptyRowsSection\">\n      <div [class]=\"model.cssClasses.emptyRowsText\" [model]=\"model.locEmptyRowsText\" sv-ng-string></div>\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <div *ngIf=\"model.renderedTable.showAddRowOnBottom\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n  </div>\n  <ng-template #addRowButton>\n    <button type=\"button\" [class]=\"model.getAddRowButtonCss(true)\" (click)=\"model.addRowUI()\">\n        <sv-ng-string [model]=\"model.locAddRowText\" ></sv-ng-string>\n        <span [class]=\"model.cssClasses.iconAdd\"></span>\n    </button>\n  </ng-template>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixDynamicComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-matrixdynamic-question", template: "<ng-template #template>\n  <div [style]=\"{ overflowX: model.showHorizontalScroll ? 'scroll' : '' }\" #contentElement>\n    <div *ngIf=\"model.renderedTable.showAddRowOnTop\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n    <div *ngIf=\"!model.renderedTable.showTable\" [class]=\"model.cssClasses.emptyRowsSection\">\n      <div [class]=\"model.cssClasses.emptyRowsText\" [model]=\"model.locEmptyRowsText\" sv-ng-string></div>\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <div *ngIf=\"model.renderedTable.showAddRowOnBottom\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n  </div>\n  <ng-template #addRowButton>\n    <button type=\"button\" [class]=\"model.getAddRowButtonCss(true)\" (click)=\"model.addRowUI()\">\n        <sv-ng-string [model]=\"model.locAddRowText\" ></sv-ng-string>\n        <span [class]=\"model.cssClasses.iconAdd\"></span>\n    </button>\n  </ng-template>\n</ng-template>" }]
@@ -2455,10 +2538,10 @@ class ImageQuestionComponent extends QuestionAngular {
     }
 }
 ImageQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ImageQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ImageQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ImageQuestionComponent, selector: "sv-ng-image-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <img\n    *ngIf=\"model.renderedMode === 'image'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.alt]=\"model.text || model.title\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  /><video\n    controls\n    *ngIf=\"model.renderedMode === 'video'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></video>\n  <iframe\n    *ngIf=\"model.renderedMode === 'youtube'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></iframe>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeResourceUrl": SafeResourceUrlPipe } });
+ImageQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ImageQuestionComponent, selector: "sv-ng-image-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <img\n    *ngIf=\"model.renderedMode === 'image'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.alt]=\"model.altText || model.title\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  /><video\n    controls\n    *ngIf=\"model.renderedMode === 'video'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></video>\n  <iframe\n    *ngIf=\"model.renderedMode === 'youtube'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></iframe>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeResourceUrl": SafeResourceUrlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ImageQuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-image-question", template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <img\n    *ngIf=\"model.renderedMode === 'image'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.alt]=\"model.text || model.title\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  /><video\n    controls\n    *ngIf=\"model.renderedMode === 'video'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></video>\n  <iframe\n    *ngIf=\"model.renderedMode === 'youtube'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></iframe>\n</div>" }]
+            args: [{ selector: "sv-ng-image-question", template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <img\n    *ngIf=\"model.renderedMode === 'image'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.alt]=\"model.altText || model.title\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  /><video\n    controls\n    *ngIf=\"model.renderedMode === 'video'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></video>\n  <iframe\n    *ngIf=\"model.renderedMode === 'youtube'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n  ></iframe>\n</div>" }]
         }] });
 AngularComponentFactory.Instance.registerComponent("image-question", ImageQuestionComponent);
 
@@ -2507,7 +2590,7 @@ SurveyAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
-        PopupComponent, PopupContainerComponent,
+        PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
         ListComponent, ListItemComponent,
         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
@@ -2520,7 +2603,7 @@ SurveyAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
-        PopupComponent, PopupContainerComponent,
+        PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
         ListComponent, ListItemComponent,
         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
@@ -2541,7 +2624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
                         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
                         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
-                        PopupComponent, PopupContainerComponent,
+                        PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
                         ListComponent, ListItemComponent,
                         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
@@ -2560,7 +2643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
                         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
                         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
-                        PopupComponent, PopupContainerComponent,
+                        PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
                         ListComponent, ListItemComponent,
                         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
@@ -2579,5 +2662,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FileQuestionComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PopupComponent, PopupContainerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, StringEditorComponent, StringViewerComponent, SurveyAngularModule, SurveyCommentComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyNavigationButton, SurveyStringComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, VisibleDirective };
+export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FileQuestionComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PopupBaseContainerComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, StringEditorComponent, StringViewerComponent, SurveyAngularModule, SurveyCommentComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyNavigationButton, SurveyStringComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, VisibleDirective };
 //# sourceMappingURL=survey-angular-ui.mjs.map