survey-angular-ui 2.3.9 → 2.3.11

package/fesm2015/survey-angular-ui.js

@@ -40,6 +40,9 @@ class BaseAngular extends EmbeddedViewContentComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.isModelSubsribed = false;
         this.isDestroyed = false;
+        this.onArrayChangedCallback = (stateElement, options) => {
+            this.update(options.name);
+        };
     }
     get surveyModel() {
         return this.getModel().getSurvey();
@@ -85,9 +88,7 @@ class BaseAngular extends EmbeddedViewContentComponent {
                 var val = hash[key];
                 if (Array.isArray(val)) {
                     var val = val;
-                    val["onArrayChanged"] = (arrayChanges) => {
-                        this.update(key);
-                    };
+                    stateElement.addOnArrayChangedCallback(val, this.onArrayChangedCallback);
                 }
             });
             stateElement.setPropertyValueCoreHandler = (hash, key, val) => {
@@ -117,7 +118,7 @@ class BaseAngular extends EmbeddedViewContentComponent {
                     var val = hash[key];
                     if (Array.isArray(val)) {
                         var val = val;
-                        val["onArrayChanged"] = () => { };
+                        stateElement.removeOnArrayChangedCallback(val, this.onArrayChangedCallback);
                     }
                 });
                 stateElement.disableOnElementRerenderedEvent();
@@ -683,12 +684,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 
 class ElementTitleActionsComponent extends EmbeddedViewContentComponent {
+    constructor() {
+        super(...arguments);
+        this.renderActions = true;
+    }
     get cssClasses() {
         return (this.element.isPanel ? this.element.cssClasses.panel : this.element.cssClasses) || {};
     }
 }
 ElementTitleActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementTitleActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ElementTitleActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: { element: "element" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\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  <ng-template #elementTitleContent>\n    <sv-ng-string *ngIf=\"element.isTitleRenderedAsString\" [model]=\"element.locRenderedTitle\"></sv-ng-string>\n    <ng-container *ngIf=\"!element.isTitleRenderedAsString\">\n      <span\n        *ngIf=\"element.isRequireTextOnStart\"\n        [class]=\"element.cssRequiredMark\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredMark }}</span>\n      <span *ngIf=\"element.isRequireTextOnStart\">&nbsp;</span>\n      <span\n        *ngIf=\"element.no\"\n        style=\"position: static\"\n        [class]=\"element.cssTitleNumber\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.no }}</span>\n      <span *ngIf=\"element.no\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isRequireTextBeforeTitle\"\n        [class]=\"element.cssRequiredMark\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredMark }}</span>\n      <span *ngIf=\"element.isRequireTextBeforeTitle\">&nbsp;</span>\n      <sv-ng-string [model]=\"element.locRenderedTitle\"></sv-ng-string>\n      <span *ngIf=\"element.isRequireTextAfterTitle\">&nbsp;</span>\n      <span\n        *ngIf=\" element.isRequireTextAfterTitle\"\n        [class]=\"element.cssRequiredMark\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredMark }}</span> \n  </ng-container>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ 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"] }] });
+ElementTitleActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: { element: "element", renderActions: "renderActions" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\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 *ngIf=\"renderActions\" [model]=\"element.getTitleToolbar()\"></sv-ng-action-bar>\n    </div>\n  </ng-container>\n  <ng-template #elementTitleContent>\n    <sv-ng-string *ngIf=\"element.isTitleRenderedAsString\" [model]=\"element.locRenderedTitle\"></sv-ng-string>\n    <ng-container *ngIf=\"!element.isTitleRenderedAsString\">\n      <span\n        *ngIf=\"element.isRequireTextOnStart\"\n        [class]=\"element.cssRequiredMark\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredMark }}</span>\n      <span *ngIf=\"element.isRequireTextOnStart\">&nbsp;</span>\n      <span\n        *ngIf=\"element.no\"\n        style=\"position: static\"\n        [class]=\"element.cssTitleNumber\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.no }}</span>\n      <span *ngIf=\"element.no\">&nbsp;</span>\n      <span\n        *ngIf=\"element.isRequireTextBeforeTitle\"\n        [class]=\"element.cssRequiredMark\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredMark }}</span>\n      <span *ngIf=\"element.isRequireTextBeforeTitle\">&nbsp;</span>\n      <sv-ng-string [model]=\"element.locRenderedTitle\"></sv-ng-string>\n      <span *ngIf=\"element.isRequireTextAfterTitle\">&nbsp;</span>\n      <span\n        *ngIf=\" element.isRequireTextAfterTitle\"\n        [class]=\"element.cssRequiredMark\"\n        [attr.aria-hidden]=\"true\"\n        >{{ element.requiredMark }}</span> \n  </ng-container>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementTitleActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -698,12 +703,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], propDecorators: { element: [{
                 type: Input
+            }], renderActions: [{
+                type: Input
             }] } });
 
 class ElementTitleComponent extends EmbeddedViewContentComponent {
+    constructor() {
+        super(...arguments);
+        this.renderActions = true;
+    }
 }
 ElementTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ElementTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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    <svg *ngIf=\"!element.isExpanded && element.getCssTitleExpandableSvg()\" [iconName]=\"'icon-expand-16x16'\" [partCss]=\"element.getCssTitleExpandableSvg()\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <svg *ngIf=\"element.isExpanded && element.getCssTitleExpandableSvg()\" [iconName]=\"'icon-collapse-16x16'\" [partCss]=\"element.getCssTitleExpandableSvg()\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <sv-ng-element-title-actions [element]=\"element\"></sv-ng-element-title-actions>\n  </sv-ng-dynamic-head>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: ["tagName", "element"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ElementTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: { element: "element", renderActions: "renderActions" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <sv-ng-dynamic-head [tagName]=\"element.titleTagName\" [element]=\"element\" *ngIf=\"element.hasTitle\">\n    <svg *ngIf=\"!element.isExpanded && element.getCssTitleExpandableSvg()\" [iconName]=\"'icon-expand-16x16'\" [partCss]=\"element.getCssTitleExpandableSvg()\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <svg *ngIf=\"element.isExpanded && element.getCssTitleExpandableSvg()\" [iconName]=\"'icon-collapse-16x16'\" [partCss]=\"element.getCssTitleExpandableSvg()\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <sv-ng-element-title-actions [element]=\"element\" [renderActions]=\"renderActions\"></sv-ng-element-title-actions>\n  </sv-ng-dynamic-head>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: ["tagName", "element"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element", "renderActions"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementTitleComponent, decorators: [{
             type: Component,
             args: [{
@@ -713,6 +724,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], propDecorators: { element: [{
                 type: Input
+            }], renderActions: [{
+                type: Input
             }] } });
 
 class SurveyHeaderComponent {
@@ -731,7 +744,7 @@ class SurveyHeaderComponent {
     }
 }
 SurveyHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyHeaderComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SurveyHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: { survey: "survey" }, ngImport: i0, template: "<ng-template *ngIf=\"survey.isLogoBefore\" [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\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  <div *ngIf=\"survey.renderedHasDescription\" [class]=\"survey.css.description\" [model]=\"survey.locDescription\" sv-ng-string></div>\n</div>\n\n<ng-template *ngIf=\"survey.isLogoAfter\" [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\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: "12.2.17", type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: { survey: "survey" }, ngImport: i0, template: "<ng-template *ngIf=\"survey.isLogoBefore\" [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\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  <div *ngIf=\"survey.renderedHasDescription\" [class]=\"survey.css.description\" [model]=\"survey.locDescription\" sv-ng-string></div>\n</div>\n\n<ng-template *ngIf=\"survey.isLogoAfter\" [component]=\"{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }\"></ng-template>\n<div [class]=\"survey.css.headerClose\"></div>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1139,7 +1152,7 @@ class PageComponent extends BaseAngular {
     }
 }
 PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageComponent, selector: "sv-page, page, sv-ng-page", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "pageContainerRef", first: true, predicate: ["pageContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <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      <div *ngIf=\"model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-container *ngFor=\"let row of model.visibleRows\">\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>  \n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { 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: "12.2.17", type: PageComponent, selector: "sv-page, page, sv-ng-page", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "pageContainerRef", first: true, predicate: ["pageContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <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      <div *ngIf=\"model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-container *ngFor=\"let row of model.visibleRows\">\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>  \n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
             args: [{
@@ -1233,7 +1246,7 @@ class ElementHeaderComponent {
     }
 }
 ElementHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElementHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass", "style.width": "this.width" } }, ngImport: i0, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"element.hasAdditionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ElementHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass", "style.width": "this.width" } }, ngImport: i0, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"element.hasAdditionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1325,7 +1338,7 @@ class QuestionComponent extends EmbeddedViewContentComponent {
     }
 }
 QuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model", css: "css", survey: "survey" }, 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]=\"model.getRootStyle()\" [id]=\"model.id\"\n    [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.aria-expanded]=\"model.ariaExpanded\">\n    <sv-breadcrumbs\n      *ngIf=\"model.singleInputHasActions\"\n      [model]=\"model.singleInputActions\"\n      [css]=\"model.cssClasses\"\n    ></sv-breadcrumbs>\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"!model.singleInputHideHeader && model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <sv-single-input-summary\n      *ngIf=\"!!model.singleInputSummary\"\n      [model]=\"model.singleInputSummary\"\n      [css]=\"model.cssClasses\"\n    ></sv-single-input-summary>\n    <sv-ng-element\n      *ngIf=\"!model.singleInputSummary && !!singleQuestion\"\n      [model]=\"singleQuestion\"\n    ></sv-ng-element>\n    <ng-template\n      *ngIf=\"!model.singleInputSummary && !singleQuestion\"\n      [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\n      <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"model.renderedIsExpanded\" [attr.aria-hidden]=\"model.contentAriaHidden\">\n        <ng-template\n          [component]=\"{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></ng-template>\n        <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n          <div [model]=\"model.locCommentText\" sv-ng-string></div>\n          <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n        </div>\n        <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\"\n          [model]=\"model.locDescription\" sv-ng-string></div>\n      </div>\n    </ng-template>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>", components: [{ type: BreadcrumbsComponent, selector: "sv-breadcrumbs", inputs: ["model", "css"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SingleInputSummaryComponent, selector: "sv-single-input-summary", inputs: ["model", "css"] }, { type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model", css: "css", survey: "survey" }, 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]=\"model.getRootStyle()\" [id]=\"model.id\"\n    [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.aria-expanded]=\"model.ariaExpanded\">\n    <sv-breadcrumbs\n      *ngIf=\"model.singleInputHasActions\"\n      [model]=\"model.singleInputActions\"\n      [css]=\"model.cssClasses\"\n    ></sv-breadcrumbs>\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"!model.singleInputHideHeader && model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <sv-single-input-summary\n      *ngIf=\"!!model.singleInputSummary\"\n      [model]=\"model.singleInputSummary\"\n      [css]=\"model.cssClasses\"\n    ></sv-single-input-summary>\n    <sv-ng-element\n      *ngIf=\"!model.singleInputSummary && !!singleQuestion\"\n      [model]=\"singleQuestion\"\n    ></sv-ng-element>\n    <ng-template\n      *ngIf=\"!model.singleInputSummary && !singleQuestion\"\n      [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\n      <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"model.renderedIsExpanded\" [attr.aria-hidden]=\"model.contentAriaHidden\" [attr.data-sv-drop-target-matrix-row]=\"model.dragDropMatrixAttribute\" [attr.data-sv-drop-target-matrix]=\"model.dragDropMatrixAttribute\">\n        <ng-template\n          [component]=\"{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></ng-template>\n        <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n          <div [model]=\"model.locCommentText\" sv-ng-string></div>\n          <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n        </div>\n        <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\"\n          [model]=\"model.locDescription\" sv-ng-string></div>\n      </div>\n    </ng-template>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>", components: [{ type: BreadcrumbsComponent, selector: "sv-breadcrumbs", inputs: ["model", "css"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SingleInputSummaryComponent, selector: "sv-single-input-summary", inputs: ["model", "css"] }, { type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.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: "12.2.17", ngImport: i0, type: QuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -1879,7 +1892,7 @@ class SelectBaseComponent extends QuestionAngular {
         return "sv-ng-selectbase-item";
     }
     trackItemBy(_, item) {
-        return item.value;
+        return item.uniqueId;
     }
     trackColumnBy(index) {
         return index;
@@ -1903,7 +1916,7 @@ class SelectBaseComponent extends QuestionAngular {
     }
 }
 SelectBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue(true)\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\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"] }] });
+SelectBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValueFromUI()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseComponent, decorators: [{
             type: Component,
             args: [{
@@ -1923,7 +1936,7 @@ class RadiogroupComponent extends SelectBaseComponent {
     }
 }
 RadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue(true)\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\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"] }] });
+RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValueFromUI()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1963,7 +1976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class CheckboxComponent extends SelectBaseComponent {
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue(true)\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\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"] }] });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValueFromUI()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2191,7 +2204,7 @@ class SliderLabelItemComponent extends BaseAngular {
     }
 }
 SliderLabelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SliderLabelItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SliderLabelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderLabelItemComponent, selector: "sv-ng-slider-label-item", inputs: { model: "model", item: "item" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"model.getLabelCss(item.locText)\"\n      [style]=\"{ left: model.getPercent(item.value) + '%' }\"\n      (pointerup)=\"model.handleLabelPointerUp($any($event), item.value)\">\n        <div [class]=\"model.cssClasses.labelTick\"></div>\n        <div [class]=\"model.cssClasses.labelText\" [model]=\"item.locText\" sv-ng-string></div>\n    </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+SliderLabelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderLabelItemComponent, selector: "sv-ng-slider-label-item", inputs: { model: "model", item: "item" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"model.getLabelCss(item.locText)\"\n      [style]=\"{ left: model.getPercent(item.value) + '%' }\"\n      (pointerup)=\"model.handleLabelPointerUp($any($event), item.value)\">\n        <div [class]=\"model.cssClasses.labelTick\"></div>\n        <div [class]=\"model.cssClasses.labelTextContainer\">\n          <div *ngIf=\"!item.showValue\" [class]=\"model.cssClasses.labelText\" [model]=\"item.locText\" sv-ng-string></div>\n          <div *ngIf=\"item.showValue\" [class]=\"model.cssClasses.labelText\">{{ item.value }}</div>\n          <div *ngIf=\"item.showValue\" [class]=\"model.cssClasses.labelTextSecondaryMode\" [model]=\"item.locText\" sv-ng-string></div>\n        </div>\n    </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SliderLabelItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2381,6 +2394,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("sv-action-bar-item-dropdown", ActionBarItemDropdownComponent);
 
+class PanelComponent extends BaseAngular {
+    constructor() {
+        super(...arguments);
+        this.trackRowBy = (_, row) => {
+            return row.id;
+        };
+    }
+    getModel() {
+        return this.model;
+    }
+    ngAfterViewInit() {
+        var _a;
+        if (!!((_a = this.panelContainerRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.model.afterRender(this.panelContainerRef.nativeElement);
+        }
+    }
+    get canRender() {
+        return this.model && this.model.survey && this.model.getIsContentVisible();
+    }
+}
+PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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=\"canRender\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.renderedIsExpanded\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" \n      [attr.id]=\"model.contentId\" [attr.role]=\"model.ariaRole\" [attr.aria-labelledby]=\"model.ariaLabelledBy\"[attr.aria-label]=\"model.ariaLabel\">\n      <ng-container *ngFor=\"let row of model.visibleRows; 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: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-panel, '[sv-ng-panel]'",
+                    templateUrl: "./panel.component.html",
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], panelContainerRef: [{
+                type: ViewChild,
+                args: ["panelContainer", { static: false, read: ElementRef }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);
+
 class SelectBaseItemComponent extends BaseAngular {
     constructor() {
         super(...arguments);
@@ -2415,7 +2464,7 @@ class SelectBaseItemComponent extends BaseAngular {
     }
 }
 SelectBaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectBaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\" #container>\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\"\n        sv-ng-checkbox-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\"\n        [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span>\n    </ng-template>\n  </div>\n  <div *ngIf=\"model.isCommentShowing\" [class]=\"question.getCommentAreaCss(true)\" [question]=\"question\" [item]=\"model\" sv-ng-comment-choice></div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentChoiceComponent, selector: "sv-ng-comment-choice, '[sv-ng-comment-choice]'", inputs: ["question", "item"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SelectBaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\" #container>\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\"\n        sv-ng-checkbox-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\"\n        [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span>\n    </ng-template>\n  </div>\n  <sv-ng-panel *ngIf=\"model.isPanelShowing\" [model]='model.panel'></sv-ng-panel>\n  <div *ngIf=\"model.isCommentShowing\" [class]=\"question.getCommentAreaCss(true)\" [question]=\"question\" [item]=\"model\" sv-ng-comment-choice></div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: ["model"] }, { type: SurveyCommentChoiceComponent, selector: "sv-ng-comment-choice, '[sv-ng-comment-choice]'", inputs: ["question", "item"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBaseItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2770,7 +2819,7 @@ RendererFactory.Instance.registerRenderer("rating", "dropdown", "rating-dropdown
 class BooleanCheckboxComponent {
 }
 BooleanCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\"\n        [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n        [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n        [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n        [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n        [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n        [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n        [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n        <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n      </span>\n    </label>\n    <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\"\n        [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n        [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n        [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n        [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n        [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n        [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n        [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n        <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n      </span>\n    </label>\n    <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element", "renderActions"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanCheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2954,42 +3003,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("sv-navigation-toc", ProgressTocComponent);
 
-class PanelComponent extends BaseAngular {
-    constructor() {
-        super(...arguments);
-        this.trackRowBy = (_, row) => {
-            return row.id;
-        };
-    }
-    getModel() {
-        return this.model;
-    }
-    ngAfterViewInit() {
-        var _a;
-        if (!!((_a = this.panelContainerRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
-            this.model.afterRender(this.panelContainerRef.nativeElement);
-        }
-    }
-    get canRender() {
-        return this.model && this.model.survey && this.model.getIsContentVisible();
-    }
-}
-PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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=\"canRender\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.renderedIsExpanded\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" \n      [attr.id]=\"model.contentId\" [attr.role]=\"model.ariaRole\" [attr.aria-labelledby]=\"model.ariaLabelledBy\"[attr.aria-label]=\"model.ariaLabel\">\n      <ng-container *ngFor=\"let row of model.visibleRows; 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: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "sv-ng-panel, '[sv-ng-panel]'",
-                    templateUrl: "./panel.component.html",
-                }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], panelContainerRef: [{
-                type: ViewChild,
-                args: ["panelContainer", { static: false, read: ElementRef }]
-            }] } });
-AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);
-
 class SurveyNavigationButton {
     getModel() {
         return this.model;
@@ -3086,10 +3099,10 @@ class MatrixQuestionComponent extends QuestionAngular {
         this.detectChanges();
     }
     trackRowByFn(i, row) {
-        return "column-" + row.name + "-" + i;
+        return row.uniqueId;
     }
     trackColumnByFn(i, column) {
-        return "column-" + column.value + "-" + i;
+        return column.uniqueId;
     }
 }
 MatrixQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -3150,7 +3163,7 @@ AngularComponentFactory.Instance.registerComponent("comment-question", CommentQu
 class SignaturePadQuestionComponent extends QuestionAngular {
 }
 SignaturePadQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SignaturePadQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SignaturePadQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.width]=\"model.renderedCanvasWidth\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\" [model]=\"$any(model).locRenderedPlaceholder\" sv-ng-string></div>\n<div>\n  <img *ngIf=\"!!model.backgroundImage\" [src]=\"model.backgroundImage\" [style.width]=\"model.renderedCanvasWidth\" [class]=\"model.cssClasses.backgroundImage\" role=\"presentation\">\n  <canvas tabindex=\"-1\" [class]=\"model.cssClasses.canvas\" (blur)=\"model.onBlur($event)\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" *ngIf=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValue(true)\"\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<ng-container *ngIf=\"model.showLoadingIndicator\">\n  <div [class]=\"model.cssClasses.loadingIndicator\">\n    <sv-ng-loading-indicator></sv-ng-loading-indicator>\n  </div>\n</ng-container>\n</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: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SignaturePadQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.width]=\"model.renderedCanvasWidth\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\" [model]=\"$any(model).locRenderedPlaceholder\" sv-ng-string></div>\n<div>\n  <img *ngIf=\"!!model.backgroundImage\" [src]=\"model.backgroundImage\" [style.width]=\"model.renderedCanvasWidth\" [class]=\"model.cssClasses.backgroundImage\" role=\"presentation\">\n  <canvas tabindex=\"-1\" [class]=\"model.cssClasses.canvas\" (blur)=\"model.onBlur($event)\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" *ngIf=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValueFromUI()\"\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<ng-container *ngIf=\"model.showLoadingIndicator\">\n  <div [class]=\"model.cssClasses.loadingIndicator\">\n    <sv-ng-loading-indicator></sv-ng-loading-indicator>\n  </div>\n</ng-container>\n</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: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SignaturePadQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3207,7 +3220,7 @@ class MultipleTextRowComponent extends BaseAngular {
         return this.model;
     }
     trackItemBy(_, cell) {
-        return "item" + cell.item.editor.id;
+        return cell.item.editor.id;
     }
 }
 MultipleTextRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultipleTextRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -3249,7 +3262,7 @@ class RankingQuestionComponent extends SelectBaseComponent {
         super(...arguments);
         this.inputType = "";
         this.trackItemBy = (index, item) => {
-            return item.value + "-" + index + "-item";
+            return item.uniqueId;
         };
     }
     getDefaultComponentName() {
@@ -3827,7 +3840,7 @@ class MatrixTableComponent extends BaseAngular {
     }
 }
 MatrixTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: { question: "question", table: "table" }, usesInheritance: true, ngImport: i0, template: "<div #contentElement [class]=\"question.cssClasses.tableWrapper\" [attr.data-sv-drop-target-matrix-row]=\"question.renderedTable.wrapperDropTargetId\">\n  <table [class]=\"question.getTableCss()\">\n    <thead *ngIf=\"table.showHeader\">\n      <tr>\n        <ng-container *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\">\n          <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n            <ng-template\n              [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 }\">\n          </td>\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let row of table.renderedRows; 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-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n          *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n        </sv-ng-matrixdropdown-cell>\n      </tr>\n    </tfoot>\n  </table>\n</div>", 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: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-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: "12.2.17", type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: { question: "question", table: "table" }, usesInheritance: true, ngImport: i0, template: "<div #contentElement [class]=\"question.cssClasses.tableWrapper\">\n  <table [class]=\"question.getTableCss()\">\n    <thead *ngIf=\"table.showHeader\">\n      <tr>\n        <ng-container *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\">\n          <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n            <ng-template\n              [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 }\">\n          </td>\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let row of table.renderedRows; 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-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n          *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n        </sv-ng-matrixdropdown-cell>\n      </tr>\n    </tfoot>\n  </table>\n</div>", 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: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -4023,7 +4036,7 @@ AngularComponentFactory.Instance.registerComponent("composite-question", Composi
 class HeaderCellComponent extends EmbeddedViewContentComponent {
 }
 HeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderCellComponent, selector: "sv-ng-header-cell", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.css\" [style]=\"model.style\">\n    <div class=\"sv-header__cell-content\" [style]=\"model.contentStyle\">\n      <div *ngIf=\"model.showLogo\" class=\"sv-header__logo\">\n        <div [class]=\"model.survey.logoClassNames\">\n          <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n        </div>\n      </div>\n      <div *ngIf=\"model.showTitle\" class=\"sv-header__title\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n      </div>\n      <div *ngIf=\"model.showDescription\" class=\"sv-header__description\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <div *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+HeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderCellComponent, selector: "sv-ng-header-cell", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.css\" [style]=\"model.style\">\n    <div class=\"sv-header__cell-content\" [style]=\"model.contentStyle\">\n      <div *ngIf=\"model.showLogo\" class=\"sv-header__logo\">\n        <div [class]=\"model.survey.logoClassNames\">\n          <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n        </div>\n      </div>\n      <div *ngIf=\"model.showTitle\" class=\"sv-header__title\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n      </div>\n      <div *ngIf=\"model.showDescription\" class=\"sv-header__description\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <div *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -4042,7 +4055,7 @@ AngularComponentFactory.Instance.registerComponent("sv-header-cell", HeaderCellC
 class HeaderMobileComponent extends EmbeddedViewContentComponent {
 }
 HeaderMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HeaderMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderMobileComponent, selector: "sv-ng-header-mobile", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div class=\"sv-header--mobile\">\n    <div *ngIf=\"model.survey.hasLogo\" class=\"sv-header__logo\">\n      <div [class]=\"model.survey.logoClassNames\">\n        <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n      </div>\n    </div>\n    <div *ngIf=\"model.survey.hasTitle\" class=\"sv-header__title\" [style]=\"{ maxWidth: model.renderedTextAreaWidth }\">\n      <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n    </div>\n    <div *ngIf=\"model.survey.renderedHasDescription\" class=\"sv-header__description\" [style]=\"{ maxWidth: model.renderedTextAreaWidth }\">\n      <div *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+HeaderMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderMobileComponent, selector: "sv-ng-header-mobile", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div class=\"sv-header--mobile\">\n    <div *ngIf=\"model.survey.hasLogo\" class=\"sv-header__logo\">\n      <div [class]=\"model.survey.logoClassNames\">\n        <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n      </div>\n    </div>\n    <div *ngIf=\"model.survey.hasTitle\" class=\"sv-header__title\" [style]=\"{ maxWidth: model.renderedTextAreaWidth }\">\n      <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n    </div>\n    <div *ngIf=\"model.survey.renderedHasDescription\" class=\"sv-header__description\" [style]=\"{ maxWidth: model.renderedTextAreaWidth }\">\n      <div *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderMobileComponent, decorators: [{
             type: Component,
             args: [{