survey-angular-ui 2.3.8 → 2.3.10

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

@@ -1355,253 +1355,6 @@
                   type: i0.Input
               }] } });
 
-  var ErrorsComponent = /** @class */ (function () {
-      function ErrorsComponent() {
-      }
-      Object.defineProperty(ErrorsComponent.prototype, "id", {
-          get: function () {
-              return this.element.id + "_errors";
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(ErrorsComponent.prototype, "class", {
-          get: function () {
-              return this.element.cssError;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      return ErrorsComponent;
-  }());
-  ErrorsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ErrorsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { properties: { "id": "this.id", "class": "this.class" } }, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let error of element.renderedErrors;\">\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__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: ErrorsComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      templateUrl: "./errors.component.html",
-                      selector: "'[sv-ng-errors]'"
-                  }]
-          }], ctorParameters: function () { return []; }, propDecorators: { element: [{
-                  type: i0.Input
-              }], location: [{
-                  type: i0.Input
-              }], id: [{
-                  type: i0.HostBinding,
-                  args: ["id"]
-              }], class: [{
-                  type: i0.HostBinding,
-                  args: ["class"]
-              }] } });
-
-  var ElementComponent = /** @class */ (function (_super) {
-      __extends(ElementComponent, _super);
-      function ElementComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      ElementComponent.prototype.getModel = function () {
-          return this.model;
-      };
-      Object.defineProperty(ElementComponent.prototype, "elementComponentName", {
-          get: function () {
-              return this.model.isPanel ? "panel" : "question";
-          },
-          enumerable: false,
-          configurable: true
-      });
-      ElementComponent.prototype.onModelChanged = function () {
-          var _a;
-          _super.prototype.onModelChanged.call(this);
-          if (this.previousModel) {
-              this.previousModel.setWrapperElement(undefined);
-          }
-          if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
-              this.model.setWrapperElement(this.container.nativeElement);
-          }
-      };
-      Object.defineProperty(ElementComponent.prototype, "componentName", {
-          get: function () {
-              var survey = this.surveyModel;
-              if (!!survey) {
-                  var name = survey.getElementWrapperComponentName(this.model);
-                  if (!!name) {
-                      return name;
-                  }
-              }
-              return this.elementComponentName;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(ElementComponent.prototype, "rootStyle", {
-          get: function () {
-              //use this if to check if cssClassses are calculated and allowRootStyle flag was set
-              if (!!this.model.cssClasses) {
-                  return this.model.rootStyle;
-              }
-              else {
-                  return {};
-              }
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(ElementComponent.prototype, "componentData", {
-          get: function () {
-              var survey = this.surveyModel;
-              var data;
-              if (!!survey) {
-                  data = survey.getElementWrapperComponentData(this.model);
-              }
-              return {
-                  componentName: this.elementComponentName,
-                  componentData: {
-                      model: this.model,
-                      data: data
-                  }
-              };
-          },
-          enumerable: false,
-          configurable: true
-      });
-      ElementComponent.prototype.ngAfterViewInit = function () {
-          var _a;
-          if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
-              this.model.setWrapperElement(this.container.nativeElement);
-          }
-      };
-      ElementComponent.prototype.ngOnDestroy = function () {
-          _super.prototype.ngOnDestroy.call(this);
-          this.model.setWrapperElement(undefined);
-      };
-      return ElementComponent;
-  }(BaseAngular));
-  ElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div *ngIf=\"!!model\" [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\" #container>\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], 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: ElementComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "sv-ng-element",
-                      templateUrl: "./element.component.html",
-                      styleUrls: ["./hide-host.scss"]
-                  }]
-          }], propDecorators: { model: [{
-                  type: i0.Input
-              }], container: [{
-                  type: i0.ViewChild,
-                  args: ["container", { static: false, read: i0.ElementRef }]
-              }] } });
-
-  var RowComponent = /** @class */ (function (_super) {
-      __extends(RowComponent, _super);
-      function RowComponent(cdr, vcr, ngZone) {
-          var _this = _super.call(this, cdr, vcr) || this;
-          _this.ngZone = ngZone;
-          return _this;
-      }
-      RowComponent.prototype.getModel = function () {
-          return this.row;
-      };
-      RowComponent.prototype.trackElementBy = function (index, element) {
-          return element.name + index;
-      };
-      RowComponent.prototype.ngAfterViewInit = function () {
-          var _this = this;
-          var _a;
-          var el = (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement;
-          if (!!el) {
-              this.row.setRootElement(el);
-              if (!this.row.isNeedRender) {
-                  this.ngZone.runOutsideAngular(function () {
-                      _this.lazyRenderingTimeout = setTimeout(function () {
-                          _this.row.startLazyRendering(el);
-                      }, 10);
-                  });
-              }
-          }
-      };
-      RowComponent.prototype.onModelChanged = function () {
-          var _a;
-          _super.prototype.onModelChanged.call(this);
-          if (!this.previousModel) {
-              return;
-          }
-          else {
-              this.previousModel.setRootElement(undefined);
-              if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) {
-                  this.row.setRootElement(this.container.nativeElement);
-              }
-              this.row.isNeedRender = this.previousModel.isNeedRender;
-              this.stopLazyRendering();
-          }
-      };
-      RowComponent.prototype.stopLazyRendering = function () {
-          clearTimeout(this.lazyRenderingTimeout);
-          this.row.stopLazyRendering();
-          this.row.isNeedRender = !this.row.isLazyRendering();
-      };
-      RowComponent.prototype.ngOnDestroy = function () {
-          _super.prototype.ngOnDestroy.call(this);
-          if (!this.isBaseElementSubsribed(this.row)) {
-              this.row.setRootElement(undefined);
-              this.stopLazyRendering();
-          }
-      };
-      return RowComponent;
-  }(BaseAngular));
-  RowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RowComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  RowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"row.getRowCss()\" #container>\n    <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n      <sv-ng-element [model]=\"$any(element)\" *ngIf=\"row.isNeedRender\"></sv-ng-element>\n      <ng-template *ngIf=\"!row.isNeedRender && element.skeletonComponentName\" [component]=\"{ name: element.skeletonComponentName, data: { element: element } }\"></ng-template>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: RowComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "sv-ng-row",
-                      templateUrl: "./row.component.html",
-                      styleUrls: ["./hide-host.scss"]
-                  }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { row: [{
-                  type: i0.Input
-              }], container: [{
-                  type: i0.ViewChild,
-                  args: ["container", { read: i0.ElementRef }]
-              }] } });
-
-  var PageComponent = /** @class */ (function (_super) {
-      __extends(PageComponent, _super);
-      function PageComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      PageComponent.prototype.getModel = function () {
-          return this.model;
-      };
-      PageComponent.prototype.onModelChanged = function () {
-          if (!!this.pageContainerRef && this.pageContainerRef.nativeElement) {
-              this.model.survey.afterRenderPage(this.pageContainerRef.nativeElement);
-          }
-      };
-      PageComponent.prototype.ngAfterViewInit = function () {
-          var _a, _b;
-          (_a = this.model.survey) === null || _a === void 0 ? void 0 : _a.afterRenderPage((_b = this.pageContainerRef) === null || _b === void 0 ? void 0 : _b.nativeElement);
-      };
-      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: "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"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "page, sv-ng-page",
-                      templateUrl: "./page.component.html",
-                      styleUrls: ["./hide-host.scss"]
-                  }]
-          }], propDecorators: { model: [{
-                  type: i0.Input
-              }], survey: [{
-                  type: i0.Input
-              }], pageContainerRef: [{
-                  type: i0.ViewChild,
-                  args: ["pageContainer", { static: false, read: i0.ElementRef }]
-              }] } });
-
   var BrandInfoComponent = /** @class */ (function () {
       function BrandInfoComponent() {
       }
@@ -1705,7 +1458,7 @@
       return SurveyContentComponent;
   }(BaseAngular));
   SurveyContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyContentComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SurveyContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\" [lang]=\"model.locale || 'en'\" [dir]=\"model.localeDir\">\n    <sv-scroll [disabled]=\"model.rootScrollDisabled\">\n      <sv-svg-bundle *ngIf=\"model.needRenderIcons\"></sv-svg-bundle>\n      <div [class]=\"model.wrapperFormCss\">\n        <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n        <form onsubmit=\"return false;\">\n          <sv-scroll [disabled]=\"model.formScrollDisabled\">\n          <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n          <div [class]=\"model.css.container\">\n            <div *ngIf=\"model.headerView === 'basic' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n            <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n              <div class=\"sv-components-column sv-components-column--expandable\">\n                <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'center' } }\"></ng-template>\n                <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n                  <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n                  <!-- ko if: activePage -->\n                    <ng-container *ngIf=\"model.activePage\">\n                        <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page>\n                    </ng-container>\n                    <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n                    <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                  <!-- /ko -->\n                  <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n                  <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n                </div>\n              </div>\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n            </div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n            <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n              [innerHtml]=\"model.processedCompletedHtml | safeHtml\"></div>\n            <ng-template *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }\"></ng-template>\n            <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.completedBeforeCss\"\n              [innerHtml]=\"model.processedCompletedBeforeHtml | safeHtml\"></div>\n            <div *ngIf=\"model.state === 'loading'\" [class]=\"model.loadingBodyCss\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n            <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n          </div>\n        </sv-scroll>\n        </form>\n        <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n      </div>\n    </sv-scroll>\n  </div>\n</ng-template>", components: [{ type: ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: SvgBundleComponent, selector: "sv-svg-bundle" }, { type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": SafeHtmlPipe } });
+  SurveyContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\" [lang]=\"model.locale || 'en'\" [dir]=\"model.localeDir\">\n    <sv-scroll [disabled]=\"model.rootScrollDisabled\">\n      <sv-svg-bundle *ngIf=\"model.needRenderIcons\"></sv-svg-bundle>\n      <div [class]=\"model.wrapperFormCss\">\n        <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n        <form onsubmit=\"return false;\">\n          <sv-scroll [disabled]=\"model.formScrollDisabled\">\n          <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n          <div [class]=\"model.css.container\">\n            <div *ngIf=\"model.headerView === 'basic' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n            <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n              <div class=\"sv-components-column sv-components-column--expandable\">\n                <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'center' } }\"></ng-template>\n                <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n                  <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n                    <ng-container *ngIf=\"model.activePage\">\n                        <!-- <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page> -->\n                        <ng-template [component]=\"{ name: model.pageComponent || 'sv-page', data: { model: model.activePage, survey: model } }\"></ng-template>\n                    </ng-container>\n                  <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n                  <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n                </div>\n              </div>\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n            </div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n            <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n              [innerHtml]=\"model.processedCompletedHtml | safeHtml\"></div>\n            <ng-template *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }\"></ng-template>\n            <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.completedBeforeCss\"\n              [innerHtml]=\"model.processedCompletedBeforeHtml | safeHtml\"></div>\n            <div *ngIf=\"model.state === 'loading'\" [class]=\"model.loadingBodyCss\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n            <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n          </div>\n        </sv-scroll>\n        </form>\n        <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n      </div>\n    </sv-scroll>\n  </div>\n</ng-template>", components: [{ type: ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: SvgBundleComponent, selector: "sv-svg-bundle" }, { type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": SafeHtmlPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyContentComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1736,97 +1489,345 @@
       SurveyComponent.prototype.getShouldReattachChangeDetector = function () {
           return false;
       };
-      SurveyComponent.prototype.onModelChanged = function () {
-          this.changeDetectorRef.detectChanges();
+      SurveyComponent.prototype.onModelChanged = function () {
+          this.changeDetectorRef.detectChanges();
+      };
+      return SurveyComponent;
+  }(BaseAngular));
+  SurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  SurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyComponent, selector: "survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<sv-ng-modal-container></sv-ng-modal-container><survey-content [model]='model'></survey-content>", isInline: true, components: [{ type: ModalComponent, selector: "sv-ng-modal-container" }, { type: SurveyContentComponent, selector: "survey-content", inputs: ["model"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "survey",
+                      template: "<sv-ng-modal-container></sv-ng-modal-container><survey-content [model]='model'></survey-content>"
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+
+  var PopupSurveyComponent = /** @class */ (function (_super) {
+      __extends(PopupSurveyComponent, _super);
+      function PopupSurveyComponent(changeDetectorRef) {
+          var _this = _super.call(this, changeDetectorRef) || this;
+          changeDetectorRef.detach();
+          return _this;
+      }
+      PopupSurveyComponent.prototype.getModel = function () {
+          return this.popup;
+      };
+      PopupSurveyComponent.prototype.getShouldReattachChangeDetector = function () {
+          return false;
+      };
+      PopupSurveyComponent.prototype.getHeaderCss = function () {
+          var headerCss = this.popup.cssHeaderRoot;
+          if (this.popup.isCollapsed) {
+              headerCss += " " + this.popup.cssRootCollapsedMod;
+          }
+          return headerCss;
+      };
+      PopupSurveyComponent.prototype.closeHandler = function () {
+          this.popup.hide();
+          if (!!this.onClose) {
+              this.onClose();
+          }
+      };
+      PopupSurveyComponent.prototype.ngOnChanges = function (changes) {
+          var _a, _b;
+          if (((_a = changes["model"]) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes["model"]) === null || _b === void 0 ? void 0 : _b.previousValue)) {
+              this.popup = new Survey.PopupSurveyModel(null, this.model);
+          }
+          if (this.isExpanded !== undefined) {
+              this.popup.isExpanded = this.isExpanded;
+          }
+          if (this.allowClose !== undefined) {
+              this.popup.allowClose = this.allowClose;
+          }
+          if (this.allowFullScreen !== undefined) {
+              this.popup.allowFullScreen = this.allowFullScreen;
+          }
+          if (this.closeOnCompleteTimeout !== undefined) {
+              this.popup.closeOnCompleteTimeout = this.closeOnCompleteTimeout;
+          }
+          this.popup.isShowing = true;
+          this.changeDetectorRef.detectChanges();
+      };
+      PopupSurveyComponent.prototype.ngOnDestroy = function () {
+          _super.prototype.ngOnDestroy.call(this);
+          this.popup.dispose();
+      };
+      return PopupSurveyComponent;
+  }(BaseAngular));
+  PopupSurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupSurveyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  PopupSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model", isExpanded: "isExpanded", allowClose: "allowClose", closeOnCompleteTimeout: "closeOnCompleteTimeout", allowFullScreen: "allowFullScreen", onClose: "onClose" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"!!popup && popup.isShowing\" [class]=\"popup.cssRoot\" [style.width]=\"popup.renderedWidth\" [style.maxWidth]=\"popup.renderedWidth\" (scroll)=\"popup.onScroll()\">\n  <div [class]=\"popup.cssRootContent\">\n    <div [class]=\"getHeaderCss()\">\n      <div *ngIf=\"popup.isCollapsed && !!popup.locTitle\" [class]=\"popup.cssHeaderTitleCollapsed\">\n        {{popup.locTitle.renderedHtml}}\n      </div>\n      <div [class]=\"popup.cssHeaderButtonsContainer\">\n        <div *ngIf=\"popup.allowFullScreen\" [class]=\"popup.cssHeaderFullScreenButton\" (click)=\"popup.toggleFullScreen()\">\n          <svg *ngIf=\"popup.isFullScreen\" [iconName]=\"'icon-back-to-panel_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n          <svg *ngIf=\"!popup.isFullScreen\" [iconName]=\"'icon-full-screen_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n\n        <div [class]=\"popup.cssHeaderCollapseButton\" (click)=\"popup.changeExpandCollapse()\">\n            <svg *ngIf=\"popup.isExpanded\" [iconName]=\"'icon-minimize_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n            <svg *ngIf=\"popup.isCollapsed\" [iconName]=\"'icon-restore_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n\n        <div *ngIf=\"popup.allowClose\" [class]=\"popup.cssHeaderCloseButton\" (click)=\"closeHandler()\">\n          <svg [iconName]=\"'icon-close_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n  </div>\n  <div [class]=\"popup.cssBody\">\n    <survey [model]=\"popup.survey\"></survey>\n  </div>\n  </div>\n</div>", styles: [""], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyComponent, selector: "survey", inputs: ["model"] }], 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: PopupSurveyComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "popup-survey",
+                      templateUrl: "./popup.survey.component.html",
+                      styleUrls: ["./popup.survey.component.scss"]
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                  type: i0.Input
+              }], isExpanded: [{
+                  type: i0.Input
+              }], allowClose: [{
+                  type: i0.Input
+              }], closeOnCompleteTimeout: [{
+                  type: i0.Input
+              }], allowFullScreen: [{
+                  type: i0.Input
+              }], onClose: [{
+                  type: i0.Input
+              }] } });
+
+  var ErrorsComponent = /** @class */ (function () {
+      function ErrorsComponent() {
+      }
+      Object.defineProperty(ErrorsComponent.prototype, "id", {
+          get: function () {
+              return this.element.id + "_errors";
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(ErrorsComponent.prototype, "class", {
+          get: function () {
+              return this.element.cssError;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      return ErrorsComponent;
+  }());
+  ErrorsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  ErrorsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { properties: { "id": "this.id", "class": "this.class" } }, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let error of element.renderedErrors;\">\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__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: ErrorsComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      templateUrl: "./errors.component.html",
+                      selector: "'[sv-ng-errors]'"
+                  }]
+          }], ctorParameters: function () { return []; }, propDecorators: { element: [{
+                  type: i0.Input
+              }], location: [{
+                  type: i0.Input
+              }], id: [{
+                  type: i0.HostBinding,
+                  args: ["id"]
+              }], class: [{
+                  type: i0.HostBinding,
+                  args: ["class"]
+              }] } });
+
+  var ElementComponent = /** @class */ (function (_super) {
+      __extends(ElementComponent, _super);
+      function ElementComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      ElementComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      Object.defineProperty(ElementComponent.prototype, "elementComponentName", {
+          get: function () {
+              return this.model.isPanel ? "panel" : "question";
+          },
+          enumerable: false,
+          configurable: true
+      });
+      ElementComponent.prototype.onModelChanged = function () {
+          var _a;
+          _super.prototype.onModelChanged.call(this);
+          if (this.previousModel) {
+              this.previousModel.setWrapperElement(undefined);
+          }
+          if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+              this.model.setWrapperElement(this.container.nativeElement);
+          }
+      };
+      Object.defineProperty(ElementComponent.prototype, "componentName", {
+          get: function () {
+              var survey = this.surveyModel;
+              if (!!survey) {
+                  var name = survey.getElementWrapperComponentName(this.model);
+                  if (!!name) {
+                      return name;
+                  }
+              }
+              return this.elementComponentName;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(ElementComponent.prototype, "rootStyle", {
+          get: function () {
+              //use this if to check if cssClassses are calculated and allowRootStyle flag was set
+              if (!!this.model.cssClasses) {
+                  return this.model.rootStyle;
+              }
+              else {
+                  return {};
+              }
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(ElementComponent.prototype, "componentData", {
+          get: function () {
+              var survey = this.surveyModel;
+              var data;
+              if (!!survey) {
+                  data = survey.getElementWrapperComponentData(this.model);
+              }
+              return {
+                  componentName: this.elementComponentName,
+                  componentData: {
+                      model: this.model,
+                      data: data
+                  }
+              };
+          },
+          enumerable: false,
+          configurable: true
+      });
+      ElementComponent.prototype.ngAfterViewInit = function () {
+          var _a;
+          if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+              this.model.setWrapperElement(this.container.nativeElement);
+          }
+      };
+      ElementComponent.prototype.ngOnDestroy = function () {
+          _super.prototype.ngOnDestroy.call(this);
+          this.model.setWrapperElement(undefined);
       };
-      return SurveyComponent;
+      return ElementComponent;
   }(BaseAngular));
-  SurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyComponent, selector: "survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<sv-ng-modal-container></sv-ng-modal-container><survey-content [model]='model'></survey-content>", isInline: true, components: [{ type: ModalComponent, selector: "sv-ng-modal-container" }, { type: SurveyContentComponent, selector: "survey-content", inputs: ["model"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyComponent, decorators: [{
+  ElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  ElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div *ngIf=\"!!model\" [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\" #container>\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], 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: ElementComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: "survey",
-                      template: "<sv-ng-modal-container></sv-ng-modal-container><survey-content [model]='model'></survey-content>"
+                      selector: "sv-ng-element",
+                      templateUrl: "./element.component.html",
+                      styleUrls: ["./hide-host.scss"]
                   }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
+          }], propDecorators: { model: [{
                   type: i0.Input
+              }], container: [{
+                  type: i0.ViewChild,
+                  args: ["container", { static: false, read: i0.ElementRef }]
               }] } });
 
-  var PopupSurveyComponent = /** @class */ (function (_super) {
-      __extends(PopupSurveyComponent, _super);
-      function PopupSurveyComponent(changeDetectorRef) {
-          var _this = _super.call(this, changeDetectorRef) || this;
-          changeDetectorRef.detach();
+  var RowComponent = /** @class */ (function (_super) {
+      __extends(RowComponent, _super);
+      function RowComponent(cdr, vcr, ngZone) {
+          var _this = _super.call(this, cdr, vcr) || this;
+          _this.ngZone = ngZone;
           return _this;
       }
-      PopupSurveyComponent.prototype.getModel = function () {
-          return this.popup;
-      };
-      PopupSurveyComponent.prototype.getShouldReattachChangeDetector = function () {
-          return false;
+      RowComponent.prototype.getModel = function () {
+          return this.row;
       };
-      PopupSurveyComponent.prototype.getHeaderCss = function () {
-          var headerCss = this.popup.cssHeaderRoot;
-          if (this.popup.isCollapsed) {
-              headerCss += " " + this.popup.cssRootCollapsedMod;
-          }
-          return headerCss;
+      RowComponent.prototype.trackElementBy = function (index, element) {
+          return element.name + index;
       };
-      PopupSurveyComponent.prototype.closeHandler = function () {
-          this.popup.hide();
-          if (!!this.onClose) {
-              this.onClose();
+      RowComponent.prototype.ngAfterViewInit = function () {
+          var _this = this;
+          var _a;
+          var el = (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement;
+          if (!!el) {
+              this.row.setRootElement(el);
+              if (!this.row.isNeedRender) {
+                  this.ngZone.runOutsideAngular(function () {
+                      _this.lazyRenderingTimeout = setTimeout(function () {
+                          _this.row.startLazyRendering(el);
+                      }, 10);
+                  });
+              }
           }
       };
-      PopupSurveyComponent.prototype.ngOnChanges = function (changes) {
-          var _a, _b;
-          if (((_a = changes["model"]) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes["model"]) === null || _b === void 0 ? void 0 : _b.previousValue)) {
-              this.popup = new Survey.PopupSurveyModel(null, this.model);
-          }
-          if (this.isExpanded !== undefined) {
-              this.popup.isExpanded = this.isExpanded;
-          }
-          if (this.allowClose !== undefined) {
-              this.popup.allowClose = this.allowClose;
-          }
-          if (this.allowFullScreen !== undefined) {
-              this.popup.allowFullScreen = this.allowFullScreen;
+      RowComponent.prototype.onModelChanged = function () {
+          var _a;
+          _super.prototype.onModelChanged.call(this);
+          if (!this.previousModel) {
+              return;
           }
-          if (this.closeOnCompleteTimeout !== undefined) {
-              this.popup.closeOnCompleteTimeout = this.closeOnCompleteTimeout;
+          else {
+              this.previousModel.setRootElement(undefined);
+              if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                  this.row.setRootElement(this.container.nativeElement);
+              }
+              this.row.isNeedRender = this.previousModel.isNeedRender;
+              this.stopLazyRendering();
           }
-          this.popup.isShowing = true;
-          this.changeDetectorRef.detectChanges();
       };
-      PopupSurveyComponent.prototype.ngOnDestroy = function () {
+      RowComponent.prototype.stopLazyRendering = function () {
+          clearTimeout(this.lazyRenderingTimeout);
+          this.row.stopLazyRendering();
+          this.row.isNeedRender = !this.row.isLazyRendering();
+      };
+      RowComponent.prototype.ngOnDestroy = function () {
           _super.prototype.ngOnDestroy.call(this);
-          this.popup.dispose();
+          if (!this.isBaseElementSubsribed(this.row)) {
+              this.row.setRootElement(undefined);
+              this.stopLazyRendering();
+          }
       };
-      return PopupSurveyComponent;
+      return RowComponent;
   }(BaseAngular));
-  PopupSurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupSurveyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  PopupSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model", isExpanded: "isExpanded", allowClose: "allowClose", closeOnCompleteTimeout: "closeOnCompleteTimeout", allowFullScreen: "allowFullScreen", onClose: "onClose" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"!!popup && popup.isShowing\" [class]=\"popup.cssRoot\" [style.width]=\"popup.renderedWidth\" [style.maxWidth]=\"popup.renderedWidth\" (scroll)=\"popup.onScroll()\">\n  <div [class]=\"popup.cssRootContent\">\n    <div [class]=\"getHeaderCss()\">\n      <div *ngIf=\"popup.isCollapsed && !!popup.locTitle\" [class]=\"popup.cssHeaderTitleCollapsed\">\n        {{popup.locTitle.renderedHtml}}\n      </div>\n      <div [class]=\"popup.cssHeaderButtonsContainer\">\n        <div *ngIf=\"popup.allowFullScreen\" [class]=\"popup.cssHeaderFullScreenButton\" (click)=\"popup.toggleFullScreen()\">\n          <svg *ngIf=\"popup.isFullScreen\" [iconName]=\"'icon-back-to-panel_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n          <svg *ngIf=\"!popup.isFullScreen\" [iconName]=\"'icon-full-screen_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n\n        <div [class]=\"popup.cssHeaderCollapseButton\" (click)=\"popup.changeExpandCollapse()\">\n            <svg *ngIf=\"popup.isExpanded\" [iconName]=\"'icon-minimize_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n            <svg *ngIf=\"popup.isCollapsed\" [iconName]=\"'icon-restore_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n\n        <div *ngIf=\"popup.allowClose\" [class]=\"popup.cssHeaderCloseButton\" (click)=\"closeHandler()\">\n          <svg [iconName]=\"'icon-close_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n  </div>\n  <div [class]=\"popup.cssBody\">\n    <survey [model]=\"popup.survey\"></survey>\n  </div>\n  </div>\n</div>", styles: [""], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyComponent, selector: "survey", inputs: ["model"] }], 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: PopupSurveyComponent, decorators: [{
+  RowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RowComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  RowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"row.getRowCss()\" #container>\n    <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n      <sv-ng-element [model]=\"$any(element)\" *ngIf=\"row.isNeedRender\"></sv-ng-element>\n      <ng-template *ngIf=\"!row.isNeedRender && element.skeletonComponentName\" [component]=\"{ name: element.skeletonComponentName, data: { element: element } }\"></ng-template>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: RowComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: "popup-survey",
-                      templateUrl: "./popup.survey.component.html",
-                      styleUrls: ["./popup.survey.component.scss"]
+                      selector: "sv-ng-row",
+                      templateUrl: "./row.component.html",
+                      styleUrls: ["./hide-host.scss"]
                   }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
-                  type: i0.Input
-              }], isExpanded: [{
-                  type: i0.Input
-              }], allowClose: [{
-                  type: i0.Input
-              }], closeOnCompleteTimeout: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { row: [{
                   type: i0.Input
-              }], allowFullScreen: [{
+              }], container: [{
+                  type: i0.ViewChild,
+                  args: ["container", { read: i0.ElementRef }]
+              }] } });
+
+  var PageComponent = /** @class */ (function (_super) {
+      __extends(PageComponent, _super);
+      function PageComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      PageComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      PageComponent.prototype.onModelChanged = function () {
+          if (!!this.pageContainerRef && this.pageContainerRef.nativeElement) {
+              this.model.survey.afterRenderPage(this.pageContainerRef.nativeElement);
+          }
+      };
+      PageComponent.prototype.ngAfterViewInit = function () {
+          var _a, _b;
+          (_a = this.model.survey) === null || _a === void 0 ? void 0 : _a.afterRenderPage((_b = this.pageContainerRef) === null || _b === void 0 ? void 0 : _b.nativeElement);
+      };
+      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"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "sv-page, page, sv-ng-page",
+                      templateUrl: "./page.component.html",
+                      styleUrls: ["./hide-host.scss"]
+                  }]
+          }], propDecorators: { model: [{
                   type: i0.Input
-              }], onClose: [{
+              }], survey: [{
                   type: i0.Input
+              }], pageContainerRef: [{
+                  type: i0.ViewChild,
+                  args: ["pageContainer", { static: false, read: i0.ElementRef }]
               }] } });
+  AngularComponentFactory.Instance.registerComponent("sv-page", PageComponent);
 
   var QuestionAngular = /** @class */ (function (_super) {
       __extends(QuestionAngular, _super);
@@ -2040,7 +2041,7 @@
       return QuestionComponent;
   }(EmbeddedViewContentComponent));
   QuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model", css: "css", survey: "survey" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"model.getRootStyle()\" [id]=\"model.id\"\n    [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.aria-expanded]=\"model.ariaExpanded\">\n    <sv-breadcrumbs\n      *ngIf=\"model.singleInputHasActions\"\n      [model]=\"model.singleInputActions\"\n      [css]=\"model.cssClasses\"\n    ></sv-breadcrumbs>\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"!model.singleInputHideHeader && model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <sv-single-input-summary\n      *ngIf=\"!!model.singleInputSummary\"\n      [model]=\"model.singleInputSummary\"\n      [css]=\"model.cssClasses\"\n    ></sv-single-input-summary>\n    <sv-ng-element\n      *ngIf=\"!model.singleInputSummary && !!singleQuestion\"\n      [model]=\"singleQuestion\"\n    ></sv-ng-element>\n    <ng-template\n      *ngIf=\"!model.singleInputSummary && !singleQuestion\"\n      [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\n      <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"model.renderedIsExpanded\" [attr.aria-hidden]=\"model.contentAriaHidden\">\n        <ng-template\n          [component]=\"{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></ng-template>\n        <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n          <div [model]=\"model.locCommentText\" sv-ng-string></div>\n          <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n        </div>\n        <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\"\n          [model]=\"model.locDescription\" sv-ng-string></div>\n      </div>\n    </ng-template>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>", components: [{ type: BreadcrumbsComponent, selector: "sv-breadcrumbs", inputs: ["model", "css"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SingleInputSummaryComponent, selector: "sv-single-input-summary", inputs: ["model", "css"] }, { type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  QuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model", css: "css", survey: "survey" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"model.getRootStyle()\" [id]=\"model.id\"\n    [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.aria-expanded]=\"model.ariaExpanded\">\n    <sv-breadcrumbs\n      *ngIf=\"model.singleInputHasActions\"\n      [model]=\"model.singleInputActions\"\n      [css]=\"model.cssClasses\"\n    ></sv-breadcrumbs>\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"!model.singleInputHideHeader && model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <sv-single-input-summary\n      *ngIf=\"!!model.singleInputSummary\"\n      [model]=\"model.singleInputSummary\"\n      [css]=\"model.cssClasses\"\n    ></sv-single-input-summary>\n    <sv-ng-element\n      *ngIf=\"!model.singleInputSummary && !!singleQuestion\"\n      [model]=\"singleQuestion\"\n    ></sv-ng-element>\n    <ng-template\n      *ngIf=\"!model.singleInputSummary && !singleQuestion\"\n      [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\n      <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"model.renderedIsExpanded\" [attr.aria-hidden]=\"model.contentAriaHidden\" [attr.data-sv-drop-target-matrix-row]=\"model.dragDropMatrixAttribute\" [attr.data-sv-drop-target-matrix]=\"model.dragDropMatrixAttribute\">\n        <ng-template\n          [component]=\"{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></ng-template>\n        <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n          <div [model]=\"model.locCommentText\" sv-ng-string></div>\n          <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n        </div>\n        <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\"\n          [model]=\"model.locDescription\" sv-ng-string></div>\n      </div>\n    </ng-template>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>", components: [{ type: BreadcrumbsComponent, selector: "sv-breadcrumbs", inputs: ["model", "css"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SingleInputSummaryComponent, selector: "sv-single-input-summary", inputs: ["model", "css"] }, { type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2725,7 +2726,7 @@
       return SelectBaseComponent;
   }(QuestionAngular));
   SelectBaseComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SelectBaseComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue(true)\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2__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"] }] });
+  SelectBaseComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseComponent, selector: "['sv-ng-selectbase']", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValueFromUI()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2__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: SelectBaseComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2750,7 +2751,7 @@
       return RadiogroupComponent;
   }(SelectBaseComponent));
   RadiogroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  RadiogroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue(true)\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2__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"] }] });
+  RadiogroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupComponent, selector: "sv-ng-radiogroup-question", usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValueFromUI()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2__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: RadiogroupComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2800,7 +2801,7 @@
       return CheckboxComponent;
   }(SelectBaseComponent));
   CheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValue(true)\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2__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"] }] });
+  CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxComponent, selector: "sv-ng-checkbox-question", usesInheritance: true, ngImport: i0__namespace, template: "<fieldset [class]=\"model.getSelectBaseRootCss()\" #contentElement \n  [attr.role]=\"model.a11y_input_ariaRole\"\n  [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n  [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n  [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n  [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n  [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n  [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n>\n  <legend *ngIf=\"showLegend\" class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n  <ng-container *ngIf=\"model.hasHeadItems\">\n    <ng-container *ngFor=\"let item of model.headItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!model.hasColumns && !model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.bodyItems; trackBy: trackItemBy\" >\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div [class]=\"model.cssClasses.rootRow\" *ngIf=\"!model.hasColumns && model.blockedRow\">\n    <ng-container *ngFor=\"let item of model.dataChoices; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"model.hasColumns\">\n    <div [class]=\"model.cssClasses.rootMultiColumn\">\n      <div [class]=\"model.getColumnClass()\" *ngFor=\"let column of model.columns; trackBy: trackColumnBy\" role=\"presentation\">\n        <ng-container *ngFor=\"let item of column; trackBy: trackItemBy\">\n          <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"model.hasFootItems\">\n    <ng-container *ngFor=\"let item of model.footItems; trackBy: trackItemBy\">\n      <ng-template [component]=\"{ name: getItemValueComponentName(item), data: getItemValueComponentData(item) }\"></ng-template>\n    </ng-container>\n  </ng-container>\n  <div *ngIf=\"model.showClearButtonInContent\">\n    <input\n      type=\"button\"\n      (click)=\"model.clearValueFromUI()\"\n      [value]=\"model.clearButtonCaption\"\n      [class]=\"model.cssClasses.clearButton\"\n    />\n  </div>\n</fieldset>", directives: [{ type: i2__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: CheckboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3086,7 +3087,7 @@
       return SliderLabelItemComponent;
   }(BaseAngular));
   SliderLabelItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SliderLabelItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SliderLabelItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderLabelItemComponent, selector: "sv-ng-slider-label-item", inputs: { model: "model", item: "item" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"model.getLabelCss(item.locText)\"\n      [style]=\"{ left: model.getPercent(item.value) + '%' }\"\n      (pointerup)=\"model.handleLabelPointerUp($any($event), item.value)\">\n        <div [class]=\"model.cssClasses.labelTick\"></div>\n        <div [class]=\"model.cssClasses.labelText\" [model]=\"item.locText\" sv-ng-string></div>\n    </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+  SliderLabelItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderLabelItemComponent, selector: "sv-ng-slider-label-item", inputs: { model: "model", item: "item" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"model.getLabelCss(item.locText)\"\n      [style]=\"{ left: model.getPercent(item.value) + '%' }\"\n      (pointerup)=\"model.handleLabelPointerUp($any($event), item.value)\">\n        <div [class]=\"model.cssClasses.labelTick\"></div>\n        <div [class]=\"model.cssClasses.labelTextContainer\">\n          <div *ngIf=\"!item.showValue\" [class]=\"model.cssClasses.labelText\" [model]=\"item.locText\" sv-ng-string></div>\n          <div *ngIf=\"item.showValue\" [class]=\"model.cssClasses.labelText\">{{ item.value }}</div>\n          <div *ngIf=\"item.showValue\" [class]=\"model.cssClasses.labelTextSecondaryMode\" [model]=\"item.locText\" sv-ng-string></div>\n        </div>\n    </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SliderLabelItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3315,6 +3316,49 @@
               }] } });
   AngularComponentFactory.Instance.registerComponent("sv-action-bar-item-dropdown", ActionBarItemDropdownComponent);
 
+  var PanelComponent = /** @class */ (function (_super) {
+      __extends(PanelComponent, _super);
+      function PanelComponent() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.trackRowBy = function (_, row) {
+              return row.id;
+          };
+          return _this;
+      }
+      PanelComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      PanelComponent.prototype.ngAfterViewInit = function () {
+          var _a;
+          if (!!((_a = this.panelContainerRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+              this.model.afterRender(this.panelContainerRef.nativeElement);
+          }
+      };
+      Object.defineProperty(PanelComponent.prototype, "canRender", {
+          get: function () {
+              return this.model && this.model.survey && this.model.getIsContentVisible();
+          },
+          enumerable: false,
+          configurable: true
+      });
+      return PanelComponent;
+  }(BaseAngular));
+  PanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  PanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"canRender\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.renderedIsExpanded\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" \n      [attr.id]=\"model.contentId\" [attr.role]=\"model.ariaRole\" [attr.aria-labelledby]=\"model.ariaLabelledBy\"[attr.aria-label]=\"model.ariaLabel\">\n      <ng-container *ngFor=\"let row of model.visibleRows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__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: PanelComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "sv-ng-panel, '[sv-ng-panel]'",
+                      templateUrl: "./panel.component.html",
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }], panelContainerRef: [{
+                  type: i0.ViewChild,
+                  args: ["panelContainer", { static: false, read: i0.ElementRef }]
+              }] } });
+  AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);
+
   var SelectBaseItemComponent = /** @class */ (function (_super) {
       __extends(SelectBaseItemComponent, _super);
       function SelectBaseItemComponent() {
@@ -3352,7 +3396,7 @@
       return SelectBaseItemComponent;
   }(BaseAngular));
   SelectBaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SelectBaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\" #container>\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\"\n        sv-ng-checkbox-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\"\n        [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span>\n    </ng-template>\n  </div>\n  <div *ngIf=\"model.isCommentShowing\" [class]=\"question.getCommentAreaCss(true)\" [question]=\"question\" [item]=\"model\" sv-ng-comment-choice></div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentChoiceComponent, selector: "sv-ng-comment-choice, '[sv-ng-comment-choice]'", inputs: ["question", "item"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  SelectBaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\" #container>\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\"\n        sv-ng-checkbox-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\"\n        [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span>\n    </ng-template>\n  </div>\n  <sv-ng-panel *ngIf=\"model.isPanelShowing\" [model]='model.panel'></sv-ng-panel>\n  <div *ngIf=\"model.isCommentShowing\" [class]=\"question.getCommentAreaCss(true)\" [question]=\"question\" [item]=\"model\" sv-ng-comment-choice></div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: ["model"] }, { type: SurveyCommentChoiceComponent, selector: "sv-ng-comment-choice, '[sv-ng-comment-choice]'", inputs: ["question", "item"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: SelectBaseItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3498,12 +3542,15 @@
           return this.model;
       };
       ListItemComponent.prototype.ngAfterViewInit = function () {
-          this.listModel.onLastItemRended(this.model);
+          var _a;
+          if (!!((_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+              this.listModel.onItemRended(this.model, this.elementRef.nativeElement);
+          }
       };
       return ListItemComponent;
   }(BaseAngular));
   ListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <li [attr.role]=\"listModel.listItemRole\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" \n  [attr.id]=\"elementId\" [attr.aria-selected]=\"ariaSelected\" [attr.aria-checked]=\"ariaChecked\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style]=\"itemStyle\" [attr.title]=\"model.getTooltip()\"\n    (mouseover)=\"listModel.onItemHover(model)\"\n    (mouseleave)=\"listModel.onItemLeave(model)\">\n    <ng-template [component]=\"{ name: itemComponent, data: { model: model, listModel: listModel } }\"></ng-template>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <li #elementRef [attr.role]=\"listModel.listItemRole\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" \n  [attr.id]=\"elementId\" [attr.aria-selected]=\"ariaSelected\" [attr.aria-checked]=\"ariaChecked\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style]=\"itemStyle\" [attr.title]=\"model.getTooltip()\"\n    (mouseover)=\"listModel.onItemHover(model)\"\n    (mouseleave)=\"listModel.onItemLeave(model)\">\n    <ng-template [component]=\"{ name: itemComponent, data: { model: model, listModel: listModel } }\"></ng-template>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { 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: ListItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3517,6 +3564,9 @@
                   type: i0.Input
               }], listModel: [{
                   type: i0.Input
+              }], elementRef: [{
+                  type: i0.ViewChild,
+                  args: ["elementRef"]
               }] } });
   AngularComponentFactory.Instance.registerComponent("sv-list-item", ListItemComponent);
 
@@ -3987,49 +4037,6 @@
               }] } });
   AngularComponentFactory.Instance.registerComponent("sv-navigation-toc", ProgressTocComponent);
 
-  var PanelComponent = /** @class */ (function (_super) {
-      __extends(PanelComponent, _super);
-      function PanelComponent() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.trackRowBy = function (_, row) {
-              return row.id;
-          };
-          return _this;
-      }
-      PanelComponent.prototype.getModel = function () {
-          return this.model;
-      };
-      PanelComponent.prototype.ngAfterViewInit = function () {
-          var _a;
-          if (!!((_a = this.panelContainerRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
-              this.model.afterRender(this.panelContainerRef.nativeElement);
-          }
-      };
-      Object.defineProperty(PanelComponent.prototype, "canRender", {
-          get: function () {
-              return this.model && this.model.survey && this.model.getIsContentVisible();
-          },
-          enumerable: false,
-          configurable: true
-      });
-      return PanelComponent;
-  }(BaseAngular));
-  PanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"canRender\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.renderedIsExpanded\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" \n      [attr.id]=\"model.contentId\" [attr.role]=\"model.ariaRole\" [attr.aria-labelledby]=\"model.ariaLabelledBy\"[attr.aria-label]=\"model.ariaLabel\">\n      <ng-container *ngFor=\"let row of model.visibleRows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__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: PanelComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "sv-ng-panel, '[sv-ng-panel]'",
-                      templateUrl: "./panel.component.html",
-                  }]
-          }], propDecorators: { model: [{
-                  type: i0.Input
-              }], panelContainerRef: [{
-                  type: i0.ViewChild,
-                  args: ["panelContainer", { static: false, read: i0.ElementRef }]
-              }] } });
-  AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);
-
   var SurveyNavigationButton = /** @class */ (function () {
       function SurveyNavigationButton() {
       }
@@ -4232,7 +4239,7 @@
       return SignaturePadQuestionComponent;
   }(QuestionAngular));
   SignaturePadQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignaturePadQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SignaturePadQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0__namespace, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.width]=\"model.renderedCanvasWidth\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\" [model]=\"$any(model).locRenderedPlaceholder\" sv-ng-string></div>\n<div>\n  <img *ngIf=\"!!model.backgroundImage\" [src]=\"model.backgroundImage\" [style.width]=\"model.renderedCanvasWidth\" [class]=\"model.cssClasses.backgroundImage\" role=\"presentation\">\n  <canvas tabindex=\"-1\" [class]=\"model.cssClasses.canvas\" (blur)=\"model.onBlur($event)\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" *ngIf=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValue(true)\"\n  >\n    <span *ngIf=\"!model.cssClasses.clearButtonIconId\">\u2716</span>\n    <svg\n      *ngIf=\"model.cssClasses.clearButtonIconId\"\n      [iconName]=\"model.cssClasses.clearButtonIconId\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n</div>\n<ng-container *ngIf=\"model.showLoadingIndicator\">\n  <div [class]=\"model.cssClasses.loadingIndicator\">\n    <sv-ng-loading-indicator></sv-ng-loading-indicator>\n  </div>\n</ng-container>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  SignaturePadQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignaturePadQuestionComponent, selector: "sv-ng-signature-component", usesInheritance: true, ngImport: i0__namespace, template: "<div\n[class]=\"model.cssClasses.root\"\n[style.width]=\"model.renderedCanvasWidth\" #contentElement>\n<div [class]=\"model.cssClasses.placeholder\" [visible]=\"model.needShowPlaceholder()\" [model]=\"$any(model).locRenderedPlaceholder\" sv-ng-string></div>\n<div>\n  <img *ngIf=\"!!model.backgroundImage\" [src]=\"model.backgroundImage\" [style.width]=\"model.renderedCanvasWidth\" [class]=\"model.cssClasses.backgroundImage\" role=\"presentation\">\n  <canvas tabindex=\"-1\" [class]=\"model.cssClasses.canvas\" (blur)=\"model.onBlur($event)\"></canvas>\n</div>\n<div [class]=\"model.cssClasses.controls\" *ngIf=\"model.canShowClearButton\">\n  <button\n    type=\"button\"\n    [class]=\"model.cssClasses.clearButton\"\n    [title]=\"model.clearButtonCaption\"\n    (click)=\"model.clearValueFromUI()\"\n  >\n    <span *ngIf=\"!model.cssClasses.clearButtonIconId\">\u2716</span>\n    <svg\n      *ngIf=\"model.cssClasses.clearButtonIconId\"\n      [iconName]=\"model.cssClasses.clearButtonIconId\"\n      [size]=\"'auto'\" sv-ng-svg-icon></svg>\n  </button>\n</div>\n<ng-container *ngIf=\"model.showLoadingIndicator\">\n  <div [class]=\"model.cssClasses.loadingIndicator\">\n    <sv-ng-loading-indicator></sv-ng-loading-indicator>\n  </div>\n</ng-container>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignaturePadQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5090,7 +5097,7 @@
       return MatrixTableComponent;
   }(BaseAngular));
   MatrixTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixTableComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixTableComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div #contentElement [class]=\"question.cssClasses.tableWrapper\" [attr.data-sv-drop-target-matrix-row]=\"question.renderedTable.wrapperDropTargetId\">\n  <table [class]=\"question.getTableCss()\">\n    <thead *ngIf=\"table.showHeader\">\n      <tr>\n        <ng-container *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\">\n          <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n            <ng-template\n              [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n              <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n              <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n              </sv-ng-matrixheaderrequired>\n            </ng-template>\n          </th>\n\n          <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n          </td>\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let row of table.renderedRows; trackBy: trackRowBy\">\n        <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n      </ng-container>\n    </tbody>\n    <tfoot *ngIf=\"table.showFooter\">\n      <tr>\n        <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n          *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n        </sv-ng-matrixdropdown-cell>\n      </tr>\n    </tfoot>\n  </table>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2__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"] }] });
+  MatrixTableComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div #contentElement [class]=\"question.cssClasses.tableWrapper\">\n  <table [class]=\"question.getTableCss()\">\n    <thead *ngIf=\"table.showHeader\">\n      <tr>\n        <ng-container *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\">\n          <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n            <ng-template\n              [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n              <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n              <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n              </sv-ng-matrixheaderrequired>\n            </ng-template>\n          </th>\n\n          <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n          </td>\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let row of table.renderedRows; trackBy: trackRowBy\">\n        <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n      </ng-container>\n    </tbody>\n    <tfoot *ngIf=\"table.showFooter\">\n      <tr>\n        <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n          *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n        </sv-ng-matrixdropdown-cell>\n      </tr>\n    </tfoot>\n  </table>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2__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: MatrixTableComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5150,7 +5157,7 @@
       return MatrixDynamicComponent;
   }(QuestionAngular));
   MatrixDynamicComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDynamicComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixDynamicComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicComponent, selector: "sv-ng-matrixdynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div #contentElement>\n    <div *ngIf=\"model.renderedTable.showAddRowOnTop\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n    <sv-ng-placeholder-matrixdynamic *ngIf=\"!model.renderedTable.showTable\" [question]=\"model\"></sv-ng-placeholder-matrixdynamic>\n  \n    <div *ngIf=\"model.renderedTable.showAddRowOnBottom\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n  </div>\n  <ng-template #addRowButton>\n    <button type=\"button\" [class]=\"model.getAddRowButtonCss(true)\" (click)=\"model.addRowUI()\">\n        <sv-ng-string [model]=\"model.locAddRowText\" ></sv-ng-string>\n        <span [class]=\"model.cssClasses.iconAdd\"></span>\n    </button>\n  </ng-template>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }, { type: MatrixDynamicPlaceholderComponent, selector: "sv-ng-placeholder-matrixdynamic", inputs: ["question"] }, { 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"] }] });
+  MatrixDynamicComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicComponent, selector: "sv-ng-matrixdynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div #contentElement>\n    <div *ngIf=\"model.renderedTable.showAddRowOnTop\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n    <sv-ng-placeholder-matrixdynamic *ngIf=\"!model.renderedTable.showTable\" [question]=\"model\"></sv-ng-placeholder-matrixdynamic>\n  \n    <div *ngIf=\"model.renderedTable.showAddRowOnBottom\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n  </div>\n  <ng-template #addRowButton>\n    <button type=\"button\" [class]=\"model.getAddRowButtonCss(true)\" (click)=\"model.addRowUI()\">\n        <sv-ng-string [model]=\"model.locAddRowText\" ></sv-ng-string>\n        <span [class]=\"model.cssClasses.iconAdd\">\n          <svg *ngIf=\"model.cssClasses.iconAddId\">\n            <use [attr.xlink:href]=\"model.cssClasses.iconAddId\"></use>\n          </svg>\n        </span>\n    </button>\n  </ng-template>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }, { type: MatrixDynamicPlaceholderComponent, selector: "sv-ng-placeholder-matrixdynamic", inputs: ["question"] }, { 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: MatrixDynamicComponent, decorators: [{
               type: i0.Component,
               args: [{