UI: Added default color for mat-hint; Added onTouch event for string items list component

ui-ngx/src/app/shared/components/string-items-list.component.html

@@ -29,6 +29,7 @@
       <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
     </mat-chip-row>
     <input matInput type="text"
+           (blur)="onTouched()"
            placeholder="{{ placeholder }}"
            style="max-width: 300px;min-width: 250px"
            #stringItemInput

ui-ngx/src/app/shared/components/string-items-list.component.ts

@@ -120,8 +120,8 @@ export class StringItemsListComponent implements ControlValueAccessor, OnInit {
     return this.stringItemsForm.get('item');
   }
 
-  private propagateChange = (v: any) => {
+  onTouched = () => {};
-  };
+  private propagateChange: (value: any) => void = () => {};
   private dirty = false;
 
   constructor(private fb: FormBuilder) {
@@ -159,6 +159,7 @@ export class StringItemsListComponent implements ControlValueAccessor, OnInit {
   }
 
   registerOnTouched(fn: any): void {
+    this.onTouched = fn;
   }
 
   setDisabledState(isDisabled: boolean): void {

ui-ngx/src/theme-overwrites.scss

@@ -52,6 +52,11 @@
       }
     }
   }
+  .mat-mdc-form-field {
+    .mat-mdc-form-field-hint-wrapper {
+      color: rgba(0, 0, 0, 0.6);
+    }
+  }
 }
 
 @mixin _mat-button-overwrites($primary, $config-or-theme) {