docs(samples): update Dart user-input sample to match TS

closes #447

public/docs/_examples/user-input/dart/lib/app-component.html

@@ -0,0 +1,28 @@
+<!-- #docregion -->
+<p>
+  <click-me></click-me>
+</p>
+
+<p>
+  <click-me2></click-me2>
+</p>
+
+<h4>Give me some keys!</h4>
+<div><key-up1></key-up1></div>
+
+<h4>keyup loop-back component</h4>
+<div><loop-back></loop-back></div>
+<br><br>
+
+<h4>Give me some more keys!</h4>
+<div><key-up2></key-up2></div>
+
+<h4>Type away! Press [enter] when done.</h4>
+<div><key-up3></key-up3></div>
+
+<h4>Type away! Press [enter] or click elsewhere when done.</h4>
+<div><key-up4></key-up4></div>
+
+<h4>Little Tour of Heroes</h4>
+<p><i>Add a new hero</i></p>
+<div><little-tour></little-tour></div>

public/docs/_examples/user-input/dart/lib/app_component.dart

@@ -0,0 +1,24 @@
+// #docregion
+library user_input.app_component;
+
+import 'package:angular2/angular2.dart';
+import 'package:user_input/click_me_component.dart';
+import 'package:user_input/click_me_component_2.dart';
+import 'package:user_input/loop_back_component.dart';
+import 'package:user_input/key_up_components.dart';
+import 'package:user_input/little_tour_component.dart';
+
+@Component(
+    selector: 'my-app',
+    templateUrl: 'app-component.html',
+    directives: const [
+      ClickMeComponent,
+      ClickMeComponent2,
+      KeyUpComponentV1,
+      KeyUpComponentV2,
+      KeyUpComponentV3,
+      KeyUpComponentV4,
+      LoopBackComponent,
+      LittleTourComponent
+    ])
+class AppComponent {}

public/docs/_examples/user-input/dart/lib/click_me_component.dart

@@ -0,0 +1,18 @@
+// #docregion
+library user_input.click_me_component;
+
+import 'package:angular2/angular2.dart';
+
+// #docregion click-me-component
+@Component(
+    selector: 'click-me',
+    template: '''<button (click)="onClickMe()">Click me!</button>
+    {{clickMessage}}''')
+class ClickMeComponent {
+  String clickMessage = '';
+
+  onClickMe() {
+    clickMessage = 'You are my hero!';
+  }
+}
+// #enddocregion click-me-component

public/docs/_examples/user-input/dart/lib/click_me_component_2.dart

@@ -0,0 +1,19 @@
+// #docregion
+library user_input.click_me_component_2;
+
+import 'package:angular2/angular2.dart';
+
+@Component(
+    selector: 'click-me2',
+    template: '''<button (click)="onClickMe2(\$event)">No! .. Click me!</button>
+    {{clickMessage}}''')
+class ClickMeComponent2 {
+  String clickMessage = '';
+  int clicks = 1;
+
+  onClickMe2(dynamic event) {
+    var evtMsg =
+        event != null ? ' Event target is ' + event.target.tagName : '';
+    clickMessage = ('Click #${clicks++}. ${evtMsg}');
+  }
+}

public/docs/_examples/user-input/dart/lib/key_up_components.dart

@@ -0,0 +1,85 @@
+// #docplaster
+// #docregion
+library user_input.key_up_components;
+
+import 'dart:html';
+
+import 'package:angular2/angular2.dart';
+
+// #docregion key-up-component-1
+@Component(
+    selector: 'key-up1',
+// #docregion key-up-component-1-template
+    template: '''
+      <input (keyup)="onKey(\$event)">
+      <p>{{values}}</p>
+    '''
+// #enddocregion key-up-component-1-template
+    )
+// #docregion key-up-component-1-class, key-up-component-1-class-no-type
+class KeyUpComponentV1 {
+  String values = '';
+
+  // #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
+  /*
+  // #docregion key-up-component-1-class-no-type
+  onKey(dynamic event) {
+    values += event.target.value + ' | ';
+  }
+  // #enddocregion key-up-component-1-class-no-type
+  */
+  // #docregion key-up-component-1-class
+  onKey(KeyboardEvent event) {
+    InputElement el = event.target;
+    values += '${el.value}  | ';
+  }
+// #docregion key-up-component-1-class-no-type
+}
+// #enddocregion key-up-component-1,key-up-component-1-class, key-up-component-1-class-no-type
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-2
+@Component(
+    selector: 'key-up2',
+    template: '''
+      <input #box (keyup)="onKey(box.value)">
+      <p>{{values}}</p>
+    ''')
+class KeyUpComponentV2 {
+  String values = '';
+  onKey(value) {
+    values += '$value | ';
+  }
+}
+// #enddocregion key-up-component-2
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-3
+@Component(
+    selector: 'key-up3',
+    template: '''
+      <input #box (keyup.enter)="values=box.value">
+      <p>{{values}}</p>
+    ''')
+class KeyUpComponentV3 {
+  String values = '';
+}
+// #enddocregion key-up-component-3
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-4
+@Component(
+    selector: 'key-up4',
+    template: '''
+      <input #box
+        (keyup.enter)="values=box.value"
+        (blur)="values=box.value">
+      <p>{{values}}</p>
+    ''')
+class KeyUpComponentV4 {
+  String values = '';
+}
+// #enddocregion key-up-component-4

public/docs/_examples/user-input/dart/lib/little_tour_component.dart

@@ -0,0 +1,29 @@
+// #docregion
+library user_input.little_tour_component;
+
+import 'dart:html';
+
+import 'package:angular2/angular2.dart';
+
+// #docregion little-tour
+@Component(
+    selector: 'little-tour',
+    template: '''
+      <input #newHero
+        (keyup.enter)="addHero(newHero.value)"
+        (blur)="addHero(newHero.value); newHero.value='' ">
+
+      <button (click)=addHero(newHero.value)>Add</button>
+
+      <ul><li *ngFor="#hero of heroes">{{hero}}</li></ul>
+    ''')
+class LittleTourComponent {
+  List<String> heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+
+  void addHero(String newHero) {
+    if (newHero?.length > 0) {
+      heroes.add(newHero);
+    }
+  }
+}
+// #enddocregion little-tour

public/docs/_examples/user-input/dart/lib/loop_back_component.dart

@@ -0,0 +1,14 @@
+// #docregion
+library user_input.loop_back_component;
+
+import 'package:angular2/angular2.dart';
+
+// #docregion loop-back-component
+@Component(
+    selector: 'loop-back',
+    template: '''
+      <input #box (keyup)="0">
+      <p>{{box.value}}</p>
+    ''')
+class LoopBackComponent {}
+// #enddocregion loop-back-component

public/docs/_examples/user-input/dart/pubspec.yaml

@@ -0,0 +1,10 @@
+name: user_input
+description: User Input
+version: 0.0.1
+dependencies:
+  angular2: 2.0.0-beta.0
+  browser: ^0.10.0
+transformers:
+- angular2:
+    platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'
+    entry_points: web/main.dart

public/docs/_examples/user-input/dart/web/index.html

@@ -0,0 +1,12 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>User Input</title>
+    <script defer src="main.dart" type="application/dart"></script>
+    <script defer src="packages/browser/dart.js"></script>
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>

public/docs/_examples/user-input/dart/web/main.dart

@@ -0,0 +1,7 @@
+// #docregion
+import 'package:angular2/bootstrap.dart';
+import 'package:user_input/app_component.dart';
+
+main() {
+  bootstrap(AppComponent);
+}

public/docs/_examples/user-input/dart/web/style.css

@@ -0,0 +1,10 @@
+/* #docregion */
+fieldset {border-style:none}
+img {height: 100px;}
+.box {border: 1px solid black; padding:3px}
+.child-div {margin-left: 1em; font-weight: normal}
+.hidden {display: none}
+.parent-div {margin-top: 1em; font-weight: bold}
+.special {font-weight:bold;}
+.toe {margin-left: 1em; font-style: italic;}
+little-hero {color:blue; font-size: smaller; background-color: Turquoise }