diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.scss b/src/core/src/components/keyboard-key/keyboard-key.component.scss index d18c8d7c..69e3c04e 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.scss +++ b/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; + } } } diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.ts b/src/core/src/components/keyboard-key/keyboard-key.component.ts index 137bd080..f130046c 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.ts +++ b/src/core/src/components/keyboard-key/keyboard-key.component.ts @@ -88,6 +88,9 @@ export class MatKeyboardKeyComponent implements OnInit { @Output() keyClick = new EventEmitter(); + @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: diff --git a/src/core/src/components/keyboard/keyboard.component.html b/src/core/src/components/keyboard/keyboard.component.html index 8972e173..5f3b2025 100644 --- a/src/core/src/components/keyboard/keyboard.component.html +++ b/src/core/src/components/keyboard/keyboard.component.html @@ -19,6 +19,7 @@ (altClick)="onAltClick()" (shiftClick)="onShiftClick()" (keyClick)="onKeyClick()" + (nextClick)="onNextClick($event)" > diff --git a/src/core/src/components/keyboard/keyboard.component.ts b/src/core/src/components/keyboard/keyboard.component.ts index 76c38c3a..0055dd39 100644 --- a/src/core/src/components/keyboard/keyboard.component.ts +++ b/src/core/src/components/keyboard/keyboard.component.ts @@ -58,6 +58,7 @@ export class MatKeyboardComponent implements OnInit { shiftClick: EventEmitter = new EventEmitter(); + nextClick: EventEmitter = new EventEmitter(); // returns an observable of the input instance get inputInstance(): Observable { 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 diff --git a/src/core/src/configs/keyboard-icons.config.ts b/src/core/src/configs/keyboard-icons.config.ts index 0dd56476..4319e94f 100644 --- a/src/core/src/configs/keyboard-icons.config.ts +++ b/src/core/src/configs/keyboard-icons.config.ts @@ -6,7 +6,7 @@ const MAT_KEYBOARD_ICONS = new InjectionToken('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]: '', diff --git a/src/core/src/directives/keyboard.directive.ts b/src/core/src/directives/keyboard.directive.ts index 21c6051d..caef87af 100644 --- a/src/core/src/directives/keyboard.directive.ts +++ b/src/core/src/directives/keyboard.directive.ts @@ -28,6 +28,8 @@ export class MatKeyboardDirective implements OnDestroy { @Output() shiftClick: EventEmitter = new EventEmitter(); + @Output() nextClick: EventEmitter = new EventEmitter(); + 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'])