survey-angular-ui 1.9.139 → 1.10.2

package/fesm2015/survey-angular-ui.js

@@ -333,7 +333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class PopupBaseContainerComponent extends BaseAngular {
     constructor(changeDetectorRef) {
         super(changeDetectorRef);
-        this.prevIsVisible = false;
         this.changeDetectorRef.detach();
     }
     getModel() {
@@ -363,12 +362,9 @@ class PopupBaseContainerComponent extends BaseAngular {
     afterUpdate(isSync = false) {
         super.afterUpdate(isSync);
         if (!isSync) {
-            if (!this.prevIsVisible && this.model.isVisible) {
+            if (!this.model.isPositionSet && this.model.isVisible) {
                 this.model.updateOnShowing();
             }
-            if (this.prevIsVisible !== this.model.isVisible) {
-                this.prevIsVisible = this.model.isVisible;
-            }
         }
     }
     clickInside(event) {
@@ -589,7 +585,7 @@ class ErrorsComponent {
     }
 }
 ErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { properties: { "attr.role": "this.role", "id": "this.id", "attr.aria-live": "this.ariaLive", "class": "this.class" } }, ngImport: i0, template: "<div *ngFor=\"let error of element.errors;\">\n  <span\n    [class]=\"element.cssClasses ? element.cssClasses.error.icon : 'panel-error-icon'\"\n    aria-hidden=\"true\"\n  ></span>\n  <span [class]=\"element.cssClasses ? element.cssClasses.error.item : 'panel-error-item'\" [model]=\"error.locText\" sv-ng-string>\n  </span>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { properties: { "attr.role": "this.role", "id": "this.id", "attr.aria-live": "this.ariaLive", "class": "this.class" } }, ngImport: i0, template: "<ng-container *ngFor=\"let error of element.errors;\">\n  <ng-template [component]=\"{ name: element.survey.questionErrorComponent, data: { element: element, cssClasses: element.cssClasses, error: error } }\"></ng-template>\n</ng-container>\n", directives: [{ 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: ErrorsComponent, decorators: [{
             type: Component,
             args: [{
@@ -1096,7 +1092,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" } }, 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.additionalTitleToolbar\">\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" } }, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2280,7 +2276,7 @@ class RatingItemComponent extends BaseAngular {
     }
 }
 RatingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RatingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+RatingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2309,7 +2305,7 @@ class RatingItemStarComponent extends BaseAngular {
     }
 }
 RatingItemStarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemStarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RatingItemStarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n      <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+RatingItemStarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n      <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemStarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2338,7 +2334,7 @@ class RatingItemSmileyComponent extends BaseAngular {
     }
 }
 RatingItemSmileyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemSmileyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RatingItemSmileyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+RatingItemSmileyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemSmileyComponent, decorators: [{
             type: Component,
             args: [{
@@ -2517,7 +2513,7 @@ class ProgressButtonsComponent {
     }
 }
 ProgressButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressButtonsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ProgressButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model", survey: "survey", container: "container" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.getRootCss(container)\" [style.maxWidth]=\"model.progressWidth\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"progress\">\n  <div *ngIf=\"canShowHeader\" [class]=\"survey.css.progressButtonsHeader\">\n    <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.headerText\">{{ model.headerText }}</div>\n  </div>\n  <div [class]=\"survey.css.progressButtonsContainer\">\n    <div\n      [class]=\"model.getScrollButtonCss(hasScroller, true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"survey.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"survey.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of survey.visiblePages; index as index\"\n          [class]=\"model.getListElementCss(index)\"\n          (click)=\"model.isListElementClickable(index) ? model.clickListElement(page) : null\"\n          [attr.data-page-number]=\"model.getItemNumber(page)\">\n          <div [class]=\"survey.css.progressButtonsConnector\"></div>\n          <div *ngIf=\"canShowItemTitles\"\n            [class]=\"survey.css.progressButtonsPageTitle\"\n            [title]=\"page.renderedNavigationTitle\"\n          >\n            {{ page.renderedNavigationTitle }}\n          </div>\n          <div *ngIf=\"canShowItemTitles\"\n            [class]=\"survey.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n          <div [class]=\"survey.css.progressButtonsButton\"><div [class]=\"survey.css.progressButtonsButtonBackground\"></div><div [class]=\"survey.css.progressButtonsButtonContent\"></div><span>{{model.getItemNumber(page)}}</span></div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"model.getScrollButtonCss(hasScroller, false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n  <div *ngIf=\"canShowFooter\" [class]=\"survey.css.progressButtonsFooter\">\n    <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.footerText\">{{ model.footerText }}</div>\n  </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ProgressButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model", survey: "survey", container: "container" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.getRootCss(container)\" [style.maxWidth]=\"model.progressWidth\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"progress\">\n  <div *ngIf=\"canShowHeader\" [class]=\"survey.css.progressButtonsHeader\">\n    <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.headerText\">{{ model.headerText }}</div>\n  </div>\n  <div [class]=\"survey.css.progressButtonsContainer\">\n    <div\n      [class]=\"model.getScrollButtonCss(hasScroller, true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"survey.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"survey.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of survey.visiblePages; index as index\"\n          [class]=\"model.getListElementCss(index)\"\n          (click)=\"model.isListElementClickable(index) ? model.clickListElement(page) : null\"\n          [attr.data-page-number]=\"model.getItemNumber(page)\">\n          <div [class]=\"survey.css.progressButtonsConnector\"></div>\n          <div *ngIf=\"canShowItemTitles\"\n            [class]=\"survey.css.progressButtonsPageTitle\"\n            [title]=\"page.renderedNavigationTitle\"\n          >\n            <sv-ng-string [model]=\"page.locNavigationTitle\"></sv-ng-string>\n          </div>\n          <div *ngIf=\"canShowItemTitles\"\n            [class]=\"survey.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n          <div [class]=\"survey.css.progressButtonsButton\"><div [class]=\"survey.css.progressButtonsButtonBackground\"></div><div [class]=\"survey.css.progressButtonsButtonContent\"></div><span>{{model.getItemNumber(page)}}</span></div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"model.getScrollButtonCss(hasScroller, false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n  <div *ngIf=\"canShowFooter\" [class]=\"survey.css.progressButtonsFooter\">\n    <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.footerText\">{{ model.footerText }}</div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -2861,7 +2857,7 @@ class RankingItemComponent extends BaseAngular {
     }
 }
 RankingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg [class]=\"question.getIconHoverCss()\">\n          <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n        </svg> \n        <svg [class]=\"question.getIconFocusCss()\">\n          <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n        </svg> \n      </div>\n\n      <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n      <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n        <svg>\n          <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n        </svg> \n      </div></ng-template>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\"\n    (pointerup)=\"question.handlePointerUp($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg [class]=\"question.getIconHoverCss()\">\n          <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n        </svg> \n        <svg [class]=\"question.getIconFocusCss()\">\n          <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n        </svg> \n      </div>\n\n      <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n      <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n        <svg>\n          <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n        </svg> \n      </div></ng-template>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2999,14 +2995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 AngularComponentFactory.Instance.registerComponent("sv-paneldynamic-progress-text", PanelDynamicProgressText);
 
 class PanelDynamicQuestionComponent extends QuestionAngular {
-    get renderedPanels() {
-        if (this.model.isRenderModeList)
-            return this.model.visiblePanels;
-        const panels = [];
-        if (this.model.currentPanel) {
-            panels.push(this.model.currentPanel);
-        }
-        return panels;
+    trackPanelBy(_, panel) {
+        return panel.id;
     }
     onModelChanged() {
         super.onModelChanged();
@@ -3057,7 +3047,7 @@ class PanelDynamicQuestionComponent extends QuestionAngular {
     }
 }
 PanelDynamicQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n    <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n    <sv-ng-paneldynamic-add-btn *ngIf=\"model.canAddPanel\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  </div>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n    <div\n      [class]=\"model.cssClasses.progressBar\"\n      [style]=\"{ width: model.progress }\"\n      role=\"progressbar\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n  <!-- add track by [key]=\"panel.id\" -->\n  <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n    <div [class]=\"model.getPanelWrapperCss(panel)\">\n      <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n      <ng-container *ngIf=\"model.panelRemoveButtonLocation ==='right' && model.canRemovePanel && panel.state != 'collapsed'\">\n        <ng-template [component]=\"{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n      </ng-container>\n    </div>\n    <!-- add track by [key]=\"'separator' + panel.id\" -->\n    <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\"/>\n  </ng-container>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\"/>\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div\n        [class]=\"model.cssClasses.progressBar\"\n        [style]=\"{ width: model.progress }\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>\n<ng-template #progress>\n  <div [class]=\"this.progressCssClass\">\n    <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n      <div [class]=\"model.cssClasses.progressContainer\">\n        <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n        <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n          <div\n            [class]=\"model.cssClasses.progressBar\"\n            [style]=\"{ width: model.progress }\"\n            role=\"progressbar\"\n          ></div>\n        </div>\n          <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n      </div>\n      <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n      <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n    </div>\n  </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n    <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n    <sv-ng-paneldynamic-add-btn *ngIf=\"model.canAddPanel\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  </div>\n  <div [class]=\"model.cssClasses.progress\"\n    *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n    <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\"\n    *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n  <div [class]=\"model.cssClasses.panelsContainer\">\n    <ng-container *ngFor=\"let panel of model.renderedPanels; index as index; trackBy: trackPanelBy\">\n      <div [class]=\"model.getPanelWrapperCss(panel)\">\n        <ng-template\n          [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n        <ng-container\n          *ngIf=\"model.panelRemoveButtonLocation ==='right' && model.canRemovePanel && panel.state != 'collapsed'\">\n          <ng-template\n            [component]=\"{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n        </ng-container>\n      </div>\n      <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\" />\n    </ng-container>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\"\n    *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\"\n    [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\" />\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n    </div>\n    <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>\n<ng-template #progress>\n  <div [class]=\"this.progressCssClass\">\n    <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n      <div [class]=\"model.cssClasses.progressContainer\">\n        <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n        <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n          <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n        </div>\n        <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n      </div>\n      <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n      <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n    </div>\n  </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3317,9 +3307,29 @@ class MatrixRowComponent extends BaseAngular {
     trackCellBy(_, cell) {
         return cell.id;
     }
+    onModelChanged() {
+        var _a;
+        super.onModelChanged();
+        if (this.previousModel) {
+            this.previousModel.setRootElement(undefined);
+        }
+        if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.model.setRootElement(this.container.nativeElement);
+        }
+    }
+    ngAfterViewInit() {
+        var _a;
+        if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.model.setRootElement(this.container.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.model.setRootElement(undefined);
+    }
 }
 MatrixRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <tr *ngIf=\"model.visible\" [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\"\n    [attr.data-sv-drop-target-matrix-row]=\"row && row.id\">\n    <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrixdropdown-cell>\n  </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ 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"] }] });
+MatrixRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <tr *ngIf=\"model.visible\" [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\"\n    [attr.data-sv-drop-target-matrix-row]=\"row && row.id\" #container>\n    <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrixdropdown-cell>\n  </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixRowComponent, decorators: [{
             type: Component,
             args: [{
@@ -3331,6 +3341,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], question: [{
                 type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container", { static: false, read: ElementRef }]
             }] } });
 
 class MatrixTableComponent extends BaseAngular {
@@ -3345,7 +3358,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 [style]=\"{ overflowX: question.showHorizontalScroll ? 'scroll' : '' }\" #contentElement [class]=\"question.cssClasses.tableWrapper\">\n  <table [class]=\"question.getTableCss()\">\n    <thead *ngIf=\"table.showHeader\">\n      <tr>\n        <ng-container\n          *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\"\n        >\n              <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n                <ng-template [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n                  <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n                  <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n                  </sv-ng-matrixheaderrequired>\n                </ng-template>\n              </th>\n              \n              <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\"></td>\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let row of table.rows; trackBy: trackRowBy\">\n        <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n      </ng-container>\n    </tbody>\n    <tfoot *ngIf=\"table.showFooter\">\n      <tr>\n        <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\" *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 [style]=\"{ overflowX: question.showHorizontalScroll ? 'scroll' : '' }\" #contentElement\n  [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: [{
@@ -3468,6 +3481,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 AngularComponentFactory.Instance.registerComponent("image-question", ImageQuestionComponent);
 
+class QuestionErrorComponent {
+}
+QuestionErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+QuestionErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionErrorComponent, selector: "sv-question-error", inputs: { error: "error", cssClasses: "cssClasses", element: "element" }, ngImport: i0, template: "<div>\n  <span\n    [class]=\"cssClasses ? cssClasses.error.icon : 'panel-error-icon'\"\n    aria-hidden=\"true\"\n  ></span>\n  <span [class]=\"cssClasses ? cssClasses.error.item : 'panel-error-item'\" [model]=\"error.locText\" sv-ng-string>\n  </span>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionErrorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-question-error",
+                    templateUrl: "./question-error.component.html"
+                }]
+        }], propDecorators: { error: [{
+                type: Input
+            }], cssClasses: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-question-error", QuestionErrorComponent);
+
 class CustomQuestionComponent extends QuestionAngular {
     get contentQuestion() {
         return this.model.contentQuestion;
@@ -3580,7 +3612,7 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
-        MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
+        MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent, QuestionErrorComponent,
         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
         NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, ChooseFileBtn, FilePreviewComponent, SvgBundleComponent], imports: [CommonModule, FormsModule], exports: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
@@ -3619,7 +3651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
                         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
                         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
-                        MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
+                        MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent, QuestionErrorComponent,
                         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
                         NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, ChooseFileBtn, FilePreviewComponent, SvgBundleComponent
                     ],
@@ -3653,5 +3685,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CharacterCounterComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, ComponentsContainerComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FilePreviewComponent, FileQuestionComponent, HeaderCellComponent, HeaderComponent, HeaderMobileComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownCellComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, MultipleTextRowComponent, NotifierComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PaneldynamicRemoveButtonComponent, PopupBaseContainerComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, ProgressTocComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingDropdownItemComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SkeletonComponent, StringEditorComponent, StringViewerComponent, SurveyCommentComponent, SurveyCommentOtherComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyNavigationButton, SurveyStringComponent, SvgBundleComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
+export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CharacterCounterComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, ComponentsContainerComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FilePreviewComponent, FileQuestionComponent, HeaderCellComponent, HeaderComponent, HeaderMobileComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownCellComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, MultipleTextRowComponent, NotifierComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PaneldynamicRemoveButtonComponent, PopupBaseContainerComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, ProgressTocComponent, QuestionAngular, QuestionComponent, QuestionErrorComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingDropdownItemComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SkeletonComponent, StringEditorComponent, StringViewerComponent, SurveyCommentComponent, SurveyCommentOtherComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyNavigationButton, SurveyStringComponent, SvgBundleComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
 //# sourceMappingURL=survey-angular-ui.js.map