survey-angular-ui 3.0.0-beta.6 → 3.0.0-beta.8

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 { TemplateRef, Component, ViewChild, NgModuleRef, 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';
@@ -187,16 +187,21 @@ class AngularComponentFactory {
         var componentType = this.creatorHash[elementType];
         if (!componentType)
             return null;
-        return containerRef.createComponent(resolver.resolveComponentFactory(componentType));
+        try {
+            return containerRef.createComponent(componentType);
+        }
+        catch (e) {
+            return containerRef.createComponent(resolver.resolveComponentFactory(componentType));
+        }
     }
 }
 AngularComponentFactory.Instance = new AngularComponentFactory();
 
 class DynamicComponentDirective {
-    constructor(containerRef, templateRef, resolver) {
+    constructor(containerRef, templateRef, injector) {
         this.containerRef = containerRef;
         this.templateRef = templateRef;
-        this.resolver = resolver;
+        this.injector = injector;
     }
     ngOnChanges(changes) {
         var _a;
@@ -211,11 +216,10 @@ class DynamicComponentDirective {
     }
     createComponent() {
         this.containerRef.clear();
-        if (AngularComponentFactory.Instance.isComponentRegistered(this.component.name)) {
-            this.componentInstance = AngularComponentFactory.Instance.create(this.containerRef, this.component.name, this.resolver).instance;
-        }
-        else if (this.component.default) {
-            this.componentInstance = AngularComponentFactory.Instance.create(this.containerRef, this.component.default, this.resolver).instance;
+        const componentName = AngularComponentFactory.Instance.isComponentRegistered(this.component.name) ? this.component.name : this.component.default;
+        if (componentName) {
+            const resolver = this.injector.get(NgModuleRef).componentFactoryResolver;
+            this.componentInstance = AngularComponentFactory.Instance.create(this.containerRef, componentName, resolver).instance;
         }
         if (!this.componentInstance) {
             throw new Error(`Can't create component with name: ${this.component.name} and default: ${this.component.default}`);
@@ -232,14 +236,14 @@ class DynamicComponentDirective {
         });
     }
 }
-DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
 DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DynamicComponentDirective, selector: "[component]", inputs: { component: "component" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[component]"
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { component: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Injector }]; }, propDecorators: { component: [{
                 type: Input
             }] } });
 
@@ -422,10 +426,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 
 class PopupService {
-    constructor(injector, applicationRef, componentFactoryResolver) {
+    constructor(injector, applicationRef) {
         this.injector = injector;
         this.applicationRef = applicationRef;
-        this.componentFactoryResolver = componentFactoryResolver;
     }
     createComponent(popupViewModel) {
         let portalHost;
@@ -435,7 +438,8 @@ class PopupService {
             portalHost = new DomPortalOutlet(popupViewModel.container, this.applicationRef, this.injector);
         }
         else {
-            portalHost = new DomPortalOutlet(popupViewModel.container, this.componentFactoryResolver, this.applicationRef, this.injector);
+            const resolver = this.injector.get(NgModuleRef).componentFactoryResolver;
+            portalHost = new DomPortalOutlet(popupViewModel.container, resolver, this.applicationRef, this.injector);
         }
         const portal = new ComponentPortal(PopupBaseContainerComponent);
         const componentRef = portalHost.attach(portal);
@@ -445,11 +449,11 @@ class PopupService {
         return portalHost;
     }
 }
-PopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupService, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+PopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupService, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
 PopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ApplicationRef }]; } });
 
 class ModalComponent {
     constructor(popupService) {
@@ -814,16 +818,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 +1815,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 +2923,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 +2947,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: [{
@@ -2947,6 +2960,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 AngularComponentFactory.Instance.registerComponent("boolean-radio-question", BooleanRadioComponent);
 RendererFactory.Instance.registerRenderer("boolean", "radio", "boolean-radio-question");
 
+class BooleanSwitchComponent {
+}
+BooleanSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BooleanSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanSwitchComponent, selector: "sv-ng-boolean-switch-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootSwitch\" (click)=\"model.booleanValue = !model.booleanValue\">\n  <div [class]=\"model.getSwitchButtonCss()\" role=\"checkbox\" tabindex=\"0\" [key2click]\n    [attr.aria-checked]=\"model.booleanValue || false\"\n    [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n    [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n    [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\">\n    <div [class]=\"model.cssClasses.switchThumb\">\n      <div [class]=\"model.cssClasses.switchThumbCircle + ' ' + model.cssClasses.switchThumbLeft\"></div>\n    </div>\n    <div [class]=\"model.cssClasses.switchThumb\">\n      <div [class]=\"model.cssClasses.switchThumbCircle + ' ' + model.cssClasses.switchThumbRight\"></div>\n    </div>\n  </div>\n  <div [class]=\"model.cssClasses.switchCaption\">\n    <div [class]=\"model.cssClasses.switchTitle\" [id]=\"model.labelRenderedAriaID\" [model]=\"model.locTitle\" sv-ng-string></div>\n  </div>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-boolean-switch-question",
+                    templateUrl: "./boolean-switch.component.html"
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("boolean-switch-question", BooleanSwitchComponent);
+RendererFactory.Instance.registerRenderer("boolean", "switch", "boolean-switch-question");
+
 class ButtonGroupDropdownComponent {
 }
 ButtonGroupDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ButtonGroupDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2963,7 +2992,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 +3006,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 +3014,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 +3028,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 +3047,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);
 
@@ -3476,7 +3468,7 @@ AngularComponentFactory.Instance.registerComponent("sv-paneldynamic-progress-tex
 class PanelDynamicPlaceholderComponent {
 }
 PanelDynamicPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PanelDynamicPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicPlaceholderComponent, selector: "sv-ng-placeholder-paneldynamic", inputs: { question: "question" }, ngImport: i0, template: "<div *ngIf=\"question.getShowNoEntriesPlaceholder()\" [class]=\"question.cssClasses.noEntriesPlaceholder\">\n  <span>\n    <sv-ng-string [model]=\"question.locNoEntriesText\"></sv-ng-string>\n  </span>\n  <ng-container *ngIf=\"question.canAddPanel\">\n    <ng-template [component]=\"{ name: 'sv-action-bar', data: { model: question.footerToolbar } }\"></ng-template>\n  </ng-container>\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: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+PanelDynamicPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicPlaceholderComponent, selector: "sv-ng-placeholder-paneldynamic", inputs: { question: "question" }, ngImport: i0, template: "<div *ngIf=\"question.getShowNoEntriesPlaceholder()\" [class]=\"question.cssClasses.noEntriesPlaceholder\">\n  <span>\n    <sv-ng-string [model]=\"question.locNoEntriesText\"></sv-ng-string>\n  </span>\n  <ng-template [component]=\"{ name: 'sv-action-bar', data: { model: question.footerToolbar } }\"></ng-template>\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: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
@@ -4118,7 +4110,7 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
         SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentChoiceComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-        RatingQuestionComponent, SliderQuestionComponent, SliderLabelItemComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+        RatingQuestionComponent, SliderQuestionComponent, SliderLabelItemComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, BooleanSwitchComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
@@ -4136,7 +4128,7 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
         SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentChoiceComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-        RatingQuestionComponent, SliderQuestionComponent, SliderLabelItemComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+        RatingQuestionComponent, SliderQuestionComponent, SliderLabelItemComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, BooleanSwitchComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
@@ -4161,7 +4153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
                         SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentChoiceComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-                        RatingQuestionComponent, SliderQuestionComponent, SliderLabelItemComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+                        RatingQuestionComponent, SliderQuestionComponent, SliderLabelItemComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, BooleanSwitchComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
                         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
                         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
                         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
@@ -4185,7 +4177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
                         SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentChoiceComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-                        RatingQuestionComponent, SliderQuestionComponent, SliderLabelItemComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+                        RatingQuestionComponent, SliderQuestionComponent, SliderLabelItemComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, BooleanSwitchComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
                         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
                         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
                         MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
@@ -4202,5 +4194,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, BreadcrumbsComponent, ButtonGroupDropdownComponent, ButtonGroupQuestionComponent, CharacterCounterComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, ComponentsContainerComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FileItemComponent, FilePageComponent, FilePreviewComponent, FileQuestionComponent, HeaderCellComponent, HeaderComponent, HeaderMobileComponent, HtmlQuestionComponent, ImageMapQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDropdownCellComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicPlaceholderComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, MultipleTextRowComponent, NotifierComponent, PageComponent, PanelComponent, PanelDynamicPlaceholderComponent, PanelDynamicProgressText, PanelDynamicQuestionComponent, PopupBaseContainerComponent, PopupCloseButtonComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, ProgressTocComponent, QuestionAngular, QuestionComponent, QuestionErrorComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingItemContentComponent, RankingQuestionComponent, RatingDropdownComponent, RatingDropdownItemComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, ScrollComponent, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SingleInputSummaryComponent, SkeletonComponent, SliderLabelItemComponent, SliderQuestionComponent, StringEditorComponent, StringViewerComponent, SurveyCommentChoiceComponent, SurveyCommentComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyStringComponent, SvgBundleComponent, SvgIconComponent, SvgIconRegisteredComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextAreaComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
+export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BooleanSwitchComponent, BrandInfoComponent, BreadcrumbsComponent, ButtonGroupDropdownComponent, ButtonGroupQuestionComponent, CharacterCounterComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, ComponentsContainerComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FileItemComponent, FilePageComponent, FilePreviewComponent, FileQuestionComponent, HeaderCellComponent, HeaderComponent, HeaderMobileComponent, HtmlQuestionComponent, ImageMapQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDropdownCellComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicPlaceholderComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, MultipleTextRowComponent, NotifierComponent, PageComponent, PanelComponent, PanelDynamicPlaceholderComponent, PanelDynamicProgressText, PanelDynamicQuestionComponent, PopupBaseContainerComponent, PopupCloseButtonComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, ProgressTocComponent, QuestionAngular, QuestionComponent, QuestionErrorComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingItemContentComponent, RankingQuestionComponent, RatingDropdownComponent, RatingDropdownItemComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, ScrollComponent, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SingleInputSummaryComponent, SkeletonComponent, SliderLabelItemComponent, SliderQuestionComponent, StringEditorComponent, StringViewerComponent, SurveyCommentChoiceComponent, SurveyCommentComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyStringComponent, SvgBundleComponent, SvgIconComponent, SvgIconRegisteredComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextAreaComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
 //# sourceMappingURL=survey-angular-ui.js.map