fix($event): Fix the $event local within the '(event)' expression to properly match Angular 2.

The $event local should now properly reflect either:
- The DOM event object for normal events such as (click), (keyup), etc
- The Output payload for @Output-based events

fixes #88

BREAKING CHANGE:

Before:
Previously the `$event.detail` property was needed to access the @output's payload.

After:
Now you access the payload directly with just `$event`.

Author: timkindberg

API.md

@@ -251,7 +251,7 @@ Every input can be bound in three different ways, just like Angular 2:
 
 ###### Output Usage
 
-Every output can be listened for using the `(event)="handler()"` syntax.
+Every output can be listened for using the `(event)="handler()"` syntax. The `$event` var can be used your expression like this, `(event)="handler($event)"`, and will either be a reference to your output's payload for custom outputs, or a reference to the DOM event object for standard DOM events.
 
 **Important:** We do **not** support the optional `on-event` syntax.
 
@@ -272,6 +272,11 @@ class MenuDropdown {
 }
 ```
 
+Then you'd use it like so:
+```html
+<menu-dropdown (option-select)="ctrl.optionSelected($event)"></menu-dropdown>
+```
+
 ## Component Life Cycle Hooks
 
 Life cycle hooks are methods added to a Component or Directive. If the hook is present then it will be fired at the designated time. Read about each hook and when and why you would use it.

lib/decorators/component.spec.ts

@@ -768,12 +768,11 @@ describe('@Component', function(){
 					directives: [Child],
 					template: `
 						<h1 class="greeting">{{ctrl.foo}} World!</h1>
-						<child [foo]="ctrl.foo" (foo-changed)="ctrl.fooChanged($event)"></child>
+						<child [foo]="ctrl.foo" (foo-changed)="ctrl.foo=$event"></child>
 					`
 				})
 				class Parent {
 					foo = "Hello";
-					fooChanged($event) { this.foo = $event.detail; }
 				}
 
 				let fixture = quickFixture({
@@ -943,13 +942,13 @@ describe('@Component', function(){
 				fixture.debugElement.componentInstance.bar.should.be.true;
 			});
 
-			it('passes along event detail via dom event', () => {
+			it('sets $event to dom event', () => {
 				@Component({ selector: 'foo', template: 'x', outputs: ['output'] })
 				class Foo { }
 
 				let fixture = quickFixture({
 					directives: [Foo],
-					template: `<foo ng-init="ctrl.bar=false" (output)="ctrl.bar=$event.detail"></foo>`
+					template: `<foo ng-init="ctrl.bar=false" (output)="ctrl.bar=$event"></foo>`
 				});
 
 				fixture.debugElement.componentInstance.bar.should.be.false;
@@ -959,7 +958,7 @@ describe('@Component', function(){
 				fixture.debugElement.componentViewChildren[0].nativeElement.dispatchEvent(new CustomEvent('output', {detail}));
 				this.clock.tick();
 
-				fixture.debugElement.componentInstance.bar.should.eql('hello');
+				fixture.debugElement.componentInstance.bar.detail.should.eql('hello');
 			});
 
 			it('creates a directive triggered by event emitter', () => {
@@ -1000,15 +999,15 @@ describe('@Component', function(){
 				fixture.debugElement.componentInstance.bar.should.be.true;
 			});
 
-			it('passes along event detail via event emitter', () => {
+			it('sets $event to payload from event emitter', () => {
 				@Component({ selector: 'foo', template: 'x', outputs: ['output'] })
 				class Foo {
 					output = new EventEmitter();
 				}
 
 				let fixture = quickFixture({
 					directives: [Foo],
-					template: `<foo ng-init="ctrl.bar=false" (output)="ctrl.bar=$event.detail"></foo>`
+					template: `<foo ng-init="ctrl.bar=false" (output)="ctrl.bar=$event"></foo>`
 				});
 
 				fixture.debugElement.componentInstance.bar.should.be.false;

lib/decorators/input-output.spec.ts

@@ -404,12 +404,11 @@ describe('@Input Decorator', function(){
 				directives: [Child],
 				template: `
 					<h1 class="greeting">{{ctrl.foo}} World!</h1>
-					<child [foo]="ctrl.foo" (foo-changed)="ctrl.fooChanged($event)"></child>
+					<child [foo]="ctrl.foo" (foo-changed)="ctrl.foo=$event"></child>
 				`
 			})
 			class Parent {
 				foo = "Hello";
-				fooChanged($event) { this.foo = $event.detail; }
 			}
 
 			fixture = quickFixture({
@@ -608,7 +607,7 @@ describe('@Output Decorator', function(){
 
 			let fixture = quickFixture({
 				directives: [Foo],
-				template: `<foo ng-init="ctrl.bar=false" (output)="ctrl.bar=$event.detail"></foo>`
+				template: `<foo ng-init="ctrl.bar=false" (output)="ctrl.bar=$event"></foo>`
 			});
 
 			fixture.debugElement.componentInstance.bar.should.be.false;
@@ -618,7 +617,7 @@ describe('@Output Decorator', function(){
 			fixture.debugElement.componentViewChildren[0].nativeElement.dispatchEvent(new CustomEvent('output', {detail}));
 			this.clock.tick();
 
-			fixture.debugElement.componentInstance.bar.should.eql('hello');
+			fixture.debugElement.componentInstance.bar.detail.should.eql('hello');
 		});
 
 		it('creates a directive triggered by event emitter', () => {
@@ -667,7 +666,7 @@ describe('@Output Decorator', function(){
 
 			let fixture = quickFixture({
 				directives: [Foo],
-				template: `<foo ng-init="ctrl.bar=false" (output)="ctrl.bar=$event.detail"></foo>`
+				template: `<foo ng-init="ctrl.bar=false" (output)="ctrl.bar=$event"></foo>`
 			});
 
 			fixture.debugElement.componentInstance.bar.should.be.false;

lib/events/events.spec.ts

@@ -34,7 +34,36 @@ describe('Auto-generated Event Directives', function(){
       asserts.should.eql(allEvents.length);
     });
 
-    xit('bubbles the events', () => {
+    it('sets $event local to DOM event', () => {
+      let fixture = quickFixture({
+        template: `
+        <div ng-init="ctrl.evt=false">
+          <button (click)="ctrl.evt=$event">Click Me</button>
+        </div>
+        `
+      });
+
+      fixture.debugElement.componentInstance.evt.should.be.false;
+      fixture.debugElement.find('button').nativeElement.click();
+      fixture.debugElement.componentInstance.evt.should.be.instanceOf(MouseEvent);
+    });
+
+    it('sets $event local hidden detail._output property if present', () => {
+      let fixture = quickFixture({
+        template: `
+        <div ng-init="ctrl.evt=false">
+          <button (click)="ctrl.evt=$event">Click Me</button>
+        </div>
+        `
+      });
+
+      fixture.debugElement.componentInstance.evt.should.be.false;
+      let event = new CustomEvent('click', { detail: { _output: 'foo' }});
+      fixture.debugElement.find('button').nativeElement.dispatchEvent(event);
+      fixture.debugElement.componentInstance.evt.should.eql('foo');
+    });
+
+    it.skip('bubbles the events', () => {
       let fixture = quickFixture({
         template: `
         <div ng-init="ctrl.clicked=false" (click)="ctrl.clicked=true">

lib/events/events.ts

@@ -48,24 +48,22 @@ function resolve(): any[]{
       public expression: any;
 
       constructor($parse: ng.IParseService, public $element: JQuery, $attrs: ng.IAttributes, public $scope: ng.IScope){
-
         let { name: attrName } = parseSelector(selector);
         this.expression = $parse($attrs[attrName]);
         $element.on(event, e => this.eventHandler(e));
         $scope.$on('$destroy', () => this.onDestroy());
       }
 
       eventHandler($event: any = {}){
-        let detail = $event.detail;
-        
-        if(!detail && $event.originalEvent && $event.originalEvent.detail){
-          detail = $event.originalEvent.detail;
+        if ($event.detail && $event.detail._output !== undefined) {
+          $event = $event.detail._output;
         }
-        else if(!detail){
-          detail = {};
+
+        if($event.originalEvent && $event.originalEvent.detail && $event.originalEvent.detail._output) {
+          $event = $event.detail._output;
         }
-        
-        this.expression(this.$scope, Object.assign(detail, { $event }));
+
+        this.expression(this.$scope, {$event});
         this.$scope.$applyAsync();
       }
 

lib/properties/outputs-builder.ts

@@ -20,7 +20,7 @@ export default function(instance: any, element: INgForwardJQuery, $scope: ng.ISc
   // dispatch a bubbling event onto the element
   const create = (eventKey: string, emitter: EventEmitter) => {
     return emitter.subscribe((data: any) => {
-      let event = new CustomEvent(eventKey, { detail: data, bubbles: false });
+      let event = new CustomEvent(eventKey, { detail: {_output: data}, bubbles: false });
       element[0].dispatchEvent(event);
     });
   };

lib/tests/utils.ts

@@ -16,5 +16,6 @@ export function quickFixture({
 
   let builder =  new tcb.TestComponentBuilder();
 
+  //noinspection TypeScriptUnresolvedFunction
   return builder.create(Test);
 };