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

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

@@ -796,7 +796,7 @@
       };
       Object.defineProperty(ActionComponent.prototype, "id", {
           get: function () {
-              return this.model.uniqueId + "" || "";
+              return this.model.renderedId;
           },
           enumerable: false,
           configurable: true
@@ -844,7 +844,7 @@
           return this.model;
       };
       ActionBarComponent.prototype.trackActionBy = function (_, action) {
-          return action.renderedId;
+          return action.uniqueId;
       };
       Object.defineProperty(ActionBarComponent.prototype, "allowOnClick", {
           get: function () {
@@ -1324,7 +1324,7 @@
       return ElementTitleComponent;
   }(EmbeddedViewContentComponent));
   ElementTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementTitleComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ElementTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: { element: "element", renderActions: "renderActions" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <sv-ng-dynamic-head [tagName]=\"element.titleTagName\" [element]=\"element\" *ngIf=\"element.hasTitle\">\n    <svg *ngIf=\"!element.isExpanded && element.getCssTitleExpandableSvg()\" [iconName]=\"'icon-expand-16x16'\" [partCss]=\"element.getCssTitleExpandableSvg()\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <svg *ngIf=\"element.isExpanded && element.getCssTitleExpandableSvg()\" [iconName]=\"'icon-collapse-16x16'\" [partCss]=\"element.getCssTitleExpandableSvg()\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <sv-ng-element-title-actions [element]=\"element\" [renderActions]=\"renderActions\"></sv-ng-element-title-actions>\n  </sv-ng-dynamic-head>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: ["tagName", "element"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element", "renderActions"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ElementTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: { element: "element", renderActions: "renderActions" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <sv-ng-dynamic-head [tagName]=\"element.titleTagName\" [element]=\"element\" *ngIf=\"element.hasTitle\">\n    <span [class]=\"element.getCssTitleExpandableSvgContainer()\" *ngIf=\"element.showTitleExpandableSvg\">\n      <svg [iconName]=\"element.titleExpandableSvgIconName\" [partCss]=\"element.getCssTitleExpandableSvg()\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </span>\n    <sv-ng-element-title-actions [element]=\"element\" [renderActions]=\"renderActions\"></sv-ng-element-title-actions>\n  </sv-ng-dynamic-head>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: ["tagName", "element"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element", "renderActions"] }], 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: ElementTitleComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1367,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);
@@ -1611,7 +1614,7 @@
       }
       Object.defineProperty(ErrorsComponent.prototype, "id", {
           get: function () {
-              return this.element.id + "_errors";
+              return this.element.renderedId + "_errors";
           },
           enumerable: false,
           configurable: true
@@ -1626,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
@@ -1728,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: [{
@@ -1836,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: [{
@@ -2066,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    (click)=\"model.clickRootFunction && model.clickRootFunction($event)\">\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: [{
@@ -3251,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: [{
@@ -3424,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;
           };
@@ -3445,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()\" (click)=\"model.clickRootFunction && model.clickRootFunction($event)\" #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: [{
@@ -3685,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;
       };
@@ -3697,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: [{
@@ -4046,7 +4080,7 @@
       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 + ' ' + 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"] }] });
+  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: [{
@@ -4729,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);
@@ -5328,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);