survey-angular-ui 1.9.80 → 1.9.82

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

@@ -900,7 +900,7 @@
         return DynamicHeadComponent;
     }(EmbeddedViewContentComponent));
     DynamicHeadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicHeadComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    DynamicHeadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container [ngSwitch]=\"tagName\">\n    <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n    <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n    <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n    <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n    <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n    <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"'button'\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n  </ng-container>\n  <ng-template #titleContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    DynamicHeadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container [ngSwitch]=\"tagName\">\n    <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n    <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n    <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n    <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n    <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n    <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n  </ng-container>\n  <ng-template #titleContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicHeadComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1262,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-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n        <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n          <div [class]=\"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"] }] });
+    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()\" [style.backgroundImage]=\"model.renderBackgroundImage\">\n    <form onsubmit=\"return false;\" [style.backgroundColor]=\"model.renderBackgroundOpacity\">\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 *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n          <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n            <!-- 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: [{
@@ -1353,6 +1353,51 @@
                     type: i0.Input
                 }] } });
 
+    var QuestionAngular = /** @class */ (function (_super) {
+        __extends(QuestionAngular, _super);
+        function QuestionAngular() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        QuestionAngular.prototype.getModel = function () {
+            return this.model;
+        };
+        QuestionAngular.prototype.ngAfterViewInit = function () {
+            var _a;
+            if (!!this.model) {
+                this.model.afterRenderQuestionElement((_a = this.elementContentRef) === null || _a === void 0 ? void 0 : _a.nativeElement);
+            }
+        };
+        QuestionAngular.prototype.ngOnDestroy = function () {
+            var _a;
+            if (!!this.model) {
+                this.model.beforeDestroyQuestionElement((_a = this.elementContentRef) === null || _a === void 0 ? void 0 : _a.nativeElement);
+            }
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        return QuestionAngular;
+    }(BaseAngular));
+    QuestionAngular.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionAngular, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    QuestionAngular.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionAngular, selector: "ng-component", inputs: { model: "model" }, viewQueries: [{ propertyName: "elementContentRef", first: true, predicate: ["contentElement"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionAngular, decorators: [{
+                type: i0.Component,
+                args: [{
+                        template: ""
+                    }]
+            }], propDecorators: { model: [{
+                    type: i0.Input
+                }], elementContentRef: [{
+                    type: i0.ViewChild,
+                    args: ["contentElement"]
+                }] } });
+    function getComponentName(question) {
+        if (question.customWidget)
+            return "survey-customwidget";
+        if (question.isDefaultRendering()) {
+            return question.getTemplate() + "-question";
+        }
+        return question.getComponentName();
+    }
+
     var ErrorsComponent = /** @class */ (function () {
         function ErrorsComponent(viewContainerRef) {
             this.viewContainerRef = viewContainerRef;
@@ -1444,7 +1489,7 @@
         return ElementHeaderComponent;
     }());
     ElementHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click()" }, properties: { "class": "this.rootClass" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" sv-ng-string></div>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click()" }, properties: { "class": "this.rootClass" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" sv-ng-string></div>\n<ng-container *ngIf=\"!!element.additionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], 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: ElementHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1501,14 +1546,7 @@
                 this.model.afterRender((_b = this.rootEl) === null || _b === void 0 ? void 0 : _b.nativeElement);
             }
         };
-        QuestionComponent.prototype.getComponentName = function () {
-            if (this.model.customWidget)
-                return "survey-customwidget";
-            if (this.model.isDefaultRendering()) {
-                return this.model.getTemplate() + "-question";
-            }
-            return this.model.getComponentName();
-        };
+        QuestionComponent.prototype.getComponentName = function () { return getComponentName(this.model); };
         QuestionComponent.prototype.getQuestionContentWrapperComponentName = function () {
             return this.model.survey.getQuestionContentWrapperComponentName(this.model) || this.getComponentName();
         };
@@ -2106,43 +2144,6 @@
                 }] } });
     AngularComponentFactory.Instance.registerComponent("sv-logo-image", LogoImageComponent);
 
-    var QuestionAngular = /** @class */ (function (_super) {
-        __extends(QuestionAngular, _super);
-        function QuestionAngular() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        QuestionAngular.prototype.getModel = function () {
-            return this.model;
-        };
-        QuestionAngular.prototype.ngAfterViewInit = function () {
-            var _a;
-            if (!!this.model) {
-                this.model.afterRenderQuestionElement((_a = this.elementContentRef) === null || _a === void 0 ? void 0 : _a.nativeElement);
-            }
-        };
-        QuestionAngular.prototype.ngOnDestroy = function () {
-            var _a;
-            if (!!this.model) {
-                this.model.beforeDestroyQuestionElement((_a = this.elementContentRef) === null || _a === void 0 ? void 0 : _a.nativeElement);
-            }
-            _super.prototype.ngOnDestroy.call(this);
-        };
-        return QuestionAngular;
-    }(BaseAngular));
-    QuestionAngular.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionAngular, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    QuestionAngular.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionAngular, selector: "ng-component", inputs: { model: "model" }, viewQueries: [{ propertyName: "elementContentRef", first: true, predicate: ["contentElement"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionAngular, decorators: [{
-                type: i0.Component,
-                args: [{
-                        template: ""
-                    }]
-            }], propDecorators: { model: [{
-                    type: i0.Input
-                }], elementContentRef: [{
-                    type: i0.ViewChild,
-                    args: ["contentElement"]
-                }] } });
-
     var CharacterCounterComponent = /** @class */ (function (_super) {
         __extends(CharacterCounterComponent, _super);
         function CharacterCounterComponent() {
@@ -2174,10 +2175,18 @@
         function TextQuestionComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        Object.defineProperty(TextQuestionComponent.prototype, "value", {
+            get: function () {
+                var _a;
+                return (_a = this.model.value) !== null && _a !== void 0 ? _a : "";
+            },
+            enumerable: false,
+            configurable: true
+        });
         return TextQuestionComponent;
     }(QuestionAngular));
     TextQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TextQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0__namespace, template: "  <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n  <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n    <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n    <datalist [id]=\"model.dataListId\">\n      <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n    </datalist>\n  </div>\n  <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>\n  <ng-template #input>\n    <input [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\"\n    (change)=\"model.onChange($event)\" [attr.value]=\"model.value\" [disabled]=\"model.isInputReadOnly\" name=\"user\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n    (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n    [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n    [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autocomplete\"\n    [attr.ar] #contentElement/>\n    <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n    [counter]=\"model.characterCounter\"\n    [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n  </sv-ng-character-counter>\n  </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    TextQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", usesInheritance: true, ngImport: i0__namespace, template: "  <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n  <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n    <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n    <datalist [id]=\"model.dataListId\">\n      <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n    </datalist>\n  </div>\n  <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ model.value }}</div>\n  <ng-template #input>\n    <input [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\"\n    (change)=\"model.onChange($event)\" [value]=\"value\" [disabled]=\"model.isInputReadOnly\" name=\"user\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder || ''\"\n    (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"model.onBlur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n    [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\"\n    [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.autocomplete]=\"model.autocomplete\" #contentElement/>\n    <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n    [counter]=\"model.characterCounter\"\n    [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n  </sv-ng-character-counter>\n  </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextQuestionComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3248,6 +3257,7 @@
             return _this;
         }
         ProgressTocComponent.prototype.createProgressTOCModel = function () {
+            this.containerCss = Survey.getTocRootCss(this.model);
             this.listModel = Survey.createTOCListModel(this.model);
         };
         ProgressTocComponent.prototype.ngOnInit = function () {
@@ -3956,12 +3966,7 @@
             enumerable: false,
             configurable: true
         });
-        MatrixCellComponent.prototype.getComponentName = function (element) {
-            if (element.customWidget) {
-                return "survey-customwidget";
-            }
-            return element.getType() + "-question";
-        };
+        MatrixCellComponent.prototype.getComponentName = function (element) { return getComponentName(element); };
         MatrixCellComponent.prototype.getHeaders = function () {
             return this.cell.headers;
         };
@@ -4257,12 +4262,7 @@
             enumerable: false,
             configurable: true
         });
-        CustomQuestionComponent.prototype.getComponentName = function (element) {
-            if (element.customWidget) {
-                return "survey-customwidget";
-            }
-            return element.getTemplate() + "-question";
-        };
+        CustomQuestionComponent.prototype.getComponentName = function (element) { return getComponentName(element); };
         return CustomQuestionComponent;
     }(QuestionAngular));
     CustomQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
@@ -4499,6 +4499,7 @@
     exports.TextQuestionComponent = TextQuestionComponent;
     exports.TimerPanelComponent = TimerPanelComponent;
     exports.VisibleDirective = VisibleDirective;
+    exports.getComponentName = getComponentName;
 
     Object.defineProperty(exports, '__esModule', { value: true });