add blur events to fabric text field components (#98)

Continuing work done in #83 by @MarcOne68

Author: bengry

libs/fabric/src/lib/components/text-field/base-text-field.component.ts

@@ -65,8 +65,9 @@ export class FabBaseTextFieldComponent extends ReactWrapperComponent<ITextFieldP
   @Input() renderPrefix?: InputRendererOptions<ITextFieldProps>;
   @Input() renderSuffix?: InputRendererOptions<ITextFieldProps>;
 
-  @Output() readonly onFocus = new EventEmitter<FocusEvent>();
   @Output() readonly onClick = new EventEmitter<MouseEvent>();
+  @Output() readonly onFocus = new EventEmitter<FocusEvent>();
+  @Output() readonly onBlur = new EventEmitter<Event>();
 
   @Output() readonly onChange = new EventEmitter<{ event: Event; newValue?: string }>();
   @Output() readonly onBeforeChange = new EventEmitter<{ newValue: any }>();
@@ -104,9 +105,12 @@ export class FabBaseTextFieldComponent extends ReactWrapperComponent<ITextFieldP
     this.onFocus.emit(ev && ev.nativeEvent);
   }
 
+  onBlurHandler(ev?: React.SyntheticEvent) {
+    this.onBlur.emit(ev && ev.nativeEvent);
+  }
+
   onChangeHandler(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) {
     this.onChange.emit({ event: event.nativeEvent, newValue });
-
     this.valueChange.emit(newValue);
   }
 

libs/fabric/src/lib/components/text-field/masked-text-field.component.ts

@@ -60,6 +60,7 @@ import { FabBaseTextFieldComponent } from './base-text-field.component';
       [NotifyValidationResult]="onNotifyValidationResultHandler"
       (onClick)="onClickHandler($event)"
       (onFocus)="onFocusHandler($event)"
+      (onBlur)="onBlurHandler($event)"
     >
     </MaskedTextField>
   `,

libs/fabric/src/lib/components/text-field/text-field.component.ts

@@ -60,6 +60,7 @@ import { FabBaseTextFieldComponent } from './base-text-field.component';
       [NotifyValidationResult]="onNotifyValidationResultHandler"
       (onClick)="onClickHandler($event)"
       (onFocus)="onFocusHandler($event)"
+      (onBlur)="onBlurHandler($event)"
     >
     </TextField>
   `,