survey-angular-ui 1.9.127 → 1.9.129

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

@@ -1593,6 +1593,9 @@
           if (this.allowClose !== undefined) {
               this.popup.allowClose = this.allowClose;
           }
+          if (this.allowFullScreen !== undefined) {
+              this.popup.allowFullScreen = this.allowFullScreen;
+          }
           if (this.closeOnCompleteTimeout !== undefined) {
               this.popup.closeOnCompleteTimeout = this.closeOnCompleteTimeout;
           }
@@ -1606,7 +1609,7 @@
       return PopupSurveyComponent;
   }(BaseAngular));
   PopupSurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupSurveyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  PopupSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model", isExpanded: "isExpanded", allowClose: "allowClose", closeOnCompleteTimeout: "closeOnCompleteTimeout" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"!!popup && popup.isShowing\" [class]=\"popup.cssRoot\" [style.width]=\"popup.renderedWidth\" [style.maxWidth]=\"popup.renderedWidth\" (scroll)=\"popup.onScroll()\">\n  <div [class]=\"popup.cssRootContent\">\n    <div [class]=\"getHeaderCss()\">\n      <div *ngIf=\"popup.isCollapsed && !!popup.locTitle\" [class]=\"popup.cssHeaderTitleCollapsed\">\n        {{popup.locTitle.renderedHtml}}\n      </div>\n      <div [class]=\"popup.cssHeaderButtonsContainer\">\n        <div [class]=\"popup.cssHeaderCollapseButton\" (click)=\"popup.changeExpandCollapse()\">\n            <svg *ngIf=\"popup.isExpanded\" [iconName]=\"'icon-minimize_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n            <svg *ngIf=\"popup.isCollapsed\" [iconName]=\"'icon-restore_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n\n        <div *ngIf=\"popup.allowClose\" [class]=\"popup.cssHeaderCloseButton\" (click)=\"popup.hide()\">\n          <svg [iconName]=\"'icon-close_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n  </div>\n  <div [class]=\"popup.cssBody\">\n    <survey [model]=\"popup.survey\"></survey>\n  </div>\n  </div>\n</div>", styles: [""], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyComponent, selector: "survey", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  PopupSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model", isExpanded: "isExpanded", allowClose: "allowClose", closeOnCompleteTimeout: "closeOnCompleteTimeout", allowFullScreen: "allowFullScreen" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"!!popup && popup.isShowing\" [class]=\"popup.cssRoot\" [style.width]=\"popup.renderedWidth\" [style.maxWidth]=\"popup.renderedWidth\" (scroll)=\"popup.onScroll()\">\n  <div [class]=\"popup.cssRootContent\">\n    <div [class]=\"getHeaderCss()\">\n      <div *ngIf=\"popup.isCollapsed && !!popup.locTitle\" [class]=\"popup.cssHeaderTitleCollapsed\">\n        {{popup.locTitle.renderedHtml}}\n      </div>\n      <div [class]=\"popup.cssHeaderButtonsContainer\">\n        <div *ngIf=\"popup.allowFullScreen\" [class]=\"popup.cssHeaderFullScreenButton\" (click)=\"popup.toggleFullScreen()\">\n          <svg *ngIf=\"popup.isFullScreen\" [iconName]=\"'icon-back-to-panel_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n          <svg *ngIf=\"!popup.isFullScreen\" [iconName]=\"'icon-full-screen_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n\n        <div [class]=\"popup.cssHeaderCollapseButton\" (click)=\"popup.changeExpandCollapse()\">\n            <svg *ngIf=\"popup.isExpanded\" [iconName]=\"'icon-minimize_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n            <svg *ngIf=\"popup.isCollapsed\" [iconName]=\"'icon-restore_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n\n        <div *ngIf=\"popup.allowClose\" [class]=\"popup.cssHeaderCloseButton\" (click)=\"popup.hide()\">\n          <svg [iconName]=\"'icon-close_16x16'\" [size]=\"16\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n  </div>\n  <div [class]=\"popup.cssBody\">\n    <survey [model]=\"popup.survey\"></survey>\n  </div>\n  </div>\n</div>", styles: [""], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyComponent, selector: "survey", inputs: ["model"] }], 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: PopupSurveyComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1622,6 +1625,8 @@
                   type: i0.Input
               }], closeOnCompleteTimeout: [{
                   type: i0.Input
+              }], allowFullScreen: [{
+                  type: i0.Input
               }] } });
 
   var QuestionAngular = /** @class */ (function (_super) {
@@ -3336,28 +3341,27 @@
       function ProgressButtonsComponent(changeDetectorRef) {
           this.changeDetectorRef = changeDetectorRef;
           this.hasScroller = false;
-          this.updateScroller = undefined;
+          this.canShowHeader = false;
+          this.canShowFooter = false;
+          this.canShowItemTitles = true;
       }
-      ProgressButtonsComponent.prototype.createProgressButtonsModel = function () {
-          this.progressButtonsModel = new Survey.SurveyProgressButtonsModel(this.model);
-      };
-      ProgressButtonsComponent.prototype.ngOnInit = function () {
-          this.createProgressButtonsModel();
-      };
-      ProgressButtonsComponent.prototype.ngOnChanges = function (changes) {
-          this.createProgressButtonsModel();
+      ProgressButtonsComponent.prototype.onResize = function (canShowItemTitles) {
+          this.canShowItemTitles = canShowItemTitles;
+          this.canShowHeader = !this.canShowItemTitles;
+          this.changeDetectorRef.detectChanges();
       };
-      ProgressButtonsComponent.prototype.isListElementClickable = function (index) {
-          return this.progressButtonsModel.isListElementClickable(index);
+      ProgressButtonsComponent.prototype.onUpdateScroller = function (hasScroller) {
+          this.hasScroller = hasScroller;
+          this.changeDetectorRef.detectChanges();
       };
-      ProgressButtonsComponent.prototype.getListElementCss = function (index) {
-          return this.progressButtonsModel.getListElementCss(index);
+      ProgressButtonsComponent.prototype.onUpdateSettings = function () {
+          this.canShowItemTitles = this.model.showItemTitles;
+          this.canShowFooter = !this.model.showItemTitles;
+          this.changeDetectorRef.detectChanges();
       };
-      ProgressButtonsComponent.prototype.clickListElement = function (index) {
-          this.progressButtonsModel.clickListElement(index);
+      ProgressButtonsComponent.prototype.ngOnInit = function () {
       };
-      ProgressButtonsComponent.prototype.getScrollButtonCss = function (isLeftScroll) {
-          return this.progressButtonsModel.getScrollButtonCss(this.hasScroller, isLeftScroll);
+      ProgressButtonsComponent.prototype.ngOnChanges = function (changes) {
       };
       ProgressButtonsComponent.prototype.clickScrollButton = function (isLeftScroll) {
           if (this.progressButtonsListContainer) {
@@ -3365,27 +3369,20 @@
           }
       };
       ProgressButtonsComponent.prototype.ngAfterViewInit = function () {
-          var _this = this;
-          this.progressButtonsModel = new Survey.SurveyProgressButtonsModel(this.model);
-          this.updateScroller = setInterval(function () {
-              var _a;
-              if (!!((_a = _this.progressButtonsListContainer) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
-                  var listContainerElement = _this.progressButtonsListContainer.nativeElement;
-                  _this.hasScroller = listContainerElement.scrollWidth > listContainerElement.offsetWidth;
-                  _this.changeDetectorRef.detectChanges();
-              }
-          }, 100);
+          var _a;
+          if (!!((_a = this.progressButtonsListContainer) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+              var element = this.progressButtonsListContainer.nativeElement;
+              this.respManager = new Survey.ProgressButtonsResponsivityManager(this.model, element, this);
+          }
       };
       ProgressButtonsComponent.prototype.ngOnDestroy = function () {
-          if (typeof this.updateScroller !== "undefined") {
-              clearInterval(this.updateScroller);
-              this.updateScroller = undefined;
-          }
+          var _a;
+          (_a = this.respManager) === null || _a === void 0 ? void 0 : _a.dispose();
       };
       return ProgressButtonsComponent;
   }());
   ProgressButtonsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressButtonsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ProgressButtonsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div [class]=\"model.css.progressButtonsContainerCenter\">\n  <div [class]=\"model.css.progressButtonsContainer\">\n    <div\n      [class]=\"getScrollButtonCss(true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"model.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"model.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of model.visiblePages; index as index\"\n          [class]=\"getListElementCss(index)\"\n          (click)=\"isListElementClickable(index) ? clickListElement(index) : null\">\n          <div\n            [class]=\"model.css.progressButtonsPageTitle\"\n            [title]=\"page.renderedNavigationTitle\"\n          >\n            {{ page.renderedNavigationTitle }}\n          </div>\n          <div\n            [class]=\"model.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"getScrollButtonCss(false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n</div>", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  ProgressButtonsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressButtonsComponent, selector: "sv-ng-progress-buttons", inputs: { model: "model", survey: "survey", container: "container" }, viewQueries: [{ propertyName: "progressButtonsListContainer", first: true, predicate: ["progressButtonsListContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div [class]=\"model.getRootCss(container)\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"progress\">\n  <div *ngIf=\"canShowHeader\" [class]=\"survey.css.progressButtonsHeader\">\n    <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.headerText\">{{ model.headerText }}</div>\n  </div>\n  <div [class]=\"survey.css.progressButtonsContainer\">\n    <div\n      [class]=\"model.getScrollButtonCss(hasScroller, true)\"\n      (click)=\"clickScrollButton(true)\"\n      role=\"button\"\n    ></div>\n    <div\n      [class]=\"survey.css.progressButtonsListContainer\" #progressButtonsListContainer>\n      <ul [class]=\"survey.css.progressButtonsList\">\n        <li\n          *ngFor=\"let page of survey.visiblePages; index as index\"\n          [class]=\"model.getListElementCss(index)\"\n          (click)=\"model.isListElementClickable(index) ? model.clickListElement(page) : null\"\n          [attr.data-page-number]=\"model.getItemNumber(page)\">\n          <div [class]=\"survey.css.progressButtonsConnector\"></div>\n          <div *ngIf=\"canShowItemTitles\"\n            [class]=\"survey.css.progressButtonsPageTitle\"\n            [title]=\"page.renderedNavigationTitle\"\n          >\n            {{ page.renderedNavigationTitle }}\n          </div>\n          <div *ngIf=\"canShowItemTitles\"\n            [class]=\"survey.css.progressButtonsPageDescription\"\n            [title]=\"page.locNavigationDescription.renderedHtml\"\n          >\n            {{ page.locNavigationDescription.renderedHtml }}\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div\n      [class]=\"model.getScrollButtonCss(hasScroller, false)\"\n      (click)=\"clickScrollButton(false)\"\n      role=\"button\"\n    ></div>\n  </div>\n  <div *ngIf=\"canShowFooter\" [class]=\"survey.css.progressButtonsFooter\">\n    <div [class]=\"survey.css.progressButtonsPageTitle\" [title]=\"model.footerText\">{{ model.footerText }}</div>\n  </div>\n</div>", 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: ProgressButtonsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3394,6 +3391,10 @@
                   }]
           }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { model: [{
                   type: i0.Input
+              }], survey: [{
+                  type: i0.Input
+              }], container: [{
+                  type: i0.Input
               }], progressButtonsListContainer: [{
                   type: i0.ViewChild,
                   args: ["progressButtonsListContainer"]
@@ -3562,7 +3563,7 @@
       return ChooseFileBtn;
   }(EmbeddedViewContentComponent));
   ChooseFileBtn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChooseFileBtn, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ChooseFileBtn.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: { data: "data", model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <label tabindex=\"0\" [class]=\"question.getChooseFileCss()\"\n        [attr.for]=\"question.inputId\" [attr.aria-label]=\"question.chooseButtonText\" [key2click]>\n        <svg *ngIf=\"question.cssClasses.chooseFileIconId\" [title]=\"question.chooseButtonText\"\n            [iconName]=\"question.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        <span>{{ question.chooseButtonText }}</span>\n</label>\n</ng-template>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ChooseFileBtn.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: { data: "data", model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n    <label tabindex=\"0\" [class]=\"question.getChooseFileCss()\"\n        [attr.for]=\"question.inputId\" [attr.aria-label]=\"question.chooseButtonText\" [key2click]\n        (click)=\"question.chooseFile()\">\n        <svg *ngIf=\"question.cssClasses.chooseFileIconId\" [title]=\"question.chooseButtonText\"\n            [iconName]=\"question.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        <span>{{ question.chooseButtonText }}</span>\n</label>\n</ng-template>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { 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: ChooseFileBtn, decorators: [{
               type: i0.Component,
               args: [{
@@ -4323,7 +4324,7 @@
       return MatrixDropdownCellComponent;
   }(BaseAngular));
   MatrixDropdownCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDropdownCellComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixDropdownCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <td [class]=\"cell.className\" [attr.data-responsive-title]=\"getHeaders()\" [title]=\"cell.getTitle()\"\n    [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" (focusin)=\"cell.focusIn()\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\"\n      [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n    <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n    <ng-container *ngIf=\"cell.hasPanel\">\n      <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n    </ng-container>\n    <div *ngIf=\"cell.isErrorsCell && cell.question?.hasVisibleErrors\" [element]=\"cell.question\" sv-ng-errors></div>\n    <div *ngIf=\"cell.hasQuestion\" [class]=\"question.cssClasses.cellQuestionWrapper\"\n      [visible]=\"cell.question.isVisible\">\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n        <ng-template\n          [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <ng-template\n            [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\"\n        [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <ng-container *ngIf=\"cell.isItemChoice\">\n        <ng-template\n          [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <sv-ng-selebase-item [showLabel]=\"false\" [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n            [question]=\"cell.question\" [model]=\"cell.item\"></sv-ng-selebase-item>\n        </ng-template>\n      </ng-container>\n      <div *ngIf=\"cell.isOtherChoice\" [class]=\"cell.question.getCommentAreaCss(true)\" [question]=\"cell.question\"\n        sv-ng-comment-other></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template\n        [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n        <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n        <span *ngIf=\"isRequiredCell\" [class]=\"question.cssClasses.cellRequiredText\">{{ cell.requiredText }}</span>\n      </ng-template>\n    </ng-container>\n  </td>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  MatrixDropdownCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <td [class]=\"cell.className\" [attr.data-responsive-title]=\"getHeaders()\" [title]=\"cell.getTitle()\"\n    [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" (focusin)=\"cell.focusIn()\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\"\n      [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n    <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n    <ng-container *ngIf=\"cell.hasPanel\">\n      <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n    </ng-container>\n    <div *ngIf=\"cell.isErrorsCell && cell.question?.hasVisibleErrors\" [element]=\"cell.question\" sv-ng-errors></div>\n    <div *ngIf=\"cell.hasQuestion\" [class]=\"cell.cellQuestionWrapperClassName\"\n      [visible]=\"cell.question.isVisible\">\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n        <ng-template\n          [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <ng-template\n            [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\"\n        [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <ng-container *ngIf=\"cell.isItemChoice\">\n        <ng-template\n          [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <sv-ng-selebase-item [showLabel]=\"false\" [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n            [question]=\"cell.question\" [model]=\"cell.item\"></sv-ng-selebase-item>\n        </ng-template>\n      </ng-container>\n      <div *ngIf=\"cell.isOtherChoice\" [class]=\"cell.question.getCommentAreaCss(true)\" [question]=\"cell.question\"\n        sv-ng-comment-other></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template\n        [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n        <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n        <span *ngIf=\"isRequiredCell\" [class]=\"question.cssClasses.cellRequiredText\">{{ cell.requiredText }}</span>\n      </ng-template>\n    </ng-container>\n  </td>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDropdownCellComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4694,7 +4695,7 @@
       return HeaderComponent;
   }(BaseAngular));
   HeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HeaderComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  HeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderComponent, selector: "sv-header, sv-ng-header", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"(survey.headerView === 'advanced' && survey.renderedHasHeader)\" [class]=\"model.headerClasses\" [style]=\"{ height: model.renderedHeight }\">\n    <div *ngIf=\"!!model.backgroundImage\" [style]=\"model.backgroundImageStyle\" [class]=\"model.backgroundImageClasses\"></div>\n    <div *ngIf=\"!survey.isMobile\" [class]=\"model.contentClasses\" [style.width]=\"model.maxWidth\">\n      <ng-container *ngFor=\"let cell of model.cells\">\n        <sv-ng-header-cell [model]=\"cell\"></sv-ng-header-cell>\n      </ng-container>\n    </div>\n    <div *ngIf=\"survey.isMobile\">\n      <sv-ng-header-mobile [model]=\"model\"></sv-ng-header-mobile>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: HeaderCellComponent, selector: "sv-ng-header-cell", inputs: ["model"] }, { type: HeaderMobileComponent, selector: "sv-ng-header-mobile", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  HeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderComponent, selector: "sv-header, sv-ng-header", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"(survey.headerView === 'advanced')\" [class]=\"model.headerClasses\" [style]=\"{ height: model.renderedHeight }\">\n    <div *ngIf=\"!!model.backgroundImage\" [style]=\"model.backgroundImageStyle\" [class]=\"model.backgroundImageClasses\"></div>\n    <div *ngIf=\"!survey.isMobile\" [class]=\"model.contentClasses\" [style.width]=\"model.maxWidth\">\n      <ng-container *ngFor=\"let cell of model.cells\">\n        <sv-ng-header-cell [model]=\"cell\"></sv-ng-header-cell>\n      </ng-container>\n    </div>\n    <div *ngIf=\"survey.isMobile\">\n      <sv-ng-header-mobile [model]=\"model\"></sv-ng-header-mobile>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: HeaderCellComponent, selector: "sv-ng-header-cell", inputs: ["model"] }, { type: HeaderMobileComponent, selector: "sv-ng-header-mobile", 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: HeaderComponent, decorators: [{
               type: i0.Component,
               args: [{