[player] Show validation errors of spell simple drop lists

projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts

@@ -14,6 +14,7 @@ import { DragNDropValueObject } from 'common/models/elements/element';
     <div class="list-container">
         <!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving class style.-->
       <div class="list"
+           [class.errors]="elementFormControl.errors && elementFormControl.touched"
            [class.dropList-highlight]="elementModel.highlightReceivingDropList"
            [style.border-color]="elementModel.highlightReceivingDropListColor"
            [style.border-width.px]="elementModel.highlightReceivingDropList ? 2 : 0"
@@ -24,6 +25,8 @@ import { DragNDropValueObject } from 'common/models/elements/element';
            [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
            [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
            [style.backgroundColor]="elementModel.styling.backgroundColor"
+           [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
+                         (elementFormControl.errors | errorTransform: elementModel) : ''"
            cdkDropList
            [id]="elementModel.id"
            [cdkDropListData]="this"
@@ -62,10 +65,6 @@ import { DragNDropValueObject } from 'common/models/elements/element';
           </div>
         </ng-template>
       </div>
-      <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
-                 class="error-message">
-        {{elementFormControl.errors | errorTransform: elementModel}}
-      </mat-error>
     </div>
   `,
   styles: [
@@ -74,6 +73,7 @@ import { DragNDropValueObject } from 'common/models/elements/element';
     '.item {border-radius: 5px; padding: 0 5px; height: 100%; text-align: center;}',
     '.item:not(:last-child) {margin-bottom: 5px;}',
     '.item:active {cursor: grabbing}',
+    '.errors {border: 2px solid #f44336 !important;}',
     '.error-message {font-size: 75%; margin-top: 10px;}',
     '.cdk-drag-preview {padding: 8px 20px; border-radius: 10px}',
     '.drag-placeholder {background-color: lightgrey; border: dotted 3px #999;}',
@@ -81,7 +81,10 @@ import { DragNDropValueObject } from 'common/models/elements/element';
     '.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
 
     '.dropList-highlight.cdk-drop-list-receiving {border: solid;}',
-    '.dropList-highlight.cdk-drop-list-dragging {border: solid;}'
+    '.dropList-highlight.cdk-drop-list-dragging {border: solid;}',
+
+    '::ng-deep .mat-tooltip {border: 1px solid #f44336; margin-top: 8px !important;}',
+    '::ng-deep .mat-tooltip {background-color: white; color: #f44336 !important;}'
   ]
 })
 export class DropListSimpleComponent extends FormElementComponent {
@@ -103,10 +106,12 @@ export class DropListSimpleComponent extends FormElementComponent {
     if (!this.elementModel.readOnly) {
       if (event.previousContainer === event.container) {
         moveItemInArray(event.container.data.elementFormControl.value as unknown as DragNDropValueObject[],
-          event.previousIndex, event.currentIndex);
+          event.previousIndex,
+          event.currentIndex);
         this.elementFormControl.setValue(
           (event.container.data.elementFormControl.value as DragNDropValueObject[])
         );
+        event.container.data.elementFormControl.markAsTouched();
       } else {
         transferArrayItem(
           event.previousContainer.data.elementFormControl.value as unknown as DragNDropValueObject[],
@@ -121,6 +126,8 @@ export class DropListSimpleComponent extends FormElementComponent {
       this.elementFormControl.setValue(
         (event.container.data.elementFormControl.value as DragNDropValueObject[])
       );
+      event.container.data.elementFormControl.markAsTouched();
+      event.previousContainer.data.elementFormControl.markAsTouched();
     }
   }