.

app/src/components/hotkeyDisplay.pug

@@ -1,7 +1,7 @@
 .stroke(*ngFor='let stroke of model')
     .key-container(
         *ngFor='let key of splitKeys(stroke); let isLast = last; trackBy: key',
-        @animateKey
+        [@animateKey]='animate ? "in" : ""'
     )
         .key {{key}}
         .plus(*ngIf='!isLast') +

app/src/components/hotkeyDisplay.ts

@@ -2,31 +2,34 @@ import { Component, Input, ChangeDetectionStrategy, trigger, style, animate, tra
 
 
 @Component({
-  selector: 'hotkey-display',
-  template: require('./hotkeyDisplay.pug'),
-  styles: [require('./hotkeyDisplay.less')],
-  //changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-      trigger('animateKey', [
-          state('in', style({
-              'transform': 'translateX(0)',
-              'opacity': '1',
-          })),
-          transition(':enter', [
-              style({
-                  'transform': 'translateX(25px)',
-                  'opacity': '0',
-              }),
-              animate('250ms ease-out')
-          ]),
-          transition(':leave', [
-              animate('250ms ease-in', style({
-                  'transform': 'translateX(25px)',
-                  'opacity': '0',
-              }))
-          ])
-      ])
-  ]
+    selector: 'hotkey-display',
+    template: require('./hotkeyDisplay.pug'),
+    styles: [require('./hotkeyDisplay.less')],
+    //changeDetection: ChangeDetectionStrategy.OnPush,
+    animations: [
+        trigger('animateKey', [
+            transition('void => in', [
+                style({
+                    transform: 'translateX(25px)',
+                    opacity: '0',
+                }),
+                animate('250ms ease-out', style({
+                    transform: 'translateX(0)',
+                    opacity: '1',
+                }))
+            ]),
+            transition('in => void', [
+                style({
+                    transform: 'translateX(0)',
+                    opacity: '1',
+                }),
+                animate('250ms ease-in', style({
+                    transform: 'translateX(25px)',
+                    opacity: '0',
+                }))
+            ])
+        ])
+    ]
 })
 export class HotkeyDisplayComponent {
     splitKeys(keys: string): string[] {
@@ -34,4 +37,5 @@ export class HotkeyDisplayComponent {
     }
 
     @Input() model: string[]
+    @Input() animate = false
 }

app/src/components/hotkeyInput.less

@@ -1,6 +1,6 @@
 :host {
     display: inline-block;
-    padding: 5px 10px;
+    padding: 5px;
 
     transition: 0.125s all;
 

app/src/components/hotkeyInputModal.pug

@@ -1,7 +1,7 @@
 div.modal-body
     label Press the key now
     .input
-        hotkey-display([model]='value')
+        hotkey-display([model]='value', [animate]='true')
 
     .timeout
         div([style.width]='timeoutProgress + "%"')

app/src/components/hotkeyInputModal.ts

@@ -44,9 +44,11 @@ export class HotkeyInputModalComponent {
                 this.modalInstance.close(this.value)
             }
         }, 25)
+        this.hotkeys.disable()
     }
 
     ngOnDestroy () {
+        this.hotkeys.enable()
         clearInterval(this.keyTimeoutInterval)
     }
 

app/src/services/hotkeys.ts

@@ -57,6 +57,7 @@ export class HotkeysService {
     matchedHotkey = new EventEmitter<string>()
     globalHotkey = new EventEmitter()
     private currentKeystrokes: EventBufferEntry[] = []
+    private disabledLevel = 0
 
     constructor(
         private zone: NgZone,
@@ -98,11 +99,13 @@ export class HotkeysService {
         this.currentKeystrokes.push({ event: nativeEvent, time: performance.now() })
 
         this.zone.run(() => {
-            let matched = this.getCurrentFullyMatchedHotkey()
-            if (matched) {
-                console.log('Matched hotkey', matched)
-                this.matchedHotkey.emit(matched)
-                this.clearCurrentKeystrokes()
+            if (this.isEnabled()) {
+                let matched = this.getCurrentFullyMatchedHotkey()
+                if (matched) {
+                    console.log('Matched hotkey', matched)
+                    this.matchedHotkey.emit(matched)
+                    this.clearCurrentKeystrokes()
+                }
             }
             this.key.emit(nativeEvent)
         })
@@ -179,4 +182,17 @@ export class HotkeysService {
     getHotkeyDescription (id: string) : HotkeyDescription {
         return HOTKEYS.filter((x) => x.id == id)[0]
     }
+
+    enable () {
+        this.disabledLevel--
+    }
+
+    disable () {
+        this.disabledLevel++
+    }
+
+    isEnabled () {
+        return this.disabledLevel == 0
+    }
+
 }

package.json

@@ -25,7 +25,7 @@
     "typings": "2.0.0",
     "url-loader": "^0.5.7",
     "val-loader": "^0.5.0",
-    "webpack": "2.2.0-rc.0"
+    "webpack": "2.2.0-rc.4"
   },
   "build": {
     "appId": "com.elements.benchmark",