fix(preview): mouse events do not trigger

src/client/build/shop/preview/item.component.ts

@@ -15,8 +15,8 @@ import {Item} from '../../item';
 
 export class ItemComponent {
   @Input() item: Item;
-  @Output() itemSelected: EventEmitter<any> = new EventEmitter<any>();
-  @Output() itemPicked: EventEmitter<any> = new EventEmitter<any>();
+  @Output() itemSelected: EventEmitter<Item> = new EventEmitter<Item>();
+  @Output() itemPicked: EventEmitter<Item> = new EventEmitter<Item>();
 
   selectItem(item: Item) {
     this.itemSelected.emit(item);

src/client/build/shop/preview/items-from.component.ts

@@ -1,23 +1,35 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 
+import {Item} from '../../item';
 import {ItemBundle} from './item-bundle';
 
 @Component({
   selector: 'lb-items-from',
   template: `
     <div *ngFor="let bundle of items">
       <hr class="up">
-      <lb-item [item]="bundle.item" [attr.title]="bundle.item.name"></lb-item>
+      <lb-item [item]="bundle.item" [attr.title]="bundle.item.name"
+               (itemSelected)="selectItem($event)"
+               (itemPicked)="pickItem($event)"></lb-item>
       <hr *ngIf="bundle.children" class="down">
       <lb-items-from [items]="bundle.children"
-                  (itemSelected)="itemSelected.emit($event)"
-                  (itemPicked)="itemPicked.emit($event)">
+                     (itemSelected)="selectItem($event)"
+                     (itemPicked)="pickItem($event)">
       </lb-items-from>
     </div>`
 })
 
 export class ItemsFromComponent {
   @Input() items: Array<ItemBundle>;
-  @Output() itemSelected: EventEmitter<any> = new EventEmitter<any>();
-  @Output() itemPicked: EventEmitter<any> = new EventEmitter<any>();
+  @Output() itemSelected: EventEmitter<Item> = new EventEmitter<Item>();
+  @Output() itemPicked: EventEmitter<Item> = new EventEmitter<Item>();
+
+  selectItem(item: Item) {
+    this.itemSelected.emit(item);
+  }
+
+  pickItem(item: Item) {
+    this.itemPicked.emit(item);
+    return false;  // stop context menu from appearing
+  }
 }

src/client/build/shop/preview/preview.component.ts

@@ -11,21 +11,21 @@ import {ItemBundle} from './item-bundle';
       <template ngFor let-item [ngForOf]="itemsInto">
         <lb-item [item]="item"
               [attr.title]="item.name"
-              (itemSelected)="selectItem(item)"
-              (itemPicked)="itemPicked">
+              (itemSelected)="selectItem($event)"
+              (itemPicked)="pickItem($event)">
         </lb-item>
       </template>
     </div>
     <div class="tree">
       <div class="item" *ngIf="item">
         <h2>{{item.name}}</h2>
-        <lb-item [item]="item" (itemPicked)="itemPicked"></lb-item>
+        <lb-item [item]="item" (itemPicked)="pickItem($event)"></lb-item>
       </div>
       <div class="from">
         <hr *ngIf="itemsFrom?.length" class="down">
         <lb-items-from [items]="itemsFrom"
                     (itemSelected)="selectItem($event)"
-                    (itemPicked)="itemPicked">
+                    (itemPicked)="pickItem($event)">
         </lb-items-from>
       </div>
       <p class="description" [innerHTML]="description">loading..</p>
@@ -35,7 +35,7 @@ import {ItemBundle} from './item-bundle';
 export class PreviewComponent implements OnChanges {
   @Input() item: Item;
   @Input() items: Array<Item>;
-  @Output() itemPicked: EventEmitter<any> = new EventEmitter<any>();
+  @Output() itemPicked: EventEmitter<Item> = new EventEmitter<Item>();
 
   itemsFrom: Array<ItemBundle>|undefined = undefined;
   itemsInto: Array<Item>|undefined = undefined;

src/client/build/shop/shop.component.ts

@@ -2,6 +2,7 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 
 import {LolApiService} from '../../services/lolapi.service';
 import {ToIterablePipe} from '../../shared/to-iterable.pipe';
+import {Item} from '../item';
 
 @Component({
   selector: 'lb-shop',
@@ -47,16 +48,16 @@ import {ToIterablePipe} from '../../shared/to-iterable.pipe';
         </div>
       </div>
       <div class="right">
-        <lb-preview [item]="pickedItem"
+        <lb-preview [item]="selectedItem"
                  [items]="items | lbMap:11 | lbChampion:123"
-                 (itemPicked)="pickItem(item)">
+                 (itemPicked)="pickItem($event)">
         </lb-preview>
       </div>
     </div>`
 })
 
 export class ShopComponent implements OnInit {
-  @Output() itemPicked: EventEmitter<any> = new EventEmitter<any>();
+  @Output() itemPicked: EventEmitter<Item> = new EventEmitter<Item>();
 
   loading: boolean = true;
   error: boolean = false;
@@ -65,9 +66,9 @@ export class ShopComponent implements OnInit {
   name: string;
 
   data: Object;
-  items: Array<any> = [];
-  pickedItem: Object;
-  private originalItems: Array<any> = [];
+  items: Array<Item> = [];
+  selectedItem: Item;
+  private originalItems: Array<Item> = [];
 
   constructor(private lolApi: LolApiService) {}
 
@@ -103,12 +104,12 @@ export class ShopComponent implements OnInit {
     }
   }
 
-  selectItem(pickedItem: Object) {
-    this.pickedItem = pickedItem;
+  selectItem(item: Item) {
+    this.selectedItem = item;
   }
 
-  pickItem(pickedItem: Object) {
-    this.itemPicked.emit(pickedItem);
+  pickItem(item: Item) {
+    this.itemPicked.emit(item);
     return false;  // stop context menu from appearing
   }