Merge pull request #6839 from surveyjs/bug/6758

Remove tooltip errors from multiple text

packages/survey-angular-ui/src/angular-ui.module.ts

@@ -110,6 +110,7 @@ import { PaneldynamicRemoveButtonComponent } from "./components/paneldynamic-act
 import { TimerPanelComponent } from "./components/timer-panel/timer-panel.component";
 import { NotifierComponent } from "./components/notifier/notifier.component";
 import { ComponentsContainerComponent } from "./components-container.component";
+import { MultipleTextRowComponent } from "./questions/multipletextrow.component";
 @NgModule({
   declarations: [
     VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
@@ -126,7 +127,7 @@ import { ComponentsContainerComponent } from "./components-container.component";
     MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
     MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
     CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-    NotifierComponent, ComponentsContainerComponent
+    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent
   ],
   imports: [
     CommonModule, FormsModule
@@ -147,7 +148,7 @@ import { ComponentsContainerComponent } from "./components-container.component";
     MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
     MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
     CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-    NotifierComponent, ComponentsContainerComponent
+    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent
   ],
   providers: [PopupService],
 })

packages/survey-angular-ui/src/angular-ui.ts

@@ -75,8 +75,9 @@ export * from "./utils/safe-html.pipe";
 export * from "./questions/comment.component";
 export * from "./questions/signature.component";
 export * from "./questions/multipletext.component";
-export * from "./errors.component";
 export * from "./questions/multipletextitem.component";
+export * from "./questions/multipletextrow.component";
+export * from "./errors.component";
 export * from "./utils/dynamic.directive";
 export * from "./questions/ranking.component";
 export * from "./questions/ranking-item.component";

packages/survey-angular-ui/src/errors.component.ts

@@ -1,26 +1,14 @@
-import { Component, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { Base, SurveyElement, TooltipManager } from "survey-core";
+import { Component, HostBinding, Input } from "@angular/core";
+import { SurveyElement } from "survey-core";
 
 @Component({
   templateUrl: "./errors.component.html",
   selector: "'[sv-ng-errors]'"
 })
-export class ErrorsComponent implements OnDestroy, OnInit {
+export class ErrorsComponent {
   @Input() element!: SurveyElement | any;
   @Input() location?: String;
-  @ViewChild("errorsContainer", { static: true }) errorsContainerRef!: ElementRef<HTMLDivElement>;
-  private tooltipManager!: TooltipManager;
-  constructor(private viewContainerRef: ViewContainerRef) {}
-  ngOnInit(): void {
-    if (this.location == "tooltip") {
-      this.tooltipManager = new TooltipManager(this.viewContainerRef.element.nativeElement);
-    }
-  }
-  ngOnDestroy() {
-    if (!!this.tooltipManager) {
-      this.tooltipManager.dispose();
-    }
-  }
+  constructor() {}
   @HostBinding("attr.role") get role (): string {
     return "alert";
   }

packages/survey-angular-ui/src/question.component.html

@@ -11,7 +11,6 @@
         <sv-ng-comment [question]="model"></sv-ng-comment>
       </div>
       <div *ngIf="model.showErrorOnBottom && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-      <div *ngIf="model.isErrorsModeTooltip && model.hasVisibleErrors" [element]="model" [location]="'tooltip'" sv-ng-errors></div>
       <div *ngIf="model.hasDescriptionUnderInput" [class]="model.cssDescription" [model]="model.locDescription" sv-ng-string></div>
   </div>
     <div [element]="model" *ngIf="model.hasTitleOnBottom" sv-ng-element-header></div>

packages/survey-angular-ui/src/questions/multipletext.component.html

@@ -1,12 +1,7 @@
 <table [class]="model.cssClasses.root" #contentElement>
   <tbody>
-    <tr
-      *ngFor="let row of model.getRows(); index as rowIndex; trackBy: trackRowBy"
-      [class]="model.cssClasses.row"
-    >
-      <ng-container *ngFor="let item of row; trackBy: trackItemBy" >
-        <td [class]="model.cssClasses.cell" [question]="model" [model]="item" sv-ng-multipletext-item></td>
-      </ng-container>
-    </tr>
+    <ng-container *ngFor="let row of model.getRows(); index as rowIndex; trackBy: trackRowBy">
+      <sv-ng-multipletext-row [model]="row" [question]="model"></sv-ng-multipletext-row>
+    </ng-container>
   </tbody>
-</table>
+</table>

packages/survey-angular-ui/src/questions/multipletext.component.ts

@@ -11,9 +11,6 @@ export class MultipleTextComponent extends QuestionAngular<QuestionMultipleTextM
   trackRowBy = (index: number): string => {
     return this.model.inputId + "rowkey" + index;
   }
-  trackItemBy (_: number, item: MultipleTextItemModel): string {
-    return "item" + item.editor.id;
-  }
 }
 
 AngularComponentFactory.Instance.registerComponent("multipletext-question", MultipleTextComponent);

packages/survey-angular-ui/src/questions/multipletextitem.component.ts

@@ -1,15 +1,38 @@
-import { MultipleTextItemModel, QuestionMultipleTextModel, QuestionTextModel } from "survey-core";
-import { Component, Input } from "@angular/core";
+import { MultipleTextCell, MultipleTextItemModel, QuestionMultipleTextModel, QuestionTextModel } from "survey-core";
+import { Component, DoCheck, Input, OnDestroy } from "@angular/core";
 import { BaseAngular } from "../base-angular";
 
 @Component({
   selector: "'[sv-ng-multipletext-item]'",
   templateUrl: "./mutlipletextitem.component.html"
 })
-export class MultipleTextItemComponent extends BaseAngular<QuestionTextModel> {
+export class MultipleTextItemComponent extends BaseAngular<QuestionTextModel> implements DoCheck, OnDestroy {
   @Input() question!: QuestionMultipleTextModel;
-  @Input() model!: MultipleTextItemModel;
+  @Input() model!: MultipleTextCell;
   protected getModel(): QuestionTextModel {
-    return this.model.editor;
+    if(!this.model.isErrorsCell) {
+      return this.model.item.editor;
+    }
+    return null as any;
+  }
+  public get item(): MultipleTextItemModel {
+    return this.model.item;
+  }
+  public get editor(): QuestionTextModel {
+    return this.model.item.editor;
+  }
+  override ngDoCheck(): void {
+    super.ngDoCheck();
+    if(this.model.isErrorsCell) {
+      this.editor.registerFunctionOnPropertyValueChanged("errors", () => {
+        this.update();
+      }, "__ngSubscription")
+    }
+  }
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    if(this.model.isErrorsCell) {
+      this.editor.unRegisterFunctionOnPropertyValueChanged("errors", "__ngSubscription")    
+    }
   }
 }

packages/survey-angular-ui/src/questions/multipletextrow.component.html

@@ -0,0 +1,7 @@
+<ng-template #template>
+    <tr [class]="question.cssClasses.row" *ngIf="model.isVisible">
+        <ng-container *ngFor="let cell of model.cells; trackBy: trackItemBy">
+            <td [class]="cell.className" [question]="question" [model]="cell" sv-ng-multipletext-item></td>
+        </ng-container>
+    </tr>
+</ng-template>

packages/survey-angular-ui/src/questions/multipletextrow.component.ts

@@ -0,0 +1,19 @@
+import { MultipleTextCell, MultipleTextItemModel, MutlipleTextRow, QuestionMultipleTextModel, QuestionTextModel } from "survey-core";
+import { Component, Input } from "@angular/core";
+import { BaseAngular } from "../base-angular";
+
+@Component({
+  selector: "sv-ng-multipletext-row",
+  templateUrl: "./multipletextrow.component.html",
+  styleUrls: ["../hide-host.scss"]
+})
+export class MultipleTextRowComponent extends BaseAngular<MutlipleTextRow> {
+  @Input() question!: QuestionMultipleTextModel;
+  @Input() model!: MutlipleTextRow;
+  protected getModel(): MutlipleTextRow {
+    return this.model;
+  }
+  trackItemBy (_: number, cell: MultipleTextCell): string {
+    return "item" + cell.item.editor.id;
+  }
+}

packages/survey-angular-ui/src/questions/mutlipletextitem.component.html

@@ -1,18 +1,18 @@
-<label [class]="question.getItemLabelCss(model)">
-  <span [class]="question.getItemTitleCss()">
-    <span *ngIf=" model.editor.isRequireTextBeforeTitle || model.editor.isRequireTextOnStart"
-      [class]="question.cssClasses.requiredText">{{ model.editor.requiredText }}</span>
-    <sv-ng-string [model]="model.locTitle"></sv-ng-string>
-    <span
-      *ngIf="model.editor.isRequireTextAfterTitle"
-      [class]="question.cssClasses.requiredText"
-      >{{ model.editor.requiredText }}</span
-    >
-  </span>
-  <div [class]="question.getItemCss()" (focusin)="model.focusIn()">
-    <div *ngIf="model.editor.showErrorOnTop && model.editor.hasVisibleErrors" [element]="model.editor" sv-ng-errors></div>
-    <sv-ng-text-question [model]="model.editor"></sv-ng-text-question>
-    <div *ngIf="model.editor.showErrorOnBottom && model.editor.hasVisibleErrors" [element]="model.editor" sv-ng-errors></div>
-  </div>
-  <div *ngIf="model.editor.isErrorsModeTooltip && model.editor.hasVisibleErrors" [element]="model.editor" [location]="'tooltip'" sv-ng-errors></div>
-</label>
+<ng-container *ngIf="!model.isErrorsCell">
+  <label [class]="question.getItemLabelCss(item)">
+    <span [class]="question.getItemTitleCss()">
+      <span *ngIf=" item.editor.isRequireTextBeforeTitle || item.editor.isRequireTextOnStart"
+        [class]="question.cssClasses.requiredText">{{ item.editor.requiredText }}</span>
+      <sv-ng-string [model]="item.locTitle"></sv-ng-string>
+      <span *ngIf="item.editor.isRequireTextAfterTitle">&nbsp;</span>
+      <span *ngIf="item.editor.isRequireTextAfterTitle" [class]="question.cssClasses.requiredText" aria-hidden="true">{{
+        item.editor.requiredText }}</span>
+    </span>
+    <div [class]="question.getItemCss()" (focusin)="item.focusIn()">
+      <sv-ng-text-question [model]="item.editor"></sv-ng-text-question>
+    </div>
+  </label>
+</ng-container>
+<ng-container *ngIf="model.isErrorsCell">
+  <div *ngIf="item.editor.hasVisibleErrors" [element]="item.editor" sv-ng-errors></div>
+</ng-container>

packages/survey-vue3-ui/src/Element.vue

@@ -53,11 +53,6 @@
         :element="element"
         :location="'bottom'"
       />
-      <survey-errors
-        v-if="!element.isPanel && element.isErrorsModeTooltip"
-        :element="element"
-        :location="'tooltip'"
-      />
       <div
         v-if="!element.isPanel && (element as Question).hasDescriptionUnderInput"
         :class="element.cssClasses.descriptionUnderInput"

packages/survey-vue3-ui/src/Errors.vue

@@ -30,29 +30,12 @@
 </template>
 
 <script lang="ts" setup>
-import { type PanelModel, type Question, TooltipManager } from "survey-core";
-import { onUnmounted, onUpdated, ref } from "vue";
+import type { PanelModel, Question } from "survey-core";
+import { ref } from "vue";
 
 const props = defineProps<{
   element: Question | PanelModel;
   location?: string;
 }>();
 const root = ref<HTMLElement>();
-let tooltipManager: TooltipManager;
-
-onUpdated(() => {
-  if (props.location == "tooltip" && root.value instanceof HTMLElement) {
-    if (!tooltipManager || root.value !== tooltipManager.tooltipElement) {
-      tooltipManager = new TooltipManager(root.value as HTMLElement);
-    }
-  }
-  if (!(root.value instanceof HTMLElement) && !!tooltipManager) {
-    tooltipManager.dispose();
-  }
-});
-onUnmounted(() => {
-  if (tooltipManager) {
-    tooltipManager.dispose();
-  }
-});
 </script>

packages/survey-vue3-ui/src/Multipletext.vue

@@ -1,15 +1,23 @@
 <template>
   <table :class="question.cssClasses.root" ref="root">
     <tbody>
-      <tr
-        v-for="(row, rowindex) in question.getRows()"
-        :key="question.inputId + 'rowkey' + rowindex"
-        :class="question.cssClasses.row"
+      <template
+        v-for="(row, rowIndex) in question.getRows()"
+        :key="question.inputId + 'rowkey' + rowIndex"
       >
-          <td v-for="item in row" :key="'item' + item.editor.id" :class="question.cssClasses.cell">
-            <survey-multipletext-item :question="question" :item="item"></survey-multipletext-item>
+        <tr :class="question.cssClasses.row" v-if="row.isVisible">
+          <td
+            v-for="cell in row.cells"
+            :key="'item' + cell.item.editor.id"
+            :class="cell.className"
+          >
+            <survey-multipletext-item
+              :question="question"
+              :cell="cell"
+            ></survey-multipletext-item>
           </td>
-      </tr>
+        </tr>
+      </template>
     </tbody>
   </table>
 </template>

packages/survey-vue3-ui/src/MultipletextItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="question.getItemLabelCss(item)">
+  <label v-if="!cell.isErrorsCell" :class="question.getItemLabelCss(item)">
     <span :class="question.getItemTitleCss()">
       <span
         v-if="
@@ -10,8 +10,10 @@
         >{{ item.editor.requiredText }}</span
       >
       <survey-string :locString="item.locTitle" />
+      <span v-if="item.editor.isRequireTextAfterTitle">&nbsp;</span>
       <span
         v-if="item.editor.isRequireTextAfterTitle"
+        aria-hidden="true"
         :class="question.cssClasses.requiredText"
         >{{ item.editor.requiredText }}</span
       >
@@ -21,41 +23,28 @@
       :class="question.getItemCss()"
       v-on:focusin="item.focusIn()"
     >
-      <survey-errors
-        v-if="item.editor.showErrorOnTop"
-        :element="item.editor"
-        :location="'top'"
-      />
       <component :is="getComponentName(item.editor)" :question="item.editor" />
-      <survey-errors
-        v-if="item.editor.showErrorOnBottom"
-        :element="item.editor"
-        :location="'bottom'"
-      />
     </div>
-    <survey-errors
-      v-if="item.editor.isErrorsModeTooltip"
-      :element="item.editor"
-      :location="'tooltip'"
-    />
   </label>
+  <survey-errors v-else :element="item.editor" />
 </template>
 
 <script lang="ts" setup>
 import type {
   Question,
-  MultipleTextItemModel,
   QuestionMultipleTextModel,
+  MultipleTextCell,
 } from "survey-core";
 import { getComponentName as getComponent, useBase } from "./base";
+import { computed } from "vue";
 
 const props = defineProps<{
   question: QuestionMultipleTextModel;
-  item: MultipleTextItemModel;
+  cell: MultipleTextCell;
 }>();
 const getComponentName = (question: Question) => {
   return getComponent(question);
 };
-
-useBase(() => props.item.editor);
+useBase(() => props.cell.item.editor);
+const item = computed(() => props.cell.item);
 </script>

src/defaultCss/defaultV2Css.ts

@@ -318,7 +318,10 @@ export var defaultV2Css = {
     itemTitle: "sd-multipletext__item-title",
     content: "sd-multipletext__content sd-question__content",
     row: "sd-multipletext__row",
-    cell: "sd-multipletext__cell"
+    cell: "sd-multipletext__cell",
+    cellError: "sd-multipletext__cell--error",
+    cellErrorTop: "sd-multipletext__cell--error-top",
+    cellErrorBottom: "sd-multipletext__cell--error-bottom"
   },
   dropdown: {
     root: "sd-selectbase",