refactor(playground): make playground great again

modules/playground/src/key_events/index.ts

@@ -9,8 +9,6 @@
 import {Component, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-// TODO: remove deep import by reimplementing the event name serialization
-import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events';
 
 @Component({
   selector: 'key-events-app',
@@ -28,17 +26,48 @@ class KeyEventsApp {
   lastKey: string = '(none)';
   shiftEnter: boolean = false;
 
-  onKeyDown(event: any /** TODO #9100 */): void {
-    this.lastKey = KeyEventsPlugin.getEventFullKey(event);
+  onKeyDown(event: KeyboardEvent): void {
+    this.lastKey = KeyEventsApp._getEventFullKey(event);
     event.preventDefault();
   }
 
-  onShiftEnter(event: any /** TODO #9100 */): void {
+  onShiftEnter(event: KeyboardEvent): void {
     this.shiftEnter = true;
     event.preventDefault();
   }
 
   resetShiftEnter(): void { this.shiftEnter = false; }
+
+  /**
+   * Get a more readable version of current pressed keys.
+   * @see KeyEventsPlugin.getEventFullKey
+   */
+  private static _getEventFullKey(event: KeyboardEvent): string {
+    const modifierKeys = ['alt', 'control', 'meta', 'shift'];
+    const modifierKeyGetters: {[key: string]: (event: KeyboardEvent) => boolean} = {
+      'alt': (event: KeyboardEvent) => event.altKey,
+      'control': (event: KeyboardEvent) => event.ctrlKey,
+      'meta': (event: KeyboardEvent) => event.metaKey,
+      'shift': (event: KeyboardEvent) => event.shiftKey
+    };
+
+    let fullKey = '';
+    let key = event.key.toLowerCase();
+    if (key === ' ') {
+      key = 'space';  // for readability
+    } else if (key === '.') {
+      key = 'dot';  // because '.' is used as a separator in event names
+    }
+    modifierKeys.forEach(modifierName => {
+      if (modifierName != key) {
+        const modifierGetter = modifierKeyGetters[modifierName];
+        if (modifierGetter(event)) {
+          fullKey += modifierName + '.';
+        }
+      }
+    });
+    return fullKey + key;
+  }
 }
 
 @NgModule({declarations: [KeyEventsApp], bootstrap: [KeyEventsApp], imports: [BrowserModule]})