| OLD | NEW | 
|   1 <!DOCTYPE html> |   1 <!DOCTYPE html> | 
|   2 <!-- |   2 <!-- | 
|   3 Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file |   3 Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file | 
|   4 for details. All rights reserved. Use of this source code is governed by a |   4 for details. All rights reserved. Use of this source code is governed by a | 
|   5 BSD-style license that can be found in the LICENSE file. |   5 BSD-style license that can be found in the LICENSE file. | 
|   6 --> |   6 --> | 
|   7 <html> |   7 <html> | 
|   8 <head> |   8 <head> | 
|   9   <link rel="components" href="editable_label.html"> |   9   <link rel="components" href="editable_label.html"> | 
|  10 </head> |  10 </head> | 
|  11 <body> |  11 <body> | 
|  12 <element name="x-todo-row" extends="li" apply-author-styles> |  12 <element name="x-todo-row" extends="li" apply-author-styles> | 
|  13   <template> |  13   <template> | 
|  14     <div class="todo-item {{_editingClass}} {{_completedClass}}"> |  14     <div class="todo-item {{_editingClass}} {{_completedClass}}"> | 
|  15       <input class="toggle" type="checkbox" bind-checked="todo.done"> |  15       <input class="toggle" type="checkbox" bind-checked="todo.done"> | 
|  16       <x-editable-label id="label" bind-value="todo.task"></x-editable-label> |  16       <x-editable-label id="label" bind-value="todo.task"></x-editable-label> | 
|  17       <button class="destroy" on-click="app.removeTodo(todo)"></button> |  17       <button class="destroy" on-click="app.removeTodo(todo)"></button> | 
|  18     </div> |  18     </div> | 
|  19   </template> |  19   </template> | 
|  20   <script type="application/dart"> |  20   <script type="application/dart"> | 
|  21   import 'package:web_components/web_components.dart'; |  21   import 'package:web_ui/web_ui.dart'; | 
|  22   import 'model.dart'; |  22   import 'model.dart'; | 
|  23  |  23  | 
|  24   class TodoRow extends WebComponent { |  24   class TodoRow extends WebComponent { | 
|  25     Todo todo; |  25     Todo todo; | 
|  26  |  26  | 
|  27     bool get editing => _root.query('#label').xtag.editing; |  27     bool get editing => _root.query('#label').xtag.editing; | 
|  28     String get _completedClass => todo.done ? 'completed' : ''; |  28     String get _completedClass => todo.done ? 'completed' : ''; | 
|  29     String get _editingClass => editing ? 'editing' : ''; |  29     String get _editingClass => editing ? 'editing' : ''; | 
|  30   } |  30   } | 
|  31   </script> |  31   </script> | 
|  32 </element> |  32 </element> | 
|  33 </body> |  33 </body> | 
|  34 </html> |  34 </html> | 
| OLD | NEW |