survey-angular-ui 2.3.10 → 2.3.11

package/base-angular.d.ts

@@ -18,6 +18,7 @@ export declare abstract class BaseAngular<T extends Base = Base> extends Embedde
     private makeBaseElementAngularCallback?;
     protected isBaseElementSubsribed(stateElement: Base): boolean;
     private getBaseElementCallbacks;
+    private onArrayChangedCallback;
     private makeBaseElementAngular;
     private unMakeBaseElementAngular;
     protected update(key?: string): void;

package/bundles/survey-angular-ui.umd.js

@@ -567,6 +567,9 @@
           _this.changeDetectorRef = changeDetectorRef;
           _this.isModelSubsribed = false;
           _this.isDestroyed = false;
+          _this.onArrayChangedCallback = function (stateElement, options) {
+              _this.update(options.name);
+          };
           return _this;
       }
       Object.defineProperty(BaseAngular.prototype, "surveyModel", {
@@ -618,9 +621,7 @@
                   var val = hash[key];
                   if (Array.isArray(val)) {
                       var val = val;
-                      val["onArrayChanged"] = function (arrayChanges) {
-                          _this.update(key);
-                      };
+                      stateElement.addOnArrayChangedCallback(val, _this.onArrayChangedCallback);
                   }
               });
               stateElement.setPropertyValueCoreHandler = function (hash, key, val) {
@@ -641,6 +642,7 @@
           }
       };
       BaseAngular.prototype.unMakeBaseElementAngular = function (stateElement) {
+          var _this = this;
           if (!!stateElement) {
               if (this.isModelSubsribed) {
                   this.isModelSubsribed = false;
@@ -650,7 +652,7 @@
                       var val = hash[key];
                       if (Array.isArray(val)) {
                           var val = val;
-                          val["onArrayChanged"] = function () { };
+                          stateElement.removeOnArrayChangedCallback(val, _this.onArrayChangedCallback);
                       }
                   });
                   stateElement.disableOnElementRerenderedEvent();
@@ -1282,7 +1284,9 @@
   var ElementTitleActionsComponent = /** @class */ (function (_super) {
       __extends(ElementTitleActionsComponent, _super);
       function ElementTitleActionsComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.renderActions = true;
+          return _this;
       }
       Object.defineProperty(ElementTitleActionsComponent.prototype, "cssClasses", {
           get: function () {
@@ -1294,7 +1298,7 @@
       return ElementTitleActionsComponent;
   }(EmbeddedViewContentComponent));
   ElementTitleActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleActionsComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ElementTitleActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: { element: "element" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  ElementTitleActionsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleActionsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1304,17 +1308,21 @@
                   }]
           }], propDecorators: { element: [{
                   type: i0.Input
+              }], renderActions: [{
+                  type: i0.Input
               }] } });
 
   var ElementTitleComponent = /** @class */ (function (_super) {
       __extends(ElementTitleComponent, _super);
       function ElementTitleComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.renderActions = true;
+          return _this;
       }
       return ElementTitleComponent;
   }(EmbeddedViewContentComponent));
   ElementTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ElementTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: { element: "element" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ElementTitleComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1324,6 +1332,8 @@
                   }]
           }], propDecorators: { element: [{
                   type: i0.Input
+              }], renderActions: [{
+                  type: i0.Input
               }] } });
 
   var SurveyHeaderComponent = /** @class */ (function () {
@@ -1344,7 +1354,7 @@
       return SurveyHeaderComponent;
   }());
   SurveyHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyHeaderComponent, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SurveyHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: { survey: "survey" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  SurveyHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: { survey: "survey" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyHeaderComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1811,7 +1821,7 @@
       return PageComponent;
   }(BaseAngular));
   PageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PageComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  PageComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1924,7 +1934,7 @@
       return ElementHeaderComponent;
   }());
   ElementHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2701,7 +2711,7 @@
           return "sv-ng-selectbase-item";
       };
       SelectBaseComponent.prototype.trackItemBy = function (_, item) {
-          return item.value;
+          return item.uniqueId;
       };
       SelectBaseComponent.prototype.trackColumnBy = function (index) {
           return index;
@@ -3835,7 +3845,7 @@
       return BooleanCheckboxComponent;
   }());
   BooleanCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanCheckboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  BooleanCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0__namespace, 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__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  BooleanCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0__namespace, 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__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanCheckboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4154,10 +4164,10 @@
           this.detectChanges();
       };
       MatrixQuestionComponent.prototype.trackRowByFn = function (i, row) {
-          return "column-" + row.name + "-" + i;
+          return row.uniqueId;
       };
       MatrixQuestionComponent.prototype.trackColumnByFn = function (i, column) {
-          return "column-" + column.value + "-" + i;
+          return column.uniqueId;
       };
       return MatrixQuestionComponent;
   }(QuestionAngular));
@@ -4314,7 +4324,7 @@
           return this.model;
       };
       MultipleTextRowComponent.prototype.trackItemBy = function (_, cell) {
-          return "item" + cell.item.editor.id;
+          return cell.item.editor.id;
       };
       return MultipleTextRowComponent;
   }(BaseAngular));
@@ -4361,7 +4371,7 @@
           var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
           _this.inputType = "";
           _this.trackItemBy = function (index, item) {
-              return item.value + "-" + index + "-item";
+              return item.uniqueId;
           };
           return _this;
       }
@@ -5365,7 +5375,7 @@
       return HeaderCellComponent;
   }(EmbeddedViewContentComponent));
   HeaderCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HeaderCellComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  HeaderCellComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  HeaderCellComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HeaderCellComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5389,7 +5399,7 @@
       return HeaderMobileComponent;
   }(EmbeddedViewContentComponent));
   HeaderMobileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HeaderMobileComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  HeaderMobileComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  HeaderMobileComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HeaderMobileComponent, decorators: [{
               type: i0.Component,
               args: [{