survey-angular-ui 1.9.139 → 1.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -850,7 +850,6 @@
850
850
  __extends(PopupBaseContainerComponent, _super);
851
851
  function PopupBaseContainerComponent(changeDetectorRef) {
852
852
  var _this = _super.call(this, changeDetectorRef) || this;
853
- _this.prevIsVisible = false;
854
853
  _this.changeDetectorRef.detach();
855
854
  return _this;
856
855
  }
@@ -886,12 +885,9 @@
886
885
  if (isSync === void 0) { isSync = false; }
887
886
  _super.prototype.afterUpdate.call(this, isSync);
888
887
  if (!isSync) {
889
- if (!this.prevIsVisible && this.model.isVisible) {
888
+ if (!this.model.isPositionSet && this.model.isVisible) {
890
889
  this.model.updateOnShowing();
891
890
  }
892
- if (this.prevIsVisible !== this.model.isVisible) {
893
- this.prevIsVisible = this.model.isVisible;
894
- }
895
891
  }
896
892
  };
897
893
  PopupBaseContainerComponent.prototype.clickInside = function (event) {
@@ -1742,7 +1738,7 @@
1742
1738
  return ElementHeaderComponent;
1743
1739
  }());
1744
1740
  ElementHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
1745
- ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"!!element.additionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1741
+ ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"element.hasAdditionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1746
1742
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, decorators: [{
1747
1743
  type: i0.Component,
1748
1744
  args: [{
@@ -3166,7 +3162,7 @@
3166
3162
  return RatingItemComponent;
3167
3163
  }(BaseAngular));
3168
3164
  RatingItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
3169
- RatingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
3165
+ RatingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
3170
3166
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemComponent, decorators: [{
3171
3167
  type: i0.Component,
3172
3168
  args: [{
@@ -3200,7 +3196,7 @@
3200
3196
  return RatingItemStarComponent;
3201
3197
  }(BaseAngular));
3202
3198
  RatingItemStarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemStarComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
3203
- RatingItemStarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
3199
+ RatingItemStarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
3204
3200
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemStarComponent, decorators: [{
3205
3201
  type: i0.Component,
3206
3202
  args: [{
@@ -3234,7 +3230,7 @@
3234
3230
  return RatingItemSmileyComponent;
3235
3231
  }(BaseAngular));
3236
3232
  RatingItemSmileyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemSmileyComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
3237
- RatingItemSmileyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
3233
+ RatingItemSmileyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
3238
3234
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemSmileyComponent, decorators: [{
3239
3235
  type: i0.Component,
3240
3236
  args: [{
@@ -3861,7 +3857,7 @@
3861
3857
  return RankingItemComponent;
3862
3858
  }(BaseAngular));
3863
3859
  RankingItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
3864
- RankingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0__namespace, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n [class]=\"question.getItemClass(model)\"\n (keydown)=\"question.handleKeydown($event, model)\"\n (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n <div tabindex=\"-1\" style=\"outline: none;\">\n <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n <div [class]=\"question.cssClasses.itemContent\">\n <div [class]=\"question.cssClasses.itemIconContainer\">\n <svg [class]=\"question.getIconHoverCss()\">\n <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n </svg> \n <svg [class]=\"question.getIconFocusCss()\">\n <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n </svg> \n </div>\n\n <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n <svg>\n <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n </svg> \n </div></ng-template>\n <div [class]=\"question.cssClasses.controlLabel\">\n <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n </div>\n </div>\n </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3860
+ RankingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0__namespace, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n [class]=\"question.getItemClass(model)\"\n (keydown)=\"question.handleKeydown($event, model)\"\n (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\"\n (pointerup)=\"question.handlePointerUp($event, model, $any($event.currentTarget))\">\n <div tabindex=\"-1\" style=\"outline: none;\">\n <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n <div [class]=\"question.cssClasses.itemContent\">\n <div [class]=\"question.cssClasses.itemIconContainer\">\n <svg [class]=\"question.getIconHoverCss()\">\n <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n </svg> \n <svg [class]=\"question.getIconFocusCss()\">\n <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n </svg> \n </div>\n\n <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n <svg>\n <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n </svg> \n </div></ng-template>\n <div [class]=\"question.cssClasses.controlLabel\">\n <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n </div>\n </div>\n </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3865
3861
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingItemComponent, decorators: [{
3866
3862
  type: i0.Component,
3867
3863
  args: [{
@@ -4041,19 +4037,9 @@
4041
4037
  function PanelDynamicQuestionComponent() {
4042
4038
  return _super !== null && _super.apply(this, arguments) || this;
4043
4039
  }
4044
- Object.defineProperty(PanelDynamicQuestionComponent.prototype, "renderedPanels", {
4045
- get: function () {
4046
- if (this.model.isRenderModeList)
4047
- return this.model.visiblePanels;
4048
- var panels = [];
4049
- if (this.model.currentPanel) {
4050
- panels.push(this.model.currentPanel);
4051
- }
4052
- return panels;
4053
- },
4054
- enumerable: false,
4055
- configurable: true
4056
- });
4040
+ PanelDynamicQuestionComponent.prototype.trackPanelBy = function (_, panel) {
4041
+ return panel.id;
4042
+ };
4057
4043
  PanelDynamicQuestionComponent.prototype.onModelChanged = function () {
4058
4044
  var _this = this;
4059
4045
  _super.prototype.onModelChanged.call(this);
@@ -4109,7 +4095,7 @@
4109
4095
  return PanelDynamicQuestionComponent;
4110
4096
  }(QuestionAngular));
4111
4097
  PanelDynamicQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
4112
- PanelDynamicQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.canAddPanel\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n </div>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n <!-- add track by [key]=\"panel.id\" -->\n <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n <div [class]=\"model.getPanelWrapperCss(panel)\">\n <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n <ng-container *ngIf=\"model.panelRemoveButtonLocation ==='right' && model.canRemovePanel && panel.state != 'collapsed'\">\n <ng-template [component]=\"{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n </ng-container>\n </div>\n <!-- add track by [key]=\"'separator' + panel.id\" -->\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\"/>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n <hr [class]=\"model.cssClasses.separator\"/>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n</ng-template>\n<ng-template #progress>\n <div [class]=\"this.progressCssClass\">\n <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n <div [class]=\"model.cssClasses.progressContainer\">\n <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n </div>\n <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n </div>\n </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
4098
+ PanelDynamicQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.canAddPanel\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n </div>\n <div [class]=\"model.cssClasses.progress\"\n *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n </div>\n <ng-container [ngTemplateOutlet]=\"progress\"\n *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n <div [class]=\"model.cssClasses.panelsContainer\">\n <ng-container *ngFor=\"let panel of model.renderedPanels; index as index; trackBy: trackPanelBy\">\n <div [class]=\"model.getPanelWrapperCss(panel)\">\n <ng-template\n [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n <ng-container\n *ngIf=\"model.panelRemoveButtonLocation ==='right' && model.canRemovePanel && panel.state != 'collapsed'\">\n <ng-template\n [component]=\"{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n </ng-container>\n </div>\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\" />\n </ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"progress\"\n *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\"\n [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n <hr [class]=\"model.cssClasses.separator\" />\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n </div>\n <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n</ng-template>\n<ng-template #progress>\n <div [class]=\"this.progressCssClass\">\n <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n <div [class]=\"model.cssClasses.progressContainer\">\n <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n </div>\n <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n </div>\n <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n </div>\n </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
4113
4099
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicQuestionComponent, decorators: [{
4114
4100
  type: i0.Component,
4115
4101
  args: [{
@@ -4450,10 +4436,30 @@
4450
4436
  MatrixRowComponent.prototype.trackCellBy = function (_, cell) {
4451
4437
  return cell.id;
4452
4438
  };
4439
+ MatrixRowComponent.prototype.onModelChanged = function () {
4440
+ var _a;
4441
+ _super.prototype.onModelChanged.call(this);
4442
+ if (this.previousModel) {
4443
+ this.previousModel.setRootElement(undefined);
4444
+ }
4445
+ if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
4446
+ this.model.setRootElement(this.container.nativeElement);
4447
+ }
4448
+ };
4449
+ MatrixRowComponent.prototype.ngAfterViewInit = function () {
4450
+ var _a;
4451
+ if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
4452
+ this.model.setRootElement(this.container.nativeElement);
4453
+ }
4454
+ };
4455
+ MatrixRowComponent.prototype.ngOnDestroy = function () {
4456
+ _super.prototype.ngOnDestroy.call(this);
4457
+ this.model.setRootElement(undefined);
4458
+ };
4453
4459
  return MatrixRowComponent;
4454
4460
  }(BaseAngular));
4455
4461
  MatrixRowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRowComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
4456
- MatrixRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <tr *ngIf=\"model.visible\" [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\"\n [attr.data-sv-drop-target-matrix-row]=\"row && row.id\">\n <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrixdropdown-cell>\n </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
4462
+ MatrixRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n <tr *ngIf=\"model.visible\" [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\"\n [attr.data-sv-drop-target-matrix-row]=\"row && row.id\" #container>\n <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrixdropdown-cell>\n </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
4457
4463
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRowComponent, decorators: [{
4458
4464
  type: i0.Component,
4459
4465
  args: [{
@@ -4465,6 +4471,9 @@
4465
4471
  type: i0.Input
4466
4472
  }], question: [{
4467
4473
  type: i0.Input
4474
+ }], container: [{
4475
+ type: i0.ViewChild,
4476
+ args: ["container", { static: false, read: i0.ElementRef }]
4468
4477
  }] } });
4469
4478
 
4470
4479
  var MatrixTableComponent = /** @class */ (function (_super) {
@@ -4484,7 +4493,7 @@
4484
4493
  return MatrixTableComponent;
4485
4494
  }(BaseAngular));
4486
4495
  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 });
4487
- 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 [style]=\"{ overflowX: question.showHorizontalScroll ? 'scroll' : '' }\" #contentElement [class]=\"question.cssClasses.tableWrapper\">\n <table [class]=\"question.getTableCss()\">\n <thead *ngIf=\"table.showHeader\">\n <tr>\n <ng-container\n *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\"\n >\n <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n <ng-template [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n </sv-ng-matrixheaderrequired>\n </ng-template>\n </th>\n \n <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\"></td>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let row of table.rows; trackBy: trackRowBy\">\n <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n </ng-container>\n </tbody>\n <tfoot *ngIf=\"table.showFooter\">\n <tr>\n <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\" *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n </sv-ng-matrixdropdown-cell>\n </tr>\n </tfoot>\n </table>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2__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"] }] });
4496
+ 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 [style]=\"{ overflowX: question.showHorizontalScroll ? 'scroll' : '' }\" #contentElement\n [class]=\"question.cssClasses.tableWrapper\">\n <table [class]=\"question.getTableCss()\">\n <thead *ngIf=\"table.showHeader\">\n <tr>\n <ng-container *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\">\n <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n <ng-template\n [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n </sv-ng-matrixheaderrequired>\n </ng-template>\n </th>\n\n <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n </td>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let row of table.renderedRows; trackBy: trackRowBy\">\n <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n </ng-container>\n </tbody>\n <tfoot *ngIf=\"table.showFooter\">\n <tr>\n <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n </sv-ng-matrixdropdown-cell>\n </tr>\n </tfoot>\n </table>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2__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"] }] });
4488
4497
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixTableComponent, decorators: [{
4489
4498
  type: i0.Component,
4490
4499
  args: [{