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

package/bundles/survey-angular-ui.umd.js

@@ -723,17 +723,22 @@
           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));
+          }
       };
       return AngularComponentFactory;
   }());
   AngularComponentFactory.Instance = new AngularComponentFactory();
 
   var DynamicComponentDirective = /** @class */ (function () {
-      function DynamicComponentDirective(containerRef, templateRef, resolver) {
+      function DynamicComponentDirective(containerRef, templateRef, injector) {
           this.containerRef = containerRef;
           this.templateRef = templateRef;
-          this.resolver = resolver;
+          this.injector = injector;
       }
       DynamicComponentDirective.prototype.ngOnChanges = function (changes) {
           var _a;
@@ -748,11 +753,10 @@
       };
       DynamicComponentDirective.prototype.createComponent = function () {
           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;
+          var componentName = AngularComponentFactory.Instance.isComponentRegistered(this.component.name) ? this.component.name : this.component.default;
+          if (componentName) {
+              var resolver = this.injector.get(i0.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);
@@ -771,14 +775,14 @@
       };
       return DynamicComponentDirective;
   }());
-  DynamicComponentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicComponentDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.TemplateRef }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+  DynamicComponentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicComponentDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.TemplateRef }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Directive });
   DynamicComponentDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DynamicComponentDirective, selector: "[component]", inputs: { component: "component" }, usesOnChanges: true, ngImport: i0__namespace });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicComponentDirective, decorators: [{
               type: i0.Directive,
               args: [{
                       selector: "[component]"
                   }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.TemplateRef }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { component: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.TemplateRef }, { type: i0__namespace.Injector }]; }, propDecorators: { component: [{
                   type: i0.Input
               }] } });
 
@@ -792,7 +796,7 @@
       };
       Object.defineProperty(ActionComponent.prototype, "id", {
           get: function () {
-              return this.model.uniqueId + "" || "";
+              return this.model.renderedId;
           },
           enumerable: false,
           configurable: true
@@ -840,7 +844,7 @@
           return this.model;
       };
       ActionBarComponent.prototype.trackActionBy = function (_, action) {
-          return action.renderedId;
+          return action.uniqueId;
       };
       Object.defineProperty(ActionBarComponent.prototype, "allowOnClick", {
           get: function () {
@@ -989,10 +993,9 @@
               }] } });
 
   var PopupService = /** @class */ (function () {
-      function PopupService(injector, applicationRef, componentFactoryResolver) {
+      function PopupService(injector, applicationRef) {
           this.injector = injector;
           this.applicationRef = applicationRef;
-          this.componentFactoryResolver = componentFactoryResolver;
       }
       PopupService.prototype.createComponent = function (popupViewModel) {
           var portalHost;
@@ -1002,7 +1005,8 @@
               portalHost = new portal.DomPortalOutlet(popupViewModel.container, this.applicationRef, this.injector);
           }
           else {
-              portalHost = new portal.DomPortalOutlet(popupViewModel.container, this.componentFactoryResolver, this.applicationRef, this.injector);
+              var resolver = this.injector.get(i0.NgModuleRef).componentFactoryResolver;
+              portalHost = new portal.DomPortalOutlet(popupViewModel.container, resolver, this.applicationRef, this.injector);
           }
           var portal$1 = new portal.ComponentPortal(PopupBaseContainerComponent);
           var componentRef = portalHost.attach(portal$1);
@@ -1013,11 +1017,11 @@
       };
       return PopupService;
   }());
-  PopupService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupService, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  PopupService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupService, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ApplicationRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   PopupService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupService });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupService, decorators: [{
               type: i0.Injectable
-          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ApplicationRef }, { type: i0__namespace.ComponentFactoryResolver }]; } });
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ApplicationRef }]; } });
 
   var ModalComponent = /** @class */ (function () {
       function ModalComponent(popupService) {
@@ -1363,18 +1367,21 @@
                   type: i0.Input
               }] } });
 
-  var BrandInfoComponent = /** @class */ (function () {
+  var BrandInfoComponent = /** @class */ (function (_super) {
+      __extends(BrandInfoComponent, _super);
       function BrandInfoComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
       }
       return BrandInfoComponent;
-  }());
-  BrandInfoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  BrandInfoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrandInfoComponent, selector: "sv-brand-info", ngImport: i0__namespace, template: "<div class=\"sv-brand-info\">\n  <a class=\"sv-brand-info__logo\" href=\"https://surveyjs.io/?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=landing_page\"><img src=\"https://surveyjs.io/Content/Images/poweredby.svg\"/></a>\n  <div class=\"sv-brand-info__text\">Try and see how easy it is to <a href=\"https://surveyjs.io/create-survey?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=create_survey\">create a survey</a></div>\n  <div class=\"sv-brand-info__terms\"><a href=\"https://surveyjs.io/TermsOfUse\">Terms of Use & Privacy Statement</a></div>\n</div>" });
+  }(EmbeddedViewContentComponent));
+  BrandInfoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  BrandInfoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrandInfoComponent, selector: "sv-brand-info", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div class=\"sv-brand-info\">\n    <a class=\"sv-brand-info__logo\" href=\"https://surveyjs.io/?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=landing_page\"><img src=\"https://surveyjs.io/Content/Images/poweredby.svg\"/></a>\n    <div class=\"sv-brand-info__text\">Try and see how easy it is to <a href=\"https://surveyjs.io/create-survey?utm_source=built-in_links&utm_medium=online_survey_tool&utm_campaign=create_survey\">create a survey</a></div>\n    <div class=\"sv-brand-info__terms\"><a href=\"https://surveyjs.io/TermsOfUse\">Terms of Use & Privacy Statement</a></div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrandInfoComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: "sv-brand-info",
-                      templateUrl: "./brand-info.component.html"
+                      templateUrl: "./brand-info.component.html",
+                      styleUrls: ["../../hide-host.scss"]
                   }]
           }] });
   AngularComponentFactory.Instance.registerComponent("sv-brand-info", BrandInfoComponent);
@@ -1607,7 +1614,7 @@
       }
       Object.defineProperty(ErrorsComponent.prototype, "id", {
           get: function () {
-              return this.element.id + "_errors";
+              return this.element.renderedId + "_errors";
           },
           enumerable: false,
           configurable: true
@@ -1622,12 +1629,17 @@
       return ErrorsComponent;
   }());
   ErrorsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ErrorsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { properties: { "id": "this.id", "class": "this.class" } }, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let error of element.renderedErrors;\">\n  <ng-template [component]=\"{ name: element.survey.questionErrorComponent, data: { element: element, cssClasses: element.cssClasses, error: error } }\"></ng-template>\n</ng-container>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ErrorsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: { element: "element", location: "location" }, host: { attributes: { "role": "alert", "aria-live": "polite", "aria-atomic": "true" }, properties: { "id": "this.id", "class": "this.class" } }, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let error of element.renderedErrors;\">\n  <ng-template [component]=\"{ name: element.survey.questionErrorComponent, data: { element: element, cssClasses: element.cssClasses, error: error } }\"></ng-template>\n</ng-container>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorsComponent, decorators: [{
               type: i0.Component,
               args: [{
                       templateUrl: "./errors.component.html",
-                      selector: "'[sv-ng-errors]'"
+                      selector: "'[sv-ng-errors]'",
+                      host: {
+                          "role": "alert",
+                          "aria-live": "polite",
+                          "aria-atomic": "true"
+                      }
                   }]
           }], ctorParameters: function () { return []; }, propDecorators: { element: [{
                   type: i0.Input
@@ -1724,7 +1736,7 @@
       return ElementComponent;
   }(BaseAngular));
   ElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div *ngIf=\"!!model\" [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\" #container>\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div *ngIf=\"!!model\" [class]=\"model.getWrapperCss()\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\" #container>\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1832,7 +1844,7 @@
       return PageComponent;
   }(BaseAngular));
   PageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageComponent, selector: "sv-page, page, sv-ng-page", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "pageContainerRef", first: true, predicate: ["pageContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey\">\n    <div [class]=\"model.cssRoot\" #pageContainer>\n      <sv-ng-element-title [element]=\"model\"></sv-ng-element-title>\n      <div *ngIf=\"model._showDescription\" [class]=\"model.cssClasses.page?.description\">\n        <sv-ng-string [model]=\"model.locDescription\"></sv-ng-string>\n      </div>\n      <div *ngIf=\"model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-container *ngFor=\"let row of model.visibleRows\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>  \n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  PageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageComponent, selector: "sv-page, page, sv-ng-page", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "pageContainerRef", first: true, predicate: ["pageContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey\">\n    <div [class]=\"model.cssRoot\" #pageContainer>\n      <div *ngIf=\"model.hasTitle || model._showDescription\" [class]=\"model.cssHeader\">\n        <sv-ng-element-title [element]=\"model\"></sv-ng-element-title>\n        <div *ngIf=\"model._showDescription\" [class]=\"model.cssClasses.page?.description\">\n          <sv-ng-string [model]=\"model.locDescription\"></sv-ng-string>\n        </div>\n      </div>\n      <div [class]=\"model.cssContent\">\n        <div *ngIf=\"model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n        <ng-container *ngFor=\"let row of model.visibleRows\">\n          <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n            <sv-ng-row [row]=\"row\"></sv-ng-row>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>  \n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2062,7 +2074,7 @@
       return QuestionComponent;
   }(EmbeddedViewContentComponent));
   QuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model", css: "css", survey: "survey" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"model.getRootStyle()\" [id]=\"model.id\"\n    [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.aria-expanded]=\"model.ariaExpanded\">\n    <sv-breadcrumbs\n      *ngIf=\"model.singleInputHasActions\"\n      [model]=\"model.singleInputActions\"\n      [css]=\"model.cssClasses\"\n    ></sv-breadcrumbs>\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <sv-single-input-summary\n      *ngIf=\"!!model.singleInputSummary\"\n      [model]=\"model.singleInputSummary\"\n      [css]=\"model.cssClasses\"\n    ></sv-single-input-summary>\n    <sv-ng-element\n      *ngIf=\"!model.singleInputSummary && !!singleQuestion\"\n      [model]=\"singleQuestion\"\n    ></sv-ng-element>\n    <ng-template\n      *ngIf=\"!model.singleInputSummary && !singleQuestion\"\n      [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\n      <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"model.renderedIsExpanded\" [attr.aria-hidden]=\"model.contentAriaHidden\" [attr.data-sv-drop-target-matrix-row]=\"model.dragDropMatrixAttribute\" [attr.data-sv-drop-target-matrix]=\"model.dragDropMatrixAttribute\">\n        <ng-template\n          [component]=\"{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></ng-template>\n        <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n          <div [model]=\"model.locCommentText\" sv-ng-string></div>\n          <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n        </div>\n        <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\"\n          [model]=\"model.locDescription\" sv-ng-string></div>\n      </div>\n    </ng-template>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>", components: [{ type: BreadcrumbsComponent, selector: "sv-breadcrumbs", inputs: ["model", "css"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SingleInputSummaryComponent, selector: "sv-single-input-summary", inputs: ["model", "css"] }, { type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  QuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model", css: "css", survey: "survey" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"!!model\" #elementContainer [class]=\"model.getRootCss()\" [style]=\"model.getRootStyle()\" [id]=\"model.id\"\n    [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-labelledby]=\"model.ariaLabelledBy\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.aria-expanded]=\"model.ariaExpanded\">\n    <sv-breadcrumbs\n      *ngIf=\"model.singleInputHasActions\"\n      [model]=\"model.singleInputActions\"\n      [css]=\"model.cssClasses\"\n    ></sv-breadcrumbs>\n    <div [class]=\"model.getQuestionContainerCss()\">\n      <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div [class]=\"model.getHeaderAndContentContainerCss()\">\n        <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n        <sv-single-input-summary\n          *ngIf=\"!!model.singleInputSummary\"\n          [model]=\"model.singleInputSummary\"\n          [css]=\"model.cssClasses\"\n        ></sv-single-input-summary>\n        <sv-ng-element\n          *ngIf=\"!model.singleInputSummary && !!singleQuestion\"\n          [model]=\"singleQuestion\"\n        ></sv-ng-element>\n        <ng-template\n          *ngIf=\"!model.singleInputSummary && !singleQuestion\"\n          [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }\">\n          <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"model.renderedIsExpanded\" [attr.aria-hidden]=\"model.contentAriaHidden\" [attr.data-sv-drop-target-matrix-row]=\"model.dragDropMatrixAttribute\" [attr.data-sv-drop-target-matrix]=\"model.dragDropMatrixAttribute\">\n            <ng-template\n              [component]=\"{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }\"></ng-template>\n            <div *ngIf=\"model.hasComment\" [class]=\"model.getCommentAreaCss(false)\">\n              <div [model]=\"model.locCommentText\" sv-ng-string></div>\n              <sv-ng-comment [question]=\"model\"></sv-ng-comment>\n            </div>\n            <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\"\n              [model]=\"model.locDescription\" sv-ng-string></div>\n          </div>\n        </ng-template>\n        <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n      </div>\n      <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    </div>\n  </div>\n</ng-template>", components: [{ type: BreadcrumbsComponent, selector: "sv-breadcrumbs", inputs: ["model", "css"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SingleInputSummaryComponent, selector: "sv-single-input-summary", inputs: ["model", "css"] }, { type: ElementComponent, selector: "sv-ng-element", inputs: ["model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3247,7 +3259,7 @@
       return SliderLabelItemComponent;
   }(BaseAngular));
   SliderLabelItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SliderLabelItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SliderLabelItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderLabelItemComponent, selector: "sv-ng-slider-label-item", inputs: { model: "model", item: "item" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"model.getLabelCss(item.locText)\"\n      [style]=\"{ left: model.getPercent(item.value) + '%' }\"\n      (pointerup)=\"model.handleLabelPointerUp($any($event), item.value)\">\n        <div [class]=\"model.cssClasses.labelTick\"></div>\n        <div [class]=\"model.cssClasses.labelTextContainer\">\n          <div *ngIf=\"!item.showValue\" [class]=\"model.cssClasses.labelText\" [model]=\"item.locText\" sv-ng-string></div>\n          <div *ngIf=\"item.showValue\" [class]=\"model.cssClasses.labelText\">{{ item.value }}</div>\n          <div *ngIf=\"item.showValue\" [class]=\"model.cssClasses.labelTextSecondaryMode\" [model]=\"item.locText\" sv-ng-string></div>\n        </div>\n    </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  SliderLabelItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderLabelItemComponent, selector: "sv-ng-slider-label-item", inputs: { model: "model", item: "item" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <div [class]=\"model.getLabelCss(item.locText)\"\n      [style]=\"{ left: model.getPercent(item.value) + '%', maxWidth: model.getLabelMaxWidth(item) }\"\n      (pointerup)=\"model.handleLabelPointerUp($any($event), item.value)\">\n        <div [class]=\"model.cssClasses.labelTick\"></div>\n        <div [class]=\"model.cssClasses.labelTextContainer\">\n          <div *ngIf=\"!item.showValue\" [class]=\"model.cssClasses.labelText\" [title]=\"item.locText.renderedHtml\" [model]=\"item.locText\" sv-ng-string></div>\n          <div *ngIf=\"item.showValue\" [class]=\"model.cssClasses.labelText\" [title]=\"'' + item.value\">{{ item.value }}</div>\n          <div *ngIf=\"item.showValue\" [class]=\"model.cssClasses.labelTextSecondaryMode\" [title]=\"item.locText.renderedHtml\" [model]=\"item.locText\" sv-ng-string></div>\n        </div>\n    </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SliderLabelItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3420,6 +3432,7 @@
       __extends(PanelComponent, _super);
       function PanelComponent() {
           var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.panelPaddingHorizontal = "var(--sd-base-padding, var(--sjs2-spacing-x500))";
           _this.trackRowBy = function (_, row) {
               return row.id;
           };
@@ -3441,10 +3454,21 @@
           enumerable: false,
           configurable: true
       });
+      Object.defineProperty(PanelComponent.prototype, "panelContentStyle", {
+          get: function () {
+              var _a;
+              var hasInnerPadding = !!((_a = this.model) === null || _a === void 0 ? void 0 : _a.innerPaddingLeft);
+              return hasInnerPadding ? {
+                  "padding-inline-start": "calc(" + this.panelPaddingHorizontal + " + " + this.model.innerPaddingLeft + ")",
+              } : {};
+          },
+          enumerable: false,
+          configurable: true
+      });
       return PanelComponent;
   }(BaseAngular));
   PanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"canRender\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.renderedIsExpanded\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" \n      [attr.id]=\"model.contentId\" [attr.role]=\"model.ariaRole\" [attr.aria-labelledby]=\"model.ariaLabelledBy\"[attr.aria-label]=\"model.ariaLabel\">\n      <ng-container *ngFor=\"let row of model.visibleRows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  PanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"canRender\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.renderedIsExpanded\" [style]=\"panelContentStyle\" [class]=\"model.cssClasses.panel.content\" \n      [attr.id]=\"model.contentId\" [attr.role]=\"model.ariaRole\" [attr.aria-labelledby]=\"model.ariaLabelledBy\"[attr.aria-label]=\"model.ariaLabel\">\n      <ng-container *ngFor=\"let row of model.visibleRows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n    </div>\n    <sv-ng-action-bar *ngIf=\"model.renderedIsExpanded && model.getFooterToolbar().hasActions\" [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3681,6 +3705,20 @@
           enumerable: false,
           configurable: true
       });
+      Object.defineProperty(ListItemComponent.prototype, "itemComponentData", {
+          get: function () {
+              var itemData = this.model.data;
+              return {
+                  model: this.model,
+                  listModel: this.listModel,
+                  itemData: itemData,
+                  survey: itemData === null || itemData === void 0 ? void 0 : itemData.survey,
+                  page: itemData === null || itemData === void 0 ? void 0 : itemData.page
+              };
+          },
+          enumerable: false,
+          configurable: true
+      });
       ListItemComponent.prototype.getModel = function () {
           return this.model;
       };
@@ -3693,7 +3731,7 @@
       return ListItemComponent;
   }(BaseAngular));
   ListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <li #elementRef [attr.role]=\"listModel.listItemRole\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" \n  [attr.id]=\"elementId\" [attr.aria-selected]=\"ariaSelected\" [attr.aria-checked]=\"ariaChecked\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style]=\"itemStyle\" [attr.title]=\"model.getTooltip()\"\n    (mouseover)=\"listModel.onItemHover(model)\"\n    (mouseleave)=\"listModel.onItemLeave(model)\">\n    <ng-template [component]=\"{ name: itemComponent, data: { model: model, listModel: listModel } }\"></ng-template>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <li #elementRef [attr.role]=\"listModel.listItemRole\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" \n  [attr.id]=\"elementId\" [attr.aria-selected]=\"ariaSelected\" [attr.aria-checked]=\"ariaChecked\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style]=\"itemStyle\" [attr.title]=\"model.getTooltip()\"\n    (mouseover)=\"listModel.onItemHover(model)\"\n    (mouseleave)=\"listModel.onItemLeave(model)\">\n    <ng-template [component]=\"{ name: itemComponent, data: itemComponentData }\"></ng-template>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4036,6 +4074,25 @@
   AngularComponentFactory.Instance.registerComponent("boolean-radio-question", BooleanRadioComponent);
   Survey.RendererFactory.Instance.registerRenderer("boolean", "radio", "boolean-radio-question");
 
+  var BooleanSwitchComponent = /** @class */ (function () {
+      function BooleanSwitchComponent() {
+      }
+      return BooleanSwitchComponent;
+  }());
+  BooleanSwitchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanSwitchComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  BooleanSwitchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanSwitchComponent, selector: "sv-ng-boolean-switch-question", inputs: { model: "model" }, ngImport: i0__namespace, 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\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"model.isLabelRendered\" [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"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanSwitchComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "sv-ng-boolean-switch-question",
+                      templateUrl: "./boolean-switch.component.html"
+                  }]
+          }], propDecorators: { model: [{
+                  type: i0.Input
+              }] } });
+  AngularComponentFactory.Instance.registerComponent("boolean-switch-question", BooleanSwitchComponent);
+  Survey.RendererFactory.Instance.registerRenderer("boolean", "switch", "boolean-switch-question");
+
   var ButtonGroupDropdownComponent = /** @class */ (function () {
       function ButtonGroupDropdownComponent() {
       }
@@ -4631,7 +4688,7 @@
       return PanelDynamicPlaceholderComponent;
   }());
   PanelDynamicPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicPlaceholderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelDynamicPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicPlaceholderComponent, selector: "sv-ng-placeholder-paneldynamic", inputs: { question: "question" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  PanelDynamicPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicPlaceholderComponent, selector: "sv-ng-placeholder-paneldynamic", inputs: { question: "question" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicPlaceholderComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4706,12 +4763,13 @@
       return PanelDynamicQuestionComponent;
   }(QuestionAngular));
   PanelDynamicQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelDynamicQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.hasTabbedMenu\" [class]=\"model.getTabsContainerCss()\">\n    <sv-action-bar [model]=\"model.tabbedMenu\"></sv-action-bar>\n  </div>\n  <sv-ng-placeholder-paneldynamic [question]=\"model\"></sv-ng-placeholder-paneldynamic>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isProgressTopShowing && model.isRangeShowing\">\n    <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\"\n    role=\"progressbar\" [attr.aria-label]=\"model.progressBarAriaLabel\"\n    ></div>\n  </div>\n  <div [class]=\"model.cssClasses.panelsContainer\">\n    <ng-container *ngFor=\"let panel of model.renderedPanels; index as index; trackBy: trackPanelBy\">\n      <div [class]=\"model.getPanelWrapperCss(panel)\">\n        <ng-template\n          [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n        <ng-container *ngIf=\"model.canRenderRemovePanelOnRight(panel)\">\n          <ng-template\n            [component]=\"{ name: 'sv-action', data: { model: model.getRemovePanelAction(panel)}}\"></ng-template>\n        </ng-container>\n      </div>\n      <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\" />\n    </ng-container>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n<ng-template #progress>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\" />\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" \n      role=\"progressbar\" [attr.aria-label]=\"model.progressBarAriaLabel\"\n      ></div>\n    </div>\n    <div *ngIf=\"model.showFooterToolbar\" [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPlaceholderComponent, selector: "sv-ng-placeholder-paneldynamic", inputs: ["question"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  PanelDynamicQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.root\" #contentElement>\n    <div *ngIf=\"model.hasTabbedMenu\" [class]=\"model.getTabsContainerCss()\">\n      <sv-action-bar [model]=\"model.tabbedMenu\"></sv-action-bar>\n    </div>\n    <sv-ng-placeholder-paneldynamic [question]=\"model\"></sv-ng-placeholder-paneldynamic>\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isProgressTopShowing && model.isRangeShowing\">\n      <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\"\n      role=\"progressbar\" [attr.aria-label]=\"model.progressBarAriaLabel\"\n      ></div>\n    </div>\n    <div [class]=\"model.cssClasses.panelsContainer\">\n      <ng-container *ngFor=\"let panel of model.renderedPanels; index as index; trackBy: trackPanelBy\">\n        <div [class]=\"model.getPanelWrapperCss(panel)\">\n          <ng-template\n            [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n          <ng-container *ngIf=\"model.canRenderRemovePanelOnRight(panel)\">\n            <ng-template\n              [component]=\"{ name: 'sv-action', data: { model: model.getRemovePanelAction(panel)}}\"></ng-template>\n          </ng-container>\n        </div>\n        <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\" />\n      </ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showNavigation\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #progress>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"(model.isRangeShowing && model.isProgressBottomShowing) || model.showFooterToolbar\">\n    <hr [class]=\"model.cssClasses.separator\" />\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\" \n      role=\"progressbar\" [attr.aria-label]=\"model.progressBarAriaLabel\"\n      ></div>\n    </div>\n    <div *ngIf=\"model.showFooterToolbar\" [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPlaceholderComponent, selector: "sv-ng-placeholder-paneldynamic", inputs: ["question"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: "sv-ng-paneldynamic-question",
-                      templateUrl: "./paneldynamic.component.html"
+                      templateUrl: "./paneldynamic.component.html",
+                      styleUrls: ["../hide-host.scss"]
                   }]
           }] });
   AngularComponentFactory.Instance.registerComponent("paneldynamic-question", PanelDynamicQuestionComponent);
@@ -5305,12 +5363,13 @@
       return CompositeQuestionComponent;
   }(QuestionAngular));
   CompositeQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CompositeQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CompositeQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CompositeQuestionComponent, selector: "sv-ng-composite-question", usesInheritance: true, ngImport: i0__namespace, template: "<sv-ng-panel [model]='contentPanel'></sv-ng-panel>", isInline: true, components: [{ type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: ["model"] }] });
+  CompositeQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CompositeQuestionComponent, selector: "sv-ng-composite-question", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template><sv-ng-panel [model]='contentPanel'></sv-ng-panel></ng-template>", isInline: true, styles: [":host { display: none } "], components: [{ type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: ["model"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CompositeQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: "sv-ng-composite-question",
-                      template: "<sv-ng-panel [model]='contentPanel'></sv-ng-panel>"
+                      template: "<ng-template #template><sv-ng-panel [model]='contentPanel'></sv-ng-panel></ng-template>",
+                      styles: [":host { display: none } "]
                   }]
           }] });
   AngularComponentFactory.Instance.registerComponent("composite-question", CompositeQuestionComponent);
@@ -5452,7 +5511,7 @@
           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,
@@ -5470,7 +5529,7 @@
           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,
@@ -5495,7 +5554,7 @@
                           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,
@@ -5519,7 +5578,7 @@
                           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,
@@ -5546,6 +5605,7 @@
   exports.BooleanQuestionComponent = BooleanQuestionComponent;
   exports.BooleanRadioComponent = BooleanRadioComponent;
   exports.BooleanRadioItemComponent = BooleanRadioItemComponent;
+  exports.BooleanSwitchComponent = BooleanSwitchComponent;
   exports.BrandInfoComponent = BrandInfoComponent;
   exports.BreadcrumbsComponent = BreadcrumbsComponent;
   exports.ButtonGroupDropdownComponent = ButtonGroupDropdownComponent;