survey-angular-ui 1.9.100 → 1.9.102

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

@@ -602,8 +602,7 @@
               this.afterUpdate();
           }
           else {
-              (window["__zone_symbol__queueMicrotask"]
-                  ? window["__zone_symbol__queueMicrotask"] : queueMicrotask)(function () {
+              queueMicrotask(function () {
                   if (!_this.isDestroyed) {
                       _this.setIsRendering(true);
                       _this.detectChanges();
@@ -945,7 +944,7 @@
               return _this.showDialog(options);
           };
           Survey.settings.showDialog = function (dialogOptions, rootElement) {
-              _this.showDialog(dialogOptions, rootElement);
+              return _this.showDialog(dialogOptions, rootElement);
           };
       };
       ModalComponent.prototype.ngOnDestroy = function () {
@@ -3478,7 +3477,7 @@
       return FileQuestionComponent;
   }(QuestionAngular));
   FileQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  FileQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input\n    [class]=\"model.cssClasses.fileInput\"\n    *ngIf=\"!model.isReadOnly\"\n    tabindex=\"-1\"\n    type=\"file\"\n    [attr.id]=\"model.inputId\"\n    (change)=\"model.doChange($event)\"\n    [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\"\n    [attr.accept]=\"model.acceptedTypes\"\n    [attr.capture]=\"model.renderCapture\"\n  />\n  <input\n    *ngIf=\"model.isReadOnly\"\n    type=\"file\"\n    disabled\n    [class]=\"model.getReadOnlyFileCss()\"\n    [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.placeholder]=\"model.title\"\n    style=\"color: transparent\"\n  />\n  <div [class]=\"model.cssClasses.dragArea\"\n    (dragenter)=\"model.onDragEnter($event)\"\n    (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\"\n    (dragleave)=\"model.onDragLeave($event)\">  \n    <div\n      [class]=\"model.getFileDecoratorCss()\"\n    >\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.dragAreaPlaceholder }}</span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <label\n          role=\"button\"\n          tabindex=\"0\"\n          [class]=\"model.getChooseFileCss()\"\n          [attr.for]=\"model.inputId\"\n          [attr.aria-label]=\"model.chooseButtonCaption\"\n          [key2click]\n          >\n          <span>{{ model.chooseButtonCaption }}</span>\n          <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonCaption\" [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </label>\n        <span\n          [class]=\"model.cssClasses.noFileChosen\"\n          *ngIf=\"model.isEmpty()\"\n          >{{ model.noFileChosenCaption }}</span\n        >\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButton\"\n      [class]=\"model.cssClasses.removeButton\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"!model.isEmpty()\">\n      <span\n        *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n        [visible]=\"val && model.isPreviewVisible(index)\"\n        [class]=\"model.cssClasses.preview\"\n      >\n        <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [style.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n        <div [class]=\"model.cssClasses.imageWrapper\">\n          <img\n            *ngIf=\"model.canPreviewImage(val)\"\n            [attr.src]=\"val.content | safeUrl\"\n            [style.height]=\"model.imageHeight\"\n            [style.width]=\"model.imageWidth\"\n            alt=\"File preview\"\n          />\n          <svg *ngIf=\"model.defaultImage(val)\" \n            [iconName]=\"model.cssClasses.defaultImageIconId\" [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\" (click)=\"model.doRemoveFile(val)\">\n            <span\n              [class]=\"model.cssClasses.removeFile\"\n              >{{ model.removeFileCaption }}</span\n            >\n            <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\" [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon ></svg>\n          </div>\n        </div>\n        <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [style.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n      </span>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButtonBottom\"\n      [class]=\"model.showRemoveButtonBottom\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <sv-action-bar *ngIf=\"model.mobileFileNavigatorVisible\" [model]=\"model.mobileFileNavigator\"></sv-action-bar>\n  </div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
+  FileQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input\n    [class]=\"model.cssClasses.fileInput\"\n    *ngIf=\"!model.isReadOnly\"\n    tabindex=\"-1\"\n    type=\"file\"\n    [attr.id]=\"model.inputId\"\n    (change)=\"model.doChange($event)\"\n    [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\"\n    [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\"\n    [attr.accept]=\"model.acceptedTypes\"\n    [attr.capture]=\"model.renderCapture\"\n  />\n  <input\n    *ngIf=\"model.isReadOnly\"\n    type=\"file\"\n    disabled\n    [class]=\"model.getReadOnlyFileCss()\"\n    [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\"\n    [attr.placeholder]=\"model.title\"\n    style=\"color: transparent\"\n  />\n  <div [class]=\"model.cssClasses.dragArea\"\n    (dragenter)=\"model.onDragEnter($event)\"\n    (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\"\n    (dragleave)=\"model.onDragLeave($event)\">  \n    <div\n      [class]=\"model.getFileDecoratorCss()\"\n    >\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.dragAreaPlaceholder }}</span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <label\n          *ngIf=\"!model.isReadOnly\"\n          role=\"button\"\n          tabindex=\"0\"\n          [class]=\"model.getChooseFileCss()\"\n          [attr.for]=\"model.inputId\"\n          [attr.aria-label]=\"model.chooseButtonCaption\"\n          [key2click]\n          >\n          <span>{{ model.chooseButtonCaption }}</span>\n          <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonCaption\" [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </label>\n        <span\n          [class]=\"model.cssClasses.noFileChosen\"\n          *ngIf=\"model.isEmpty()\"\n          >{{ model.noFileChosenCaption }}</span\n        >\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButton\"\n      [class]=\"model.cssClasses.removeButton\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"!model.isEmpty()\">\n      <span\n        *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n        [visible]=\"val && model.isPreviewVisible(index)\"\n        [class]=\"model.cssClasses.preview\"\n      >\n        <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [style.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n        <div [class]=\"model.cssClasses.imageWrapper\">\n          <img\n            *ngIf=\"model.canPreviewImage(val)\"\n            [attr.src]=\"val.content | safeUrl\"\n            [style.height]=\"model.imageHeight\"\n            [style.width]=\"model.imageWidth\"\n            alt=\"File preview\"\n          />\n          <svg *ngIf=\"model.defaultImage(val)\" \n            [iconName]=\"model.cssClasses.defaultImageIconId\" [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.cssClasses.removeFileButton\" (click)=\"model.doRemoveFile(val)\">\n            <span\n              [class]=\"model.cssClasses.removeFile\"\n              >{{ model.removeFileCaption }}</span\n            >\n            <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\" [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon ></svg>\n          </div>\n        </div>\n        <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n          <a\n            (click)=\"model.doDownloadFile($event, val)\"\n            [attr.href]=\"val.content | safeUrl\"\n            [attr.title]=\"val.name\"\n            [attr.download]=\"val.name\"\n            [style.width]=\"model.imageWidth\"\n            >{{ val.name }}</a\n          >\n        </div>\n      </span>\n    </div>\n    <button\n      type=\"button\"\n      *ngIf=\"model.showRemoveButtonBottom\"\n      [class]=\"model.showRemoveButtonBottom\"\n      (click)=\"model.doClean($event)\"\n    >\n      <span>{{ model.clearButtonCaption }}</span>\n      <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n    </button>\n    <sv-action-bar *ngIf=\"model.mobileFileNavigatorVisible\" [model]=\"model.mobileFileNavigator\"></sv-action-bar>\n  </div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3820,10 +3819,10 @@
               _this.update();
           };
           this.model.currentIndexChangedCallback = function () {
-              _this.detectChanges();
+              _this.update();
           };
           this.model.renderModeChangedCallback = function () {
-              _this.detectChanges();
+              _this.update();
           };
       };
       Object.defineProperty(PanelDynamicQuestionComponent.prototype, "progressCssClass", {
@@ -4005,12 +4004,13 @@
   var MatrixCellComponent = /** @class */ (function (_super) {
       __extends(MatrixCellComponent, _super);
       function MatrixCellComponent() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.isVisible = false;
-          return _this;
+          return _super !== null && _super.apply(this, arguments) || this;
       }
       MatrixCellComponent.prototype.getModel = function () {
-          return this.cell.question;
+          if (this.cell.hasQuestion) {
+              return this.cell.question;
+          }
+          return null;
       };
       Object.defineProperty(MatrixCellComponent.prototype, "row", {
           get: function () {
@@ -4019,6 +4019,16 @@
           enumerable: false,
           configurable: true
       });
+      MatrixCellComponent.prototype.ngDoCheck = function () {
+          var _this = this;
+          var _a;
+          _super.prototype.ngDoCheck.call(this);
+          if (this.cell.isErrorsCell && ((_a = this.cell) === null || _a === void 0 ? void 0 : _a.question)) {
+              this.cell.question.registerFunctionOnPropertyValueChanged("errors", function () {
+                  _this.update();
+              }, "__ngSubscription");
+          }
+      };
       Object.defineProperty(MatrixCellComponent.prototype, "panelComponentName", {
           get: function () {
               var panel = this.cell.panel;
@@ -4074,10 +4084,17 @@
           };
           this.question.survey.matrixAfterCellRender(this.question, options);
       };
+      MatrixCellComponent.prototype.ngOnDestroy = function () {
+          var _a;
+          _super.prototype.ngOnDestroy.call(this);
+          if (this.cell.isErrorsCell && ((_a = this.cell) === null || _a === void 0 ? void 0 : _a.question)) {
+              this.cell.question.unRegisterFunctionOnPropertyValueChanged("errors", "__ngSubscription");
+          }
+      };
       return MatrixCellComponent;
   }(BaseAngular));
   MatrixCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixCellComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "sv-ng-matrix-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()\" [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\" [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.hasQuestion\" [class]=\"question.cssClasses.cellQuestionWrapper\" [visible]=\"cell.question.isVisible\">\n      <div *ngIf=\"cell.showErrorOnTop && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n          <ng-template [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n            <ng-template  [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()\" [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <ng-container *ngIf=\"cell.isItemChoice\">\n        <ng-template [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <sv-ng-selebase-item\n          [showLabel]=\"false\"\n          [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n          [question]=\"cell.question\"\n          [model]=\"cell.item\"\n        ></sv-ng-selebase-item>\n        </ng-template>\n      </ng-container>\n      <div *ngIf=\"cell.isOtherChoice\" [class]=\"cell.question.getCommentAreaCss(true)\" [question]=\"cell.question\" sv-ng-comment-other></div>\n      <div *ngIf=\"cell.showErrorOnBottom && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'top'\" sv-ng-errors></div>\n      <div *ngIf=\"cell.question.isErrorsModeTooltip && cell.question.hasVisibleErrors\" [element]=\"cell.question\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template [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=\"!!cell.requiredText\" [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"] }] });
+  MatrixCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixCellComponent, selector: "sv-ng-matrix-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\" #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=\"!!cell.requiredText\" [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: MatrixCellComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4105,13 +4122,13 @@
       return MatrixRequiredHeader;
   }(BaseAngular));
   MatrixRequiredHeader.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixRequiredHeader, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixRequiredHeader.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: { column: "column", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template><span *ngIf='column.isRenderedRequired' [class]='question.cssClasses.cellRequiredText'>{{ column.requiredText }}</span></ng-template>", isInline: true, styles: [":host { display: none; }"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  MatrixRequiredHeader.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: { column: "column", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template><ng-container *ngIf='column.isRenderedRequired'><span>&nbsp;</span><span [class]='question.cssClasses.cellRequiredText'>{{ column.requiredText }}</span></ng-container></ng-template>", isInline: true, styles: [":host { display: none; }"], 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: MatrixRequiredHeader, decorators: [{
               type: i0.Component,
               args: [{
                       selector: "sv-ng-matrixheaderrequired",
                       styles: [":host { display: none; }"],
-                      template: "<ng-template #template><span *ngIf='column.isRenderedRequired' [class]='question.cssClasses.cellRequiredText'>{{ column.requiredText }}</span></ng-template>"
+                      template: "<ng-template #template><ng-container *ngIf='column.isRenderedRequired'><span>&nbsp;</span><span [class]='question.cssClasses.cellRequiredText'>{{ column.requiredText }}</span></ng-container></ng-template>"
                   }]
           }], propDecorators: { column: [{
                   type: i0.Input
@@ -4140,7 +4157,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" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <tr [class]=\"model.className\" (pointerdown)=\"question.onPointerDown($event, row)\" [attr.data-sv-drop-target-matrix-row]=\"row && row.id\">\n    <sv-ng-matrix-cell\n      [cell]=\"cell\"\n      [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"\n    ></sv-ng-matrix-cell>\n  </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixCellComponent, selector: "sv-ng-matrix-cell", inputs: ["question", "cell"] }], directives: [{ 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" }, 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\">\n    <sv-ng-matrix-cell [cell]=\"cell\" [question]=\"question\"\n      *ngFor=\"let cell of model.cells; trackBy: trackCellBy\"></sv-ng-matrix-cell>\n  </tr>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixCellComponent, selector: "sv-ng-matrix-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: [{