survey-angular-ui 2.3.8 → 2.3.9

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

@@ -1355,6 +1355,232 @@
                   type: i0.Input
               }] } });
 
+  var BrandInfoComponent = /** @class */ (function () {
+      function BrandInfoComponent() {
+      }
+      return BrandInfoComponent;
+  }());
+  BrandInfoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  BrandInfoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrandInfoComponent, selector: "sv-brand-info", ngImport: i0__namespace, template: "<div class=\"sv-brand-info\">\n  <a class=\"sv-brand-info__logo\" href=\"https://surveyjs.io/?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=landing_page\"><img src=\"https://surveyjs.io/Content/Images/poweredby.svg\"/></a>\n  <div class=\"sv-brand-info__text\">Try and see how easy it is to <a href=\"https://surveyjs.io/create-survey?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=create_survey\">create a survey</a></div>\n  <div class=\"sv-brand-info__terms\"><a href=\"https://surveyjs.io/TermsOfUse\">Terms of Use & Privacy Statement</a></div>\n</div>" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "sv-brand-info",
+                      templateUrl: "./brand-info.component.html"
+                  }]
+          }] });
+  AngularComponentFactory.Instance.registerComponent("sv-brand-info", BrandInfoComponent);
+
+  var NotifierComponent = /** @class */ (function (_super) {
+      __extends(NotifierComponent, _super);
+      function NotifierComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      NotifierComponent.prototype.getStateElement = function () {
+          return this.notifier;
+      };
+      NotifierComponent.prototype.getModel = function () {
+          return this.notifier;
+      };
+      return NotifierComponent;
+  }(BaseAngular));
+  NotifierComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotifierComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  NotifierComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotifierComponent, selector: "sv-notifier", inputs: { notifier: "notifier" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"notifier.isDisplayed\">\n    <div [class]=\"notifier.css\" [style]=\"{ visibility: notifier.active ? 'visible' : 'hidden' }\" role=\"alert\" aria-live=\"polite\">\n      <span>{{notifier.message}}</span>\n      <sv-action-bar [model]=\"notifier.actionBar\"></sv-action-bar> \n    </div>\n  </ng-container>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotifierComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "sv-notifier",
+                      templateUrl: "./notifier.component.html",
+                      styles: [":host { display: none; }"]
+                  }]
+          }], propDecorators: { notifier: [{
+                  type: i0.Input
+              }] } });
+
+  var SafeHtmlPipe = /** @class */ (function () {
+      function SafeHtmlPipe(domSanitizer) {
+          this.domSanitizer = domSanitizer;
+      }
+      SafeHtmlPipe.prototype.transform = function (url) {
+          return this.domSanitizer.bypassSecurityTrustHtml(url);
+      };
+      return SafeHtmlPipe;
+  }());
+  SafeHtmlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, deps: [{ token: i1__namespace.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  SafeHtmlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, name: "safeHtml" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{ name: "safeHtml" }]
+          }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }]; } });
+
+  var SurveyContentComponent = /** @class */ (function (_super) {
+      __extends(SurveyContentComponent, _super);
+      function SurveyContentComponent() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.isSurveyUpdated = false;
+          return _this;
+      }
+      SurveyContentComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      SurveyContentComponent.prototype.onModelChanged = function () {
+          var _this = this;
+          if (!!this.previousModel) {
+              this.previousModel.destroyResizeObserver();
+              this.previousModel.renderCallback = undefined;
+          }
+          if (!!this.model) {
+              this.model.renderCallback = function () {
+                  _this.detectChanges();
+              };
+          }
+          this.isSurveyUpdated = true;
+      };
+      SurveyContentComponent.prototype.ngOnDestroy = function () {
+          _super.prototype.ngOnDestroy.call(this);
+          if (!!this.model) {
+              this.model.rootElement = undefined;
+              this.model.destroyResizeObserver();
+              this.model.renderCallback = undefined;
+          }
+      };
+      SurveyContentComponent.prototype.ngAfterViewInit = function () {
+          this.isSurveyUpdated = true;
+      };
+      SurveyContentComponent.prototype.ngAfterViewChecked = function () {
+          if (!!this.model && this.isSurveyUpdated) {
+              this.isSurveyUpdated = false;
+              this.model.afterRenderSurvey(this.rootEl.nativeElement);
+              this.model.startTimerFromUI();
+          }
+          _super.prototype.ngAfterViewChecked.call(this);
+      };
+      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                    <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: [{
+                      selector: "survey-content",
+                      templateUrl: "./survey-content.component.html"
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }], rootEl: [{
+                  type: i0.ViewChild,
+                  args: ["surveyContainer", { static: false }]
+              }] } });
+  AngularComponentFactory.Instance.registerComponent("survey", SurveyContentComponent);
+
+  Survey.addIconsToThemeSet("v1", iconsV1.icons);
+  Survey.addIconsToThemeSet("v2", iconsV2.icons);
+  Survey.SvgRegistry.registerIcons(iconsV2.icons);
+  var SurveyComponent = /** @class */ (function (_super) {
+      __extends(SurveyComponent, _super);
+      function SurveyComponent(changeDetectorRef) {
+          var _this = _super.call(this, changeDetectorRef) || this;
+          changeDetectorRef.detach();
+          return _this;
+      }
+      SurveyComponent.prototype.getModel = function () {
+          return this.model;
+      };
+      SurveyComponent.prototype.getShouldReattachChangeDetector = function () {
+          return false;
+      };
+      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() {
       }
@@ -1585,11 +1811,11 @@
       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"] }] });
+  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: "page, sv-ng-page",
+                      selector: "sv-page, page, sv-ng-page",
                       templateUrl: "./page.component.html",
                       styleUrls: ["./hide-host.scss"]
                   }]
@@ -1601,232 +1827,7 @@
                   type: i0.ViewChild,
                   args: ["pageContainer", { static: false, read: i0.ElementRef }]
               }] } });
-
-  var BrandInfoComponent = /** @class */ (function () {
-      function BrandInfoComponent() {
-      }
-      return BrandInfoComponent;
-  }());
-  BrandInfoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  BrandInfoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrandInfoComponent, selector: "sv-brand-info", ngImport: i0__namespace, template: "<div class=\"sv-brand-info\">\n  <a class=\"sv-brand-info__logo\" href=\"https://surveyjs.io/?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=landing_page\"><img src=\"https://surveyjs.io/Content/Images/poweredby.svg\"/></a>\n  <div class=\"sv-brand-info__text\">Try and see how easy it is to <a href=\"https://surveyjs.io/create-survey?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=create_survey\">create a survey</a></div>\n  <div class=\"sv-brand-info__terms\"><a href=\"https://surveyjs.io/TermsOfUse\">Terms of Use & Privacy Statement</a></div>\n</div>" });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "sv-brand-info",
-                      templateUrl: "./brand-info.component.html"
-                  }]
-          }] });
-  AngularComponentFactory.Instance.registerComponent("sv-brand-info", BrandInfoComponent);
-
-  var NotifierComponent = /** @class */ (function (_super) {
-      __extends(NotifierComponent, _super);
-      function NotifierComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      NotifierComponent.prototype.getStateElement = function () {
-          return this.notifier;
-      };
-      NotifierComponent.prototype.getModel = function () {
-          return this.notifier;
-      };
-      return NotifierComponent;
-  }(BaseAngular));
-  NotifierComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotifierComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotifierComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotifierComponent, selector: "sv-notifier", inputs: { notifier: "notifier" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"notifier.isDisplayed\">\n    <div [class]=\"notifier.css\" [style]=\"{ visibility: notifier.active ? 'visible' : 'hidden' }\" role=\"alert\" aria-live=\"polite\">\n      <span>{{notifier.message}}</span>\n      <sv-action-bar [model]=\"notifier.actionBar\"></sv-action-bar> \n    </div>\n  </ng-container>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotifierComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "sv-notifier",
-                      templateUrl: "./notifier.component.html",
-                      styles: [":host { display: none; }"]
-                  }]
-          }], propDecorators: { notifier: [{
-                  type: i0.Input
-              }] } });
-
-  var SafeHtmlPipe = /** @class */ (function () {
-      function SafeHtmlPipe(domSanitizer) {
-          this.domSanitizer = domSanitizer;
-      }
-      SafeHtmlPipe.prototype.transform = function (url) {
-          return this.domSanitizer.bypassSecurityTrustHtml(url);
-      };
-      return SafeHtmlPipe;
-  }());
-  SafeHtmlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, deps: [{ token: i1__namespace.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-  SafeHtmlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, name: "safeHtml" });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SafeHtmlPipe, decorators: [{
-              type: i0.Pipe,
-              args: [{ name: "safeHtml" }]
-          }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }]; } });
-
-  var SurveyContentComponent = /** @class */ (function (_super) {
-      __extends(SurveyContentComponent, _super);
-      function SurveyContentComponent() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.isSurveyUpdated = false;
-          return _this;
-      }
-      SurveyContentComponent.prototype.getModel = function () {
-          return this.model;
-      };
-      SurveyContentComponent.prototype.onModelChanged = function () {
-          var _this = this;
-          if (!!this.previousModel) {
-              this.previousModel.destroyResizeObserver();
-              this.previousModel.renderCallback = undefined;
-          }
-          if (!!this.model) {
-              this.model.renderCallback = function () {
-                  _this.detectChanges();
-              };
-          }
-          this.isSurveyUpdated = true;
-      };
-      SurveyContentComponent.prototype.ngOnDestroy = function () {
-          _super.prototype.ngOnDestroy.call(this);
-          if (!!this.model) {
-              this.model.rootElement = undefined;
-              this.model.destroyResizeObserver();
-              this.model.renderCallback = undefined;
-          }
-      };
-      SurveyContentComponent.prototype.ngAfterViewInit = function () {
-          this.isSurveyUpdated = true;
-      };
-      SurveyContentComponent.prototype.ngAfterViewChecked = function () {
-          if (!!this.model && this.isSurveyUpdated) {
-              this.isSurveyUpdated = false;
-              this.model.afterRenderSurvey(this.rootEl.nativeElement);
-              this.model.startTimerFromUI();
-          }
-          _super.prototype.ngAfterViewChecked.call(this);
-      };
-      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 } });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyContentComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "survey-content",
-                      templateUrl: "./survey-content.component.html"
-                  }]
-          }], propDecorators: { model: [{
-                  type: i0.Input
-              }], rootEl: [{
-                  type: i0.ViewChild,
-                  args: ["surveyContainer", { static: false }]
-              }] } });
-  AngularComponentFactory.Instance.registerComponent("survey", SurveyContentComponent);
-
-  Survey.addIconsToThemeSet("v1", iconsV1.icons);
-  Survey.addIconsToThemeSet("v2", iconsV2.icons);
-  Survey.SvgRegistry.registerIcons(iconsV2.icons);
-  var SurveyComponent = /** @class */ (function (_super) {
-      __extends(SurveyComponent, _super);
-      function SurveyComponent(changeDetectorRef) {
-          var _this = _super.call(this, changeDetectorRef) || this;
-          changeDetectorRef.detach();
-          return _this;
-      }
-      SurveyComponent.prototype.getModel = function () {
-          return this.model;
-      };
-      SurveyComponent.prototype.getShouldReattachChangeDetector = function () {
-          return false;
-      };
-      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
-              }] } });
+  AngularComponentFactory.Instance.registerComponent("sv-page", PageComponent);
 
   var QuestionAngular = /** @class */ (function (_super) {
       __extends(QuestionAngular, _super);
@@ -3498,12 +3499,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 +3521,9 @@
                   type: i0.Input
               }], listModel: [{
                   type: i0.Input
+              }], elementRef: [{
+                  type: i0.ViewChild,
+                  args: ["elementRef"]
               }] } });
   AngularComponentFactory.Instance.registerComponent("sv-list-item", ListItemComponent);
 
@@ -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: [{