survey-angular-ui 1.9.75 → 1.9.77

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

@@ -1000,125 +1000,6 @@
                     type: i0.Input
                 }] } });
 
-    var SvgIconComponent = /** @class */ (function () {
-        function SvgIconComponent(viewContaierRef) {
-            this.viewContaierRef = viewContaierRef;
-        }
-        SvgIconComponent.prototype.createSvg = function () {
-            if (!!this.iconName) {
-                Survey__namespace.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement, this.title);
-            }
-        };
-        Object.defineProperty(SvgIconComponent.prototype, "rootClass", {
-            get: function () {
-                var className = "sv-svg-icon";
-                if (!this.css && !!this.partCss) {
-                    className += " " + this.partCss;
-                }
-                else if (!!this.css) {
-                    className = this.css;
-                }
-                return className;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SvgIconComponent.prototype, "rootRole", {
-            get: function () {
-                return "img";
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SvgIconComponent.prototype, "ariaLabel", {
-            get: function () {
-                return this.title;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SvgIconComponent.prototype.ngOnChanges = function () {
-            var el = this.viewContaierRef.element.nativeElement;
-            el.innerHTML = "";
-            el.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "use"));
-            this.createSvg();
-        };
-        return SvgIconComponent;
-    }());
-    SvgIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SvgIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: { size: "size", width: "width", height: "height", iconName: "iconName", partCss: "partCss", css: "css", title: "title" }, host: { properties: { "class": "this.rootClass", "[attr.role]": "this.rootRole", "[attr.aria-label]": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0__namespace, template: "", isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: "'[sv-ng-svg-icon]'",
-                        template: ""
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { size: [{
-                    type: i0.Input
-                }], width: [{
-                    type: i0.Input
-                }], height: [{
-                    type: i0.Input
-                }], iconName: [{
-                    type: i0.Input
-                }], partCss: [{
-                    type: i0.Input
-                }], css: [{
-                    type: i0.Input
-                }], title: [{
-                    type: i0.Input
-                }], rootClass: [{
-                    type: i0.HostBinding,
-                    args: ["class"]
-                }], rootRole: [{
-                    type: i0.HostBinding,
-                    args: ["[attr.role]"]
-                }], ariaLabel: [{
-                    type: i0.HostBinding,
-                    args: ["[attr.aria-label]"]
-                }] } });
-
-    var TimerPanelComponent = /** @class */ (function (_super) {
-        __extends(TimerPanelComponent, _super);
-        function TimerPanelComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.circleLengthValue = 440;
-            return _this;
-        }
-        TimerPanelComponent.prototype.getStateElement = function () {
-            return this.model;
-        };
-        TimerPanelComponent.prototype.getModel = function () {
-            return this.model;
-        };
-        Object.defineProperty(TimerPanelComponent.prototype, "circleLength", {
-            get: function () {
-                return this.circleLengthValue;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TimerPanelComponent.prototype, "progress", {
-            get: function () {
-                return -this.model.progress * this.circleLength;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return TimerPanelComponent;
-    }(BaseAngular));
-    TimerPanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimerPanelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TimerPanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimerPanelComponent, selector: "sv-timer-panel", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<div *ngIf=\"model.showTimerAsClock\" [class]=\"model.rootCss\">\n    <svg *ngIf=\"model.showProgress\" [class]=\"model.getProgressCss()\" [style.stroke-dasharray]=\"circleLength\" [style.stroke-dashoffset]=\"progress\" [size]=\"'auto'\" [iconName]=\"'icon-timercircle'\" sv-ng-svg-icon></svg>\n    <div [class]=\"model.textContainerCss\">\n        <span [class]=\"model.majorTextCss\">{{ model.clockMajorText }}</span>\n        <span *ngIf=\"model.clockMinorText\" [class]=\"model.minorTextCss\">{{ model.clockMinorText }}</span>\n    </div>\n</div>\n<div *ngIf=\"!model.showTimerAsClock\" [class]='model.survey.getCss().timerRoot'>{{model.text}}</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimerPanelComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: "sv-timer-panel",
-                        templateUrl: "./timer-panel.component.html",
-                    }]
-            }], propDecorators: { model: [{
-                    type: i0.Input
-                }] } });
-
     var ElementComponent = /** @class */ (function (_super) {
         __extends(ElementComponent, _super);
         function ElementComponent() {
@@ -1381,7 +1262,7 @@
         return SurveyContentComponent;
     }(BaseAngular));
     SurveyContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyContentComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    SurveyContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\">\n    <form onsubmit=\"return false;\">\n      <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n      <div [class]=\"model.css.container\">\n        <div *ngIf=\"model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n        <ng-container *ngIf=\"model.isTimerPanelShowingOnTop && !model.isShowStartingPage\">\n          <sv-timer-panel [model]=\"model.timerModel\"></sv-timer-panel>\n        </ng-container>\n        <ng-container *ngIf=\"model.isShowProgressBarOnTop && !model.isShowStartingPage\">\n          <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n        </ng-container>\n        <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnTop\" [model]=\"model.navigationBar\"></sv-action-bar>\n          <!-- ko if: activePage -->\n            <ng-container *ngIf=\"model.activePage\">\n                <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page>\n            </ng-container>\n            <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n            <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n            <!-- /ko -->\n            <!-- /ko -->\n          <!-- /ko -->\n          <ng-container *ngIf=\"model.isShowProgressBarOnBottom && !model.isShowStartingPage\">\n            <ng-template [component]='{ name: \"sv-progress-\" + this.model.progressBarType, data: { model } }'></ng-template>\n          </ng-container>\n          <sv-action-bar *ngIf=\"model.isNavigationButtonsShowingOnBottom\" [model]=\"model.navigationBar\"></sv-action-bar>  \n        </div>\n        <ng-container *ngIf=\"model.isTimerPanelShowingOnBottom && !model.isShowStartingPage\">\n            <sv-timer-panel [model]=\"model.timerModel\"></sv-timer-panel>\n        </ng-container>\n        <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n          [innerHtml]=\"model.processedCompletedHtml\"></div>\n        <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.css.body\"\n          [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n        <div *ngIf=\"model.state === 'loading'\" [class]=\"model.css.body\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n        <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n      </div>\n    </form>\n    <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n    <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n  </div>\n</ng-template>", components: [{ type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: TimerPanelComponent, selector: "sv-timer-panel", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    SurveyContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\">\n    <form onsubmit=\"return false;\">\n      <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n      <div [class]=\"model.css.container\">\n        <div *ngIf=\"model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n        <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n        <div [class]=\"model.bodyContainerCss\">\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n          <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n            <!-- ko if: activePage -->\n              <ng-container *ngIf=\"model.activePage\">\n                  <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page>\n              </ng-container>\n              <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n              <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n              <!-- /ko -->\n              <!-- /ko -->\n            <!-- /ko -->\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n          </div>\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n        </div>\n        <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n        <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n          [innerHtml]=\"model.processedCompletedHtml\"></div>\n        <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.css.body\"\n          [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n        <div *ngIf=\"model.state === 'loading'\" [class]=\"model.css.body\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n        <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n      </div>\n    </form>\n    <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n    <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n  </div>\n</ng-template>", components: [{ type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyContentComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1643,7 +1524,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" }, 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]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.ariaLabelledBy\">\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    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n      </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.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n      <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\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: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    QuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, 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\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.ariaLabelledBy\">\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    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n      </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.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n      <div *ngIf=\"model.hasDescriptionUnderInput\" [class]=\"model.cssDescription\" [model]=\"model.locDescription\" sv-ng-string></div>\n  </div>\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: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1788,6 +1669,84 @@
                 }] } });
     AngularComponentFactory.Instance.registerComponent("skeleton-question", QuestionSkeletonComponent);
 
+    var SvgIconComponent = /** @class */ (function () {
+        function SvgIconComponent(viewContaierRef) {
+            this.viewContaierRef = viewContaierRef;
+        }
+        SvgIconComponent.prototype.createSvg = function () {
+            if (!!this.iconName) {
+                Survey__namespace.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement, this.title);
+            }
+        };
+        Object.defineProperty(SvgIconComponent.prototype, "rootClass", {
+            get: function () {
+                var className = "sv-svg-icon";
+                if (!this.css && !!this.partCss) {
+                    className += " " + this.partCss;
+                }
+                else if (!!this.css) {
+                    className = this.css;
+                }
+                return className;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SvgIconComponent.prototype, "rootRole", {
+            get: function () {
+                return "img";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SvgIconComponent.prototype, "ariaLabel", {
+            get: function () {
+                return this.title;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SvgIconComponent.prototype.ngOnChanges = function () {
+            var el = this.viewContaierRef.element.nativeElement;
+            el.innerHTML = "";
+            el.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "use"));
+            this.createSvg();
+        };
+        return SvgIconComponent;
+    }());
+    SvgIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SvgIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: { size: "size", width: "width", height: "height", iconName: "iconName", partCss: "partCss", css: "css", title: "title" }, host: { properties: { "class": "this.rootClass", "[attr.role]": "this.rootRole", "[attr.aria-label]": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "'[sv-ng-svg-icon]'",
+                        template: ""
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { size: [{
+                    type: i0.Input
+                }], width: [{
+                    type: i0.Input
+                }], height: [{
+                    type: i0.Input
+                }], iconName: [{
+                    type: i0.Input
+                }], partCss: [{
+                    type: i0.Input
+                }], css: [{
+                    type: i0.Input
+                }], title: [{
+                    type: i0.Input
+                }], rootClass: [{
+                    type: i0.HostBinding,
+                    args: ["class"]
+                }], rootRole: [{
+                    type: i0.HostBinding,
+                    args: ["[attr.role]"]
+                }], ariaLabel: [{
+                    type: i0.HostBinding,
+                    args: ["[attr.aria-label]"]
+                }] } });
+
     var DropdownComponent = /** @class */ (function (_super) {
         __extends(DropdownComponent, _super);
         function DropdownComponent() {
@@ -2377,7 +2336,7 @@
         function CheckboxItemComponent() {
         }
         CheckboxItemComponent.prototype.onChange = function (event) {
-            this.question.clickItemHandler(this.model, event.target.checked);
+            this.question["clickItemHandler"](this.model, event.target.checked);
         };
         CheckboxItemComponent.prototype.onSelectAllChange = function (event) {
             this.question.toggleSelectAll();
@@ -2450,7 +2409,7 @@
         return RatingQuestionComponent;
     }(QuestionAngular));
     RatingQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    RatingQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingQuestionComponent, selector: "sv-ng-rating-question", usesInheritance: true, ngImport: i0__namespace, template: "  <div [class]=\"model.ratingRootCss\" #contentElement>\n      <fieldset role=\"radiogroup\">\n          <legend role=\"presentation\" class=\"sv-hidden\"></legend>\n          <span *ngIf=\"model.hasMinLabel\" [class]=\"model.cssClasses.minText\" [model]=\"model.locMinRateDescription\" sv-ng-string>\n          </span>\n          <ng-template *ngFor=\"let item of model.renderedRateItems; index as index; trackBy: trackByFn\" [component]=\"{ name: 'sv-rating-item', data: {model: model, item: item, index: index }}\"></ng-template>\n          <span *ngIf=\"model.hasMaxLabel\" [class]=\"model.cssClasses.maxText\" [model]=\"model.locMaxRateDescription\" sv-ng-string></span>\n      </fieldset>\n  </div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+    RatingQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingQuestionComponent, selector: "sv-ng-rating-question", usesInheritance: true, ngImport: i0__namespace, template: "  <div [class]=\"model.ratingRootCss\" #contentElement>\n      <fieldset role=\"radiogroup\">\n          <legend role=\"presentation\" class=\"sv-hidden\"></legend>\n          <span *ngIf=\"model.hasMinLabel\" [class]=\"model.cssClasses.minText\" [model]=\"model.locMinRateDescription\" sv-ng-string>\n          </span>\n          <ng-template *ngFor=\"let item of model.renderedRateItems; index as index; trackBy: trackByFn\" [component]=\"{ name: model.itemComponentName, data: {model: model, item: item, index: index }}\"></ng-template>\n          <span *ngIf=\"model.hasMaxLabel\" [class]=\"model.cssClasses.maxText\" [model]=\"model.locMaxRateDescription\" sv-ng-string></span>\n      </fieldset>\n  </div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__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: RatingQuestionComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2610,6 +2569,45 @@
                     }]
             }] });
 
+    var ComponentsContainerComponent = /** @class */ (function (_super) {
+        __extends(ComponentsContainerComponent, _super);
+        function ComponentsContainerComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(ComponentsContainerComponent.prototype, "components", {
+            get: function () {
+                return this.survey.getContainerContent(this.container);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComponentsContainerComponent.prototype, "isNeedRenderWrapper", {
+            get: function () {
+                return this.needRenderWrapper === false ? false : true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ComponentsContainerComponent;
+    }(EmbeddedViewContentComponent));
+    ComponentsContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentsContainerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ComponentsContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentsContainerComponent, selector: "sv-components-container, [sv-components-container], sv-ng-components-container", inputs: { survey: "survey", container: "container", needRenderWrapper: "needRenderWrapper" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"isNeedRenderWrapper\">\n    <div *ngIf=\"components.length > 0\" class=\"sv-components-column\">\n      <ng-container *ngFor=\"let component of components\">\n        <ng-template [component]=\"{ name: component.component, data: { survey: survey, model: component.data } }\"></ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!isNeedRenderWrapper && components.length > 0\">\n    <ng-container *ngFor=\"let component of components\">\n      <ng-template [component]=\"{ name: component.component, data: { survey: survey, model: component.data } }\"></ng-template>\n    </ng-container>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__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: ComponentsContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-components-container, [sv-components-container], sv-ng-components-container",
+                        templateUrl: "./components-container.component.html",
+                        styleUrls: ["./hide-host.scss"]
+                    }]
+            }], propDecorators: { survey: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.Input
+                }], needRenderWrapper: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-components-container", ComponentsContainerComponent);
+
     var Key2ClickDirective = /** @class */ (function () {
         function Key2ClickDirective(el) {
             var _this = this;
@@ -2791,6 +2789,48 @@
                 }] } });
     AngularComponentFactory.Instance.registerComponent("sv-skeleton", SkeletonComponent);
 
+    var TimerPanelComponent = /** @class */ (function (_super) {
+        __extends(TimerPanelComponent, _super);
+        function TimerPanelComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.circleLengthValue = 440;
+            return _this;
+        }
+        TimerPanelComponent.prototype.getStateElement = function () {
+            return this.model;
+        };
+        TimerPanelComponent.prototype.getModel = function () {
+            return this.model;
+        };
+        Object.defineProperty(TimerPanelComponent.prototype, "circleLength", {
+            get: function () {
+                return this.circleLengthValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TimerPanelComponent.prototype, "progress", {
+            get: function () {
+                return -this.model.progress * this.circleLength;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TimerPanelComponent;
+    }(BaseAngular));
+    TimerPanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimerPanelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TimerPanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimerPanelComponent, selector: "sv-timerpanel", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<div *ngIf=\"model.isRunning && model.showTimerAsClock\" [class]=\"model.rootCss\">\n    <svg *ngIf=\"model.showProgress\" [class]=\"model.getProgressCss()\" [style.stroke-dasharray]=\"circleLength\" [style.stroke-dashoffset]=\"progress\" [size]=\"'auto'\" [iconName]=\"'icon-timercircle'\" sv-ng-svg-icon></svg>\n    <div [class]=\"model.textContainerCss\">\n        <span [class]=\"model.majorTextCss\">{{ model.clockMajorText }}</span>\n        <span *ngIf=\"model.clockMinorText\" [class]=\"model.minorTextCss\">{{ model.clockMinorText }}</span>\n    </div>\n</div>\n<div *ngIf=\"model.isRunning && !model.showTimerAsClock\" [class]='model.survey.getCss().timerRoot'>{{model.text}}</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimerPanelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-timerpanel",
+                        templateUrl: "./timer-panel.component.html",
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-timerpanel", TimerPanelComponent);
+
     var ListItemComponent = /** @class */ (function (_super) {
         __extends(ListItemComponent, _super);
         function ListItemComponent() {
@@ -2909,7 +2949,7 @@
             event.stopPropagation();
         };
         RatingItemComponent.prototype.getModel = function () {
-            return this.model;
+            return this.item;
         };
         return RatingItemComponent;
     }(BaseAngular));
@@ -2933,6 +2973,40 @@
                 }] } });
     AngularComponentFactory.Instance.registerComponent("sv-rating-item", RatingItemComponent);
 
+    var RatingItemStarComponent = /** @class */ (function (_super) {
+        __extends(RatingItemStarComponent, _super);
+        function RatingItemStarComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        RatingItemStarComponent.prototype.onClick = function (event) {
+            this.model.setValueFromClick(event.target.value);
+            event.stopPropagation();
+        };
+        RatingItemStarComponent.prototype.getModel = function () {
+            return this.item;
+        };
+        return RatingItemStarComponent;
+    }(BaseAngular));
+    RatingItemStarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemStarComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    RatingItemStarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RatingItemStarComponent, selector: "sv-ng-rating-item-star", inputs: { element: "element", model: "model", item: "item", index: "index" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <label [class]=\"model.getItemClass(item.itemValue, item.highlight)\" (mouseover)=\"model.onItemMouseIn(item)\" (mouseout)=\"model.onItemMouseOut(item)\">\n    <input type=\"radio\"\n      class=\"sv-visuallyhidden\"\n      [attr.name]=\"model.name\" [attr.id]=\"model.getInputId(index)\" [value]=\"item.value\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n      [disabled]=\"model.isInputReadOnly\" [checked]=\"model.value === item.value\" (click)=\"onClick($event)\"\n      />\n      <svg [iconName]=\"'icon-rating-star'\" [size]=\"48\" [title]=\"item.text\" [class]=\"'sv-star'\" sv-ng-svg-icon></svg>\n      <svg [iconName]=\"'icon-rating-star-2'\" [size]=\"48\" [title]=\"item.text\" [class]=\"'sv-star-2'\" sv-ng-svg-icon></svg>\n  </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RatingItemStarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-ng-rating-item-star",
+                        templateUrl: "./rating-item-star.component.html",
+                        styleUrls: ["../../hide-host.scss"],
+                    }]
+            }], propDecorators: { element: [{
+                    type: i0.Input
+                }], model: [{
+                    type: i0.Input
+                }], item: [{
+                    type: i0.Input
+                }], index: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-rating-item-star", RatingItemStarComponent);
+
     var RatingDropdownComponent = /** @class */ (function () {
         function RatingDropdownComponent() {
         }
@@ -3038,8 +3112,8 @@
     AngularComponentFactory.Instance.registerComponent("sv-progress-progress", ProgressDefaultComponent);
     AngularComponentFactory.Instance.registerComponent("sv-progress-pages", ProgressDefaultComponent);
     AngularComponentFactory.Instance.registerComponent("sv-progress-questions", ProgressDefaultComponent);
-    AngularComponentFactory.Instance.registerComponent("sv-progress-correctQuestions", ProgressDefaultComponent);
-    AngularComponentFactory.Instance.registerComponent("sv-progress-requiredQuestions", ProgressDefaultComponent);
+    AngularComponentFactory.Instance.registerComponent("sv-progress-correctquestions", ProgressDefaultComponent);
+    AngularComponentFactory.Instance.registerComponent("sv-progress-requiredquestions", ProgressDefaultComponent);
 
     var ProgressButtonsComponent = /** @class */ (function () {
         function ProgressButtonsComponent(changeDetectorRef) {
@@ -3109,6 +3183,39 @@
                 }] } });
     AngularComponentFactory.Instance.registerComponent("sv-progress-buttons", ProgressButtonsComponent);
 
+    var ProgressTocComponent = /** @class */ (function (_super) {
+        __extends(ProgressTocComponent, _super);
+        function ProgressTocComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.containerCss = "sv_progress-toc";
+            return _this;
+        }
+        ProgressTocComponent.prototype.createProgressTOCModel = function () {
+            this.listModel = Survey.createTOCListModel(this.model);
+        };
+        ProgressTocComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            this.createProgressTOCModel();
+        };
+        ProgressTocComponent.prototype.ngOnChanges = function (changes) {
+            this.createProgressTOCModel();
+        };
+        return ProgressTocComponent;
+    }(EmbeddedViewContentComponent));
+    ProgressTocComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressTocComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ProgressTocComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressTocComponent, selector: "sv-progress-toc, sv-ng-progress-toc", inputs: { model: "model" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"containerCss\">\n    <sv-ng-list [model]=\"listModel\"></sv-ng-list>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: ["model"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressTocComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "sv-progress-toc, sv-ng-progress-toc",
+                        templateUrl: "./progress.component.html",
+                        styles: [":host { display: none; }"]
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }] } });
+    AngularComponentFactory.Instance.registerComponent("sv-progress-toc", ProgressTocComponent);
+
     var PanelComponent = /** @class */ (function (_super) {
         __extends(PanelComponent, _super);
         function PanelComponent() {
@@ -4146,24 +4253,23 @@
     SurveyModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyModule, declarations: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
             SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
             QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
-            CharacterCounterComponent,
             DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
             PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-            ListComponent, ListItemComponent, RatingItemComponent,
+            CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent,
             TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
             ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
             SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
             RatingQuestionComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
-            SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
+            SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
             MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
             MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
             CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-            NotifierComponent], imports: [i2.CommonModule, i3.FormsModule], exports: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
+            NotifierComponent, ComponentsContainerComponent], imports: [i2.CommonModule, i3.FormsModule], exports: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
             SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
             QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
             DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
             PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-            ListComponent, ListItemComponent, RatingItemComponent,
+            CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent,
             TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
             ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
             SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
@@ -4172,7 +4278,7 @@
             MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
             MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
             CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-            NotifierComponent] });
+            NotifierComponent, ComponentsContainerComponent] });
     SurveyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurveyModule, providers: [PopupService], imports: [[
                 i2.CommonModule, i3.FormsModule
             ]] });
@@ -4183,19 +4289,18 @@
                             VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
                             SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
                             QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
-                            CharacterCounterComponent,
                             DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
                             PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-                            ListComponent, ListItemComponent, RatingItemComponent,
+                            CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent,
                             TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                             ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
                             SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
                             RatingQuestionComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
-                            SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
+                            SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
                             MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
                             MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
                             CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-                            NotifierComponent
+                            NotifierComponent, ComponentsContainerComponent
                         ],
                         imports: [
                             i2.CommonModule, i3.FormsModule
@@ -4206,7 +4311,7 @@
                             QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
                             DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
                             PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-                            ListComponent, ListItemComponent, RatingItemComponent,
+                            CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent,
                             TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                             ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
                             SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
@@ -4215,7 +4320,7 @@
                             MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
                             MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
                             CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-                            NotifierComponent
+                            NotifierComponent, ComponentsContainerComponent
                         ],
                         providers: [PopupService],
                     }]
@@ -4241,6 +4346,7 @@
     exports.CheckboxComponent = CheckboxComponent;
     exports.CheckboxItemComponent = CheckboxItemComponent;
     exports.CommentQuestionComponent = CommentQuestionComponent;
+    exports.ComponentsContainerComponent = ComponentsContainerComponent;
     exports.CompositeQuestionComponent = CompositeQuestionComponent;
     exports.CustomQuestionComponent = CustomQuestionComponent;
     exports.CustomWidgetComponent = CustomWidgetComponent;
@@ -4294,6 +4400,7 @@
     exports.PopupSurveyComponent = PopupSurveyComponent;
     exports.ProgressButtonsComponent = ProgressButtonsComponent;
     exports.ProgressDefaultComponent = ProgressDefaultComponent;
+    exports.ProgressTocComponent = ProgressTocComponent;
     exports.QuestionAngular = QuestionAngular;
     exports.QuestionComponent = QuestionComponent;
     exports.QuestionSkeletonComponent = QuestionSkeletonComponent;
@@ -4303,6 +4410,7 @@
     exports.RankingQuestionComponent = RankingQuestionComponent;
     exports.RatingDropdownComponent = RatingDropdownComponent;
     exports.RatingItemComponent = RatingItemComponent;
+    exports.RatingItemStarComponent = RatingItemStarComponent;
     exports.RatingQuestionComponent = RatingQuestionComponent;
     exports.RowComponent = RowComponent;
     exports.SafeHtmlPipe = SafeHtmlPipe;