survey-angular-ui 2.2.0 → 2.2.2

package/fesm2015/survey-angular-ui.js

@@ -317,7 +317,11 @@ class ActionBarComponent extends BaseAngular {
         var _a;
         super.onModelChanged();
         (_a = this.previousModel) === null || _a === void 0 ? void 0 : _a.resetResponsivityManager();
-        if (!!this.model.hasActions && !!this.container && !!this.container.nativeElement) {
+    }
+    ngAfterViewChecked() {
+        var _a;
+        super.ngAfterViewChecked();
+        if (!!this.model.hasVisibleActions && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
             this.model.initResponsivityManager(this.container.nativeElement);
         }
     }
@@ -327,7 +331,8 @@ class ActionBarComponent extends BaseAngular {
         }
     }
     ngAfterViewInit() {
-        if (!!this.model.hasActions) {
+        var _a;
+        if (!!this.model.hasVisibleActions && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
             this.model.initResponsivityManager(this.container.nativeElement);
         }
     }
@@ -337,7 +342,7 @@ class ActionBarComponent extends BaseAngular {
     }
 }
 ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActionBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: { model: "model", handleClick: "handleClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions; trackBy: trackActionBy\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: { model: "model", handleClick: "handleClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container [style]=\"model.getRootStyle()\">\n    <ng-container *ngFor=\"let action of model.renderedActions; trackBy: trackActionBy\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActionBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1318,7 +1323,7 @@ class QuestionComponent extends EmbeddedViewContentComponent {
     }
 }
 QuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionComponent.ɵcmp = i0.ɵɵ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, 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.singleInputHideHeader && 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\">\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+QuestionComponent.ɵcmp = i0.ɵɵ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, 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.singleInputHideHeader && 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\">\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -1542,7 +1547,7 @@ class DropdownComponent extends BaseAngular {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\"\n        [class]=\"model.getControlClass()\" [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.role]=\"dropdownModel.ariaQuestionRole\"\n        [attr.aria-required]=\"dropdownModel.ariaQuestionRequired\"\n        [attr.aria-invalid]=\"dropdownModel.ariaQuestionInvalid\"\n        [attr.aria-errormessage]=\"dropdownModel.ariaQuestionErrorMessage\"\n        [attr.aria-expanded]=\"dropdownModel.ariaQuestionExpanded\" [attr.aria-label]=\"dropdownModel.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel.ariaQuestionDescribedby\"\n        [attr.aria-controls]=\"dropdownModel.ariaQuestionControls\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaQuestionActivedescendant\">\n        <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n            <span>{{ dropdownModel.hintStringPrefix }}</span>\n        </div>\n        <div [class]=\"model.cssClasses.controlValue\">\n            <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n                <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n                <span>{{ dropdownModel.hintStringSuffix }}</span>\n            </div>\n            <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n                <ng-template\n                    [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\"\n                [class]=\"model.cssClasses.filterStringInput\" [attr.id]=\"model.getInputId()\"\n                [attr.inputmode]=\"dropdownModel.inputMode\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : -1\"\n                [attr.disabled]=\"model.isDisabledAttr ? true : null\" [attr.role]=\"dropdownModel.ariaInputRole\"\n                [attr.aria-required]=\"dropdownModel.ariaInputRequired\"\n                [attr.aria-invalid]=\"dropdownModel.ariaInputInvalid\"\n                [attr.aria-errormessage]=\"dropdownModel.ariaInputErrorMessage\"\n                [attr.aria-expanded]=\"dropdownModel.ariaInputExpanded\"\n                [attr.aria-controls]=\"dropdownModel.ariaInputControls\" [attr.aria-label]=\"dropdownModel.ariaInputLabel\"\n                [attr.aria-labelledby]=\"dropdownModel.ariaInputLabelledby\"\n                [attr.aria-describedby]=\"dropdownModel.ariaInputDescribedby\"\n                [attr.aria-activedescendant]=\"dropdownModel.ariaInputActivedescendant\"\n                [attr.placeholder]=\"dropdownModel.placeholderRendered\"\n                [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" (change)=\"inputChange($event)\"\n                (blur)=\"blur($event)\" (focus)=\"focus($event)\" />\n        </div>\n        <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n        [attr.tabindex]=\"model.isDisabledAttr ? null : 0\" [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n        [attr.role]=\"dropdownModel?.ariaQuestionRole\" [attr.aria-label]=\"dropdownModel?.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel?.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel?.ariaQuestionDescribedby\" [attr.aria-expanded]=\"false\"\n        [attr.aria-readonly]=\"true\" [attr.aria-disabled]=\"true\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n        </div>\n        <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\"\n        [class]=\"model.getControlClass()\" [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.role]=\"dropdownModel.ariaQuestionRole\"\n        [attr.aria-required]=\"dropdownModel.ariaQuestionRequired\"\n        [attr.aria-invalid]=\"dropdownModel.ariaQuestionInvalid\"\n        [attr.aria-errormessage]=\"dropdownModel.ariaQuestionErrorMessage\"\n        [attr.aria-expanded]=\"dropdownModel.ariaQuestionExpanded\" [attr.aria-label]=\"dropdownModel.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel.ariaQuestionDescribedby\"\n        [attr.aria-controls]=\"dropdownModel.ariaQuestionControls\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaQuestionActivedescendant\">\n        <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n            <span>{{ dropdownModel.hintStringPrefix }}</span>\n        </div>\n        <div [class]=\"model.cssClasses.controlValue\">\n            <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n                <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n                <span>{{ dropdownModel.hintStringSuffix }}</span>\n            </div>\n            <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n                <ng-template\n                    [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement *ngIf=\"dropdownModel.needRenderInput\" type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\"\n                [class]=\"model.cssClasses.filterStringInput\" [attr.id]=\"model.getInputId()\"\n                [attr.inputmode]=\"dropdownModel.inputMode\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : -1\"\n                [attr.disabled]=\"model.isDisabledAttr ? true : null\" [attr.role]=\"dropdownModel.ariaInputRole\"\n                [attr.aria-required]=\"dropdownModel.ariaInputRequired\"\n                [attr.aria-invalid]=\"dropdownModel.ariaInputInvalid\"\n                [attr.aria-errormessage]=\"dropdownModel.ariaInputErrorMessage\"\n                [attr.aria-expanded]=\"dropdownModel.ariaInputExpanded\"\n                [attr.aria-controls]=\"dropdownModel.ariaInputControls\" [attr.aria-label]=\"dropdownModel.ariaInputLabel\"\n                [attr.aria-labelledby]=\"dropdownModel.ariaInputLabelledby\"\n                [attr.aria-describedby]=\"dropdownModel.ariaInputDescribedby\"\n                [attr.aria-activedescendant]=\"dropdownModel.ariaInputActivedescendant\"\n                [attr.placeholder]=\"dropdownModel.placeholderRendered\"\n                [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" (change)=\"inputChange($event)\"\n                (blur)=\"blur($event)\" (focus)=\"focus($event)\" />\n        </div>\n        <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isInputReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n        [attr.tabindex]=\"model.isDisabledAttr ? null : 0\" [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n        [attr.role]=\"dropdownModel?.ariaQuestionRole\" [attr.aria-label]=\"dropdownModel?.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel?.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel?.ariaQuestionDescribedby\" [attr.aria-expanded]=\"false\"\n        [attr.aria-readonly]=\"true\" [attr.aria-disabled]=\"true\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n        </div>\n        <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -1641,7 +1646,7 @@ class TagboxComponent {
     }
 }
 TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\"\n        [class]=\"model.getControlClass()\" [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.role]=\"dropdownModel.ariaQuestionRole\"\n        [attr.aria-required]=\"dropdownModel.ariaQuestionRequired\" [attr.aria-label]=\"dropdownModel.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel.ariaQuestionDescribedby\"\n        [attr.aria-invalid]=\"dropdownModel.ariaQuestionInvalid\"\n        [attr.aria-errormessage]=\"dropdownModel.ariaQuestionErrorMessage\"\n        [attr.aria-controls]=\"dropdownModel.ariaQuestionControls\"\n        [attr.aria-expanded]=\"dropdownModel.ariaQuestionExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaQuestionActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template\n                [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n        [attr.tabindex]=\"model.isDisabledAttr ? null : 0\" [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n        [attr.role]=\"dropdownModel?.ariaQuestionRole\" [attr.aria-label]=\"dropdownModel?.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel?.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel?.ariaQuestionDescribedby\" [attr.aria-expanded]=\"false\"\n        [attr.aria-readonly]=\"true\" [attr.aria-disabled]=\"true\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n        </div>\n        <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\"\n        [class]=\"model.getControlClass()\" [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.role]=\"dropdownModel.ariaQuestionRole\"\n        [attr.aria-required]=\"dropdownModel.ariaQuestionRequired\" [attr.aria-label]=\"dropdownModel.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel.ariaQuestionDescribedby\"\n        [attr.aria-invalid]=\"dropdownModel.ariaQuestionInvalid\"\n        [attr.aria-errormessage]=\"dropdownModel.ariaQuestionErrorMessage\"\n        [attr.aria-controls]=\"dropdownModel.ariaQuestionControls\"\n        [attr.aria-expanded]=\"dropdownModel.ariaQuestionExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaQuestionActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template *ngIf=\"dropdownModel.needRenderInput\"\n                [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isInputReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n        [attr.tabindex]=\"model.isDisabledAttr ? null : 0\" [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n        [attr.role]=\"dropdownModel?.ariaQuestionRole\" [attr.aria-label]=\"dropdownModel?.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel?.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel?.ariaQuestionDescribedby\" [attr.aria-expanded]=\"false\"\n        [attr.aria-readonly]=\"true\" [attr.aria-disabled]=\"true\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n        </div>\n        <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2154,7 +2159,7 @@ class SliderQuestionComponent extends QuestionAngular {
     }
 }
 SliderQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SliderQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SliderQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderQuestionComponent, selector: "sv-ng-slider-question", viewQueries: [{ propertyName: "rangeInputRef", first: true, predicate: ["rangeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div [class]=\"model.rootCss\" #contentElement>\n  <input *ngIf=\"model.sliderType !== 'single' && model.allowDragRange\" #rangeInputRef\n  name=\"range-input\" [class]=\"model.cssClasses.input\" type=\"range\" tabIndex=\"-1\" \n  [attr.min]=\"model.min\" [attr.max]=\"model.max\" [attr.step]=\"model.step\" aria-hidden=\"true\"\n  (input)=\"model.handleRangeOnChange($any($event))\"\n  (pointerdown)=\"model.handleRangePointerDown($any($event), rootRef)\"\n  (pointerup)=\"model.handleRangePointerUp($any($event), rangeInputRef)\" />\n  \n  <div [class]=\"model.cssClasses.visualContainer\" (pointerup)=\"model.setValueByClickOnPath($any($event), rootRef)\">\n    <div [class]=\"model.cssClasses.visualContainerSlider\">\n      <div [class]=\"model.cssClasses.inverseTrackLeft\" [style]=\"{ width: model.getTrackPercentLeft() + '%' }\"></div>\n      <div [class]=\"model.cssClasses.inverseTrackRight\" [style]=\"{ width: model.getTrackPercentRight() + '%' }\"></div>\n      <div [class]=\"model.cssClasses.rangeTrack\" [style]=\"{ left: model.getTrackPercentLeft() + '%', right: model.getTrackPercentRight() + '%' }\" ></div>\n\n       <ng-container *ngFor=\"let value of valueArray; index as i; trackBy: trackByRenderedValue;\">\n        <input [class]=\"model.cssClasses.input\" [attr.id]=\"'sjs-slider-input-' + i\" type=\"range\" [value]=\"value\" \n          [attr.min]=\"model.min\" [attr.max]=\"model.max\" [attr.step]=\"model.step\" [disabled]=\"model.isDisabledAttr\"\n          (input)=\"model.handleOnChange($any($event), i)\"\n          (pointerdown)=\"model.handlePointerDown($any($event))\"\n          (pointerup)=\"model.handlePointerUp($any($event))\"\n          (keydown)=\"model.handleKeyDown($any($event))\"\n          (keyup)=\"model.handleKeyUp($any($event))\"\n          (focus)=\"model.handleOnFocus(i)\"\n          (blur)=\"model.handleOnBlur()\"\n          [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n          [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n          [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n          [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n          [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n          [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n        />\n        <div [class]=\"model.getThumbContainerCss(i)\" [style]=\"{ left: model.getPercent(value) + '%' }\">\n          <div *ngIf=\"model.tooltipVisibility !== 'never'\" [class]=\"model.tooltipCss\">\n            <div [class]=\"model.cssClasses.tooltipPanel\">\n              <div [class]=\"model.cssClasses.tooltipValue\">{{model.getTooltipValue(i)}}</div>\n            </div>\n          </div>\n          <div [class]=\"model.cssClasses.thumb\">\n            <div [class]=\"model.cssClasses.thumbDot\"></div>\n          </div>\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n\n  <div *ngIf=\"model.showLabels\" [class]=\"model.cssClasses.labelsContainer\">\n    <div>\n      <ng-template *ngFor=\"let label of model.renderedLabels; index as i; trackBy: trackByLabelCount;\" [component]=\"{ name: 'sv-slider-label-item', data: {model: model, item: label }}\"></ng-template>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+SliderQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderQuestionComponent, selector: "sv-ng-slider-question", viewQueries: [{ propertyName: "rangeInputRef", first: true, predicate: ["rangeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div [class]=\"model.rootCss\" #contentElement>\n  <input *ngIf=\"model.sliderType !== 'single' && model.allowDragRange\" #rangeInputRef\n  name=\"range-input\" [class]=\"model.cssClasses.input\" type=\"range\" tabIndex=\"-1\"\n  id=\"sjs-slider-input-range-input\"\n  [attr.min]=\"model.min\" [attr.max]=\"model.max\" [attr.step]=\"model.step\" aria-hidden=\"true\"\n  (input)=\"model.handleRangeOnChange($any($event))\"\n  (pointerdown)=\"model.handleRangePointerDown($any($event), rootRef)\"\n  (pointerup)=\"model.handleRangePointerUp($any($event), rangeInputRef)\" />\n  \n  <div [class]=\"model.cssClasses.visualContainer\" (pointerup)=\"model.setValueByClickOnPath($any($event), rootRef)\">\n    <div [class]=\"model.cssClasses.visualContainerSlider\">\n      <div [class]=\"model.cssClasses.inverseTrackLeft\" [style]=\"{ width: model.getTrackPercentLeft() + '%' }\"></div>\n      <div [class]=\"model.cssClasses.inverseTrackRight\" [style]=\"{ width: model.getTrackPercentRight() + '%' }\"></div>\n      <div [class]=\"model.cssClasses.rangeTrack\" [style]=\"{ left: model.getTrackPercentLeft() + '%', right: model.getTrackPercentRight() + '%' }\" ></div>\n\n       <ng-container *ngFor=\"let value of valueArray; index as i; trackBy: trackByRenderedValue;\">\n        <input [class]=\"model.cssClasses.input\" [attr.id]=\"'sjs-slider-input-' + i\" type=\"range\" [value]=\"value\" \n          [attr.min]=\"model.min\" [attr.max]=\"model.max\" [attr.step]=\"model.step\" [disabled]=\"model.isDisabledAttr\"\n          (input)=\"model.handleOnChange($any($event), i)\"\n          (pointerdown)=\"model.handlePointerDown($any($event))\"\n          (pointerup)=\"model.handlePointerUp($any($event))\"\n          (keydown)=\"model.handleKeyDown($any($event))\"\n          (keyup)=\"model.handleKeyUp($any($event))\"\n          (focus)=\"model.handleOnFocus(i)\"\n          (blur)=\"model.handleOnBlur()\"\n          [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n          [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n          [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n          [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n          [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n          [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n        />\n        <div [class]=\"model.getThumbContainerCss(i)\" [style]=\"{ left: model.getPercent(value) + '%' }\">\n          <div *ngIf=\"model.tooltipVisibility !== 'never'\" [class]=\"model.tooltipCss\">\n            <div [class]=\"model.cssClasses.tooltipPanel\">\n              <div [class]=\"model.cssClasses.tooltipValue\">{{model.getTooltipValue(i)}}</div>\n            </div>\n          </div>\n          <div [class]=\"model.cssClasses.thumb\">\n            <div [class]=\"model.cssClasses.thumbDot\"></div>\n          </div>\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n\n  <div *ngIf=\"model.showLabels\" [class]=\"model.cssClasses.labelsContainer\">\n    <div>\n      <ng-template *ngFor=\"let label of model.renderedLabels; index as i; trackBy: trackByLabelCount;\" [component]=\"{ name: 'sv-slider-label-item', data: {model: model, item: label }}\"></ng-template>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SliderQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3486,7 +3491,7 @@ class PanelDynamicQuestionComponent extends QuestionAngular {
     }
 }
 PanelDynamicQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, 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-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n        </ng-container>\n      </div>\n      <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\" />\n    </ng-container>\n  </div>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\"\n    [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n<ng-template #progressV2>\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.footerToolbar.visibleActions.length\" [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"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, 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-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n        </ng-container>\n      </div>\n      <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\" />\n    </ng-container>\n  </div>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\"\n    [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n<ng-template #progressV2>\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.footerToolbar.hasVisibleActions\" [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"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3771,7 +3776,7 @@ class MatrixRowComponent extends BaseAngular {
     }
 }
 MatrixRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <tr *ngIf=\"model.visible\" [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\"\n    [attr.data-sv-drop-target-matrix-row]=\"row && row.id\" #container>\n    <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrixdropdown-cell>\n  </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+MatrixRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRowComponent, selector: "sv-ng-matrix-row", inputs: { model: "model", question: "question" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <tr *ngIf=\"model.visible\" [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\"\n    [attr.data-sv-drop-target-matrix-row]=\"model.dropTargetId\" #container>\n    <sv-ng-matrixdropdown-cell [cell]=\"cell\" [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrixdropdown-cell>\n  </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: ["question", "cell"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixRowComponent, decorators: [{
             type: Component,
             args: [{