.

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

@@ -8,21 +8,24 @@ import { Component, Input, ChangeDetectionStrategy, trigger, style, animate, tra
     //changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [
         trigger('animateKey', [
-          state('in', style({
+            transition('void => in', [
-              'transform': 'translateX(0)',
-              'opacity': '1',
-          })),
-          transition(':enter', [
                 style({
-                  'transform': 'translateX(25px)',
+                    transform: 'translateX(25px)',
-                  'opacity': '0',
+                    opacity: '0',
                 }),
-              animate('250ms ease-out')
+                animate('250ms ease-out', style({
+                    transform: 'translateX(0)',
+                    opacity: '1',
+                }))
             ]),
-          transition(':leave', [
+            transition('in => void', [
+                style({
+                    transform: 'translateX(0)',
+                    opacity: '1',
+                }),
                 animate('250ms ease-in', style({
-                  'transform': 'translateX(25px)',
+                    transform: 'translateX(25px)',
-                  'opacity': '0',
+                    opacity: '0',
                 }))
             ])
         ])
@@ -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,12 +99,14 @@ export class HotkeysService {
         this.currentKeystrokes.push({ event: nativeEvent, time: performance.now() })
 
         this.zone.run(() => {
+            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",