[player] Show validation errors of simple text fields

ViewEncapsulation.None is required for overriding tooltip

projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts

 import {
-  Component, EventEmitter, Input, Output
+  Component, EventEmitter, Input, Output, ViewEncapsulation
 } from '@angular/core';
 import { FormElementComponent } from 'common/directives/form-element-component.directive';
 import {
@@ -15,6 +15,10 @@ import {
            autocapitalize="none"
            autocorrect="off"
            spellcheck="false"
+           [class.text-field-simple-error]="elementFormControl.errors && elementFormControl.touched"
+           [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
+                         (elementFormControl.errors | errorTransform: elementModel) : ''"
+           [matTooltipClass]="{'text-field-simple-error-tooltip': true}"
            [attr.inputmode]="elementModel.showSoftwareKeyboard ? 'none' : 'text'"
            [style.line-height.%]="elementModel.styling.lineHeight"
            [style.color]="elementModel.styling.fontColor"
@@ -31,11 +35,17 @@ import {
            (blur)="focusChanged.emit({ inputElement: input, focused: false })">
   `,
   styles: [
-    '.clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}',
-    'input {width: calc(100% - 2px); height: calc(100% - 2px); vertical-align: top; padding: 0;}',
-    'input:hover {border: 1px solid currentColor;}',
-    'input:focus {outline: 1px solid #3f51b5;}'
-  ]
+    'aspect-text-field-simple .clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}',
+    'aspect-text-field-simple input{width: calc(100% - 2px); height: calc(100% - 2px);}',
+    'aspect-text-field-simple input{vertical-align: top; padding: 0;}',
+    'aspect-text-field-simple input:hover {border: 1px solid currentColor;}',
+    'aspect-text-field-simple input:focus {outline: 1px solid #3f51b5;}',
+    '.text-field-simple-error {outline: 2px solid #f44336 !important;}',
+    '.text-field-simple-error:hover {border: 1px solid  #f44336;}',
+    '.text-field-simple-error-tooltip {border: 1px solid #f44336; margin-top: 8px !important;}',
+    '.text-field-simple-error-tooltip {background-color: white; color: #f44336 !important;}'
+  ],
+  encapsulation: ViewEncapsulation.None // Required for overriding tooltip
 })
 export class TextFieldSimpleComponent extends FormElementComponent {
   @Input() elementModel!: TextFieldSimpleElement;

projects/common/shared.module.ts

@@ -24,7 +24,9 @@ import { HttpClientModule } from '@angular/common/http';
 import { TextComponent } from './components/text/text.component';
 import { ButtonComponent } from './components/button/button.component';
 import { TextFieldComponent } from './components/input-elements/text-field.component';
-import { TextFieldSimpleComponent } from './components/compound-elements/cloze/cloze-child-elements/text-field-simple.component';
+import {
+  TextFieldSimpleComponent
+} from './components/compound-elements/cloze/cloze-child-elements/text-field-simple.component';
 import { TextAreaComponent } from './components/input-elements/text-area.component';
 import { CheckboxComponent } from './components/input-elements/checkbox.component';
 import { DropdownComponent } from './components/input-elements/dropdown.component';
@@ -38,18 +40,26 @@ import { ErrorTransformPipe } from './pipes/error-transform.pipe';
 import { SafeResourceHTMLPipe } from './pipes/safe-resource-html.pipe';
 import { MediaPlayerControlBarComponent }
   from './components/media-elements/media-player-control-bar/media-player-control-bar.component';
-import { MediaPlayerTimeFormatPipe } from './components/media-elements/media-player-control-bar/media-player-time-format.pipe';
+import {
+  MediaPlayerTimeFormatPipe
+} from './components/media-elements/media-player-control-bar/media-player-time-format.pipe';
 import { LikertComponent } from './components/compound-elements/likert/likert.component';
-import { LikertRadioButtonGroupComponent } from './components/compound-elements/likert/likert-radio-button-group.component';
+import {
+  LikertRadioButtonGroupComponent
+} from './components/compound-elements/likert/likert-radio-button-group.component';
 import { ImageMagnifierComponent } from './components/media-elements/image-magnifier.component';
 import { RadioGroupImagesComponent } from './components/input-elements/radio-group-images.component';
 import { DropListComponent } from './components/input-elements/drop-list.component';
 import { ClozeComponent } from './components/compound-elements/cloze/cloze.component';
 import { SliderComponent } from './components/input-elements/slider.component';
 import { SpellCorrectComponent } from './components/input-elements/spell-correct.component';
-import { DropListSimpleComponent } from './components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component';
+import {
+  DropListSimpleComponent
+} from './components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component';
 import { FrameComponent } from './components/frame/frame.component';
-import { ToggleButtonComponent } from './components/compound-elements/cloze/cloze-child-elements/toggle-button.component';
+import {
+  ToggleButtonComponent
+} from './components/compound-elements/cloze/cloze-child-elements/toggle-button.component';
 import { TextMarkingBarComponent } from './components/text/text-marking-bar/text-marking-bar.component';
 import { StyleMarksPipe } from './pipes/styleMarks.pipe';
 import { TextMarkingButtonComponent } from './components/text/text-marking-bar/text-marking-button.component';
@@ -67,6 +77,7 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
     MatCheckboxModule,
     ReactiveFormsModule,
     FormsModule,
+    MatTooltipModule,
     MatIconModule,
     MatFormFieldModule,
     MatInputModule,