survey-angular-ui 1.9.135 → 1.9.137

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.
@@ -18,20 +18,28 @@ export class RowComponent extends BaseAngular {
18
18
  ngAfterViewInit() {
19
19
  var _a;
20
20
  const el = (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement;
21
- if (!!el && !this.row.isNeedRender) {
22
- this.ngZone.runOutsideAngular(() => {
23
- setTimeout(() => {
24
- this.row.startLazyRendering(el);
25
- }, 10);
26
- });
21
+ if (!!el) {
22
+ this.row.setRootElement(el);
23
+ if (!this.row.isNeedRender) {
24
+ this.ngZone.runOutsideAngular(() => {
25
+ setTimeout(() => {
26
+ this.row.startLazyRendering(el);
27
+ }, 10);
28
+ });
29
+ }
27
30
  }
28
31
  }
29
32
  onModelChanged() {
33
+ var _a;
30
34
  super.onModelChanged();
31
35
  if (!this.previousModel) {
32
36
  return;
33
37
  }
34
38
  else {
39
+ this.previousModel.setRootElement(undefined);
40
+ if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) {
41
+ this.row.setRootElement(this.container.nativeElement);
42
+ }
35
43
  this.row.isNeedRender = this.previousModel.isNeedRender;
36
44
  this.stopLazyRendering();
37
45
  }
@@ -42,11 +50,12 @@ export class RowComponent extends BaseAngular {
42
50
  }
43
51
  ngOnDestroy() {
44
52
  super.ngOnDestroy();
53
+ this.row.setRootElement(undefined);
45
54
  this.stopLazyRendering();
46
55
  }
47
56
  }
48
57
  RowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RowComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
49
- RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"row.getRowCss()\" *ngIf=\"row.visible\" #container>\n <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n <sv-ng-element [model]=\"$any(element)\" *ngIf=\"row.isNeedRender\"></sv-ng-element>\n <ng-template *ngIf=\"!row.isNeedRender && element.skeletonComponentName\" [component]=\"{ name: element.skeletonComponentName, data: { element: element } }\"></ng-template>\n </ng-container>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
58
+ RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"row.getRowCss()\" #container>\n <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n <sv-ng-element [model]=\"$any(element)\" *ngIf=\"row.isNeedRender\"></sv-ng-element>\n <ng-template *ngIf=\"!row.isNeedRender && element.skeletonComponentName\" [component]=\"{ name: element.skeletonComponentName, data: { element: element } }\"></ng-template>\n </ng-container>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: i1.ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
50
59
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RowComponent, decorators: [{
51
60
  type: Component,
52
61
  args: [{
@@ -60,4 +69,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
60
69
  type: ViewChild,
61
70
  args: ["container", { read: ElementRef }]
62
71
  }] } });
63
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm93LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9yb3cuY29tcG9uZW50LnRzIiwiLi4vLi4vc3JjL3Jvdy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQW9DLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFVLFNBQVMsRUFBb0IsTUFBTSxlQUFlLENBQUM7QUFFcEksT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7OztBQU03QyxNQUFNLE9BQU8sWUFBYSxTQUFRLFdBQTZCO0lBRzdELFlBQVksR0FBc0IsRUFBRSxHQUFxQixFQUFVLE1BQWM7UUFDL0UsS0FBSyxDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztRQURpRCxXQUFNLEdBQU4sTUFBTSxDQUFRO0lBRWpGLENBQUM7SUFFUyxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQztJQUNsQixDQUFDO0lBQ0QsY0FBYyxDQUFFLEtBQWEsRUFBRSxPQUFpQjtRQUM5QyxPQUFPLE9BQU8sQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFDTSxlQUFlOztRQUNwQixNQUFNLEVBQUUsR0FBRyxNQUFBLElBQUksQ0FBQyxTQUFTLDBDQUFFLGFBQWEsQ0FBQztRQUN6QyxJQUFJLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRTtZQUNsQyxJQUFJLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsRUFBRTtnQkFDakMsVUFBVSxDQUFDLEdBQUcsRUFBRTtvQkFDZCxJQUFJLENBQUMsR0FBRyxDQUFDLGtCQUFrQixDQUFDLEVBQUUsQ0FBQyxDQUFDO2dCQUNsQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDVCxDQUFDLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQztJQUNrQixjQUFjO1FBQy9CLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixJQUFHLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN0QixPQUFPO1NBQ1I7YUFBTTtZQUNMLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDO1lBQ3hELElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1NBQzFCO0lBQ0gsQ0FBQztJQUNPLGlCQUFpQjtRQUN2QixJQUFJLENBQUMsR0FBRyxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDN0IsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEdBQUcsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3RELENBQUM7SUFDZSxXQUFXO1FBQ3pCLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMzQixDQUFDOzswR0F2Q1UsWUFBWTs4RkFBWixZQUFZLDRKQUVTLFVBQVUsb0RDVjVDLHlmQU9jOzRGRENELFlBQVk7a0JBTHhCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFdBQVc7b0JBQ3JCLFdBQVcsRUFBRSxzQkFBc0I7b0JBQ25DLFNBQVMsRUFBRSxDQUFDLGtCQUFrQixDQUFDO2lCQUNoQzs0SkFFVSxHQUFHO3NCQUFYLEtBQUs7Z0JBQ3dDLFNBQVM7c0JBQXRELFNBQVM7dUJBQUMsV0FBVyxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBOZ1pvbmUsIFZpZXdDaGlsZCwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBJRWxlbWVudCwgUXVlc3Rpb25Sb3dNb2RlbCB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgQmFzZUFuZ3VsYXIgfSBmcm9tIFwiLi9iYXNlLWFuZ3VsYXJcIjtcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdi1uZy1yb3dcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9yb3cuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2hpZGUtaG9zdC5zY3NzXCJdXG59KVxuZXhwb3J0IGNsYXNzIFJvd0NvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPFF1ZXN0aW9uUm93TW9kZWw+IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpIHJvdyE6IFF1ZXN0aW9uUm93TW9kZWw7XG4gIEBWaWV3Q2hpbGQoXCJjb250YWluZXJcIiwgeyByZWFkOiBFbGVtZW50UmVmIH0pIGNvbnRhaW5lcj86IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuICBjb25zdHJ1Y3RvcihjZHI6IENoYW5nZURldGVjdG9yUmVmLCB2Y3I6IFZpZXdDb250YWluZXJSZWYsIHByaXZhdGUgbmdab25lOiBOZ1pvbmUpIHtcbiAgICBzdXBlcihjZHIsIHZjcik7XG4gIH1cblxuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogUXVlc3Rpb25Sb3dNb2RlbCB7XG4gICAgcmV0dXJuIHRoaXMucm93O1xuICB9XG4gIHRyYWNrRWxlbWVudEJ5IChpbmRleDogbnVtYmVyLCBlbGVtZW50OiBJRWxlbWVudCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGVsZW1lbnQubmFtZSArIGluZGV4O1xuICB9XG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgY29uc3QgZWwgPSB0aGlzLmNvbnRhaW5lcj8ubmF0aXZlRWxlbWVudDtcbiAgICBpZiAoISFlbCAmJiAhdGhpcy5yb3cuaXNOZWVkUmVuZGVyKSB7XG4gICAgICB0aGlzLm5nWm9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiB7XG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIHRoaXMucm93LnN0YXJ0TGF6eVJlbmRlcmluZyhlbCk7XG4gICAgICAgIH0sIDEwKTtcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgb25Nb2RlbENoYW5nZWQoKTogdm9pZCB7XG4gICAgc3VwZXIub25Nb2RlbENoYW5nZWQoKTtcbiAgICBpZighdGhpcy5wcmV2aW91c01vZGVsKSB7XG4gICAgICByZXR1cm47XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucm93LmlzTmVlZFJlbmRlciA9IHRoaXMucHJldmlvdXNNb2RlbC5pc05lZWRSZW5kZXI7XG4gICAgICB0aGlzLnN0b3BMYXp5UmVuZGVyaW5nKCk7XG4gICAgfVxuICB9XG4gIHByaXZhdGUgc3RvcExhenlSZW5kZXJpbmcoKSB7XG4gICAgdGhpcy5yb3cuc3RvcExhenlSZW5kZXJpbmcoKTtcbiAgICB0aGlzLnJvdy5pc05lZWRSZW5kZXIgPSAhdGhpcy5yb3cuaXNMYXp5UmVuZGVyaW5nKCk7XG4gIH1cbiAgcHVibGljIG92ZXJyaWRlIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHN1cGVyLm5nT25EZXN0cm95KCk7XG4gICAgdGhpcy5zdG9wTGF6eVJlbmRlcmluZygpO1xuICB9XG59IiwiPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZT5cbiAgPGRpdiBbY2xhc3NdPVwicm93LmdldFJvd0NzcygpXCIgKm5nSWY9XCJyb3cudmlzaWJsZVwiICNjb250YWluZXI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgZWxlbWVudCBvZiByb3cudmlzaWJsZUVsZW1lbnRzOyB0cmFja0J5OiB0cmFja0VsZW1lbnRCeVwiPlxuICAgICAgPHN2LW5nLWVsZW1lbnQgW21vZGVsXT1cIiRhbnkoZWxlbWVudClcIiAqbmdJZj1cInJvdy5pc05lZWRSZW5kZXJcIj48L3N2LW5nLWVsZW1lbnQ+XG4gICAgICA8bmctdGVtcGxhdGUgKm5nSWY9XCIhcm93LmlzTmVlZFJlbmRlciAmJiBlbGVtZW50LnNrZWxldG9uQ29tcG9uZW50TmFtZVwiIFtjb21wb25lbnRdPVwieyBuYW1lOiBlbGVtZW50LnNrZWxldG9uQ29tcG9uZW50TmFtZSwgZGF0YTogeyBlbGVtZW50OiBlbGVtZW50IH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT4iXX0=
72
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm93LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9yb3cuY29tcG9uZW50LnRzIiwiLi4vLi4vc3JjL3Jvdy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQW9DLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFVLFNBQVMsRUFBb0IsTUFBTSxlQUFlLENBQUM7QUFFcEksT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7OztBQU03QyxNQUFNLE9BQU8sWUFBYSxTQUFRLFdBQTZCO0lBRzdELFlBQVksR0FBc0IsRUFBRSxHQUFxQixFQUFVLE1BQWM7UUFDL0UsS0FBSyxDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztRQURpRCxXQUFNLEdBQU4sTUFBTSxDQUFRO0lBRWpGLENBQUM7SUFFUyxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQztJQUNsQixDQUFDO0lBQ0QsY0FBYyxDQUFFLEtBQWEsRUFBRSxPQUFpQjtRQUM5QyxPQUFPLE9BQU8sQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFDTSxlQUFlOztRQUNwQixNQUFNLEVBQUUsR0FBRyxNQUFBLElBQUksQ0FBQyxTQUFTLDBDQUFFLGFBQWEsQ0FBQztRQUN6QyxJQUFJLENBQUMsQ0FBQyxFQUFFLEVBQUU7WUFDUixJQUFJLENBQUMsR0FBRyxDQUFDLGNBQWMsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUM1QixJQUFHLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUU7Z0JBQ3pCLElBQUksQ0FBQyxNQUFNLENBQUMsaUJBQWlCLENBQUMsR0FBRyxFQUFFO29CQUNqQyxVQUFVLENBQUMsR0FBRyxFQUFFO3dCQUNkLElBQUksQ0FBQyxHQUFHLENBQUMsa0JBQWtCLENBQUMsRUFBRSxDQUFDLENBQUM7b0JBQ2xDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztnQkFDVCxDQUFDLENBQUMsQ0FBQzthQUNKO1NBQ0Y7SUFDSCxDQUFDO0lBQ2tCLGNBQWM7O1FBQy9CLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixJQUFHLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN0QixPQUFPO1NBQ1I7YUFBTTtZQUNMLElBQUksQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQzdDLElBQUcsTUFBQSxJQUFJLENBQUMsU0FBUywwQ0FBRSxhQUFhLEVBQUU7Z0JBQ2hDLElBQUksQ0FBQyxHQUFHLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLENBQUM7YUFDdkQ7WUFDRCxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQztZQUN4RCxJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMxQjtJQUNILENBQUM7SUFDTyxpQkFBaUI7UUFDdkIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQzdCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxHQUFHLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN0RCxDQUFDO0lBQ2UsV0FBVztRQUN6QixLQUFLLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7SUFDM0IsQ0FBQzs7MEdBL0NVLFlBQVk7OEZBQVosWUFBWSw0SkFFUyxVQUFVLG9EQ1Y1QyxtZUFPYzs0RkRDRCxZQUFZO2tCQUx4QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxXQUFXO29CQUNyQixXQUFXLEVBQUUsc0JBQXNCO29CQUNuQyxTQUFTLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQztpQkFDaEM7NEpBRVUsR0FBRztzQkFBWCxLQUFLO2dCQUN3QyxTQUFTO3NCQUF0RCxTQUFTO3VCQUFDLFdBQVcsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgTmdab25lLCBWaWV3Q2hpbGQsIFZpZXdDb250YWluZXJSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgSUVsZW1lbnQsIFF1ZXN0aW9uUm93TW9kZWwgfSBmcm9tIFwic3VydmV5LWNvcmVcIjtcbmltcG9ydCB7IEJhc2VBbmd1bGFyIH0gZnJvbSBcIi4vYmFzZS1hbmd1bGFyXCI7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwic3Ytbmctcm93XCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vcm93LmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsczogW1wiLi9oaWRlLWhvc3Quc2Nzc1wiXVxufSlcbmV4cG9ydCBjbGFzcyBSb3dDb21wb25lbnQgZXh0ZW5kcyBCYXNlQW5ndWxhcjxRdWVzdGlvblJvd01vZGVsPiBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBASW5wdXQoKSByb3chOiBRdWVzdGlvblJvd01vZGVsO1xuICBAVmlld0NoaWxkKFwiY29udGFpbmVyXCIsIHsgcmVhZDogRWxlbWVudFJlZiB9KSBjb250YWluZXI/OiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PjtcbiAgY29uc3RydWN0b3IoY2RyOiBDaGFuZ2VEZXRlY3RvclJlZiwgdmNyOiBWaWV3Q29udGFpbmVyUmVmLCBwcml2YXRlIG5nWm9uZTogTmdab25lKSB7XG4gICAgc3VwZXIoY2RyLCB2Y3IpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGdldE1vZGVsKCk6IFF1ZXN0aW9uUm93TW9kZWwge1xuICAgIHJldHVybiB0aGlzLnJvdztcbiAgfVxuICB0cmFja0VsZW1lbnRCeSAoaW5kZXg6IG51bWJlciwgZWxlbWVudDogSUVsZW1lbnQpOiBzdHJpbmcge1xuICAgIHJldHVybiBlbGVtZW50Lm5hbWUgKyBpbmRleDtcbiAgfVxuICBwdWJsaWMgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIGNvbnN0IGVsID0gdGhpcy5jb250YWluZXI/Lm5hdGl2ZUVsZW1lbnQ7XG4gICAgaWYgKCEhZWwpIHtcbiAgICAgIHRoaXMucm93LnNldFJvb3RFbGVtZW50KGVsKTtcbiAgICAgIGlmKCF0aGlzLnJvdy5pc05lZWRSZW5kZXIpIHtcbiAgICAgICAgdGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5yb3cuc3RhcnRMYXp5UmVuZGVyaW5nKGVsKTtcbiAgICAgICAgICB9LCAxMCk7XG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH1cbiAgfVxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgb25Nb2RlbENoYW5nZWQoKTogdm9pZCB7XG4gICAgc3VwZXIub25Nb2RlbENoYW5nZWQoKTtcbiAgICBpZighdGhpcy5wcmV2aW91c01vZGVsKSB7XG4gICAgICByZXR1cm47XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5zZXRSb290RWxlbWVudCh1bmRlZmluZWQpO1xuICAgICAgaWYodGhpcy5jb250YWluZXI/Lm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgICAgdGhpcy5yb3cuc2V0Um9vdEVsZW1lbnQodGhpcy5jb250YWluZXIubmF0aXZlRWxlbWVudCk7XG4gICAgICB9XG4gICAgICB0aGlzLnJvdy5pc05lZWRSZW5kZXIgPSB0aGlzLnByZXZpb3VzTW9kZWwuaXNOZWVkUmVuZGVyO1xuICAgICAgdGhpcy5zdG9wTGF6eVJlbmRlcmluZygpO1xuICAgIH1cbiAgfVxuICBwcml2YXRlIHN0b3BMYXp5UmVuZGVyaW5nKCkge1xuICAgIHRoaXMucm93LnN0b3BMYXp5UmVuZGVyaW5nKCk7XG4gICAgdGhpcy5yb3cuaXNOZWVkUmVuZGVyID0gIXRoaXMucm93LmlzTGF6eVJlbmRlcmluZygpO1xuICB9XG4gIHB1YmxpYyBvdmVycmlkZSBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIHRoaXMucm93LnNldFJvb3RFbGVtZW50KHVuZGVmaW5lZCk7XG4gICAgdGhpcy5zdG9wTGF6eVJlbmRlcmluZygpO1xuICB9XG59IiwiPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZT5cbiAgPGRpdiBbY2xhc3NdPVwicm93LmdldFJvd0NzcygpXCIgI2NvbnRhaW5lcj5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBlbGVtZW50IG9mIHJvdy52aXNpYmxlRWxlbWVudHM7IHRyYWNrQnk6IHRyYWNrRWxlbWVudEJ5XCI+XG4gICAgICA8c3YtbmctZWxlbWVudCBbbW9kZWxdPVwiJGFueShlbGVtZW50KVwiICpuZ0lmPVwicm93LmlzTmVlZFJlbmRlclwiPjwvc3YtbmctZWxlbWVudD5cbiAgICAgIDxuZy10ZW1wbGF0ZSAqbmdJZj1cIiFyb3cuaXNOZWVkUmVuZGVyICYmIGVsZW1lbnQuc2tlbGV0b25Db21wb25lbnROYW1lXCIgW2NvbXBvbmVudF09XCJ7IG5hbWU6IGVsZW1lbnQuc2tlbGV0b25Db21wb25lbnROYW1lLCBkYXRhOiB7IGVsZW1lbnQ6IGVsZW1lbnQgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPiJdfQ==
@@ -415,11 +415,14 @@ class ModalComponent {
415
415
  this.functionDefined = false;
416
416
  }
417
417
  showDialog(dialogOptions, rootElement) {
418
- this.model = createPopupModalViewModel(dialogOptions, rootElement);
419
- this.model.model.onHide = () => {
420
- this.portalHost.detach();
421
- this.model.dispose();
418
+ const popupViewModel = this.model = createPopupModalViewModel(dialogOptions, rootElement);
419
+ const onVisibilityChangedCallback = (_, options) => {
420
+ if (!options.isVisible) {
421
+ this.portalHost.detach();
422
+ this.model.dispose();
423
+ }
422
424
  };
425
+ popupViewModel.onVisibilityChanged.add(onVisibilityChangedCallback);
423
426
  this.portalHost = this.popupService.createComponent(this.model);
424
427
  this.model.model.isVisible = true;
425
428
  return this.model;
@@ -618,6 +621,16 @@ class ElementComponent extends BaseAngular {
618
621
  get elementComponentName() {
619
622
  return this.model.isPanel ? "panel" : "question";
620
623
  }
624
+ onModelChanged() {
625
+ var _a;
626
+ super.onModelChanged();
627
+ if (this.previousModel) {
628
+ this.previousModel.setWrapperElement(undefined);
629
+ }
630
+ if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
631
+ this.model.setWrapperElement(this.container.nativeElement);
632
+ }
633
+ }
621
634
  get componentName() {
622
635
  const survey = this.surveyModel;
623
636
  if (!!survey) {
@@ -651,9 +664,19 @@ class ElementComponent extends BaseAngular {
651
664
  }
652
665
  };
653
666
  }
667
+ ngAfterViewInit() {
668
+ var _a;
669
+ if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
670
+ this.model.setWrapperElement(this.container.nativeElement);
671
+ }
672
+ }
673
+ ngOnDestroy() {
674
+ super.ngOnDestroy();
675
+ this.model.setWrapperElement(undefined);
676
+ }
654
677
  }
655
678
  ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
656
- ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"!!model\" [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\">\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
679
+ ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"!!model\" [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\" #container>\n <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
657
680
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementComponent, decorators: [{
658
681
  type: Component,
659
682
  args: [{
@@ -663,6 +686,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
663
686
  }]
664
687
  }], propDecorators: { model: [{
665
688
  type: Input
689
+ }], container: [{
690
+ type: ViewChild,
691
+ args: ["container", { static: false, read: ElementRef }]
666
692
  }] } });
667
693
 
668
694
  class RowComponent extends BaseAngular {
@@ -679,20 +705,28 @@ class RowComponent extends BaseAngular {
679
705
  ngAfterViewInit() {
680
706
  var _a;
681
707
  const el = (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement;
682
- if (!!el && !this.row.isNeedRender) {
683
- this.ngZone.runOutsideAngular(() => {
684
- setTimeout(() => {
685
- this.row.startLazyRendering(el);
686
- }, 10);
687
- });
708
+ if (!!el) {
709
+ this.row.setRootElement(el);
710
+ if (!this.row.isNeedRender) {
711
+ this.ngZone.runOutsideAngular(() => {
712
+ setTimeout(() => {
713
+ this.row.startLazyRendering(el);
714
+ }, 10);
715
+ });
716
+ }
688
717
  }
689
718
  }
690
719
  onModelChanged() {
720
+ var _a;
691
721
  super.onModelChanged();
692
722
  if (!this.previousModel) {
693
723
  return;
694
724
  }
695
725
  else {
726
+ this.previousModel.setRootElement(undefined);
727
+ if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) {
728
+ this.row.setRootElement(this.container.nativeElement);
729
+ }
696
730
  this.row.isNeedRender = this.previousModel.isNeedRender;
697
731
  this.stopLazyRendering();
698
732
  }
@@ -703,11 +737,12 @@ class RowComponent extends BaseAngular {
703
737
  }
704
738
  ngOnDestroy() {
705
739
  super.ngOnDestroy();
740
+ this.row.setRootElement(undefined);
706
741
  this.stopLazyRendering();
707
742
  }
708
743
  }
709
744
  RowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RowComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
710
- RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"row.getRowCss()\" *ngIf=\"row.visible\" #container>\n <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n <sv-ng-element [model]=\"$any(element)\" *ngIf=\"row.isNeedRender\"></sv-ng-element>\n <ng-template *ngIf=\"!row.isNeedRender && element.skeletonComponentName\" [component]=\"{ name: element.skeletonComponentName, data: { element: element } }\"></ng-template>\n </ng-container>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
745
+ RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RowComponent, selector: "sv-ng-row", inputs: { row: "row" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"row.getRowCss()\" #container>\n <ng-container *ngFor=\"let element of row.visibleElements; trackBy: trackElementBy\">\n <sv-ng-element [model]=\"$any(element)\" *ngIf=\"row.isNeedRender\"></sv-ng-element>\n <ng-template *ngIf=\"!row.isNeedRender && element.skeletonComponentName\" [component]=\"{ name: element.skeletonComponentName, data: { element: element } }\"></ng-template>\n </ng-container>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
711
746
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RowComponent, decorators: [{
712
747
  type: Component,
713
748
  args: [{
@@ -737,7 +772,7 @@ class PageComponent extends BaseAngular {
737
772
  }
738
773
  }
739
774
  PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
740
- PageComponent.ɵcmp = i0.ɵɵ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: ElementRef }], usesInheritance: true, ngImport: i0, 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.rows\">\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
775
+ PageComponent.ɵcmp = i0.ɵɵ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: ElementRef }], usesInheritance: true, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
741
776
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageComponent, decorators: [{
742
777
  type: Component,
743
778
  args: [{
@@ -1128,7 +1163,7 @@ class QuestionComponent extends EmbeddedViewContentComponent {
1128
1163
  }
1129
1164
  }
1130
1165
  QuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1131
- QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"model.getRootStyle()\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.aria-expanded]=\"model.ariaExpanded\">\n <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\n <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <ng-template [component]=\"{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></ng-template>\n <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n <div [model]=\"model.locCommentText\" sv-ng-string></div>\n <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n </div>\n <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n </div>\n </ng-template>\n <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
1166
+ QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"model.getRootStyle()\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.aria-expanded]=\"model.ariaExpanded\">\n <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\n <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"model.renderedIsExpanded\">\n <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <ng-template [component]=\"{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></ng-template>\n <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n <div [model]=\"model.locCommentText\" sv-ng-string></div>\n <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n </div>\n <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n </div>\n </ng-template>\n <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
1132
1167
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionComponent, decorators: [{
1133
1168
  type: Component,
1134
1169
  args: [{
@@ -2482,7 +2517,7 @@ class ProgressButtonsComponent {
2482
2517
  }
2483
2518
  }
2484
2519
  ProgressButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressButtonsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2485
- ProgressButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model", survey: "survey", container: "container" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.getRootCss(container)\" [style.maxWidth]=\"model.progressWidth\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"progress\">\n <div *ngIf=\"canShowHeader\" [class]=\"survey.css.progressButtonsHeader\">\n <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.headerText\">{{ model.headerText }}</div>\n </div>\n <div [class]=\"survey.css.progressButtonsContainer\">\n <div\n [class]=\"model.getScrollButtonCss(hasScroller, true)\"\n (click)=\"clickScrollButton(true)\"\n role=\"button\"\n ></div>\n <div\n [class]=\"survey.css.progressButtonsListContainer\" #progressButtonsListContainer>\n <ul [class]=\"survey.css.progressButtonsList\">\n <li\n *ngFor=\"let page of survey.visiblePages; index as index\"\n [class]=\"model.getListElementCss(index)\"\n (click)=\"model.isListElementClickable(index) ? model.clickListElement(page) : null\"\n [attr.data-page-number]=\"model.getItemNumber(page)\">\n <div [class]=\"survey.css.progressButtonsConnector\"></div>\n <div *ngIf=\"canShowItemTitles\"\n [class]=\"survey.css.progressButtonsPageTitle\"\n [title]=\"page.renderedNavigationTitle\"\n >\n {{ page.renderedNavigationTitle }}\n </div>\n <div *ngIf=\"canShowItemTitles\"\n [class]=\"survey.css.progressButtonsPageDescription\"\n [title]=\"page.locNavigationDescription.renderedHtml\"\n >\n {{ page.locNavigationDescription.renderedHtml }}\n </div>\n </li>\n </ul>\n </div>\n <div\n [class]=\"model.getScrollButtonCss(hasScroller, false)\"\n (click)=\"clickScrollButton(false)\"\n role=\"button\"\n ></div>\n </div>\n <div *ngIf=\"canShowFooter\" [class]=\"survey.css.progressButtonsFooter\">\n <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.footerText\">{{ model.footerText }}</div>\n </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
2520
+ ProgressButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model", survey: "survey", container: "container" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.getRootCss(container)\" [style.maxWidth]=\"model.progressWidth\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"progress\">\n <div *ngIf=\"canShowHeader\" [class]=\"survey.css.progressButtonsHeader\">\n <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.headerText\">{{ model.headerText }}</div>\n </div>\n <div [class]=\"survey.css.progressButtonsContainer\">\n <div\n [class]=\"model.getScrollButtonCss(hasScroller, true)\"\n (click)=\"clickScrollButton(true)\"\n role=\"button\"\n ></div>\n <div\n [class]=\"survey.css.progressButtonsListContainer\" #progressButtonsListContainer>\n <ul [class]=\"survey.css.progressButtonsList\">\n <li\n *ngFor=\"let page of survey.visiblePages; index as index\"\n [class]=\"model.getListElementCss(index)\"\n (click)=\"model.isListElementClickable(index) ? model.clickListElement(page) : null\"\n [attr.data-page-number]=\"model.getItemNumber(page)\">\n <div [class]=\"survey.css.progressButtonsConnector\"></div>\n <div *ngIf=\"canShowItemTitles\"\n [class]=\"survey.css.progressButtonsPageTitle\"\n [title]=\"page.renderedNavigationTitle\"\n >\n {{ page.renderedNavigationTitle }}\n </div>\n <div *ngIf=\"canShowItemTitles\"\n [class]=\"survey.css.progressButtonsPageDescription\"\n [title]=\"page.locNavigationDescription.renderedHtml\"\n >\n {{ page.locNavigationDescription.renderedHtml }}\n </div>\n <div [class]=\"survey.css.progressButtonsButton\"><div [class]=\"survey.css.progressButtonsButtonBackground\"></div><div [class]=\"survey.css.progressButtonsButtonContent\"></div><span>{{model.getItemNumber(page)}}</span></div>\n </li>\n </ul>\n </div>\n <div\n [class]=\"model.getScrollButtonCss(hasScroller, false)\"\n (click)=\"clickScrollButton(false)\"\n role=\"button\"\n ></div>\n </div>\n <div *ngIf=\"canShowFooter\" [class]=\"survey.css.progressButtonsFooter\">\n <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.footerText\">{{ model.footerText }}</div>\n </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
2486
2521
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressButtonsComponent, decorators: [{
2487
2522
  type: Component,
2488
2523
  args: [{
@@ -2540,7 +2575,7 @@ class PanelComponent extends BaseAngular {
2540
2575
  }
2541
2576
  }
2542
2577
  PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2543
- PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"!!model && model.isVisible\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div *ngIf=\"!model.isCollapsed\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" [attr.id]=\"model.contentId\">\n <ng-container *ngFor=\"let row of model.rows; trackBy: trackRowBy\">\n <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n <sv-ng-row [row]=\"row\"></sv-ng-row>\n </ng-template>\n </ng-container>\n <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n </div>\n </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2578
+ PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"!!model && model.getIsContentVisible()\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n <div *ngIf=\"model.renderedIsExpanded\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" [attr.id]=\"model.contentId\">\n <ng-container *ngFor=\"let row of model.visibleRows; trackBy: trackRowBy\">\n <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n <sv-ng-row [row]=\"row\"></sv-ng-row>\n </ng-template>\n </ng-container>\n <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n </div>\n </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2544
2579
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelComponent, decorators: [{
2545
2580
  type: Component,
2546
2581
  args: [{
@@ -3019,7 +3054,7 @@ class PanelDynamicQuestionComponent extends QuestionAngular {
3019
3054
  }
3020
3055
  }
3021
3056
  PanelDynamicQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3022
- 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 [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()\">\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"] }] });
3057
+ 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 [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"] }] });
3023
3058
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, decorators: [{
3024
3059
  type: Component,
3025
3060
  args: [{
@@ -3227,9 +3262,12 @@ class MatrixDropdownCellComponent extends BaseAngular {
3227
3262
  this.cell.question.unRegisterFunctionOnPropertyValueChanged("errors", "__ngSubscription");
3228
3263
  }
3229
3264
  }
3265
+ get canRender() {
3266
+ return this.question && this.question.survey;
3267
+ }
3230
3268
  }
3231
3269
  MatrixDropdownCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixDropdownCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3232
- MatrixDropdownCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <td [class]=\"cell.className\" [attr.data-responsive-title]=\"getHeaders()\" [title]=\"cell.getTitle()\"\n [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" (focusin)=\"cell.focusIn()\" #cellContainer>\n <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\"\n [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n <ng-container *ngIf=\"cell.hasPanel\">\n <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n </ng-container>\n <div *ngIf=\"cell.isErrorsCell && cell.question?.hasVisibleErrors\" [element]=\"cell.question\" sv-ng-errors></div>\n <div *ngIf=\"cell.hasQuestion\" [class]=\"cell.cellQuestionWrapperClassName\"\n [visible]=\"cell.question.isVisible\">\n <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n <ng-template\n [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n <ng-template\n [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n </ng-template>\n </ng-container>\n <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\"\n [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n </ng-template>\n <ng-container *ngIf=\"cell.isItemChoice\">\n <ng-template\n [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n <sv-ng-selebase-item [showLabel]=\"false\" [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n [question]=\"cell.question\" [model]=\"cell.item\"></sv-ng-selebase-item>\n </ng-template>\n </ng-container>\n <div *ngIf=\"cell.isOtherChoice\" [class]=\"cell.question.getCommentAreaCss(true)\" [question]=\"cell.question\"\n sv-ng-comment-other></div>\n </div>\n <ng-container *ngIf=\"cell.hasTitle\">\n <ng-template\n [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n <span *ngIf=\"isRequiredCell\" [class]=\"question.cssClasses.cellRequiredText\">{{ cell.requiredText }}</span>\n </ng-template>\n </ng-container>\n </td>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
3270
+ MatrixDropdownCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <td [class]=\"cell.className\" [attr.data-responsive-title]=\"getHeaders()\" *ngIf=\"canRender\" [title]=\"cell.getTitle()\"\n [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" (focusin)=\"cell.focusIn()\" #cellContainer>\n <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\"\n [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n <ng-container *ngIf=\"cell.hasPanel\">\n <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n </ng-container>\n <div *ngIf=\"cell.isErrorsCell && cell.question?.hasVisibleErrors\" [element]=\"cell.question\" sv-ng-errors></div>\n <div *ngIf=\"cell.hasQuestion\" [class]=\"cell.cellQuestionWrapperClassName\"\n [visible]=\"cell.question.isVisible\">\n <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n <ng-template\n [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n <ng-template\n [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n </ng-template>\n </ng-container>\n <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\"\n [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n </ng-template>\n <ng-container *ngIf=\"cell.isItemChoice\">\n <ng-template\n [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n <sv-ng-selebase-item [showLabel]=\"false\" [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n [question]=\"cell.question\" [model]=\"cell.item\"></sv-ng-selebase-item>\n </ng-template>\n </ng-container>\n <div *ngIf=\"cell.isOtherChoice\" [class]=\"cell.question.getCommentAreaCss(true)\" [question]=\"cell.question\"\n sv-ng-comment-other></div>\n </div>\n <ng-container *ngIf=\"cell.hasTitle\">\n <ng-template\n [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n <span *ngIf=\"isRequiredCell\" [class]=\"question.cssClasses.cellRequiredText\">{{ cell.requiredText }}</span>\n </ng-template>\n </ng-container>\n </td>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
3233
3271
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixDropdownCellComponent, decorators: [{
3234
3272
  type: Component,
3235
3273
  args: [{