survey-angular-ui 1.11.2 → 1.11.4

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

@@ -1749,6 +1749,13 @@
           enumerable: false,
           configurable: true
       });
+      Object.defineProperty(ElementHeaderComponent.prototype, "width", {
+          get: function () {
+              return this.element.titleWidth;
+          },
+          enumerable: false,
+          configurable: true
+      });
       ElementHeaderComponent.prototype.click = function (e) {
           if (this.element.clickTitleFunction !== undefined) {
               this.element.clickTitleFunction(e);
@@ -1757,7 +1764,7 @@
       return ElementHeaderComponent;
   }());
   ElementHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"element.hasAdditionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ElementHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass", "style.width": "this.width" } }, ngImport: i0__namespace, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [attr.id]=\"element.ariaDescriptionId\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"element.hasAdditionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ElementHeaderComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1769,6 +1776,9 @@
               }], rootClass: [{
                   type: i0.HostBinding,
                   args: ["class"]
+              }], width: [{
+                  type: i0.HostBinding,
+                  args: ["style.width"]
               }], click: [{
                   type: i0.HostListener,
                   args: ["click", ["$event"]]
@@ -1934,14 +1944,18 @@
               this.model.dispose();
           }
           this.model = Survey.createPopupViewModel(this.popupModel, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement);
+          this.setContainerElement();
       };
-      PopupComponent.prototype.ngAfterViewInit = function () {
+      PopupComponent.prototype.setContainerElement = function () {
           var _a, _b;
           if (!!((_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
               var container = this.containerRef.nativeElement;
               this.model.setComponentElement(container, this.getTarget ? this.getTarget(container.parentElement) : (_b = container === null || container === void 0 ? void 0 : container.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement, this.getArea ? this.getArea(container.parentElement) : undefined);
           }
       };
+      PopupComponent.prototype.ngAfterViewInit = function () {
+          this.setContainerElement();
+      };
       PopupComponent.prototype.ngOnInit = function () {
           this.onModelChanged();
       };
@@ -2639,7 +2653,7 @@
       return BooleanQuestionComponent;
   }(QuestionAngular));
   BooleanQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  BooleanQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" \n        [attr.role]=\"model.a11y_input_ariaRole\"\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        [class]=\"model.cssClasses.control\" [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(model.swapOrder)\" [model]=\"model.locLabelLeft\" sv-ng-string></span>\n      </div>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\" [style.marginLeft]=\"model.thumbMargin\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, !model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(!model.swapOrder)\" [model]=\"model.locLabelRight\"  sv-ng-string></span>\n      </div>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  BooleanQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" \n        [attr.role]=\"model.a11y_input_ariaRole\"\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        [class]=\"model.cssClasses.control\" [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(model.swapOrder)\" [model]=\"model.locLabelLeft\" sv-ng-string></span>\n      </div>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, !model.swapOrder)\">\n        <span [class]=\"model.getLabelCss(!model.swapOrder)\" [model]=\"model.locLabelRight\"  sv-ng-string></span>\n      </div>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }, { 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: BooleanQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2802,7 +2816,7 @@
       return ComponentsContainerComponent;
   }(EmbeddedViewContentComponent));
   ComponentsContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentsContainerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ComponentsContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentsContainerComponent, selector: "sv-components-container, [sv-components-container], sv-ng-components-container", inputs: { survey: "survey", container: "container", needRenderWrapper: "needRenderWrapper" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"isNeedRenderWrapper\">\n    <div *ngIf=\"components.length > 0\" class=\"sv-components-column\">\n      <ng-container *ngFor=\"let component of components\">\n        <ng-template [component]=\"{ name: component.component, data: { survey: survey, container: container, model: component.data } }\"></ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!isNeedRenderWrapper && components.length > 0\">\n    <ng-container *ngFor=\"let component of components\">\n      <ng-template [component]=\"{ name: component.component, data: { survey: survey, container: container, model: component.data } }\"></ng-template>\n    </ng-container>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ComponentsContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentsContainerComponent, selector: "sv-components-container, [sv-components-container], sv-ng-components-container", inputs: { survey: "survey", container: "container", needRenderWrapper: "needRenderWrapper" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container *ngIf=\"isNeedRenderWrapper\">\n    <div *ngIf=\"components.length > 0\" [class]=\"'sv-components-column' + ' sv-components-container-' + container\">\n      <ng-container *ngFor=\"let component of components\">\n        <ng-template [component]=\"{ name: component.component, data: { survey: survey, container: container, model: component.data } }\"></ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!isNeedRenderWrapper && components.length > 0\">\n    <ng-container *ngFor=\"let component of components\">\n      <ng-template [component]=\"{ name: component.component, data: { survey: survey, container: container, model: component.data } }\"></ng-template>\n    </ng-container>\n  </ng-container>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentsContainerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3904,9 +3918,17 @@
           return "sv-ng-ranking-item";
       };
       RankingQuestionComponent.prototype.getItemValueComponentData = function (item, index, unrankedItem) {
-          var res = _super.prototype.getItemValueComponentData.call(this, item);
-          res.componentData.index = index;
-          res.componentData.unrankedItem = unrankedItem;
+          var res = {
+              componentName: this.getDefaultComponentName(),
+              componentData: {
+                  question: this.model,
+                  model: item,
+                  inputType: this.inputType,
+                  data: this.model.getItemValueWrapperComponentData(item),
+                  index: index,
+                  unrankedItem: unrankedItem
+              }
+          };
           return res;
       };
       return RankingQuestionComponent;
@@ -3933,7 +3955,7 @@
       return RankingItemComponent;
   }(BaseAngular));
   RankingItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  RankingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0__namespace, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\"\n    (pointerup)=\"question.handlePointerUp($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg [class]=\"question.getIconHoverCss()\">\n          <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n        </svg> \n        <svg [class]=\"question.getIconFocusCss()\">\n          <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n        </svg> \n      </div>\n\n      <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n      <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n        <svg>\n          <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n        </svg> \n      </div></ng-template>\n\n      <ng-template [component]=\"{ name: question.itemContentComponent, data: { item: model, cssClasses: question.cssClasses } }\"></ng-template>\n    </div>\n  </div>\n</div>", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  RankingItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index", unrankedItem: "unrankedItem" }, usesInheritance: true, ngImport: i0__namespace, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\"\n    (pointerup)=\"question.handlePointerUp($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg [class]=\"question.getIconHoverCss()\">\n          <use [attr.xlink:href]=\"question.dragDropSvgIcon\"></use>\n        </svg> \n        <svg [class]=\"question.getIconFocusCss()\">\n          <use [attr.xlink:href]=\"question.arrowsSvgIcon\"></use>\n        </svg> \n      </div>\n\n      <div *ngIf=\"!unrankedItem && question.getNumberByIndex(index); else elseBlock\" [class]=\"question.getItemIndexClasses(model)\">{{ question.getNumberByIndex(index) }}</div>\n      <ng-template #elseBlock><div [class]=\"question.getItemIndexClasses(model)\">\n        <svg>\n          <use [attr.xlink:href]=\"question.dashSvgIcon\"></use>\n        </svg> \n      </div></ng-template>\n\n      <ng-template [component]=\"{ name: question.itemComponent, data: { item: model, cssClasses: question.cssClasses } }\"></ng-template>\n    </div>\n  </div>\n</div>", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3959,11 +3981,11 @@
       return RankingItemContentComponent;
   }(EmbeddedViewContentComponent));
   RankingItemContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingItemContentComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  RankingItemContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemContentComponent, selector: "sv-ranking-item-content", inputs: { item: "item", cssClasses: "cssClasses" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"cssClasses.controlLabel\">\n    <sv-ng-string [model]=\"item.locText\"></sv-ng-string>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+  RankingItemContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RankingItemContentComponent, selector: "sv-ranking-item", inputs: { item: "item", cssClasses: "cssClasses" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"cssClasses.controlLabel\">\n    <sv-ng-string [model]=\"item.locText\"></sv-ng-string>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RankingItemContentComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: "sv-ranking-item-content",
+                      selector: "sv-ranking-item",
                       templateUrl: "./ranking-item-content.component.html",
                       styles: [":host { display: none; }"]
                   }]
@@ -3972,7 +3994,7 @@
               }], cssClasses: [{
                   type: i0.Input
               }] } });
-  AngularComponentFactory.Instance.registerComponent("sv-ranking-item-content", RankingItemContentComponent);
+  AngularComponentFactory.Instance.registerComponent("sv-ranking-item", RankingItemContentComponent);
 
   var StringEditorComponent = /** @class */ (function () {
       function StringEditorComponent() {
@@ -4428,9 +4450,6 @@
           configurable: true
       });
       MatrixDropdownCellComponent.prototype.getComponentName = function (element) { return getComponentName(element); };
-      MatrixDropdownCellComponent.prototype.getHeaders = function () {
-          return this.cell.headers;
-      };
       MatrixDropdownCellComponent.prototype.getCellStyle = function () {
           if (!!this.cell.width || !!this.cell.minWidth)
               return { width: this.cell.width, minWidth: this.cell.minWidth };
@@ -4475,7 +4494,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()\" *ngIf=\"canRender\" [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"] }] });
+  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\" *ngIf=\"canRender\" [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    <span *ngIf=\"cell.showResponsiveTitle\" [class]=\"cell.responsiveTitleCss\" [model]=\"cell.responsiveLocTitle\" sv-ng-string></span>\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: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { 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"] }], 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: [{