survey-angular-ui 2.3.10 → 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: [{
@@ -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;
@@ -2806,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: [{
@@ -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 });
@@ -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() {
@@ -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: [{