survey-angular-ui 3.0.0-beta.5 → 3.0.0-beta.7

package/fesm2015/survey-angular-ui.js

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { TemplateRef, Component, ViewChild, Directive, Input, VERSION, Injectable, HostBinding, Pipe, ElementRef, HostListener, ViewContainerRef, NgModule } from '@angular/core';
 import * as Survey from 'survey-core';
-import { PopupModalManager, settings, ScrollViewModel, SvgRegistry, addIconsToThemeSet, PopupSurveyModel, LocalizableString, ResizeManager, createPopupViewModel, Helpers, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, DropdownMultiSelectListModel, RendererFactory, ButtonGroupItemModel, ActionDropdownViewModel, SurveyProgressModel, ProgressButtonsResponsivityManager, SurveyModel } from 'survey-core';
+import { PopupModalManager, settings, ScrollViewModel, SvgRegistry, addIconsToThemeSet, PopupSurveyModel, LocalizableString, ResizeManager, createPopupViewModel, Helpers, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, DropdownMultiSelectListModel, RendererFactory, ButtonGroupItemModel, ActionDropdownViewModel, SurveyProgressModel, SurveyModel } from 'survey-core';
 import { icons } from 'survey-core/icons/iconsV2';
 import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
@@ -814,16 +814,22 @@ class SurveyContentComponent extends BaseAngular {
         this.isSurveyUpdated = true;
     }
     ngAfterViewChecked() {
+        super.ngAfterViewChecked();
         if (!!this.model && this.isSurveyUpdated) {
             this.isSurveyUpdated = false;
             this.model.afterRenderSurvey(this.rootEl.nativeElement);
             this.model.startTimerFromUI();
         }
-        super.ngAfterViewChecked();
+    }
+    get themeStyle() {
+        return this.model ? `<style>${this.model.themeStyle}</style>` : "";
+    }
+    get resetVariablesStyle() {
+        return this.model ? `<style>${this.model.resetVariablesStyle}</style>` : "";
     }
 }
 SurveyContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SurveyContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\" [lang]=\"model.locale || 'en'\" [dir]=\"model.localeDir\">\n    <sv-scroll [disabled]=\"model.rootScrollDisabled\">\n      <sv-svg-bundle *ngIf=\"model.needRenderIcons\"></sv-svg-bundle>\n      <div [class]=\"model.wrapperFormCss\">\n        <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n        <form onsubmit=\"return false;\">\n          <sv-scroll [disabled]=\"model.formScrollDisabled\">\n          <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n          <div [class]=\"model.css.container\">\n            <div *ngIf=\"model.headerView === 'basic' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n            <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n              <div class=\"sv-components-column sv-components-column--expandable\">\n                <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'center' } }\"></ng-template>\n                <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n                  <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n                    <ng-container *ngIf=\"model.activePage\">\n                        <!-- <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page> -->\n                        <ng-template [component]=\"{ name: model.pageComponent || 'sv-page', data: { model: model.activePage, survey: model } }\"></ng-template>\n                    </ng-container>\n                  <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n                  <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n                </div>\n              </div>\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n            </div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n            <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n              [innerHtml]=\"model.processedCompletedHtml | safeHtml\"></div>\n            <ng-template *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }\"></ng-template>\n            <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.completedBeforeCss\"\n              [innerHtml]=\"model.processedCompletedBeforeHtml | safeHtml\"></div>\n            <div *ngIf=\"model.state === 'loading'\" [class]=\"model.loadingBodyCss\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n            <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n          </div>\n        </sv-scroll>\n        </form>\n        <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n      </div>\n    </sv-scroll>\n  </div>\n</ng-template>", components: [{ type: ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: SvgBundleComponent, selector: "sv-svg-bundle" }, { type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": SafeHtmlPipe } });
+SurveyContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\" [lang]=\"model.locale || 'en'\" [dir]=\"model.localeDir\">\n    <ng-container *ngIf=\"model.generateStylesheet\">\n      <div style=\"display: none;\" [innerHTML]=\"themeStyle | safeHtml\"></div>\n      <div style=\"display: none;\" [innerHTML]=\"resetVariablesStyle | safeHtml\"></div>\n    </ng-container>\n    <sv-scroll [disabled]=\"model.rootScrollDisabled\">\n      <sv-svg-bundle *ngIf=\"model.needRenderIcons\"></sv-svg-bundle>\n      <div [class]=\"model.wrapperFormCss\">\n        <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n        <form onsubmit=\"return false;\">\n          <sv-scroll [disabled]=\"model.formScrollDisabled\">\n          <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n          <div [class]=\"model.css.container\">\n            <div *ngIf=\"model.headerView === 'basic' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n            <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n              <div class=\"sv-components-column sv-components-column--expandable\">\n                <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'center' } }\"></ng-template>\n                <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n                  <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n                    <ng-container *ngIf=\"model.activePage\">\n                        <!-- <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page> -->\n                        <ng-template [component]=\"{ name: model.pageComponent || 'sv-page', data: { model: model.activePage, survey: model } }\"></ng-template>\n                    </ng-container>\n                  <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n                  <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n                </div>\n              </div>\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n            </div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n            <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n              [innerHtml]=\"model.processedCompletedHtml | safeHtml\"></div>\n            <ng-template *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }\"></ng-template>\n            <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.completedBeforeCss\"\n              [innerHtml]=\"model.processedCompletedBeforeHtml | safeHtml\"></div>\n            <div *ngIf=\"model.state === 'loading'\" [class]=\"model.loadingBodyCss\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n            <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n          </div>\n        </sv-scroll>\n        </form>\n        <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n      </div>\n    </sv-scroll>\n  </div>\n</ng-template>", components: [{ type: ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: SvgBundleComponent, selector: "sv-svg-bundle" }, { type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": SafeHtmlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyContentComponent, decorators: [{
             type: Component,
             args: [{
@@ -1805,7 +1811,8 @@ class SurveyCommentChoiceComponent {
     constructor() {
     }
     get commentValue() {
-        return this.question.getCommentValue(this.item);
+        var _a;
+        return ((_a = this.textAreaModel) === null || _a === void 0 ? void 0 : _a.getTextValue()) || "";
     }
     get textAreaModel() {
         return this.question.getCommentTextAreaModel(this.item);
@@ -2912,11 +2919,13 @@ class BooleanRadioItemComponent {
     constructor() {
     }
     change() {
-        this.question.value = this.value;
+        if (!this.question.isInputReadOnly) {
+            this.question.value = this.value;
+        }
     }
 }
 BooleanRadioItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanRadioItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n  <label [class]=\"question.cssClasses.radioLabel\">\n    <input\n      type=\"radio\"\n      [attr.name]=\"question.name\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [value]=\"value\" [checked]=\"question.value == value\" (input)=\"change()\"\n      [disabled]=\"question.isDisabledAttr\" [readonly]=\"question.isReadOnlyAttr\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\">\n      <svg\n        *ngIf=\"question.itemSvgIcon\"\n        [class]=\"question.cssClasses.itemRadioDecorator\"\n      >\n        <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n      </svg>\n    </span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BooleanRadioItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n  <label [class]=\"question.cssClasses.radioLabel\">\n    <input\n      type=\"radio\"\n      [attr.name]=\"question.questionName\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [value]=\"value\" [checked]=\"question.value == value\" (input)=\"change()\"\n      [disabled]=\"question.isDisabledAttr\" [readonly]=\"question.isReadOnlyAttr\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n    />\n    <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\">\n      <svg\n        *ngIf=\"question.itemSvgIcon\"\n        [class]=\"question.cssClasses.itemRadioDecorator\"\n      >\n        <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n      </svg>\n    </span>\n    <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n    </span>\n  </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2934,7 +2943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class BooleanRadioComponent {
 }
 BooleanRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioComponent, selector: "sv-ng-boolean-radio-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootRadio\">\n  <fieldset role=\"presentation\" [class]=\"model.cssClasses.radioFieldset\">\n    <sv-ng-boolean-radio-item *ngIf=\"model.swapOrder\" [value]=\"model.getValueTrue()\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n    <sv-ng-boolean-radio-item  [value]=\"model.getValueFalse()\" [locText]=\"model.locLabelFalse\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n    <sv-ng-boolean-radio-item *ngIf=\"!model.swapOrder\" [value]=\"model.getValueTrue()\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n  </fieldset>\n</div>\n", components: [{ type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: ["question", "value", "locText"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BooleanRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioComponent, selector: "sv-ng-boolean-radio-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootRadio\" (keydown)=\"model.onKeyDownCore($event)\">\n  <fieldset role=\"presentation\" [class]=\"model.cssClasses.radioFieldset\">\n    <sv-ng-boolean-radio-item *ngIf=\"model.swapOrder\" [value]=\"model.getValueTrue()\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n    <sv-ng-boolean-radio-item  [value]=\"model.getValueFalse()\" [locText]=\"model.locLabelFalse\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n    <sv-ng-boolean-radio-item *ngIf=\"!model.swapOrder\" [value]=\"model.getValueTrue()\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n  </fieldset>\n</div>\n", components: [{ type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: ["question", "value", "locText"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioComponent, decorators: [{
             type: Component,
             args: [{
@@ -2963,7 +2972,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 AngularComponentFactory.Instance.registerComponent("buttongroup-dropdown", ButtonGroupDropdownComponent);
 RendererFactory.Instance.registerRenderer("buttongroup", "dropdown", "buttongroup-dropdown");
 
-class ProgressDefaultComponent extends EmbeddedViewContentComponent {
+class ProgressDefaultComponent extends BaseAngular {
+    constructor(changeDetectorRef, viewContainerRef) {
+        super(changeDetectorRef, viewContainerRef);
+    }
+    getModel() {
+        return this.model;
+    }
     getProgressTextInBarCss(css) {
         return SurveyProgressModel.getProgressTextInBarCss(css);
     }
@@ -2971,7 +2986,7 @@ class ProgressDefaultComponent extends EmbeddedViewContentComponent {
         return SurveyProgressModel.getProgressTextUnderBarCss(css);
     }
 }
-ProgressDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressDefaultComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressDefaultComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 ProgressDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressDefaultComponent, selector: "sv-ng-progress-default", inputs: { container: "container", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getProgressCssClasses(container)\">\n    <div [class]=\"model.css.progressBar\" [style.width]=\"model.progressValue + '%'\"\n        role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" [attr.aria-label]=\"model.progressBarAriaLabel\">\n        <span [class]=\"getProgressTextInBarCss(model.css)\">\n          {{ model.progressText }}\n        </span>\n    </div>\n    <span [class]=\"getProgressTextUnderBarCss(model.css)\"> {{  model.progressText }} </span>\n  </div>\n</ng-template>" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressDefaultComponent, decorators: [{
             type: Component,
@@ -2979,7 +2994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     selector: "sv-ng-progress-default",
                     templateUrl: "./progress.component.html"
                 }]
-        }], propDecorators: { container: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { container: [{
                 type: Input
             }], model: [{
                 type: Input
@@ -2993,53 +3008,13 @@ AngularComponentFactory.Instance.registerComponent("sv-progress-requiredquestion
 class ProgressButtonsComponent extends BaseAngular {
     constructor(changeDetectorRef, viewContainerRef) {
         super(changeDetectorRef, viewContainerRef);
-        this.hasScroller = false;
-        this.canShowHeader = false;
-        this.canShowFooter = false;
-        this.canShowItemTitles = true;
     }
     getModel() {
         return this.model;
     }
-    onResize(canShowItemTitles) {
-        this.canShowItemTitles = canShowItemTitles;
-        this.canShowHeader = !this.canShowItemTitles;
-        this.detectChanges();
-    }
-    onUpdateScroller(hasScroller) {
-        this.hasScroller = hasScroller;
-        this.detectChanges();
-    }
-    onUpdateSettings() {
-        this.canShowItemTitles = this.model.showItemTitles;
-        this.canShowFooter = !this.model.showItemTitles;
-        this.detectChanges();
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnChanges(changes) {
-    }
-    clickScrollButton(isLeftScroll) {
-        if (this.progressButtonsListContainer) {
-            this.progressButtonsListContainer.nativeElement.scrollLeft += (isLeftScroll ? -1 : 1) * 70;
-        }
-    }
-    ngAfterViewInit() {
-        var _a;
-        if (!!((_a = this.progressButtonsListContainer) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
-            const element = this.progressButtonsListContainer.nativeElement;
-            this.respManager = new ProgressButtonsResponsivityManager(this.model, element, this);
-        }
-    }
-    ngOnDestroy() {
-        var _a;
-        super.ngOnDestroy();
-        (_a = this.respManager) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
 }
 ProgressButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressButtonsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"model.getRootCss(container)\" [style.maxWidth]=\"model.progressWidth\" [style.--sd-progress-buttons-pages-count]=\"model.visiblePages.length\"\nrole=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" [attr.aria-label]=\"model.progressBarAriaLabel\"\n>\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 model.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            <sv-ng-string [model]=\"page.locNavigationTitle\"></sv-ng-string>\n          </div>\n          <div *ngIf=\"canShowItemTitles\"\n            [class]=\"survey.css.progressButtonsPageDescription\"\n            [title]=\"page.navigationDescription\"\n          >\n            {{ page.navigationDescription }}\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>", 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"] }] });
+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" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.getRootCss(container)\" [style.maxWidth]=\"model.progressWidth\"\nrole=\"tablist\" [attr.aria-label]=\"model.progressBarAriaLabel\"\n(keydown)=\"model.onKeyDown($event)\"\n>\n  <div [class]=\"survey.css.progressButtonsContainer\" role=\"presentation\">\n    <div\n      [class]=\"survey.css.progressButtonsListContainer\" role=\"presentation\">\n      <ul [class]=\"survey.css.progressButtonsList\" role=\"presentation\">\n        <li\n          *ngFor=\"let page of model.visiblePages; index as index\"\n          [class]=\"model.getListElementCss(index)\"\n          [attr.data-page-number]=\"model.getItemNumber(page)\"\n          role=\"presentation\">\n          <div *ngIf=\"model.showItemTitles\"\n            [class]=\"survey.css.progressButtonsPageTitle\"\n            [title]=\"page.renderedNavigationTitle\"\n            (click)=\"model.isListElementClickable(index) ? model.clickListElement(page) : null\"\n          >\n            <sv-ng-string [model]=\"page.locNavigationTitle\"></sv-ng-string>\n          </div>\n          <div *ngIf=\"model.showItemDescriptions\"\n            [class]=\"survey.css.progressButtonsPageDescription\"\n            [title]=\"page.navigationDescription\"\n            (click)=\"model.isListElementClickable(index) ? model.clickListElement(page) : null\"\n          >\n            {{ page.navigationDescription }}\n          </div>\n          <button [class]=\"survey.css.progressButtonsButton\"\n            (click)=\"model.isListElementClickable(index) ? model.clickListElement(page) : undefined\"\n            role=\"tab\"\n            type=\"button\"\n            [attr.aria-selected]=\"model.isPageSelected(index)\"\n            [attr.aria-label]=\"model.getButtonAriaLabel(page)\"\n            [attr.tabindex]=\"model.getTabIndex(index)\"\n            [attr.data-page-index]=\"index\"\n          >\n            <ng-container *ngIf=\"model.showItemNumbers\">{{ model.getItemNumber(page) }}</ng-container>\n            <ng-container *ngIf=\"!model.showItemNumbers && model.isListElementPassed(index)\">\n              <svg [class]=\"survey.css.progressButtonsCheckIcon\">\n                <use [attr.xlink:href]=\"'#icon-' + survey.css.progressButtonsCheckIconId\"></use>\n              </svg>\n            </ng-container>\n            <ng-container *ngIf=\"!model.showItemNumbers && !model.isListElementPassed(index)\">\n              <div [class]=\"survey.css.progressButtonsDot\"></div>\n            </ng-container>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -3052,9 +3027,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], container: [{
                 type: Input
-            }], progressButtonsListContainer: [{
-                type: ViewChild,
-                args: ["progressButtonsListContainer"]
             }] } });
 AngularComponentFactory.Instance.registerComponent("sv-progress-buttons", ProgressButtonsComponent);