survey-angular-ui 1.9.70 → 1.9.71

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.
@@ -339,12 +339,15 @@ class PopupBaseContainerComponent extends BaseAngular {
339
339
  this.prevIsVisible = this.model.isVisible;
340
340
  }
341
341
  }
342
+ clickInside(event) {
343
+ event.stopPropagation();
344
+ }
342
345
  }
343
346
  PopupBaseContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupBaseContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
344
- PopupBaseContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupBaseContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n <div class=\"sv-popup__shadow\">\n <ng-container *ngIf=\"model.showHeader\">\n <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n </ng-container>\n <div class=\"sv-popup__body-content\">\n <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n <div class=\"sv-popup__scrolling-content\">\n <div class=\"sv-popup__content\">\n <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n </div>\n </div>\n <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
347
+ PopupBaseContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupBaseContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\" (click)=\"clickInside($event)\">\n <div class=\"sv-popup__shadow\">\n <ng-container *ngIf=\"model.showHeader\">\n <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n </ng-container>\n <div class=\"sv-popup__body-content\">\n <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n <div class=\"sv-popup__scrolling-content\">\n <div class=\"sv-popup__content\">\n <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n </div>\n </div>\n <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
345
348
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupBaseContainerComponent, decorators: [{
346
349
  type: Component,
347
- args: [{ selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n <div class=\"sv-popup__shadow\">\n <ng-container *ngIf=\"model.showHeader\">\n <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n </ng-container>\n <div class=\"sv-popup__body-content\">\n <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n <div class=\"sv-popup__scrolling-content\">\n <div class=\"sv-popup__content\">\n <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n </div>\n </div>\n <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n </div>\n </div>\n</div>" }]
350
+ args: [{ selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\" (click)=\"clickInside($event)\">\n <div class=\"sv-popup__shadow\">\n <ng-container *ngIf=\"model.showHeader\">\n <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n </ng-container>\n <div class=\"sv-popup__body-content\">\n <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n <div class=\"sv-popup__scrolling-content\">\n <div class=\"sv-popup__content\">\n <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n </div>\n </div>\n <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n </div>\n </div>\n </div>\n </div>\n</div>" }]
348
351
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
349
352
  type: Input
350
353
  }] } });
@@ -415,10 +418,10 @@ class DynamicHeadComponent extends EmbeddedViewContentComponent {
415
418
  }
416
419
  }
417
420
  DynamicHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
418
- DynamicHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <ng-container [ngSwitch]=\"tagName\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n </ng-container>\n <ng-template #titleContent>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
421
+ DynamicHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <ng-container [ngSwitch]=\"tagName\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n </ng-container>\n <ng-template #titleContent>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
419
422
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicHeadComponent, decorators: [{
420
423
  type: Component,
421
- args: [{ selector: "sv-ng-dynamic-head", template: "<ng-template #template>\n <ng-container [ngSwitch]=\"tagName\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'columnheader'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n </ng-container>\n <ng-template #titleContent>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>", styles: [":host{display:none}\n"] }]
424
+ args: [{ selector: "sv-ng-dynamic-head", template: "<ng-template #template>\n <ng-container [ngSwitch]=\"tagName\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n </ng-container>\n <ng-template #titleContent>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>", styles: [":host{display:none}\n"] }]
422
425
  }], propDecorators: { tagName: [{
423
426
  type: Input
424
427
  }], element: [{
@@ -742,27 +745,34 @@ class SurveyContentComponent extends BaseAngular {
742
745
  return this.model;
743
746
  }
744
747
  onModelChanged() {
745
- this.previousModel?.destroyResizeObserver();
746
- this.model.renderCallback = () => {
747
- this.detectChanges();
748
- };
748
+ if (!!this.previousModel) {
749
+ this.previousModel.destroyResizeObserver();
750
+ this.previousModel.renderCallback = undefined;
751
+ }
752
+ if (!!this.model) {
753
+ this.model.renderCallback = () => {
754
+ this.detectChanges();
755
+ };
756
+ }
749
757
  this.isSurveyUpdated = true;
750
758
  }
751
759
  ngOnInit() {
752
760
  super.ngOnInit();
753
- if (this.model["needRenderIcons"]) {
761
+ if (!!this.model && this.model["needRenderIcons"]) {
754
762
  SvgRegistry.renderIcons();
755
763
  }
756
764
  }
757
765
  ngOnDestroy() {
758
766
  super.ngOnDestroy();
759
- this.model.renderCallback = undefined;
767
+ if (!!this.model) {
768
+ this.model.renderCallback = undefined;
769
+ }
760
770
  }
761
771
  ngAfterViewInit() {
762
772
  this.isSurveyUpdated = true;
763
773
  }
764
774
  ngAfterViewChecked() {
765
- if (this.isSurveyUpdated) {
775
+ if (!!this.model && this.isSurveyUpdated) {
766
776
  this.model.afterRenderSurvey(this.rootEl.nativeElement);
767
777
  }
768
778
  super.ngAfterViewChecked();
@@ -1733,10 +1743,10 @@ class ActionBarItemComponent extends BaseAngular {
1733
1743
  }
1734
1744
  }
1735
1745
  ActionBarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1736
- ActionBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarItemComponent, selector: "sv-action-bar-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [attr.aria-checked]=\"model.ariaChecked\" [attr.role]=\"model.ariaRole\" [disabled]=\"model.disabled\" \n data-bind=\"key2click: { processEsc: false }\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n </button>\n<ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1746
+ ActionBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarItemComponent, selector: "sv-action-bar-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [attr.aria-checked]=\"model.ariaChecked\" [attr.aria-expanded]=\"model.ariaExpanded\" [attr.role]=\"model.ariaRole\" [disabled]=\"model.disabled\" \n data-bind=\"key2click: { processEsc: false }\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n </button>\n<ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1737
1747
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarItemComponent, decorators: [{
1738
1748
  type: Component,
1739
- args: [{ selector: "sv-action-bar-item", template: "<ng-template #template>\n <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [attr.aria-checked]=\"model.ariaChecked\" [attr.role]=\"model.ariaRole\" [disabled]=\"model.disabled\" \n data-bind=\"key2click: { processEsc: false }\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n </button>\n<ng-template>", styles: [":host{display:none}\n"] }]
1749
+ args: [{ selector: "sv-action-bar-item", template: "<ng-template #template>\n <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [attr.aria-checked]=\"model.ariaChecked\" [attr.aria-expanded]=\"model.ariaExpanded\" [attr.role]=\"model.ariaRole\" [disabled]=\"model.disabled\" \n data-bind=\"key2click: { processEsc: false }\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n </button>\n<ng-template>", styles: [":host{display:none}\n"] }]
1740
1750
  }], propDecorators: { model: [{
1741
1751
  type: Input
1742
1752
  }] } });
@@ -1756,10 +1766,10 @@ class ActionBarItemDropdownComponent extends BaseAngular {
1756
1766
  }
1757
1767
  }
1758
1768
  ActionBarItemDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarItemDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1759
- ActionBarItemDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarItemDropdownComponent, selector: "sv-action-bar-item-dropdown", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n </button>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1769
+ ActionBarItemDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarItemDropdownComponent, selector: "sv-action-bar-item-dropdown", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\" [attr.role]=\"model.ariaRole\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n </button>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1760
1770
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarItemDropdownComponent, decorators: [{
1761
1771
  type: Component,
1762
- args: [{ selector: "sv-action-bar-item-dropdown", template: "<ng-template #template>\n <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n </button>\n</ng-template>", styles: [":host{display:none}\n"] }]
1772
+ args: [{ selector: "sv-action-bar-item-dropdown", template: "<ng-template #template>\n <button type=\"button\" (click)=\"model.action()\" [key2click]=\"{ processEsc: false }\" [class]=\"model.getActionBarItemCss()\" [title]=\"model.tooltip || model.title\" [disabled]=\"model.disabled\" [attr.role]=\"model.ariaRole\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n </button>\n</ng-template>", styles: [":host{display:none}\n"] }]
1763
1773
  }], propDecorators: { model: [{
1764
1774
  type: Input
1765
1775
  }] } });
@@ -1869,10 +1879,10 @@ class ListComponent extends BaseAngular {
1869
1879
  }
1870
1880
  }
1871
1881
  ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1872
- ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "listContainerElement", first: true, predicate: ["listContainerElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.cssClasses.root\" #listContainerElement>\n <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n <div [class]=\"model.cssClasses.filterIcon\">\n <svg [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n </div>\n <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n (keyup)=\"onGoToItems($event)\" />\n </div>\n <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n </div>\n <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" [visible]=\"!model.isEmpty\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n <sv-ng-list-item *ngFor=\"let item of model.renderedActions; trackBy: trackItemBy\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n <!--ko foreach: model.renderedActions -->\n <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n <!-- /ko -->\n <!-- /ko -->\n </ul>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1882
+ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "listContainerElement", first: true, predicate: ["listContainerElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.cssClasses.root\" #listContainerElement>\n <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n <div [class]=\"model.cssClasses.filterIcon\">\n <svg [iconName]=\"'icon-search'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n (keyup)=\"onGoToItems($event)\" />\n <button *ngIf=\"model.showSearchClearButton && !!model.filterString\" (click)=\"model.onClickSearchClearButton($event)\" [class]=\"model.cssClasses.searchClearButtonIcon\">\n <svg [iconName]=\"'icon-searchclear'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </button>\n </div>\n <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n </div>\n <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" [visible]=\"!model.isEmpty\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n <sv-ng-list-item *ngFor=\"let item of model.renderedActions; trackBy: trackItemBy\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n <!--ko foreach: model.renderedActions -->\n <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n <!-- /ko -->\n <!-- /ko -->\n </ul>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1873
1883
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListComponent, decorators: [{
1874
1884
  type: Component,
1875
- args: [{ selector: "sv-ng-list, '[sv-ng-list]'", template: "<ng-template #template>\n <div [class]=\"model.cssClasses.root\" #listContainerElement>\n <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n <div [class]=\"model.cssClasses.filterIcon\">\n <svg [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n </div>\n <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n (keyup)=\"onGoToItems($event)\" />\n </div>\n <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n </div>\n <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" [visible]=\"!model.isEmpty\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n <sv-ng-list-item *ngFor=\"let item of model.renderedActions; trackBy: trackItemBy\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n <!--ko foreach: model.renderedActions -->\n <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n <!-- /ko -->\n <!-- /ko -->\n </ul>\n </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
1885
+ args: [{ selector: "sv-ng-list, '[sv-ng-list]'", template: "<ng-template #template>\n <div [class]=\"model.cssClasses.root\" #listContainerElement>\n <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n <div [class]=\"model.cssClasses.filterIcon\">\n <svg [iconName]=\"'icon-search'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n (keyup)=\"onGoToItems($event)\" />\n <button *ngIf=\"model.showSearchClearButton && !!model.filterString\" (click)=\"model.onClickSearchClearButton($event)\" [class]=\"model.cssClasses.searchClearButtonIcon\">\n <svg [iconName]=\"'icon-searchclear'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </button>\n </div>\n <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n </div>\n <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" [visible]=\"!model.isEmpty\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n <sv-ng-list-item *ngFor=\"let item of model.renderedActions; trackBy: trackItemBy\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n <!--ko foreach: model.renderedActions -->\n <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n <!-- /ko -->\n <!-- /ko -->\n </ul>\n </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
1876
1886
  }], propDecorators: { model: [{
1877
1887
  type: Input
1878
1888
  }], listContainerElement: [{
@@ -2089,10 +2099,10 @@ class MatrixQuestionComponent extends QuestionAngular {
2089
2099
  }
2090
2100
  }
2091
2101
  MatrixQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2092
- MatrixQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n <fieldset>\n <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n <table [class]=\"model.getTableCss()\">\n <thead *ngIf=\"model.showHeader\">\n <tr>\n <td [visible]=\"model.hasRows\"></td>\n <th\n *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n </ng-template>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n </ng-template>\n </td>\n <ng-container *ngIf=\"model.hasCellText\">\n <td *ngFor=\"let column of model.visibleColumns\"\n [class]=\"model.getItemClass(row, column)\"\n (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!model.hasCellText\">\n <td\n *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n [class]=\"model.cssClasses.cell\">\n <label [class]=\"model.getItemClass(row, column)\">\n <input\n type=\"radio\"\n [class]=\"model.cssClasses.itemValue\"\n [name]=\"row.fullName\"\n [value]=\"column.value\"\n [checked]=\"row.value === column.value\"\n [disabled]=\"model.isInputReadOnly\"\n [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n (change)=\"onChange(row, column)\"\n [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"column.locText.renderedHtml\"\n [attr.aria-invalid]=\"model.ariaInvalid\"\n [attr.aria-describedby]=\"model.ariaDescribedBy\"\n />\n <span [class]=\"model.cssClasses.materialDecorator\">\n <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n </svg> \n </span>\n <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n </label>\n </td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n </fieldset>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2102
+ MatrixQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n <fieldset>\n <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n <table [class]=\"model.getTableCss()\">\n <thead *ngIf=\"model.showHeader\">\n <tr>\n <td *ngIf=\"model.hasRows\"></td>\n <th\n *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n </ng-template>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n </ng-template>\n </td>\n <ng-container *ngIf=\"model.hasCellText\">\n <td *ngFor=\"let column of model.visibleColumns\"\n [class]=\"model.getItemClass(row, column)\"\n (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!model.hasCellText\">\n <td\n *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n [class]=\"model.cssClasses.cell\">\n <label [class]=\"model.getItemClass(row, column)\">\n <input\n type=\"radio\"\n [class]=\"model.cssClasses.itemValue\"\n [name]=\"row.fullName\"\n [value]=\"column.value\"\n [checked]=\"row.value === column.value\"\n [disabled]=\"model.isInputReadOnly\"\n [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n (change)=\"onChange(row, column)\"\n [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"column.locText.renderedHtml\"\n [attr.aria-invalid]=\"model.ariaInvalid\"\n [attr.aria-describedby]=\"model.ariaDescribedBy\"\n />\n <span [class]=\"model.cssClasses.materialDecorator\">\n <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n </svg> \n </span>\n <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n </label>\n </td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n </fieldset>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
2093
2103
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MatrixQuestionComponent, decorators: [{
2094
2104
  type: Component,
2095
- args: [{ selector: "sv-ng-matrix-question", template: "<ng-template #template>\n <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n <fieldset>\n <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n <table [class]=\"model.getTableCss()\">\n <thead *ngIf=\"model.showHeader\">\n <tr>\n <td [visible]=\"model.hasRows\"></td>\n <th\n *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n </ng-template>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n </ng-template>\n </td>\n <ng-container *ngIf=\"model.hasCellText\">\n <td *ngFor=\"let column of model.visibleColumns\"\n [class]=\"model.getItemClass(row, column)\"\n (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!model.hasCellText\">\n <td\n *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n [class]=\"model.cssClasses.cell\">\n <label [class]=\"model.getItemClass(row, column)\">\n <input\n type=\"radio\"\n [class]=\"model.cssClasses.itemValue\"\n [name]=\"row.fullName\"\n [value]=\"column.value\"\n [checked]=\"row.value === column.value\"\n [disabled]=\"model.isInputReadOnly\"\n [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n (change)=\"onChange(row, column)\"\n [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"column.locText.renderedHtml\"\n [attr.aria-invalid]=\"model.ariaInvalid\"\n [attr.aria-describedby]=\"model.ariaDescribedBy\"\n />\n <span [class]=\"model.cssClasses.materialDecorator\">\n <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n </svg> \n </span>\n <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n </label>\n </td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n </fieldset>\n </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
2105
+ args: [{ selector: "sv-ng-matrix-question", template: "<ng-template #template>\n <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n <fieldset>\n <legend [attr.aria-label]=\"model.locTitle.renderedHtml\"></legend>\n <table [class]=\"model.getTableCss()\">\n <thead *ngIf=\"model.showHeader\">\n <tr>\n <td *ngIf=\"model.hasRows\"></td>\n <th\n *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n </ng-template>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n </ng-template>\n </td>\n <ng-container *ngIf=\"model.hasCellText\">\n <td *ngFor=\"let column of model.visibleColumns\"\n [class]=\"model.getItemClass(row, column)\"\n (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!model.hasCellText\">\n <td\n *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n [class]=\"model.cssClasses.cell\">\n <label [class]=\"model.getItemClass(row, column)\">\n <input\n type=\"radio\"\n [class]=\"model.cssClasses.itemValue\"\n [name]=\"row.fullName\"\n [value]=\"column.value\"\n [checked]=\"row.value === column.value\"\n [disabled]=\"model.isInputReadOnly\"\n [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n (change)=\"onChange(row, column)\"\n [attr.aria-required]=\"model.ariaRequired\"\n [attr.aria-label]=\"column.locText.renderedHtml\"\n [attr.aria-invalid]=\"model.ariaInvalid\"\n [attr.aria-describedby]=\"model.ariaDescribedBy\"\n />\n <span [class]=\"model.cssClasses.materialDecorator\">\n <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n </svg> \n </span>\n <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n </label>\n </td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n </fieldset>\n </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
2096
2106
  }] });
2097
2107
  AngularComponentFactory.Instance.registerComponent("matrix-question", MatrixQuestionComponent);
2098
2108
 
@@ -2374,10 +2384,10 @@ class PanelDynamicQuestionComponent extends QuestionAngular {
2374
2384
  }
2375
2385
  }
2376
2386
  PanelDynamicQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PanelDynamicQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2377
- PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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'\">\n <sv-ng-paneldynamic-remove-btn *ngIf=\"model.canRemovePanel && panel.state != 'collapsed' && model.panelRemoveButtonLocation == 'right'\" [data]=\"{ panel: panel, question: model }\"></sv-ng-paneldynamic-remove-btn>\n </ng-container>\n </div>\n <!-- add track by [key]=\"'separator' + panel.id\" -->\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\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.panelCount !== 0 && !model.showLegacyNavigation\"></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 [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: PaneldynamicRemoveButtonComponent, selector: "sv-ng-paneldynamic-remove-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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2387
+ PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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'\">\n <sv-ng-paneldynamic-remove-btn *ngIf=\"model.canRemovePanel && panel.state != 'collapsed' && model.panelRemoveButtonLocation == 'right'\" [data]=\"{ panel: panel, question: model }\"></sv-ng-paneldynamic-remove-btn>\n </ng-container>\n </div>\n <!-- add track by [key]=\"'separator' + panel.id\" -->\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\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.panelCount !== 0 && !model.showLegacyNavigation\"></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: PaneldynamicRemoveButtonComponent, selector: "sv-ng-paneldynamic-remove-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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
2378
2388
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PanelDynamicQuestionComponent, decorators: [{
2379
2389
  type: Component,
2380
- args: [{ selector: "sv-ng-paneldynamic-question", 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'\">\n <sv-ng-paneldynamic-remove-btn *ngIf=\"model.canRemovePanel && panel.state != 'collapsed' && model.panelRemoveButtonLocation == 'right'\" [data]=\"{ panel: panel, question: model }\"></sv-ng-paneldynamic-remove-btn>\n </ng-container>\n </div>\n <!-- add track by [key]=\"'separator' + panel.id\" -->\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\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.panelCount !== 0 && !model.showLegacyNavigation\"></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 [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>" }]
2390
+ args: [{ selector: "sv-ng-paneldynamic-question", 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'\">\n <sv-ng-paneldynamic-remove-btn *ngIf=\"model.canRemovePanel && panel.state != 'collapsed' && model.panelRemoveButtonLocation == 'right'\" [data]=\"{ panel: panel, question: model }\"></sv-ng-paneldynamic-remove-btn>\n </ng-container>\n </div>\n <!-- add track by [key]=\"'separator' + panel.id\" -->\n <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.isRenderModeList && index < model.panelCount - 1\"/>\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.panelCount !== 0 && !model.showLegacyNavigation\"></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>" }]
2381
2391
  }] });
2382
2392
  AngularComponentFactory.Instance.registerComponent("paneldynamic-question", PanelDynamicQuestionComponent);
2383
2393