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.
@@ -333,7 +333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
333
333
  class PopupBaseContainerComponent extends BaseAngular {
334
334
  constructor(changeDetectorRef) {
335
335
  super(changeDetectorRef);
336
- this.prevIsVisible = false;
337
336
  this.changeDetectorRef.detach();
338
337
  }
339
338
  getModel() {
@@ -363,12 +362,9 @@ class PopupBaseContainerComponent extends BaseAngular {
363
362
  afterUpdate(isSync = false) {
364
363
  super.afterUpdate(isSync);
365
364
  if (!isSync) {
366
- if (!this.prevIsVisible && this.model.isVisible) {
365
+ if (!this.model.isPositionSet && this.model.isVisible) {
367
366
  this.model.updateOnShowing();
368
367
  }
369
- if (this.prevIsVisible !== this.model.isVisible) {
370
- this.prevIsVisible = this.model.isVisible;
371
- }
372
368
  }
373
369
  }
374
370
  clickInside(event) {
@@ -1096,7 +1092,7 @@ class ElementHeaderComponent {
1096
1092
  }
1097
1093
  }
1098
1094
  ElementHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1099
- ElementHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass" } }, ngImport: i0, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"!!element.additionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1095
+ ElementHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass" } }, ngImport: i0, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"element.hasAdditionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1100
1096
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeaderComponent, decorators: [{
1101
1097
  type: Component,
1102
1098
  args: [{
@@ -2280,7 +2276,7 @@ class RatingItemComponent extends BaseAngular {
2280
2276
  }
2281
2277
  }
2282
2278
  RatingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2283
- RatingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
2279
+ RatingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemComponent, selector: "sv-ng-rating-item", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <label [class]=\"model.getItemClassByText(item.itemValue, item.text)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <span [class]=\"model.cssClasses.itemText\" [model]=\"item.locText\" sv-ng-string></span>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
2284
2280
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemComponent, decorators: [{
2285
2281
  type: Component,
2286
2282
  args: [{
@@ -2309,7 +2305,7 @@ class RatingItemStarComponent extends BaseAngular {
2309
2305
  }
2310
2306
  }
2311
2307
  RatingItemStarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemStarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2312
- RatingItemStarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
2308
+ RatingItemStarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <svg [iconName]=\"model.itemStarIcon\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n <svg [iconName]=\"model.itemStarIconAlt\" [size]=\"'auto'\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
2313
2309
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemStarComponent, decorators: [{
2314
2310
  type: Component,
2315
2311
  args: [{
@@ -2338,7 +2334,7 @@ class RatingItemSmileyComponent extends BaseAngular {
2338
2334
  }
2339
2335
  }
2340
2336
  RatingItemSmileyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemSmileyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2341
- RatingItemSmileyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
2337
+ RatingItemSmileyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemSmileyComponent, selector: "sv-ng-rating-item-smiley", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <label [style]=\"model.getItemStyle(item.itemValue, item.highlight)\" [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\" (mousedown)=\"model.onMouseDown()\">\n <input type=\"radio\"\n class=\"sv-visuallyhidden\"\n [attr.name]=\"model.questionName\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\"\n [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n />\n <svg [iconName]=\"model.getItemSmileyIconName(item.itemValue)\" [size]=\"'auto'\" [title]=\"item.text\" sv-ng-svg-icon></svg>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
2342
2338
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RatingItemSmileyComponent, decorators: [{
2343
2339
  type: Component,
2344
2340
  args: [{
@@ -2861,7 +2857,7 @@ class RankingItemComponent extends BaseAngular {
2861
2857
  }
2862
2858
  }
2863
2859
  RankingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2864
- RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n [class]=\"question.getItemClass(model)\"\n (keydown)=\"question.handleKeydown($event, model)\"\n (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n <div tabindex=\"-1\" style=\"outline: none;\">\n <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n <div [class]=\"question.cssClasses.itemContent\">\n <div [class]=\"question.cssClasses.itemIconContainer\">\n <svg [class]=\"question.getIconHoverCss()\">\n <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n </svg> \n <svg [class]=\"question.getIconFocusCss()\">\n <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n </svg> \n </div>\n\n <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n <svg>\n <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n </svg> \n </div></ng-template>\n <div [class]=\"question.cssClasses.controlLabel\">\n <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n </div>\n </div>\n </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2860
+ RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n [class]=\"question.getItemClass(model)\"\n (keydown)=\"question.handleKeydown($event, model)\"\n (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\"\n (pointerup)=\"question.handlePointerUp($event, model, $any($event.currentTarget))\">\n <div tabindex=\"-1\" style=\"outline: none;\">\n <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n <div [class]=\"question.cssClasses.itemContent\">\n <div [class]=\"question.cssClasses.itemIconContainer\">\n <svg [class]=\"question.getIconHoverCss()\">\n <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n </svg> \n <svg [class]=\"question.getIconFocusCss()\">\n <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n </svg> \n </div>\n\n <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n <svg>\n <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n </svg> \n </div></ng-template>\n <div [class]=\"question.cssClasses.controlLabel\">\n <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n </div>\n </div>\n </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2865
2861
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RankingItemComponent, decorators: [{
2866
2862
  type: Component,
2867
2863
  args: [{
@@ -2999,14 +2995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
2999
2995
  AngularComponentFactory.Instance.registerComponent("sv-paneldynamic-progress-text", PanelDynamicProgressText);
3000
2996
 
3001
2997
  class PanelDynamicQuestionComponent extends QuestionAngular {
3002
- get renderedPanels() {
3003
- if (this.model.isRenderModeList)
3004
- return this.model.visiblePanels;
3005
- const panels = [];
3006
- if (this.model.currentPanel) {
3007
- panels.push(this.model.currentPanel);
3008
- }
3009
- return panels;
2998
+ trackPanelBy(_, panel) {
2999
+ return panel.id;
3010
3000
  }
3011
3001
  onModelChanged() {
3012
3002
  super.onModelChanged();
@@ -3057,7 +3047,7 @@ class PanelDynamicQuestionComponent extends QuestionAngular {
3057
3047
  }
3058
3048
  }
3059
3049
  PanelDynamicQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3060
- PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.canAddPanel\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n </div>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n <!-- add track by [key]=\"panel.id\" -->\n <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n <div [class]=\"model.getPanelWrapperCss(panel)\">\n <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n <ng-container *ngIf=\"model.panelRemoveButtonLocation ==='right' && model.canRemovePanel && panel.state != 'collapsed'\">\n <ng-template [component]=\"{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n </ng-container>\n </div>\n <!-- add track by [key]=\"'separator' + panel.id\" -->\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\"/>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n <hr [class]=\"model.cssClasses.separator\"/>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n</ng-template>\n<ng-template #progress>\n <div [class]=\"this.progressCssClass\">\n <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n <div [class]=\"model.cssClasses.progressContainer\">\n <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n <div\n [class]=\"model.cssClasses.progressBar\"\n [style]=\"{ width: model.progress }\"\n role=\"progressbar\"\n ></div>\n </div>\n <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n </div>\n <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n </div>\n </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
3050
+ PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.canAddPanel\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n </div>\n <div [class]=\"model.cssClasses.progress\"\n *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n </div>\n <ng-container [ngTemplateOutlet]=\"progress\"\n *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n <div [class]=\"model.cssClasses.panelsContainer\">\n <ng-container *ngFor=\"let panel of model.renderedPanels; index as index; trackBy: trackPanelBy\">\n <div [class]=\"model.getPanelWrapperCss(panel)\">\n <ng-template\n [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n <ng-container\n *ngIf=\"model.panelRemoveButtonLocation ==='right' && model.canRemovePanel && panel.state != 'collapsed'\">\n <ng-template\n [component]=\"{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n </ng-container>\n </div>\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\" />\n </ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"progress\"\n *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\"\n [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n <hr [class]=\"model.cssClasses.separator\" />\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n </div>\n <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n</ng-template>\n<ng-template #progress>\n <div [class]=\"this.progressCssClass\">\n <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n <div [class]=\"model.cssClasses.progressContainer\">\n <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" role=\"progressbar\"></div>\n </div>\n <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n </div>\n <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n </div>\n </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
3061
3051
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, decorators: [{
3062
3052
  type: Component,
3063
3053
  args: [{
@@ -3317,9 +3307,29 @@ class MatrixRowComponent extends BaseAngular {
3317
3307
  trackCellBy(_, cell) {
3318
3308
  return cell.id;
3319
3309
  }
3310
+ onModelChanged() {
3311
+ var _a;
3312
+ super.onModelChanged();
3313
+ if (this.previousModel) {
3314
+ this.previousModel.setRootElement(undefined);
3315
+ }
3316
+ if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
3317
+ this.model.setRootElement(this.container.nativeElement);
3318
+ }
3319
+ }
3320
+ ngAfterViewInit() {
3321
+ var _a;
3322
+ if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
3323
+ this.model.setRootElement(this.container.nativeElement);
3324
+ }
3325
+ }
3326
+ ngOnDestroy() {
3327
+ super.ngOnDestroy();
3328
+ this.model.setRootElement(undefined);
3329
+ }
3320
3330
  }
3321
3331
  MatrixRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3322
- MatrixRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <tr *ngIf=\"model.visible\" [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\"\n [attr.data-sv-drop-target-matrix-row]=\"row && row.id\">\n <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrixdropdown-cell>\n </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
3332
+ MatrixRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <tr *ngIf=\"model.visible\" [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\"\n [attr.data-sv-drop-target-matrix-row]=\"row && row.id\" #container>\n <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrixdropdown-cell>\n </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
3323
3333
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixRowComponent, decorators: [{
3324
3334
  type: Component,
3325
3335
  args: [{
@@ -3331,6 +3341,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
3331
3341
  type: Input
3332
3342
  }], question: [{
3333
3343
  type: Input
3344
+ }], container: [{
3345
+ type: ViewChild,
3346
+ args: ["container", { static: false, read: ElementRef }]
3334
3347
  }] } });
3335
3348
 
3336
3349
  class MatrixTableComponent extends BaseAngular {
@@ -3345,7 +3358,7 @@ class MatrixTableComponent extends BaseAngular {
3345
3358
  }
3346
3359
  }
3347
3360
  MatrixTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3348
- MatrixTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: { question: "question", table: "table" }, usesInheritance: true, ngImport: i0, template: "<div [style]=\"{ overflowX: question.showHorizontalScroll ? 'scroll' : '' }\" #contentElement [class]=\"question.cssClasses.tableWrapper\">\n <table [class]=\"question.getTableCss()\">\n <thead *ngIf=\"table.showHeader\">\n <tr>\n <ng-container\n *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\"\n >\n <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n <ng-template [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n </sv-ng-matrixheaderrequired>\n </ng-template>\n </th>\n \n <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\"></td>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let row of table.rows; trackBy: trackRowBy\">\n <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n </ng-container>\n </tbody>\n <tfoot *ngIf=\"table.showFooter\">\n <tr>\n <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\" *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n </sv-ng-matrixdropdown-cell>\n </tr>\n </tfoot>\n </table>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
3361
+ MatrixTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: { question: "question", table: "table" }, usesInheritance: true, ngImport: i0, template: "<div [style]=\"{ overflowX: question.showHorizontalScroll ? 'scroll' : '' }\" #contentElement\n [class]=\"question.cssClasses.tableWrapper\">\n <table [class]=\"question.getTableCss()\">\n <thead *ngIf=\"table.showHeader\">\n <tr>\n <ng-container *ngFor=\"let cell of table.headerRow.cells; trackBy: trackCellBy\">\n <th *ngIf=\"cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n <ng-template\n [component]=\"{ name: question.getColumnHeaderWrapperComponentName($any(cell)), data: { componentData: question.getColumnHeaderWrapperComponentData($any(cell)) } }\">\n <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n <sv-ng-matrixheaderrequired *ngIf=\"!!cell.column\" [column]=\"cell.column\" [question]=\"question\">\n </sv-ng-matrixheaderrequired>\n </ng-template>\n </th>\n\n <td *ngIf=\"!cell.hasTitle\" [class]=\"cell.className\" [style]=\"{ minWidth: cell.minWidth, width: cell.width }\">\n </td>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let row of table.renderedRows; trackBy: trackRowBy\">\n <sv-ng-matrix-row [model]=\"row\" [question]=\"question\"></sv-ng-matrix-row>\n </ng-container>\n </tbody>\n <tfoot *ngIf=\"table.showFooter\">\n <tr>\n <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n *ngFor=\"let cell of table.footerRow.cells; trackBy: trackCellBy\">\n </sv-ng-matrixdropdown-cell>\n </tr>\n </tfoot>\n </table>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: ["model", "question"] }, { type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
3349
3362
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixTableComponent, decorators: [{
3350
3363
  type: Component,
3351
3364
  args: [{