@Component({
  // Public API
  selector: 'selector',
  properties: [],
  events: [],

  // View
  viewActions: []

  // HostElement
  hostSetters: {},
  hostListeners: {},
  hostActions: {},
  hostAttributes: {},
})

// Component annotation
// <prompt question="What is your name?" (answer)="greet($event)"></prompt>
@Component({
  // PUBLIC BINDINGS
  selector: 'prompt',
  properties: ['question'],
  events: ['answer'],

  // VIEW PRIVATE
  commands: ['focus'],
  listen: { 'click': 'ask()' }
})
// View Annotation
@View({
  template: `
    <form (submit)="onAnswer(input.value)" [hidden]="!show">
      {{question}}
      <input #input @focus="input.focus()">
    </form>
  `,
  stylesheets: [],
  directives: []
})
// Component Controller
class Prompt {
  // PUBLIC BINDINGS
  question:string;
  answer:Emitter;

  // VIEW PRIVATE
  show:bool;
  focus:Emitter;

  constructor() {
    this.focus = new Emitter();
    this.success = new Emitter();
  }

  ask() {
    this.show = true;
    this.focus.call();
  }

  onAnswer(value) {
    this.answer.call(value);
    this.show = false;
  }
}