survey-angular-ui 2.2.1 → 2.2.3

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

@@ -681,8 +681,8 @@
                   if (!_this.isDestroyed) {
                       _this.setIsRendering(true);
                       _this.detectChanges();
+                      _this.afterUpdate();
                   }
-                  _this.afterUpdate();
               });
           }
       };
@@ -874,19 +874,28 @@
           var _a;
           _super.prototype.onModelChanged.call(this);
           (_a = this.previousModel) === null || _a === void 0 ? void 0 : _a.resetResponsivityManager();
-          if (!!this.model.hasActions && !!this.container && !!this.container.nativeElement) {
+      };
+      ActionBarComponent.prototype.initResponsivityManager = function () {
+          var _a;
+          if (!!this.model.hasVisibleActions && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
               this.model.initResponsivityManager(this.container.nativeElement);
           }
       };
+      ActionBarComponent.prototype.ngAfterViewChecked = function () {
+          _super.prototype.ngAfterViewChecked.call(this);
+          this.initResponsivityManager();
+      };
+      ActionBarComponent.prototype.afterUpdate = function () {
+          _super.prototype.afterUpdate.call(this);
+          this.initResponsivityManager();
+      };
       ActionBarComponent.prototype.onClick = function (event) {
           if (this.allowOnClick) {
               event.stopPropagation();
           }
       };
       ActionBarComponent.prototype.ngAfterViewInit = function () {
-          if (!!this.model.hasActions) {
-              this.model.initResponsivityManager(this.container.nativeElement);
-          }
+          this.initResponsivityManager();
       };
       ActionBarComponent.prototype.ngOnDestroy = function () {
           _super.prototype.ngOnDestroy.call(this);
@@ -895,7 +904,7 @@
       return ActionBarComponent;
   }(BaseAngular));
   ActionBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ActionBarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  ActionBarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2300,7 +2309,7 @@
       return DropdownComponent;
   }(BaseAngular));
   DropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  DropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace$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__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  DropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace$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__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2416,7 +2425,7 @@
       return TagboxComponent;
   }());
   TagboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TagboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0__namespace, 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__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"] }] });
+  TagboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0__namespace, 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__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: TagboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4665,7 +4674,7 @@
       return PanelDynamicQuestionComponent;
   }(QuestionAngular));
   PanelDynamicQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelDynamicQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.hasTabbedMenu\" [class]=\"model.getTabsContainerCss()\">\n    <sv-action-bar [model]=\"model.tabbedMenu\"></sv-action-bar>\n  </div>\n  <sv-ng-placeholder-paneldynamic [question]=\"model\"></sv-ng-placeholder-paneldynamic>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isProgressTopShowing && model.isRangeShowing\">\n    <div [class]=\"model.cssClasses.progressBar\" [style]=\"{ width: model.progress }\"\n    role=\"progressbar\" [attr.aria-label]=\"model.progressBarAriaLabel\"\n    ></div>\n  </div>\n  <div [class]=\"model.cssClasses.panelsContainer\">\n    <ng-container *ngFor=\"let panel of model.renderedPanels; index as index; trackBy: trackPanelBy\">\n      <div [class]=\"model.getPanelWrapperCss(panel)\">\n        <ng-template\n          [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n        <ng-container *ngIf=\"model.canRenderRemovePanelOnRight(panel)\">\n          <ng-template\n            [component]=\"{ name: 'sv-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__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"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  PanelDynamicQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0__namespace, template: "<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.showFooterToolbar\" [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPlaceholderComponent, selector: "sv-ng-placeholder-paneldynamic", inputs: ["question"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }], 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"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5036,7 +5045,7 @@
       return MatrixRowComponent;
   }(BaseAngular));
   MatrixRowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRowComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixRowComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  MatrixRowComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRowComponent, decorators: [{
               type: i0.Component,
               args: [{