Next input focus support

src/core/src/components/keyboard-key/keyboard-key.component.scss

@@ -54,12 +54,27 @@ $mat-keyboard-capslock-shine: #adff2f !default;
     //   }
     // }
     &- {
-      width: 550px !important;
       margin: 0 auto;
     }
 
     &-hide {
-      color: darkgrey;
+      color: black;
+      .material-icons {
+        font-size: 45px;
+        height: 45px;
+      }
+    }
+
+    &-enter {
+      background-color: #74bb24;
+      .material-icons {
+        color: #74bb24;
+        border-radius: 50%;
+        background: #e2f8c9;
+        height: 30px;
+        width: 30px;
+        font-size: 30px;
+      }
     }
   }
 

src/core/src/components/keyboard-key/keyboard-key.component.ts

@@ -88,6 +88,9 @@ export class MatKeyboardKeyComponent implements OnInit {
   @Output()
   keyClick = new EventEmitter<MouseEvent>();
 
+  @Output()
+  nextClick = new EventEmitter();
+
   get lowerKey(): string {
     return `${this.key}`.toLowerCase();
   }
@@ -195,6 +198,7 @@ export class MatKeyboardKeyComponent implements OnInit {
           char = VALUE_NEWLINE;
         } else {
           this.enterClick.emit(event);
+          this.nextClick.emit(this);
           // TODO: trigger submit / onSubmit / ngSubmit properly (for the time being this has to be handled by the user himself)
           // console.log(this.control.ngControl.control.root)
           // this.input.nativeElement.form.submit();
@@ -217,6 +221,7 @@ export class MatKeyboardKeyComponent implements OnInit {
 
       case KeyboardClassKey.Hide:
         this._keyboardService.dismiss();
+        this.input.nativeElement.blur();
         break;
 
       default:

src/core/src/components/keyboard/keyboard.component.html

@@ -19,6 +19,7 @@
                           (altClick)="onAltClick()"
                           (shiftClick)="onShiftClick()"
                           (keyClick)="onKeyClick()"
+                          (nextClick)="onNextClick($event)"
         ></mat-keyboard-key>
       </ng-container>
     </div>

src/core/src/components/keyboard/keyboard.component.ts

@@ -58,6 +58,7 @@ export class MatKeyboardComponent implements OnInit {
 
   shiftClick: EventEmitter<void> = new EventEmitter<void>();
 
+  nextClick: EventEmitter<Event> = new EventEmitter<Event>();
   // returns an observable of the input instance
   get inputInstance(): Observable<ElementRef | null> {
     return this._inputInstance$.asObservable();
@@ -221,6 +222,11 @@ export class MatKeyboardComponent implements OnInit {
     this.enterClick.next();
   }
 
+  onNextClick(keyBoardInstance) {
+    // notify subscribers
+    this.nextClick.next(keyBoardInstance);
+  }
+
   /**
    * simulates clicking `CapsLock` key
    * @param targetState

src/core/src/configs/keyboard-icons.config.ts

@@ -6,7 +6,7 @@ const MAT_KEYBOARD_ICONS = new InjectionToken<IKeyboardIcons>('keyboard-icons.co
 const keyboardIcons: IKeyboardIcons = {
   [KeyboardClassKey.Bksp]: 'keyboard_backspace',
   [KeyboardClassKey.Caps]: '',
-  [KeyboardClassKey.Enter]: 'keyboard_return',
+  [KeyboardClassKey.Enter]: 'check',
   [KeyboardClassKey.Shift]: 'keyboard_arrow_up',
   [KeyboardClassKey.Space]: ' ',
   [KeyboardClassKey.Tab]: '',

src/core/src/directives/keyboard.directive.ts

@@ -28,6 +28,8 @@ export class MatKeyboardDirective implements OnDestroy {
 
   @Output() shiftClick: EventEmitter<void> = new EventEmitter<void>();
 
+  @Output() nextClick: EventEmitter<Event> = new EventEmitter<Event>();
+
   constructor(private _elementRef: ElementRef,
               private _keyboardService: MatKeyboardService,
               @Optional() @Self() private _control?: NgControl) {}
@@ -57,6 +59,7 @@ export class MatKeyboardDirective implements OnDestroy {
     this._keyboardRef.instance.capsClick.subscribe(() => this.capsClick.next());
     this._keyboardRef.instance.altClick.subscribe(() => this.altClick.next());
     this._keyboardRef.instance.shiftClick.subscribe(() => this.shiftClick.next());
+    this._keyboardRef.instance.nextClick.subscribe((keyboardInstance) => this.nextClick.next(keyboardInstance));
   }
 
   @HostListener('blur', ['$event'])