export const Component = (metadata: {
    selector?: string,
    inputs?: string[],
    outputs?: string[],
    properties?: string[],
    events?: string[],
    host?: {[key: string]: string},
    providers?: any[],
    exportAs?: string,
    moduleId?: string,
    viewProviders?: any[],
    queries?: {[key: string]: any},
    changeDetection?: ChangeDetectionStrategy,
    templateUrl?: string,
    template?: string,
    styleUrls?: string[],
    styles?: string[],
    directives?: Array<Type | any[]>,
    pipes?: Array<Type | any[]>,
    encapsulation?: ViewEncapsulation
  } = {}) => {
  if (typeof __moduleName === 'undefined' && typeof module === 'undefined') {
    throw new Error('Only SystemJS and CommonJS are supported.');
  }
  metadata.moduleId = typeof __moduleName === 'undefined' ? module.id : __moduleName;
  return OriginalDecorator(metadata);
};

var AppComponent = (function () {
    function AppComponent() {
    }
    AppComponent = __decorate([
        core_1.Component({
            selector: "main-app",
            template: "<h1>Hello World!</h1>"
        })
    ], AppComponent);
    return AppComponent;
}());

    },
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    }
])(
    Component({
        selector: 'my-app',
        template: `
            <h1>{{title}}</h1>
            <nav>
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
            </nav>
            <router-outlet></router-outlet>
        `,
        styleUrls: ['app/app.component.css'],
        directives: [ROUTER_DIRECTIVES],
        providers: [
            ROUTER_PROVIDERS,
            HeroService
        ]
    })
    .Class({
        constructor: function() {
            this.title = 'Tour of Heroes';
        }
    })
);

import {Component} from 'angular2/core';

Component({
  selector: 'subject',
  template: 'This is subject'
})
export class MainComponent{

}

import { Component } from 'angular2/core';
import { Router } from 'angular2/router';

import { HeroService } from './hero.service';

export const DashboardComponent = (
    Component({
        selector: 'my-dashboard',
        templateUrl: 'app/dashboard.component.html',
        styleUrls: ['app/dashboard.component.css']
    })
    .Class({      
        constructor: [Router, HeroService, function(router, heroService) {
            this._router = router;
            this._heroService = heroService;
            this.heroes = [];
        }],

        ngOnInit() {
            this._heroService.getHeroes()
                .then(heroes => this.heroes = heroes.slice(1,5));
        }, 

        gotoDetail(hero) {
            let link = ['HeroDetail', { id: hero.id }];
            this._router.navigate(link);
        }
    })
);

/*

import { Component } from 'angular2/core';
import { RouteParams } from 'angular2/router';

import { HeroService } from './hero.service';

export const HeroDetailComponent = (
    Component({
        selector: 'my-hero-detail',
        templateUrl: 'app/hero-detail.component.html',
        styleUrls: ['app/hero-detail.component.css'],
        inputs: ['hero']
    })
    .Class({
        constructor: [HeroService, RouteParams, function(heroService, routeParams) {
            this._heroService = heroService;
            this._routeParams = routeParams;
        }],

        ngOnInit() {
            let id = +this._routeParams.get('id');
            this._heroService.getHero(id)
                .then(hero => this.hero = hero);
        },

        goBack() {
            window.history.back();
        }
    })
);