From feabd268fcb7cf1a7ce7350d4a8230bc43d3be00 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Fri, 1 May 2015 06:48:52 -0700
Subject: [PATCH 01/13] restructure directories

---
 public/_includes/_scripts-include.jade        |   7 +-
 public/about/index.jade                       |   2 +-
 .../js/controllers/app-controller.js          |  32 +++
 public/resources/js/directives/bio.js         |  48 +++++
 public/resources/js/directives/code-tabs.js   |  72 +++++++
 public/resources/js/directives/code.js        |  23 +++
 public/resources/js/site.js                   | 183 ------------------
 7 files changed, 182 insertions(+), 185 deletions(-)
 create mode 100644 public/resources/js/controllers/app-controller.js
 create mode 100644 public/resources/js/directives/bio.js
 create mode 100644 public/resources/js/directives/code-tabs.js
 create mode 100644 public/resources/js/directives/code.js
 delete mode 100644 public/resources/js/site.js

diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index 1ff4c4aad1..43ea0e0f5f 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -13,8 +13,13 @@ script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.
 script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
 
 
-
+<!-- Angular.io Site JS -->
 script(src="/resources/js/site.js")
+script(src="/resources/js/controllers/app-controller.js")
+script(src="/resources/js/directives/bio.js")
+script(src="/resources/js/directives/code.js")
+script(src="/resources/js/directives/code-tabs.js")
+
 
 <!-- GA -->
 script.
diff --git a/public/about/index.jade b/public/about/index.jade
index bcb00972fa..f12affab52 100644
--- a/public/about/index.jade
+++ b/public/about/index.jade
@@ -19,7 +19,7 @@
   <!-- BIO CARDS -->
   for person, name in bios
     .c3
-      md-card(class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}"  data-name="#{person.name}" ng-click="showBio($event)")
+      md-card(bio class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}"  data-name="#{person.name}" ng-click="showBio($event)")
         header
           image(src="#{person.picture}" alt="#person.name")
 
diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
new file mode 100644
index 0000000000..7ecbda9bbc
--- /dev/null
+++ b/public/resources/js/controllers/app-controller.js
@@ -0,0 +1,32 @@
+/*
+* Apllication Controller
+*
+*/
+
+angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
+
+  $scope.showDocsNav = false;
+  $scope.showMainNav = false;
+  $scope.showMenu = false;
+
+  // TOGGLE MAIN NAV (TOP) ON MOBILE
+  $scope.toggleDocsMenu = function(event) {
+    event.preventDefault();
+    $scope.showDocsNav = !$scope.showDocsNav;
+  };
+
+  // TOGGLE DOCS NAV
+  $scope.toggleMainMenu = function(event) {
+    event.preventDefault();
+    $scope.showMainNav = !$scope.showMainNav;
+  };
+
+  // TOGGLE DOCS VERSION & LANGUAGE
+  $scope.toggleVersionMenu = function(event) {
+    event.preventDefault();
+    $scope.showMenu = !$scope.showMenu;
+  };
+
+  // INITIALIZE PRETTY PRINT
+  prettyPrint();
+}]);
\ No newline at end of file
diff --git a/public/resources/js/directives/bio.js b/public/resources/js/directives/bio.js
new file mode 100644
index 0000000000..ae979c85b5
--- /dev/null
+++ b/public/resources/js/directives/bio.js
@@ -0,0 +1,48 @@
+angularIO.directive('bio', function($rootScope, $timeout) {
+  return {
+    restrict: 'A',
+    replace: true,
+    scope: {},
+    link: function (scope, element, attrs) {
+      var name = element.attr('data-name');
+      var bio = element.attr('data-bio');
+      var pic = element.attr('data-pic');
+      var twitter = element.attr('data-twitter');
+      var website =  element.attr('data-website');
+      var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' +  element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
+      var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
+
+      scope.showBio = function(event) {
+        $mdDialog.show({
+          parent: angular.element(document.body),
+          targetEvent: $event,
+          template:
+            '<md-dialog class="modal" aria-label="List dialog">' +
+            '  <md-content>' +
+            '     <img class="left" src="' + pic + '" />' +
+            '     <h3 class="text-headline">' + name + '</h3>' +
+            '     <div class="modal-social">' + $twitter + $website + '</div>' +
+            '     <p class="text-body">' + bio + '</p>' +
+            '  </md-content>' +
+            '  <div class="md-actions">' +
+            '    <md-button ng-click="closeDialog()">' +
+            '      Close Bio' +
+            '    </md-button>' +
+            '  </div>' +
+            '</md-dialog>',
+          locals: {
+            items: $scope.items
+          },
+        controller: DialogController
+        });
+      };
+
+      function DialogController(scope, $mdDialog, items) {
+        scope.items = items;
+        scope.closeDialog = function() {
+          $mdDialog.hide();
+        };
+      }
+    }
+  };
+});
\ No newline at end of file
diff --git a/public/resources/js/directives/code-tabs.js b/public/resources/js/directives/code-tabs.js
new file mode 100644
index 0000000000..e33048b239
--- /dev/null
+++ b/public/resources/js/directives/code-tabs.js
@@ -0,0 +1,72 @@
+/*
+* Code Tabs
+*
+*/
+
+angularIO.directive('code-tabs', function() {
+  return {
+    template: 'Name: {{customer.name}} Address: {{customer.address}}'
+  };
+
+
+  $scope.language = 'es5';
+  var $codeBoxes = $('.code-box');
+
+  if($codeBoxes.length) {
+    //UPDATE ALL CODE BOXES
+    $codeBoxes.each(function(index, codeBox) {
+      //REGISTER ELEMENTS
+      var $codeBox = $(codeBox);
+      var $examples = $codeBox.find('.prettyprint');
+      var $firstItem = $($examples[0]);
+      var $header = $("<header class='code-box-header'></header>");
+      var $nav = $("<nav class='code-box-nav'></nav>");
+      var selectedName = '';
+
+      //HIDE/SHOW CONTENT
+      $examples.addClass('is-hidden');
+      $firstItem.removeClass('is-hidden');
+
+      //UPDATE NAV FOR EACH CODE BOX
+      $examples.each(function(index, example) {
+        var $example = $(example);
+        var name = $example.data('name');
+        var selected = (index === 0) ? 'is-selected' : '';
+        var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</button>");
+
+        // ADD EVENTS FOR CODE SNIPPETS
+        $button.on('click', function(e) {
+          e.preventDefault();
+          var $currentButton = $(e.currentTarget);
+          var $buttons = $nav.find('.button');
+          var selectedName = $currentButton.data('name');
+          $buttons.removeClass('is-selected');
+          $currentButton.addClass('is-selected');
+
+          //UPDAT VIEW ON SELECTTION
+          $examples.addClass('is-hidden');
+          var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
+          $currentExample.removeClass('is-hidden').addClass('animated fadeIn');
+        });
+
+        $nav.append($button);
+      });
+
+      //ADD HEADER TO DOM
+      $header.append($nav);
+      $codeBox.prepend($header);
+    });
+
+    //FADEIN EXAMPLES
+    $codeBoxes.addClass('is-visible');
+  }
+
+  // TOGGLE CODE LANGUAGE
+  $scope.toggleCodeExample = function(event, name) {
+    event.preventDefault();
+    $scope.language = language;
+  };
+
+
+});
+
diff --git a/public/resources/js/directives/code.js b/public/resources/js/directives/code.js
new file mode 100644
index 0000000000..fe8d5c5309
--- /dev/null
+++ b/public/resources/js/directives/code.js
@@ -0,0 +1,23 @@
+/*
+* Code Formatting
+*
+*/
+
+
+angularIO.directive('pre', function() {
+  return {
+    template: 'Name: {{customer.name}} Address: {{customer.address}}'
+  };
+
+
+  if($codeBlocks.length) {
+    $codeBlocks.each(function(index, codeEl) {
+      var $codeEl = $(codeEl);
+
+      if(!$codeEl.hasClass('prettyprint')) {
+        $codeEl.addClass('prettyprint linenums');
+      }
+    });
+  }
+
+});
\ No newline at end of file
diff --git a/public/resources/js/site.js b/public/resources/js/site.js
deleted file mode 100644
index 2a31633f07..0000000000
--- a/public/resources/js/site.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
-* Apllication Module
-*
-*/
-
-var angularIO = angular.module('angularIOApp', ['ngMaterial', 'ngTouch'])
-.config(function($mdThemingProvider) {
-  $mdThemingProvider.theme('default')
-    .primaryPalette('blue', {
-      'default': '700', // by default use shade 400 from the pink palette for primary intentions
-      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
-      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
-      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
-    })
-    // If you specify less than all of the keys, it will inherit from the
-    // default shades
-    .accentPalette('purple', {
-      'default': '200' // use shade 200 for default, and keep all other shades the same
-    });
-});
-
-
-/*
-* Apllication Controller
-*
-*/
-
-angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
-
-  $scope.showDocsNav = false;
-  $scope.showMainNav = false;
-  $scope.showMenu = false;
-
-  // TOGGLE MAIN NAV (TOP) ON MOBILE
-  $scope.toggleDocsMenu = function(event) {
-    event.preventDefault();
-    $scope.showDocsNav = !$scope.showDocsNav;
-  };
-
-  // TOGGLE DOCS NAV
-  $scope.toggleMainMenu = function(event) {
-    event.preventDefault();
-    $scope.showMainNav = !$scope.showMainNav;
-  };
-
-  // TOGGLE DOCS VERSION & LANGUAGE
-  $scope.toggleVersionMenu = function(event) {
-    event.preventDefault();
-    $scope.showMenu = !$scope.showMenu;
-  };
-
-
-  /*
-  * Code Switcher
-  *
-  */
-
-  $scope.language = 'es5';
-  var $codeBoxes = $('.code-box');
-
-  if($codeBoxes.length) {
-    //UPDATE ALL CODE BOXES
-    $codeBoxes.each(function(index, codeBox) {
-      //REGISTER ELEMENTS
-      var $codeBox = $(codeBox);
-      var $examples = $codeBox.find('.prettyprint');
-      var $firstItem = $($examples[0]);
-      var $header = $("<header class='code-box-header'></header>");
-      var $nav = $("<nav class='code-box-nav'></nav>");
-      var selectedName = '';
-
-      //HIDE/SHOW CONTENT
-      $examples.addClass('is-hidden');
-      $firstItem.removeClass('is-hidden');
-
-      //UPDATE NAV FOR EACH CODE BOX
-      $examples.each(function(index, example) {
-        var $example = $(example);
-        var name = $example.data('name');
-        var selected = (index === 0) ? 'is-selected' : '';
-        var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</button>");
-
-        // ADD EVENTS FOR CODE SNIPPETS
-        $button.on('click', function(e) {
-          e.preventDefault();
-          var $currentButton = $(e.currentTarget);
-          var $buttons = $nav.find('.button');
-          var selectedName = $currentButton.data('name');
-          $buttons.removeClass('is-selected');
-          $currentButton.addClass('is-selected');
-
-          //UPDAT VIEW ON SELECTTION
-          $examples.addClass('is-hidden');
-          var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
-          $currentExample.removeClass('is-hidden').addClass('animated fadeIn');
-        });
-
-        $nav.append($button);
-      });
-
-      //ADD HEADER TO DOM
-      $header.append($nav);
-      $codeBox.prepend($header);
-    });
-
-    //FADEIN EXAMPLES
-    $codeBoxes.addClass('is-visible');
-  }
-
-  // TOGGLE CODE LANGUAGE
-  $scope.toggleCodeExample = function(event, name) {
-    event.preventDefault();
-    $scope.language = language;
-  };
-
-  /*
-  * Code Formatting
-  *
-  */
-
-  var $codeBlocks = $('pre');
-
-  if($codeBlocks.length) {
-    $codeBlocks.each(function(index, codeEl) {
-      var $codeEl = $(codeEl);
-
-      if(!$codeEl.hasClass('prettyprint')) {
-        $codeEl.addClass('prettyprint linenums');
-      }
-    });
-  }
-
-  // BIO MODAL
-  $scope.showBio = function($event) {
-    var parentEl = angular.element(document.body);
-    var person = angular.element($event.currentTarget);
-    var name = person.attr('data-name');
-    var bio = person.attr('data-bio');
-    var pic = person.attr('data-pic');
-    var twitter = person.attr('data-twitter');
-    var website =  person.attr('data-website');
-    var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' +  person.attr('data-twitter') + '" md-button>Twitter</a>' : '';
-    var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + person.attr('data-website') + '" md-button>Website</a>' : '';
-
-    $mdDialog.show({
-      parent: parentEl,
-      targetEvent: $event,
-      template:
-        '<md-dialog class="modal" aria-label="List dialog">' +
-        '  <md-content>' +
-        '     <img class="left" src="' + pic + '" />' +
-        '     <h3 class="text-headline">' + name + '</h3>' +
-        '     <div class="modal-social">' + $twitter + $website + '</div>' +
-        '     <p class="text-body">' + bio + '</p>' +
-        '  </md-content>' +
-        '  <div class="md-actions">' +
-        '    <md-button ng-click="closeDialog()">' +
-        '      Close Bio' +
-        '    </md-button>' +
-        '  </div>' +
-        '</md-dialog>',
-      locals: {
-        items: $scope.items
-      },
-    controller: DialogController
-    });
-
-    function DialogController(scope, $mdDialog, items) {
-      scope.items = items;
-      scope.closeDialog = function() {
-        $mdDialog.hide();
-      };
-    }
-  };
-
-
-  // INITIALIZE PRETTY PRINT
-  prettyPrint();
-}]);
-
-
-
-

From 47e25571fd166c7b81e16639eac1427eefc3f3fe Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Fri, 1 May 2015 06:49:07 -0700
Subject: [PATCH 02/13] updated site file

---
 public/resources/js/site.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 public/resources/js/site.js

diff --git a/public/resources/js/site.js b/public/resources/js/site.js
new file mode 100644
index 0000000000..6306072d0b
--- /dev/null
+++ b/public/resources/js/site.js
@@ -0,0 +1,22 @@
+/*
+* Apllication Module
+*
+*/
+
+var angularIO = angular.module('angularIOApp', ['ngMaterial', 'ngTouch'])
+.config(function($mdThemingProvider) {
+
+  // THEMEING FOR ANGULAR MATERIAL
+  $mdThemingProvider.theme('default')
+    .primaryPalette('blue', {
+      'default': '700', // by default use shade 400 from the pink palette for primary intentions
+      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
+      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
+      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
+    })
+    // If you specify less than all of the keys, it will inherit from the
+    // default shades
+    .accentPalette('purple', {
+      'default': '200' // use shade 200 for default, and keep all other shades the same
+    });
+});
\ No newline at end of file

From 6475fb7e5132a3c550812e97defe0aaabfee2698 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Fri, 1 May 2015 07:40:25 -0700
Subject: [PATCH 03/13] bio directive

---
 public/_includes/_scripts-include.jade |  1 -
 public/about/index.jade                |  2 +-
 public/resources/js/directives/bio.js  | 31 +++++++++++++-------------
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index 43ea0e0f5f..ead15fbb4e 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -2,7 +2,6 @@
 script(src="/resources/js/vendor/prettify.js")
 script(src="/resources/js/vendor/lang-basic.js")
 script(src="/resources/js/vendor/lang-dart.js")
-script(src="/resources/js/vendor/jquery.js")
 
 
 <!-- Angular Material Dependencies -->
diff --git a/public/about/index.jade b/public/about/index.jade
index f12affab52..35a4c015ac 100644
--- a/public/about/index.jade
+++ b/public/about/index.jade
@@ -19,7 +19,7 @@
   <!-- BIO CARDS -->
   for person, name in bios
     .c3
-      md-card(bio class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}"  data-name="#{person.name}" ng-click="showBio($event)")
+      md-card(biocard class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}"  data-name="#{person.name}")
         header
           image(src="#{person.picture}" alt="#person.name")
 
diff --git a/public/resources/js/directives/bio.js b/public/resources/js/directives/bio.js
index ae979c85b5..5ab54a1d2a 100644
--- a/public/resources/js/directives/bio.js
+++ b/public/resources/js/directives/bio.js
@@ -1,28 +1,27 @@
-angularIO.directive('bio', function($rootScope, $timeout) {
+angularIO.directive('biocard', function($rootScope, $timeout, $mdDialog) {
   return {
     restrict: 'A',
-    replace: true,
     scope: {},
     link: function (scope, element, attrs) {
-      var name = element.attr('data-name');
-      var bio = element.attr('data-bio');
-      var pic = element.attr('data-pic');
-      var twitter = element.attr('data-twitter');
-      var website =  element.attr('data-website');
-      var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' +  element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
-      var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
+      scope.name = element.attr('data-name');
+      scope.bio = element.attr('data-bio');
+      scope.pic = element.attr('data-pic');
+      scope.twitter = element.attr('data-twitter');
+      scope.website =  element.attr('data-website');
+      scope.$twitter = scope.twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' +  element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
+      scope.$website = scope.website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
 
-      scope.showBio = function(event) {
+      element.on('click', function($event) {
         $mdDialog.show({
           parent: angular.element(document.body),
           targetEvent: $event,
           template:
             '<md-dialog class="modal" aria-label="List dialog">' +
             '  <md-content>' +
-            '     <img class="left" src="' + pic + '" />' +
-            '     <h3 class="text-headline">' + name + '</h3>' +
-            '     <div class="modal-social">' + $twitter + $website + '</div>' +
-            '     <p class="text-body">' + bio + '</p>' +
+            '     <img class="left" src="' + scope.pic + '" />' +
+            '     <h3 class="text-headline">' + scope.name + '</h3>' +
+            '     <div class="modal-social">' + scope.$twitter + scope.$website + '</div>' +
+            '     <p class="text-body">' + scope.bio + '</p>' +
             '  </md-content>' +
             '  <div class="md-actions">' +
             '    <md-button ng-click="closeDialog()">' +
@@ -31,11 +30,11 @@ angularIO.directive('bio', function($rootScope, $timeout) {
             '  </div>' +
             '</md-dialog>',
           locals: {
-            items: $scope.items
+            items: scope.items
           },
         controller: DialogController
         });
-      };
+      });
 
       function DialogController(scope, $mdDialog, items) {
         scope.items = items;

From b9386de4f3e87ed10f51ee514ebac5a85a2f87da Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Sat, 2 May 2015 15:34:16 -0700
Subject: [PATCH 04/13] code tabs, and code example directive

---
 public/_includes/_scripts-include.jade        |   3 +-
 public/docs/js/latest/guide/_layout.jade      |   2 +-
 public/resources/css/module/_code-box.scss    |   5 +-
 .../resources/js/directives/code-example.js   |  28 ++++
 public/resources/js/directives/code-pane.js   |  33 +++++
 public/resources/js/directives/code-tabs.js   | 122 ++++++++----------
 public/resources/js/directives/code.js        |  23 ----
 7 files changed, 121 insertions(+), 95 deletions(-)
 create mode 100644 public/resources/js/directives/code-example.js
 create mode 100644 public/resources/js/directives/code-pane.js
 delete mode 100644 public/resources/js/directives/code.js

diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index ead15fbb4e..50142fb58e 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -16,8 +16,9 @@ script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular
 script(src="/resources/js/site.js")
 script(src="/resources/js/controllers/app-controller.js")
 script(src="/resources/js/directives/bio.js")
-script(src="/resources/js/directives/code.js")
 script(src="/resources/js/directives/code-tabs.js")
+script(src="/resources/js/directives/code-pane.js")
+script(src="/resources/js/directives/code-example.js")
 
 
 <!-- GA -->
diff --git a/public/docs/js/latest/guide/_layout.jade b/public/docs/js/latest/guide/_layout.jade
index 41824d43f5..35040681c8 100644
--- a/public/docs/js/latest/guide/_layout.jade
+++ b/public/docs/js/latest/guide/_layout.jade
@@ -9,7 +9,7 @@ html(lang="en" ng-app="angularIOApp")
     != partial("../../../../_includes/_hero")
     != partial("../../../../_includes/_banner")
 
-    article.l-content-small.grid-fluid.docs-content(ng-non-bindable)
+    article.l-content-small.grid-fluid.docs-content
       != yield
       != partial("../../../../_includes/_next-item")
 
diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss
index bbd1f8ac81..00784634a6 100644
--- a/public/resources/css/module/_code-box.scss
+++ b/public/resources/css/module/_code-box.scss
@@ -2,7 +2,6 @@
   border-radius: 4px;
   background: $steel;
   box-shadow: 0px 2px 5px rgba($coal, .3);
-  display: none;
   margin-bottom: $unit * 2;
 
   header {
@@ -24,7 +23,9 @@
       font-weight: 500;
       text-transform: none;
 
-      &.is-selected {
+      &.is-selected,
+      &.selected
+       {
         background: $blueberry;
         color: $snow;
       }
diff --git a/public/resources/js/directives/code-example.js b/public/resources/js/directives/code-example.js
new file mode 100644
index 0000000000..06e7811787
--- /dev/null
+++ b/public/resources/js/directives/code-example.js
@@ -0,0 +1,28 @@
+/*
+* Code Example Directive
+*
+* Formats codes examples and prevents
+* Angular code from being processed.
+*/
+
+angularIO.directive('codeExample', function() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    scope: {
+      name: '@',
+      language: '@',
+      format: '@'
+    },
+
+    link: function(scope, element, attrs, codeSwitchController, transcludeFunc) {
+      transcludeFunc( scope, function( content ) {
+        var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
+        element.append(code);
+      });
+    },
+
+    template:'<pre class="prettyprint {{format}} lang-{{language}}"></pre>'
+  };
+});
\ No newline at end of file
diff --git a/public/resources/js/directives/code-pane.js b/public/resources/js/directives/code-pane.js
new file mode 100644
index 0000000000..89e53005c5
--- /dev/null
+++ b/public/resources/js/directives/code-pane.js
@@ -0,0 +1,33 @@
+/*
+* Code Pane Directive
+*
+* @requires codeTab Directive
+*
+* Invidiual panes displayed in the the
+* codeTab elements
+*/
+
+angularIO.directive('codePane', function() {
+  return {
+    require: '^codeTabs',
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    scope: {
+      name: '@',
+      language: '@',
+      format: '@'
+    },
+
+    link: function(scope, element, attrs, codeTabController, transcludeFunc) {
+      transcludeFunc( scope, function( content ) {
+        var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
+        element.append(code);
+      });
+
+      codeTabController.addPane(scope);
+    },
+
+    template:'<pre class="prettyprint {{format}} lang-{{language}}" ng-show="selected"></pre>'
+  };
+});
\ No newline at end of file
diff --git a/public/resources/js/directives/code-tabs.js b/public/resources/js/directives/code-tabs.js
index e777e39bb9..bd309cb3c6 100644
--- a/public/resources/js/directives/code-tabs.js
+++ b/public/resources/js/directives/code-tabs.js
@@ -1,85 +1,71 @@
 /*
-* Code Tabs
+* Code Tabs Directive
 *
+* Creates a tabs code examples that
+* displayed in the same container
 */
 
-var getTabName = function(name) {
-  var prettyName = name;
-
-  switch(name) {
-    case 'es5':         prettyName = 'ES5';         break;
-    case 'typescript':  prettyName = 'TypeScript';  break;
-    default:            prettyName = name;
-  }
-
-  return prettyName;
-};
-
-angularIO.directive('code-tabs', function() {
+angularIO.directive('codeTabs', function($timeout) {
   return {
-    template: 'Name: {{customer.name}} Address: {{customer.address}}'
-  };
+    restrict: 'E',
+    scope: {},
+    transclude: true,
+    replace: true,
+
+    controller: function ($scope) {
+      $scope.panes = [];
 
 
-  $scope.language = 'es5';
-  var $codeBoxes = $('.code-box');
+      /*
+      * Add Code Pane List of Panes
+      *
+      */
 
-  if($codeBoxes.length) {
-    //UPDATE ALL CODE BOXES
-    $codeBoxes.each(function(index, codeBox) {
-      //REGISTER ELEMENTS
-      var $codeBox = $(codeBox);
-      var $examples = $codeBox.find('.prettyprint');
-      var $firstItem = $($examples[0]);
-      var $header = $("<header class='code-box-header'></header>");
-      var $nav = $("<nav class='code-box-nav'></nav>");
-      var selectedName = '';
+      this.addPane = function(pane) {
+        if ($scope.panes.length === 0) {
+          $scope.showPane(pane);
+        }
 
-      //HIDE/SHOW CONTENT
-      $examples.addClass('is-hidden');
-      $firstItem.removeClass('is-hidden');
+        $scope.panes.push(pane);
+      };
 
-      //UPDATE NAV FOR EACH CODE BOX
-      $examples.each(function(index, example) {
-        var $example = $(example);
-        var name = $example.data('name');
-        var tabName = getTabName(name);
-        var selected = (index === 0) ? 'is-selected' : '';
-        var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + tabName + "</button>");
 
-        // ADD EVENTS FOR CODE SNIPPETS
-        $button.on('click', function(e) {
-          e.preventDefault();
-          var $currentButton = $(e.currentTarget);
-          var $buttons = $nav.find('.button');
-          var selectedName = $currentButton.data('name');
-          $buttons.removeClass('is-selected');
-          $currentButton.addClass('is-selected');
+      /*
+      * Show selected Code Examples
+      *
+      */
 
-          //UPDAT VIEW ON SELECTTION
-          $examples.addClass('is-hidden');
-          var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
-          $currentExample.removeClass('is-hidden').addClass('animated fadeIn');
+      $scope.showPane = function(pane) {
+        // RESET ALL EXAMPLES
+        angular.forEach($scope.panes, function(pane) {
+          pane.selected = false;
         });
 
-        $nav.append($button);
+        // SELECT CURRENT EXAMPLE
+        pane.selected = true;
+      };
+
+
+      /*
+      * Finish Rendereding then prettify code
+      *
+      */
+
+      $scope.$watch($scope.panes.$last,function(){
+        $timeout(prettyPrint, 1);
       });
+    },
 
-      //ADD HEADER TO DOM
-      $header.append($nav);
-      $codeBox.prepend($header);
-    });
-
-    //FADEIN EXAMPLES
-    $codeBoxes.addClass('is-visible');
-  }
-
-  // TOGGLE CODE LANGUAGE
-  $scope.toggleCodeExample = function(event, name) {
-    event.preventDefault();
-    $scope.language = language;
+    template:
+      '<div class="code-box">' +
+      ' <header class="code-box-header">' +
+      '   <nav class="code-box-nav">' +
+      '    <button ng-repeat="pane in panes" ng-click="showPane(pane)" class="button" ng-class="{selected:pane.selected}">' +
+      '      {{pane.name}}' +
+      '    </button>' +
+      '   </nav>' +
+      ' </header>' +
+      ' <div class="code-box-examples" ng-transclude></div>' +
+      '</div>'
   };
-
-
-});
-
+});
\ No newline at end of file
diff --git a/public/resources/js/directives/code.js b/public/resources/js/directives/code.js
deleted file mode 100644
index fe8d5c5309..0000000000
--- a/public/resources/js/directives/code.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-* Code Formatting
-*
-*/
-
-
-angularIO.directive('pre', function() {
-  return {
-    template: 'Name: {{customer.name}} Address: {{customer.address}}'
-  };
-
-
-  if($codeBlocks.length) {
-    $codeBlocks.each(function(index, codeEl) {
-      var $codeEl = $(codeEl);
-
-      if(!$codeEl.hasClass('prettyprint')) {
-        $codeEl.addClass('prettyprint linenums');
-      }
-    });
-  }
-
-});
\ No newline at end of file

From a5f3214e9770e42db514b7061fe5e4d20942e155 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Sun, 3 May 2015 19:09:25 -0700
Subject: [PATCH 05/13] Code examples, now escape html, full directives

---
 public/_includes/_scripts-include.jade        |   3 +-
 .../_includes/styleguide/_code-examples.jade  |  63 ++++----
 .../docs/_includes/styleguide/_layouts.jade   |  19 +--
 .../js/controllers/app-controller.js          |  11 +-
 .../resources/js/directives/code-example.js   |  29 ++--
 public/resources/js/directives/code-pane.js   |  36 +++--
 public/resources/js/directives/code-tabs.js   |  10 --
 public/resources/js/site.js                   |   2 +-
 public/resources/js/vendor/lodash.js          | 142 ++++++++++++++++++
 9 files changed, 232 insertions(+), 83 deletions(-)
 create mode 100644 public/resources/js/vendor/lodash.js

diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index 50142fb58e..eb857ef883 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -2,16 +2,17 @@
 script(src="/resources/js/vendor/prettify.js")
 script(src="/resources/js/vendor/lang-basic.js")
 script(src="/resources/js/vendor/lang-dart.js")
+script(src="/resources/js/vendor/lodash.js")
 
 
 <!-- Angular Material Dependencies -->
 script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js")
-script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js")
 script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js")
 script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js")
 script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
 
 
+
 <!-- Angular.io Site JS -->
 script(src="/resources/js/site.js")
 script(src="/resources/js/controllers/app-controller.js")
diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade
index d93b23c82c..0b3ffb3639 100644
--- a/public/docs/_includes/styleguide/_code-examples.jade
+++ b/public/docs/_includes/styleguide/_code-examples.jade
@@ -7,22 +7,16 @@
     .l-sub-section
       h3 Adding a code example
 
-      pre.prettyprint.linenums
-        code.
-          pre.prettyprint.linenums
-            code.
-              //SOME CODE
-              var name = "Alex Wolfe";
-              alert(name);
+      code-example(format="linenums").
+        //SOME CODE
+        var name = "Alex Wolfe";
+        alert(name);
 
     .l-sub-section
       h3 Specify starting line number
 
-      pre(class="prettyprint linenums:4")
-        code.
-          pre.prettyprint.linenums:4
-            var title = "This starts on line four";
-
+      code-example(language="html" format="linenums:4").
+        var title = "This starts on line four";
 
     .l-sub-section
       h3 Specify a language
@@ -34,11 +28,9 @@
         chosen based on language hints. Add a class that matches
         your desired language (example below uses <strong>.lang-html</strong>)
 
-      pre(class="prettyprint lang-html")
-        code.
-          pre.prettyprint.lang-html
-            h1 Title
-            p This is some copy...
+      code-example(language="html" format="linenums").
+        h1 Title
+        p This is some copy...
 
     .l-sub-section
       h3 Code Highlighting
@@ -48,16 +40,31 @@
         <strong>Black</strong>. You can see examples below and
         the class names needed for each type.
 
-      pre.prettyprint.linenums
-        code.
-          // Pink Background Version
-          // class="pnk"
-          var elephants = "The <span class="pnk">pink</span> elephants were marching...";
+      code-example(format="linenums" escape="html").
+        // Pink Background Version
+        // class="pnk"
+        var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
 
-          // Black Background Version
-          // class="blk"
-          var night = "The night was pitch <span class="blk">black</span>.";
+        // Black Background Version
+        // class="blk"
+        var night = "The night was pitch <span class='blk'>black</span>.";
 
-          // Outlined Version
-          // class="otl"
-          var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";
+        // Outlined Version
+        // class="otl"
+        var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";
+
+    .l-sub-section
+      h3 Code Tabs
+      p.
+        Code Tabs are a great way to show different languages and versions
+        of a particular piece of code. When using these tabs make sure the
+        <stron>content is always related</strong>.
+
+      code-tabs
+        code-pane(language="javascript" format="linenums" name="ES5").
+          // ES5
+          var hello = 'blah';
+
+        code-pane(language="javascript" format="linenums" name="TypeScript").
+          // TypeScript
+          var hello = 'blah';
diff --git a/public/docs/_includes/styleguide/_layouts.jade b/public/docs/_includes/styleguide/_layouts.jade
index 8b21f4790e..904e8de0aa 100644
--- a/public/docs/_includes/styleguide/_layouts.jade
+++ b/public/docs/_includes/styleguide/_layouts.jade
@@ -10,20 +10,17 @@
       h2 Main Section Title
       p Main section content...
 
-      pre.prettyprint.linenums.lang-html
-        code.
-          .l-main-section
-            h2 Section Title
-            p section content...
-
+      code-example(language="html" format="linenums").
+        .l-main-section
+          h2 Section Title
+          p section content...
       .l-sub-section
         h3 Sub Section Title
         p.
           sub section content... This content is related to the main section
           content and <strong>falls within</strong> the main section.
 
-        pre.prettyprint.linenums.lang-html
-          code.
-            .l-sub-section
-              h3 Sub Section Title
-              p sub section content...
\ No newline at end of file
+        code-example(language="html" format="linenums").
+          .l-sub-section
+            h3 Sub Section Title
+            p sub section content...
\ No newline at end of file
diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
index 7ecbda9bbc..feb1d8613f 100644
--- a/public/resources/js/controllers/app-controller.js
+++ b/public/resources/js/controllers/app-controller.js
@@ -3,7 +3,7 @@
 *
 */
 
-angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
+angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($scope, $mdDialog, $timeout) {
 
   $scope.showDocsNav = false;
   $scope.showMainNav = false;
@@ -27,6 +27,11 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
     $scope.showMenu = !$scope.showMenu;
   };
 
-  // INITIALIZE PRETTY PRINT
-  prettyPrint();
+  /*
+  * Prettify Code
+  *
+  * Finish Rendereding code directives then prettify code
+  */
+
+  $timeout(prettyPrint, 1);
 }]);
\ No newline at end of file
diff --git a/public/resources/js/directives/code-example.js b/public/resources/js/directives/code-example.js
index 06e7811787..597fa24f55 100644
--- a/public/resources/js/directives/code-example.js
+++ b/public/resources/js/directives/code-example.js
@@ -8,21 +8,22 @@
 angularIO.directive('codeExample', function() {
   return {
     restrict: 'E',
-    transclude: true,
-    replace: true,
-    scope: {
-      name: '@',
-      language: '@',
-      format: '@'
-    },
 
-    link: function(scope, element, attrs, codeSwitchController, transcludeFunc) {
-      transcludeFunc( scope, function( content ) {
-        var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
-        element.append(code);
-      });
-    },
+    compile: function(tElement, tAttrs) {
+      var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
+      var template =  '<pre class="prettyprint {{format}} lang-{{language}}">' +
+                      '<code ng-non-bindable>' + html + '</code>' +
+                      '</pre>';
 
-    template:'<pre class="prettyprint {{format}} lang-{{language}}"></pre>'
+      // UPDATE ELEMENT WITH NEW TEMPLATE
+      tElement.html(template);
+
+      // RETURN ELEMENT
+      return function(scope, element, attrs) {
+        // SET SCOPE MANUALLY
+        scope.language = attrs.language;
+        scope.format = attrs.format;
+      };
+    }
   };
 });
\ No newline at end of file
diff --git a/public/resources/js/directives/code-pane.js b/public/resources/js/directives/code-pane.js
index 89e53005c5..32655d09f7 100644
--- a/public/resources/js/directives/code-pane.js
+++ b/public/resources/js/directives/code-pane.js
@@ -11,23 +11,29 @@ angularIO.directive('codePane', function() {
   return {
     require: '^codeTabs',
     restrict: 'E',
-    transclude: true,
-    replace: true,
-    scope: {
-      name: '@',
-      language: '@',
-      format: '@'
-    },
+    scope: true,
 
-    link: function(scope, element, attrs, codeTabController, transcludeFunc) {
-      transcludeFunc( scope, function( content ) {
-        var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
-        element.append(code);
-      });
+    compile: function(tElement, tAttrs) {
+      var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
+      var template =  '<pre class="prettyprint {{format}} lang-{{language}}" ng-show="selected">' +
+                      '<code ng-non-bindable>' + html + '</code>' +
+                      '</pre>';
 
-      codeTabController.addPane(scope);
-    },
 
-    template:'<pre class="prettyprint {{format}} lang-{{language}}" ng-show="selected"></pre>'
+      // UPDATE ELEMENT WITH NEW TEMPLATE
+      tElement.html(template);
+
+
+      // RETURN LINK METHOD
+      return function(scope, element, attrs, controller) {
+        // SET SCOPE MANUALLY
+        scope.language = attrs.language;
+        scope.name = attrs.name;
+        scope.format = attrs.format;
+
+        //ADD PANE TO CONTROLLER
+        controller.addPane(scope);
+      };
+    }
   };
 });
\ No newline at end of file
diff --git a/public/resources/js/directives/code-tabs.js b/public/resources/js/directives/code-tabs.js
index bd309cb3c6..316470b015 100644
--- a/public/resources/js/directives/code-tabs.js
+++ b/public/resources/js/directives/code-tabs.js
@@ -44,16 +44,6 @@ angularIO.directive('codeTabs', function($timeout) {
         // SELECT CURRENT EXAMPLE
         pane.selected = true;
       };
-
-
-      /*
-      * Finish Rendereding then prettify code
-      *
-      */
-
-      $scope.$watch($scope.panes.$last,function(){
-        $timeout(prettyPrint, 1);
-      });
     },
 
     template:
diff --git a/public/resources/js/site.js b/public/resources/js/site.js
index 6306072d0b..335c0f66b9 100644
--- a/public/resources/js/site.js
+++ b/public/resources/js/site.js
@@ -3,7 +3,7 @@
 *
 */
 
-var angularIO = angular.module('angularIOApp', ['ngMaterial', 'ngTouch'])
+var angularIO = angular.module('angularIOApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
 
   // THEMEING FOR ANGULAR MATERIAL
diff --git a/public/resources/js/vendor/lodash.js b/public/resources/js/vendor/lodash.js
new file mode 100644
index 0000000000..4f4fc58176
--- /dev/null
+++ b/public/resources/js/vendor/lodash.js
@@ -0,0 +1,142 @@
+/**
+ * @license
+ * lodash 3.8.0 (Custom Build) lodash.com/license | Underscore.js 1.8.3 underscorejs.org/LICENSE
+ * Build: `lodash compat -o ./lodash.js`
+ */
+;(function(){function n(n,t){if(n!==t){var r=n===n,e=t===t;if(n>t||!r||n===w&&e)return 1;if(n<t||!e||t===w&&r)return-1}return 0}function t(n,t,r){for(var e=n.length,u=r?e:-1;r?u--:++u<e;)if(t(n[u],u,n))return u;return-1}function r(n,t,r){if(t!==t)return p(n,r);r-=1;for(var e=n.length;++r<e;)if(n[r]===t)return r;return-1}function e(n){return typeof n=="function"||false}function u(n){return typeof n=="string"?n:null==n?"":n+""}function o(n){return n.charCodeAt(0)}function i(n,t){for(var r=-1,e=n.length;++r<e&&-1<t.indexOf(n.charAt(r)););
+return r}function a(n,t){for(var r=n.length;r--&&-1<t.indexOf(n.charAt(r)););return r}function f(t,r){return n(t.a,r.a)||t.b-r.b}function c(n){return Ln[n]}function l(n){return Pn[n]}function s(n){return"\\"+Mn[n]}function p(n,t,r){var e=n.length;for(t+=r?0:-1;r?t--:++t<e;){var u=n[t];if(u!==u)return t}return-1}function h(n){return!!n&&typeof n=="object"}function _(n){return 160>=n&&9<=n&&13>=n||32==n||160==n||5760==n||6158==n||8192<=n&&(8202>=n||8232==n||8233==n||8239==n||8287==n||12288==n||65279==n);
+
+}function v(n,t){for(var r=-1,e=n.length,u=-1,o=[];++r<e;)n[r]===t&&(n[r]=P,o[++u]=r);return o}function g(n){for(var t=-1,r=n.length;++t<r&&_(n.charCodeAt(t)););return t}function y(n){for(var t=n.length;t--&&_(n.charCodeAt(t)););return t}function d(n){return zn[n]}function m(_){function Ln(n){if(h(n)&&!(Lo(n)||n instanceof Bn)){if(n instanceof zn)return n;if(He.call(n,"__chain__")&&He.call(n,"__wrapped__"))return zr(n)}return new zn(n)}function Pn(){}function zn(n,t,r){this.__wrapped__=n,this.__actions__=r||[],
+this.__chain__=!!t}function Bn(n){this.__wrapped__=n,this.__actions__=null,this.__dir__=1,this.__filtered__=false,this.__iteratees__=null,this.__takeCount__=Cu,this.__views__=null}function Mn(){this.__data__={}}function Dn(n){var t=n?n.length:0;for(this.data={hash:bu(null),set:new hu};t--;)this.push(n[t])}function qn(n,t){var r=n.data;return(typeof t=="string"||he(t)?r.set.has(t):r.hash[t])?0:-1}function Kn(n,t){var r=-1,e=n.length;for(t||(t=Ne(e));++r<e;)t[r]=n[r];return t}function Vn(n,t){for(var r=-1,e=n.length;++r<e&&false!==t(n[r],r,n););
+return n}function Yn(n,t){for(var r=-1,e=n.length;++r<e;)if(!t(n[r],r,n))return false;return true}function Xn(n,t){for(var r=-1,e=n.length,u=-1,o=[];++r<e;){var i=n[r];t(i,r,n)&&(o[++u]=i)}return o}function Hn(n,t){for(var r=-1,e=n.length,u=Ne(e);++r<e;)u[r]=t(n[r],r,n);return u}function Qn(n,t,r,e){var u=-1,o=n.length;for(e&&o&&(r=n[++u]);++u<o;)r=t(r,n[u],u,n);return r}function nt(n,t){for(var r=-1,e=n.length;++r<e;)if(t(n[r],r,n))return true;return false}function tt(n,t){return n===w?t:n}function rt(n,t,r,e){
+return n!==w&&He.call(e,r)?n:t}function et(n,t,r){var e=Jo(t);lu.apply(e,Qu(t));for(var u=-1,o=e.length;++u<o;){var i=e[u],a=n[i],f=r(a,t[i],i,n,t);(f===f?f===a:a!==a)&&(a!==w||i in n)||(n[i]=f)}return n}function ut(n,t){for(var r=-1,e=null==n,u=!e&&Er(n),o=u&&n.length,i=t.length,a=Ne(i);++r<i;){var f=t[r];a[r]=u?kr(f,o)?n[f]:w:e?w:n[f]}return a}function ot(n,t,r){r||(r={});for(var e=-1,u=t.length;++e<u;){var o=t[e];r[o]=n[o]}return r}function it(n,t,r){var e=typeof n;return"function"==e?t===w?n:Bt(n,t,r):null==n?Ce:"object"==e?xt(n):t===w?Fe(n):At(n,t);
+
+}function at(n,t,r,e,u,o,i){var a;if(r&&(a=u?r(n,e,u):r(n)),a!==w)return a;if(!he(n))return n;if(e=Lo(n)){if(a=xr(n),!t)return Kn(n,a)}else{var f=nu.call(n),c=f==K;if(f!=Y&&f!=z&&(!c||u))return Nn[f]?jr(n,f,t):u?n:{};if(Gn(n))return u?n:{};if(a=Ar(c?{}:n),!t)return Mu(a,n)}for(o||(o=[]),i||(i=[]),u=o.length;u--;)if(o[u]==n)return i[u];return o.push(n),i.push(a),(e?Vn:vt)(n,function(e,u){a[u]=at(e,t,r,u,n,o,i)}),a}function ft(n,t,r){if(typeof n!="function")throw new Ke(L);return _u(function(){n.apply(w,r);
+
+},t)}function ct(n,t){var e=n?n.length:0,u=[];if(!e)return u;var o=-1,i=br(),a=i==r,f=a&&200<=t.length?Gu(t):null,c=t.length;f&&(i=qn,a=false,t=f);n:for(;++o<e;)if(f=n[o],a&&f===f){for(var l=c;l--;)if(t[l]===f)continue n;u.push(f)}else 0>i(t,f,0)&&u.push(f);return u}function lt(n,t){var r=true;return qu(n,function(n,e,u){return r=!!t(n,e,u)}),r}function st(n,t){var r=[];return qu(n,function(n,e,u){t(n,e,u)&&r.push(n)}),r}function pt(n,t,r,e){var u;return r(n,function(n,r,o){return t(n,r,o)?(u=e?r:n,false):void 0;
+
+}),u}function ht(n,t,r){for(var e=-1,u=n.length,o=-1,i=[];++e<u;){var a=n[e];if(h(a)&&Er(a)&&(r||Lo(a)||le(a))){t&&(a=ht(a,t,r));for(var f=-1,c=a.length;++f<c;)i[++o]=a[f]}else r||(i[++o]=a)}return i}function _t(n,t){Vu(n,t,be)}function vt(n,t){return Vu(n,t,Jo)}function gt(n,t){return Yu(n,t,Jo)}function yt(n,t){for(var r=-1,e=t.length,u=-1,o=[];++r<e;){var i=t[r];zo(n[i])&&(o[++u]=i)}return o}function dt(n,t,r){if(null!=n){n=Lr(n),r!==w&&r in n&&(t=[r]),r=-1;for(var e=t.length;null!=n&&++r<e;)n=Lr(n)[t[r]];
+
+return r&&r==e?n:w}}function mt(n,t,r,e,u,o){if(n===t)return true;var i=typeof n,a=typeof t;if("function"!=i&&"object"!=i&&"function"!=a&&"object"!=a||null==n||null==t)n=n!==n&&t!==t;else n:{var i=mt,a=Lo(n),f=Lo(t),c=B,l=B;a||(c=nu.call(n),c==z?c=Y:c!=Y&&(a=de(n))),f||(l=nu.call(t),l==z?l=Y:l!=Y&&de(t));var s=c==Y&&!Gn(n),f=l==Y&&!Gn(t),l=c==l;if(!l||a||s){if(!e&&(c=s&&He.call(n,"__wrapped__"),f=f&&He.call(t,"__wrapped__"),c||f)){n=i(c?n.value():n,f?t.value():t,r,e,u,o);break n}if(l){for(u||(u=[]),
+o||(o=[]),c=u.length;c--;)if(u[c]==n){n=o[c]==t;break n}u.push(n),o.push(t),n=(a?gr:dr)(n,t,i,r,e,u,o),u.pop(),o.pop()}else n=false}else n=yr(n,t,c)}return n}function wt(n,t,r,e,u){for(var o=-1,i=t.length,a=!u;++o<i;)if(a&&e[o]?r[o]!==n[t[o]]:!(t[o]in n))return false;for(o=-1;++o<i;){var f=t[o],c=n[f],l=r[o];if(a&&e[o]?f=c!==w||f in n:(f=u?u(c,l,f):w,f===w&&(f=mt(l,c,u,true))),!f)return false}return true}function bt(n,t){var r=-1,e=Er(n)?Ne(n.length):[];return qu(n,function(n,u,o){e[++r]=t(n,u,o)}),e}function xt(n){
+var t=Jo(n),r=t.length;if(!r)return Se(true);if(1==r){var e=t[0],u=n[e];if(Tr(u))return function(n){return null==n?false:(n=Lr(n),n[e]===u&&(u!==w||e in n))}}for(var o=Ne(r),i=Ne(r);r--;)u=n[t[r]],o[r]=u,i[r]=Tr(u);return function(n){return null!=n&&wt(Lr(n),t,o,i)}}function At(n,t){var r=Lo(n),e=Rr(n)&&Tr(t),u=n+"";return n=Pr(n),function(o){if(null==o)return false;var i=u;if(o=Lr(o),!(!r&&e||i in o)){if(o=1==n.length?o:dt(o,St(n,0,-1)),null==o)return false;i=Kr(n),o=Lr(o)}return o[i]===t?t!==w||i in o:mt(t,o[i],null,true);
+
+}}function jt(n,t,r,e,u){if(!he(n))return n;var o=Er(t)&&(Lo(t)||de(t));if(!o){var i=Jo(t);lu.apply(i,Qu(t))}return Vn(i||t,function(a,f){if(i&&(f=a,a=t[f]),h(a)){e||(e=[]),u||(u=[]);n:{for(var c=f,l=e,s=u,p=l.length,_=t[c];p--;)if(l[p]==_){n[c]=s[p];break n}var p=n[c],v=r?r(p,_,c,n,t):w,g=v===w;g&&(v=_,Er(_)&&(Lo(_)||de(_))?v=Lo(p)?p:Er(p)?Kn(p):[]:Bo(_)||le(_)?v=le(p)?me(p):Bo(p)?p:{}:g=false),l.push(_),s.push(v),g?n[c]=jt(v,_,r,l,s):(v===v?v!==p:p===p)&&(n[c]=v)}}else c=n[f],l=r?r(c,a,f,n,t):w,(s=l===w)&&(l=a),
+!o&&l===w||!s&&(l===l?l===c:c!==c)||(n[f]=l)}),n}function Ot(n){return function(t){return null==t?w:Lr(t)[n]}}function Et(n){var t=n+"";return n=Pr(n),function(r){return dt(r,n,t)}}function kt(n,t){for(var r=n?t.length:0;r--;){var e=parseFloat(t[r]);if(e!=u&&kr(e)){var u=e;vu.call(n,e,1)}}}function It(n,t){return n+au(Ru()*(t-n+1))}function Rt(n,t,r,e,u){return u(n,function(n,u,o){r=e?(e=false,n):t(r,n,u,o)}),r}function St(n,t,r){var e=-1,u=n.length;for(t=null==t?0:+t||0,0>t&&(t=-t>u?0:u+t),r=r===w||r>u?u:+r||0,
+0>r&&(r+=u),u=t>r?0:r-t>>>0,t>>>=0,r=Ne(u);++e<u;)r[e]=n[e+t];return r}function Ct(n,t){var r;return qu(n,function(n,e,u){return r=t(n,e,u),!r}),!!r}function Tt(n,t){var r=n.length;for(n.sort(t);r--;)n[r]=n[r].c;return n}function Ut(t,r,e){var u=wr(),o=-1;return r=Hn(r,function(n){return u(n)}),t=bt(t,function(n){return{a:Hn(r,function(t){return t(n)}),b:++o,c:n}}),Tt(t,function(t,r){var u;n:{u=-1;for(var o=t.a,i=r.a,a=o.length,f=e.length;++u<a;){var c=n(o[u],i[u]);if(c){u=u<f?c*(e[u]?1:-1):c;break n;
+
+}}u=t.b-r.b}return u})}function Wt(n,t){var r=0;return qu(n,function(n,e,u){r+=+t(n,e,u)||0}),r}function Ft(n,t){var e=-1,u=br(),o=n.length,i=u==r,a=i&&200<=o,f=a?Gu():null,c=[];f?(u=qn,i=false):(a=false,f=t?[]:c);n:for(;++e<o;){var l=n[e],s=t?t(l,e,n):l;if(i&&l===l){for(var p=f.length;p--;)if(f[p]===s)continue n;t&&f.push(s),c.push(l)}else 0>u(f,s,0)&&((t||a)&&f.push(s),c.push(l))}return c}function Nt(n,t){for(var r=-1,e=t.length,u=Ne(e);++r<e;)u[r]=n[t[r]];return u}function $t(n,t,r,e){for(var u=n.length,o=e?u:-1;(e?o--:++o<u)&&t(n[o],o,n););
+return r?St(n,e?0:o,e?o+1:u):St(n,e?o+1:0,e?u:o)}function Lt(n,t){var r=n;r instanceof Bn&&(r=r.value());for(var e=-1,u=t.length;++e<u;){var r=[r],o=t[e];lu.apply(r,o.args),r=o.func.apply(o.thisArg,r)}return r}function Pt(n,t,r){var e=0,u=n?n.length:e;if(typeof t=="number"&&t===t&&u<=Wu){for(;e<u;){var o=e+u>>>1,i=n[o];(r?i<=t:i<t)?e=o+1:u=o}return u}return zt(n,t,Ce,r)}function zt(n,t,r,e){t=r(t);for(var u=0,o=n?n.length:0,i=t!==t,a=t===w;u<o;){var f=au((u+o)/2),c=r(n[f]),l=c===c;(i?l||e:a?l&&(e||c!==w):e?c<=t:c<t)?u=f+1:o=f;
+
+}return Ou(o,Uu)}function Bt(n,t,r){if(typeof n!="function")return Ce;if(t===w)return n;switch(r){case 1:return function(r){return n.call(t,r)};case 3:return function(r,e,u){return n.call(t,r,e,u)};case 4:return function(r,e,u,o){return n.call(t,r,e,u,o)};case 5:return function(r,e,u,o,i){return n.call(t,r,e,u,o,i)}}return function(){return n.apply(t,arguments)}}function Mt(n){return uu.call(n,0)}function Dt(n,t,r){for(var e=r.length,u=-1,o=ju(n.length-e,0),i=-1,a=t.length,f=Ne(o+a);++i<a;)f[i]=t[i];
+
+for(;++u<e;)f[r[u]]=n[u];for(;o--;)f[i++]=n[u++];return f}function qt(n,t,r){for(var e=-1,u=r.length,o=-1,i=ju(n.length-u,0),a=-1,f=t.length,c=Ne(i+f);++o<i;)c[o]=n[o];for(i=o;++a<f;)c[i+a]=t[a];for(;++e<u;)c[i+r[e]]=n[o++];return c}function Kt(n,t){return function(r,e,u){var o=t?t():{};if(e=wr(e,u,3),Lo(r)){u=-1;for(var i=r.length;++u<i;){var a=r[u];n(o,a,e(a,u,r),r)}}else qu(r,function(t,r,u){n(o,t,e(t,r,u),u)});return o}}function Vt(n){return ce(function(t,r){var e=-1,u=null==t?0:r.length,o=2<u&&r[u-2],i=2<u&&r[2],a=1<u&&r[u-1];
+
+for(typeof o=="function"?(o=Bt(o,a,5),u-=2):(o=typeof a=="function"?a:null,u-=o?1:0),i&&Ir(r[0],r[1],i)&&(o=3>u?null:o,u=1);++e<u;)(i=r[e])&&n(t,i,o);return t})}function Yt(n,t){return function(r,e){var u=r?Hu(r):0;if(!Cr(u))return n(r,e);for(var o=t?u:-1,i=Lr(r);(t?o--:++o<u)&&false!==e(i[o],o,i););return r}}function Zt(n){return function(t,r,e){var u=Lr(t);e=e(t);for(var o=e.length,i=n?o:-1;n?i--:++i<o;){var a=e[i];if(false===r(u[a],a,u))break}return t}}function Gt(n,t){function r(){return(this&&this!==Zn&&this instanceof r?e:n).apply(t,arguments);
+
+}var e=Xt(n);return r}function Jt(n){return function(t){var r=-1;t=Ie(Ae(t));for(var e=t.length,u="";++r<e;)u=n(u,t[r],r);return u}}function Xt(n){return function(){var t=Du(n.prototype),r=n.apply(t,arguments);return he(r)?r:t}}function Ht(n){function t(r,e,u){return u&&Ir(r,e,u)&&(e=null),r=vr(r,n,null,null,null,null,null,e),r.placeholder=t.placeholder,r}return t}function Qt(n,t){return function(r,e,u){u&&Ir(r,e,u)&&(e=null);var i=wr(),a=null==e;if(i===it&&a||(a=false,e=i(e,u,3)),a){if(e=Lo(r),e||!ye(r))return n(e?r:$r(r));
+
+e=o}return mr(r,e,t)}}function nr(n,r){return function(e,u,o){return u=wr(u,o,3),Lo(e)?(u=t(e,u,r),-1<u?e[u]:w):pt(e,u,n)}}function tr(n){return function(r,e,u){return r&&r.length?(e=wr(e,u,3),t(r,e,n)):-1}}function rr(n){return function(t,r,e){return r=wr(r,e,3),pt(t,r,n,true)}}function er(n){return function(){var t=arguments.length;if(!t)return function(){return arguments[0]};for(var r,e=n?t:-1,u=0,o=Ne(t);n?e--:++e<t;){var i=o[u++]=arguments[e];if(typeof i!="function")throw new Ke(L);var a=r?"":Xu(i);
+
+r="wrapper"==a?new zn([]):r}for(e=r?-1:t;++e<t;)i=o[e],a=Xu(i),r=(u="wrapper"==a?Ju(i):null)&&Sr(u[0])&&u[1]==(R|O|k|S)&&!u[4].length&&1==u[9]?r[Xu(u[0])].apply(r,u[3]):1==i.length&&Sr(i)?r[a]():r.thru(i);return function(){var n=arguments;if(r&&1==n.length&&Lo(n[0]))return r.plant(n[0]).value();for(var e=0,n=o[e].apply(this,n);++e<t;)n=o[e].call(this,n);return n}}}function ur(n,t){return function(r,e,u){return typeof e=="function"&&u===w&&Lo(r)?n(r,e):t(r,Bt(e,u,3))}}function or(n){return function(t,r,e){
+return(typeof r!="function"||e!==w)&&(r=Bt(r,e,3)),n(t,r,be)}}function ir(n){return function(t,r,e){return(typeof r!="function"||e!==w)&&(r=Bt(r,e,3)),n(t,r)}}function ar(n){return function(t,r,e){var u={};return r=wr(r,e,3),vt(t,function(t,e,o){o=r(t,e,o),e=n?o:e,t=n?t:o,u[e]=t}),u}}function fr(n){return function(t,r,e){return t=u(t),(n?t:"")+pr(t,r,e)+(n?"":t)}}function cr(n){var t=ce(function(r,e){var u=v(e,t.placeholder);return vr(r,n,null,e,u)});return t}function lr(n,t){return function(r,e,u,o){
+var i=3>arguments.length;return typeof e=="function"&&o===w&&Lo(r)?n(r,e,u,i):Rt(r,wr(e,o,4),u,i,t)}}function sr(n,t,r,e,u,o,i,a,f,c){function l(){for(var b=arguments.length,j=b,O=Ne(b);j--;)O[j]=arguments[j];if(e&&(O=Dt(O,e,u)),o&&(O=qt(O,o,i)),_||y){var j=l.placeholder,E=v(O,j),b=b-E.length;if(b<c){var R=a?Kn(a):null,b=ju(c-b,0),S=_?E:null,E=_?null:E,C=_?O:null,O=_?null:O;return t|=_?k:I,t&=~(_?I:k),g||(t&=~(x|A)),O=[n,t,r,C,S,O,E,R,f,b],R=sr.apply(w,O),Sr(n)&&no(R,O),R.placeholder=j,R}}if(j=p?r:this,
+h&&(n=j[m]),a)for(R=O.length,b=Ou(a.length,R),S=Kn(O);b--;)E=a[b],O[b]=kr(E,R)?S[E]:w;return s&&f<O.length&&(O.length=f),(this&&this!==Zn&&this instanceof l?d||Xt(n):n).apply(j,O)}var s=t&R,p=t&x,h=t&A,_=t&O,g=t&j,y=t&E,d=!h&&Xt(n),m=n;return l}function pr(n,t,r){return n=n.length,t=+t,n<t&&xu(t)?(t-=n,r=null==r?" ":r+"",Ee(r,ou(t/r.length)).slice(0,t)):""}function hr(n,t,r,e){function u(){for(var t=-1,a=arguments.length,f=-1,c=e.length,l=Ne(a+c);++f<c;)l[f]=e[f];for(;a--;)l[f++]=arguments[++t];return(this&&this!==Zn&&this instanceof u?i:n).apply(o?r:this,l);
+
+}var o=t&x,i=Xt(n);return u}function _r(n){return function(t,r,e,u){var o=wr(e);return o===it&&null==e?Pt(t,r,n):zt(t,r,o(e,u,1),n)}}function vr(n,t,r,e,u,o,i,a){var f=t&A;if(!f&&typeof n!="function")throw new Ke(L);var c=e?e.length:0;if(c||(t&=~(k|I),e=u=null),c-=u?u.length:0,t&I){var l=e,s=u;e=u=null}var p=f?null:Ju(n);return r=[n,t,r,e,u,l,s,o,i,a],p&&(e=r[1],t=p[1],a=e|t,u=t==R&&e==O||t==R&&e==S&&r[7].length<=p[8]||t==(R|S)&&e==O,(a<R||u)&&(t&x&&(r[2]=p[2],a|=e&x?0:j),(e=p[3])&&(u=r[3],r[3]=u?Dt(u,e,p[4]):Kn(e),
+r[4]=u?v(r[3],P):Kn(p[4])),(e=p[5])&&(u=r[5],r[5]=u?qt(u,e,p[6]):Kn(e),r[6]=u?v(r[5],P):Kn(p[6])),(e=p[7])&&(r[7]=Kn(e)),t&R&&(r[8]=null==r[8]?p[8]:Ou(r[8],p[8])),null==r[9]&&(r[9]=p[9]),r[0]=p[0],r[1]=a),t=r[1],a=r[9]),r[9]=null==a?f?0:n.length:ju(a-c,0)||0,(p?Zu:no)(t==x?Gt(r[0],r[2]):t!=k&&t!=(x|k)||r[4].length?sr.apply(w,r):hr.apply(w,r),r)}function gr(n,t,r,e,u,o,i){var a=-1,f=n.length,c=t.length,l=true;if(f!=c&&(!u||c<=f))return false;for(;l&&++a<f;){var s=n[a],p=t[a],l=w;if(e&&(l=u?e(p,s,a):e(s,p,a)),
+l===w)if(u)for(var h=c;h--&&(p=t[h],!(l=s&&s===p||r(s,p,e,u,o,i))););else l=s&&s===p||r(s,p,e,u,o,i)}return!!l}function yr(n,t,r){switch(r){case M:case D:return+n==+t;case q:return n.name==t.name&&n.message==t.message;case V:return n!=+n?t!=+t:n==+t;case Z:case G:return n==t+""}return false}function dr(n,t,r,e,u,o,i){var a=Jo(n),f=a.length,c=Jo(t).length;if(f!=c&&!u)return false;for(var c=u,l=-1;++l<f;){var s=a[l],p=u?s in t:He.call(t,s);if(p){var h=n[s],_=t[s],p=w;e&&(p=u?e(_,h,s):e(h,_,s)),p===w&&(p=h&&h===_||r(h,_,e,u,o,i));
+
+}if(!p)return false;c||(c="constructor"==s)}return c||(r=n.constructor,e=t.constructor,!(r!=e&&"constructor"in n&&"constructor"in t)||typeof r=="function"&&r instanceof r&&typeof e=="function"&&e instanceof e)?true:false}function mr(n,t,r){var e=r?Cu:Su,u=e,o=u;return qu(n,function(n,i,a){i=t(n,i,a),((r?i<u:i>u)||i===e&&i===o)&&(u=i,o=n)}),o}function wr(n,t,r){var e=Ln.callback||Re,e=e===Re?it:e;return r?e(n,t,r):e}function br(n,t,e){var u=Ln.indexOf||qr,u=u===qr?r:u;return n?u(n,t,e):u}function xr(n){var t=n.length,r=new n.constructor(t);
+
+return t&&"string"==typeof n[0]&&He.call(n,"index")&&(r.index=n.index,r.input=n.input),r}function Ar(n){return n=n.constructor,typeof n=="function"&&n instanceof n||(n=Me),new n}function jr(n,t,r){var e=n.constructor;switch(t){case J:return Mt(n);case M:case D:return new e(+n);case X:case H:case Q:case nn:case tn:case rn:case en:case un:case on:return e instanceof e&&(e=Pu[t]),t=n.buffer,new e(r?Mt(t):t,n.byteOffset,n.length);case V:case G:return new e(n);case Z:var u=new e(n.source,On.exec(n));u.lastIndex=n.lastIndex;
+
+}return u}function Or(n,t,r){return null==n||Rr(t,n)||(t=Pr(t),n=1==t.length?n:dt(n,St(t,0,-1)),t=Kr(t)),t=null==n?n:n[t],null==t?w:t.apply(n,r)}function Er(n){return null!=n&&Cr(Hu(n))}function kr(n,t){return n=+n,t=null==t?Nu:t,-1<n&&0==n%1&&n<t}function Ir(n,t,r){if(!he(r))return false;var e=typeof t;return("number"==e?Er(r)&&kr(t,r.length):"string"==e&&t in r)?(t=r[t],n===n?n===t:t!==t):false}function Rr(n,t){var r=typeof n;return"string"==r&&dn.test(n)||"number"==r?true:Lo(n)?false:!yn.test(n)||null!=t&&n in Lr(t);
+
+}function Sr(n){var t=Xu(n);return!!t&&n===Ln[t]&&t in Bn.prototype}function Cr(n){return typeof n=="number"&&-1<n&&0==n%1&&n<=Nu}function Tr(n){return n===n&&!he(n)}function Ur(n,t){n=Lr(n);for(var r=-1,e=t.length,u={};++r<e;){var o=t[r];o in n&&(u[o]=n[o])}return u}function Wr(n,t){var r={};return _t(n,function(n,e,u){t(n,e,u)&&(r[e]=n)}),r}function Fr(n){var t,r=Ln.support;if(!h(n)||nu.call(n)!=Y||Gn(n)||!(He.call(n,"constructor")||(t=n.constructor,typeof t!="function"||t instanceof t))||!r.argsTag&&le(n))return false;
+
+var e;return r.ownLast?(_t(n,function(n,t,r){return e=He.call(r,t),false}),false!==e):(_t(n,function(n,t){e=t}),e===w||He.call(n,e))}function Nr(n){for(var t=be(n),r=t.length,e=r&&n.length,u=Ln.support,u=e&&Cr(e)&&(Lo(n)||u.nonEnumStrings&&ye(n)||u.nonEnumArgs&&le(n)),o=-1,i=[];++o<r;){var a=t[o];(u&&kr(a,e)||He.call(n,a))&&i.push(a)}return i}function $r(n){return null==n?[]:Er(n)?Ln.support.unindexedChars&&ye(n)?n.split(""):he(n)?n:Me(n):xe(n)}function Lr(n){if(Ln.support.unindexedChars&&ye(n)){for(var t=-1,r=n.length,e=Me(n);++t<r;)e[t]=n.charAt(t);
+
+return e}return he(n)?n:Me(n)}function Pr(n){if(Lo(n))return n;var t=[];return u(n).replace(mn,function(n,r,e,u){t.push(e?u.replace(An,"$1"):r||n)}),t}function zr(n){return n instanceof Bn?n.clone():new zn(n.__wrapped__,n.__chain__,Kn(n.__actions__))}function Br(n,t,r){return n&&n.length?((r?Ir(n,t,r):null==t)&&(t=1),St(n,0>t?0:t)):[]}function Mr(n,t,r){var e=n?n.length:0;return e?((r?Ir(n,t,r):null==t)&&(t=1),t=e-(+t||0),St(n,0,0>t?0:t)):[]}function Dr(n){return n?n[0]:w}function qr(n,t,e){var u=n?n.length:0;
+
+if(!u)return-1;if(typeof e=="number")e=0>e?ju(u+e,0):e;else if(e)return e=Pt(n,t),n=n[e],(t===t?t===n:n!==n)?e:-1;return r(n,t,e||0)}function Kr(n){var t=n?n.length:0;return t?n[t-1]:w}function Vr(n){return Br(n,1)}function Yr(n,t,e,u){if(!n||!n.length)return[];null!=t&&typeof t!="boolean"&&(u=e,e=Ir(n,t,u)?null:t,t=false);var o=wr();if((o!==it||null!=e)&&(e=o(e,u,3)),t&&br()==r){t=e;var i;e=-1,u=n.length;for(var o=-1,a=[];++e<u;){var f=n[e],c=t?t(f,e,n):f;e&&i===c||(i=c,a[++o]=f)}n=a}else n=Ft(n,e);
+
+return n}function Zr(n){if(!n||!n.length)return[];var t=-1,r=0;n=Xn(n,function(n){return Er(n)?(r=ju(n.length,r),true):void 0});for(var e=Ne(r);++t<r;)e[t]=Hn(n,Ot(t));return e}function Gr(n,t,r){return n&&n.length?(n=Zr(n),null==t?n:(t=Bt(t,r,4),Hn(n,function(n){return Qn(n,t,w,true)}))):[]}function Jr(n,t){var r=-1,e=n?n.length:0,u={};for(!e||t||Lo(n[0])||(t=[]);++r<e;){var o=n[r];t?u[o]=t[r]:o&&(u[o[0]]=o[1])}return u}function Xr(n){return n=Ln(n),n.__chain__=true,n}function Hr(n,t,r){return t.call(r,n);
+
+}function Qr(n,t,r){var e=Lo(n)?Yn:lt;return r&&Ir(n,t,r)&&(t=null),(typeof t!="function"||r!==w)&&(t=wr(t,r,3)),e(n,t)}function ne(n,t,r){var e=Lo(n)?Xn:st;return t=wr(t,r,3),e(n,t)}function te(n,t,r,e){var u=n?Hu(n):0;return Cr(u)||(n=xe(n),u=n.length),u?(r=typeof r!="number"||e&&Ir(t,r,e)?0:0>r?ju(u+r,0):r||0,typeof n=="string"||!Lo(n)&&ye(n)?r<u&&-1<n.indexOf(t,r):-1<br(n,t,r)):false}function re(n,t,r){var e=Lo(n)?Hn:bt;return t=wr(t,r,3),e(n,t)}function ee(n,t,r){return(r?Ir(n,t,r):null==t)?(n=$r(n),
+t=n.length,0<t?n[It(0,t-1)]:w):(n=ue(n),n.length=Ou(0>t?0:+t||0,n.length),n)}function ue(n){n=$r(n);for(var t=-1,r=n.length,e=Ne(r);++t<r;){var u=It(0,t);t!=u&&(e[t]=e[u]),e[u]=n[t]}return e}function oe(n,t,r){var e=Lo(n)?nt:Ct;return r&&Ir(n,t,r)&&(t=null),(typeof t!="function"||r!==w)&&(t=wr(t,r,3)),e(n,t)}function ie(n,t){var r;if(typeof t!="function"){if(typeof n!="function")throw new Ke(L);var e=n;n=t,t=e}return function(){return 0<--n&&(r=t.apply(this,arguments)),1>=n&&(t=null),r}}function ae(n,t,r){
+function e(){var r=t-(Oo()-c);0>=r||r>t?(a&&iu(a),r=p,a=s=p=w,r&&(h=Oo(),f=n.apply(l,i),s||a||(i=l=null))):s=_u(e,r)}function u(){s&&iu(s),a=s=p=w,(v||_!==t)&&(h=Oo(),f=n.apply(l,i),s||a||(i=l=null))}function o(){if(i=arguments,c=Oo(),l=this,p=v&&(s||!g),false===_)var r=g&&!s;else{a||g||(h=c);var o=_-(c-h),y=0>=o||o>_;y?(a&&(a=iu(a)),h=c,f=n.apply(l,i)):a||(a=_u(u,o))}return y&&s?s=iu(s):s||t===_||(s=_u(e,t)),r&&(y=true,f=n.apply(l,i)),!y||s||a||(i=l=null),f}var i,a,f,c,l,s,p,h=0,_=false,v=true;if(typeof n!="function")throw new Ke(L);
+
+if(t=0>t?0:+t||0,true===r)var g=true,v=false;else he(r)&&(g=r.leading,_="maxWait"in r&&ju(+r.maxWait||0,t),v="trailing"in r?r.trailing:v);return o.cancel=function(){s&&iu(s),a&&iu(a),a=s=p=w},o}function fe(n,t){function r(){var e=arguments,u=r.cache,o=t?t.apply(this,e):e[0];return u.has(o)?u.get(o):(e=n.apply(this,e),u.set(o,e),e)}if(typeof n!="function"||t&&typeof t!="function")throw new Ke(L);return r.cache=new fe.Cache,r}function ce(n,t){if(typeof n!="function")throw new Ke(L);return t=ju(t===w?n.length-1:+t||0,0),
+function(){for(var r=arguments,e=-1,u=ju(r.length-t,0),o=Ne(u);++e<u;)o[e]=r[t+e];switch(t){case 0:return n.call(this,o);case 1:return n.call(this,r[0],o);case 2:return n.call(this,r[0],r[1],o)}for(u=Ne(t+1),e=-1;++e<t;)u[e]=r[e];return u[t]=o,n.apply(this,u)}}function le(n){return h(n)&&Er(n)&&nu.call(n)==z}function se(n){return!!n&&1===n.nodeType&&h(n)&&(Ln.support.nodeTag?-1<nu.call(n).indexOf("Element"):Gn(n))}function pe(n){return h(n)&&typeof n.message=="string"&&nu.call(n)==q}function he(n){
+var t=typeof n;return"function"==t||!!n&&"object"==t}function _e(n){return null==n?false:nu.call(n)==K?ru.test(Xe.call(n)):h(n)&&(Gn(n)?ru:kn).test(n)}function ve(n){return typeof n=="number"||h(n)&&nu.call(n)==V}function ge(n){return he(n)&&nu.call(n)==Z}function ye(n){return typeof n=="string"||h(n)&&nu.call(n)==G}function de(n){return h(n)&&Cr(n.length)&&!!Fn[nu.call(n)]}function me(n){return ot(n,be(n))}function we(n){return yt(n,be(n))}function be(n){if(null==n)return[];he(n)||(n=Me(n));for(var t=n.length,r=Ln.support,t=t&&Cr(t)&&(Lo(n)||r.nonEnumStrings&&ye(n)||r.nonEnumArgs&&le(n))&&t||0,e=n.constructor,u=-1,e=zo(e)&&e.prototype||Ze,o=e===n,i=Ne(t),a=0<t,f=r.enumErrorProps&&(n===Ye||n instanceof Le),c=r.enumPrototypes&&zo(n);++u<t;)i[u]=u+"";
+
+for(var l in n)c&&"prototype"==l||f&&("message"==l||"name"==l)||a&&kr(l,t)||"constructor"==l&&(o||!He.call(n,l))||i.push(l);if(r.nonEnumShadows&&n!==Ze)for(t=n===Ge?G:n===Ye?q:nu.call(n),r=zu[t]||zu[Y],t==Y&&(e=Ze),t=Wn.length;t--;)l=Wn[t],u=r[l],o&&u||(u?!He.call(n,l):n[l]===e[l])||i.push(l);return i}function xe(n){return Nt(n,Jo(n))}function Ae(n){return(n=u(n))&&n.replace(In,c).replace(xn,"")}function je(n){return(n=u(n))&&bn.test(n)?n.replace(wn,"\\$&"):n}function Oe(n,t,r){return r&&Ir(n,t,r)&&(t=0),
+Iu(n,t)}function Ee(n,t){var r="";if(n=u(n),t=+t,1>t||!n||!xu(t))return r;do t%2&&(r+=n),t=au(t/2),n+=n;while(t);return r}function ke(n,t,r){var e=n;return(n=u(n))?(r?Ir(e,t,r):null==t)?n.slice(g(n),y(n)+1):(t+="",n.slice(i(n,t),a(n,t)+1)):n}function Ie(n,t,r){return r&&Ir(n,t,r)&&(t=null),n=u(n),n.match(t||Cn)||[]}function Re(n,t,r){return r&&Ir(n,t,r)&&(t=null),h(n)?Te(n):it(n,t)}function Se(n){return function(){return n}}function Ce(n){return n}function Te(n){return xt(at(n,true))}function Ue(n,t,r){
+if(null==r){var e=he(t),u=e&&Jo(t);((u=u&&u.length&&yt(t,u))?u.length:e)||(u=false,r=t,t=n,n=this)}u||(u=yt(t,Jo(t)));var o=true,e=-1,i=zo(n),a=u.length;false===r?o=false:he(r)&&"chain"in r&&(o=r.chain);for(;++e<a;){r=u[e];var f=t[r];n[r]=f,i&&(n.prototype[r]=function(t){return function(){var r=this.__chain__;if(o||r){var e=n(this.__wrapped__);return(e.__actions__=Kn(this.__actions__)).push({func:t,args:arguments,thisArg:n}),e.__chain__=r,e}return r=[this.value()],lu.apply(r,arguments),t.apply(n,r)}}(f))}return n;
+
+}function We(){}function Fe(n){return Rr(n)?Ot(n):Et(n)}_=_?Jn.defaults(Zn.Object(),_,Jn.pick(Zn,Un)):Zn;var Ne=_.Array,$e=_.Date,Le=_.Error,Pe=_.Function,ze=_.Math,Be=_.Number,Me=_.Object,De=_.RegExp,qe=_.String,Ke=_.TypeError,Ve=Ne.prototype,Ye=Le.prototype,Ze=Me.prototype,Ge=qe.prototype,Je=(Je=_.window)&&Je.document,Xe=Pe.prototype.toString,He=Ze.hasOwnProperty,Qe=0,nu=Ze.toString,tu=_._,ru=De("^"+je(nu).replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),eu=_e(eu=_.ArrayBuffer)&&eu,uu=_e(uu=eu&&new eu(0).slice)&&uu,ou=ze.ceil,iu=_.clearTimeout,au=ze.floor,fu=_e(fu=Me.getOwnPropertySymbols)&&fu,cu=_e(cu=Me.getPrototypeOf)&&cu,lu=Ve.push,su=_e(su=Me.preventExtensions)&&su,pu=Ze.propertyIsEnumerable,hu=_e(hu=_.Set)&&hu,_u=_.setTimeout,vu=Ve.splice,gu=_e(gu=_.Uint8Array)&&gu,yu=_e(yu=_.WeakMap)&&yu,du=function(){
+try{var n=_e(n=_.Float64Array)&&n,t=new n(new eu(10),0,1)&&n}catch(r){}return t}(),mu=function(){var n=su&&_e(n=Me.assign)&&n;try{if(n){var t=su({1:0});t[0]=1}}catch(r){try{n(t,"xo")}catch(e){}return!t[1]&&n}return false}(),wu=_e(wu=Ne.isArray)&&wu,bu=_e(bu=Me.create)&&bu,xu=_.isFinite,Au=_e(Au=Me.keys)&&Au,ju=ze.max,Ou=ze.min,Eu=_e(Eu=$e.now)&&Eu,ku=_e(ku=Be.isFinite)&&ku,Iu=_.parseInt,Ru=ze.random,Su=Be.NEGATIVE_INFINITY,Cu=Be.POSITIVE_INFINITY,Tu=ze.pow(2,32)-1,Uu=Tu-1,Wu=Tu>>>1,Fu=du?du.BYTES_PER_ELEMENT:0,Nu=ze.pow(2,53)-1,$u=yu&&new yu,Lu={},Pu={};
+
+Pu[X]=_.Float32Array,Pu[H]=_.Float64Array,Pu[Q]=_.Int8Array,Pu[nn]=_.Int16Array,Pu[tn]=_.Int32Array,Pu[rn]=_.Uint8Array,Pu[en]=_.Uint8ClampedArray,Pu[un]=_.Uint16Array,Pu[on]=_.Uint32Array;var zu={};zu[B]=zu[D]=zu[V]={constructor:true,toLocaleString:true,toString:true,valueOf:true},zu[M]=zu[G]={constructor:true,toString:true,valueOf:true},zu[q]=zu[K]=zu[Z]={constructor:true,toString:true},zu[Y]={constructor:true},Vn(Wn,function(n){for(var t in zu)if(He.call(zu,t)){var r=zu[t];r[n]=He.call(r,n)}});var Bu=Ln.support={};
+
+!function(n){function t(){this.x=n}var r=arguments,e={0:n,length:n},u=[];t.prototype={valueOf:n,y:n};for(var o in new t)u.push(o);Bu.argsTag=nu.call(r)==z,Bu.enumErrorProps=pu.call(Ye,"message")||pu.call(Ye,"name"),Bu.enumPrototypes=pu.call(t,"prototype"),Bu.funcDecomp=/\bthis\b/.test(function(){return this}),Bu.funcNames=typeof Pe.name=="string",Bu.nodeTag=nu.call(Je)!=Y,Bu.nonEnumStrings=!pu.call("x",0),Bu.nonEnumShadows=!/valueOf/.test(u),Bu.ownLast="x"!=u[0],Bu.spliceObjects=(vu.call(e,0,1),!e[0]),
+Bu.unindexedChars="xx"!="x"[0]+Me("x")[0];try{Bu.dom=11===Je.createDocumentFragment().nodeType}catch(i){Bu.dom=false}try{Bu.nonEnumArgs=!pu.call(r,1)}catch(a){Bu.nonEnumArgs=true}}(1,0),Ln.templateSettings={escape:_n,evaluate:vn,interpolate:gn,variable:"",imports:{_:Ln}};var Mu=mu||function(n,t){return null==t?n:ot(t,Qu(t),ot(t,Jo(t),n))},Du=function(){function n(){}return function(t){if(he(t)){n.prototype=t;var r=new n;n.prototype=null}return r||_.Object()}}(),qu=Yt(vt),Ku=Yt(gt,true),Vu=Zt(),Yu=Zt(true),Zu=$u?function(n,t){
+return $u.set(n,t),n}:Ce;uu||(Mt=eu&&gu?function(n){var t=n.byteLength,r=du?au(t/Fu):0,e=r*Fu,u=new eu(t);if(r){var o=new du(u,0,r);o.set(new du(n,0,r))}return t!=e&&(o=new gu(u,e),o.set(new gu(n,e))),u}:Se(null));var Gu=bu&&hu?function(n){return new Dn(n)}:Se(null),Ju=$u?function(n){return $u.get(n)}:We,Xu=function(){return Bu.funcNames?"constant"==Se.name?Ot("name"):function(n){for(var t=n.name,r=Lu[t],e=r?r.length:0;e--;){var u=r[e],o=u.func;if(null==o||o==n)return u.name}return t}:Se("")}(),Hu=Ot("length"),Qu=fu?function(n){
+return fu(Lr(n))}:Se([]),no=function(){var n=0,t=0;return function(r,e){var u=Oo(),o=W-(u-t);if(t=u,0<o){if(++n>=U)return r}else n=0;return Zu(r,e)}}(),to=ce(function(n,t){return Er(n)?ct(n,ht(t,false,true)):[]}),ro=tr(),eo=tr(true),uo=ce(function(t,r){r=ht(r);var e=ut(t,r);return kt(t,r.sort(n)),e}),oo=_r(),io=_r(true),ao=ce(function(n){return Ft(ht(n,false,true))}),fo=ce(function(n,t){return Er(n)?ct(n,t):[]}),co=ce(Zr),lo=ce(function(n){var t=n.length,r=n[t-2],e=n[t-1];return 2<t&&typeof r=="function"?t-=2:(r=1<t&&typeof e=="function"?(--t,
+e):w,e=w),n.length=t,Gr(n,r,e)}),so=ce(function(n,t){return Er(n)&&(n=$r(n)),ut(n,ht(t))}),po=Kt(function(n,t,r){He.call(n,r)?++n[r]:n[r]=1}),ho=nr(qu),_o=nr(Ku,true),vo=ur(Vn,qu),go=ur(function(n,t){for(var r=n.length;r--&&false!==t(n[r],r,n););return n},Ku),yo=Kt(function(n,t,r){He.call(n,r)?n[r].push(t):n[r]=[t]}),mo=Kt(function(n,t,r){n[r]=t}),wo=ce(function(n,t,r){var e=-1,u=typeof t=="function",o=Rr(t),i=Er(n)?Ne(n.length):[];return qu(n,function(n){var a=u?t:o&&null!=n&&n[t];i[++e]=a?a.apply(n,r):Or(n,t,r);
+
+}),i}),bo=Kt(function(n,t,r){n[r?0:1].push(t)},function(){return[[],[]]}),xo=lr(Qn,qu),Ao=lr(function(n,t,r,e){var u=n.length;for(e&&u&&(r=n[--u]);u--;)r=t(r,n[u],u,n);return r},Ku),jo=ce(function(n,t){if(null==n)return[];var r=t[2];return r&&Ir(t[0],t[1],r)&&(t.length=1),Ut(n,ht(t),[])}),Oo=Eu||function(){return(new $e).getTime()},Eo=ce(function(n,t,r){var e=x;if(r.length)var u=v(r,Eo.placeholder),e=e|k;return vr(n,e,t,r,u)}),ko=ce(function(n,t){t=t.length?ht(t):we(n);for(var r=-1,e=t.length;++r<e;){
+var u=t[r];n[u]=vr(n[u],x,n)}return n}),Io=ce(function(n,t,r){var e=x|A;if(r.length)var u=v(r,Io.placeholder),e=e|k;return vr(t,e,n,r,u)}),Ro=Ht(O),So=Ht(E),Co=ce(function(n,t){return ft(n,1,t)}),To=ce(function(n,t,r){return ft(n,t,r)}),Uo=er(),Wo=er(true),Fo=cr(k),No=cr(I),$o=ce(function(n,t){return vr(n,S,null,null,null,ht(t))});Bu.argsTag||(le=function(n){return h(n)&&Er(n)&&He.call(n,"callee")&&!pu.call(n,"callee")});var Lo=wu||function(n){return h(n)&&Cr(n.length)&&nu.call(n)==B};Bu.dom||(se=function(n){
+return!!n&&1===n.nodeType&&h(n)&&!Bo(n)});var Po=ku||function(n){return typeof n=="number"&&xu(n)},zo=e(/x/)||gu&&!e(gu)?function(n){return nu.call(n)==K}:e,Bo=cu?function(n){if(!n||nu.call(n)!=Y||!Ln.support.argsTag&&le(n))return false;var t=n.valueOf,r=_e(t)&&(r=cu(t))&&cu(r);return r?n==r||cu(n)==r:Fr(n)}:Fr,Mo=Vt(function(n,t,r){return r?et(n,t,r):Mu(n,t)}),Do=ce(function(n){var t=n[0];return null==t?t:(n.push(tt),Mo.apply(w,n))}),qo=rr(vt),Ko=rr(gt),Vo=or(Vu),Yo=or(Yu),Zo=ir(vt),Go=ir(gt),Jo=Au?function(n){
+var t=null!=n&&n.constructor;return typeof t=="function"&&t.prototype===n||(typeof n=="function"?Ln.support.enumPrototypes:Er(n))?Nr(n):he(n)?Au(n):[]}:Nr,Xo=ar(true),Ho=ar(),Qo=Vt(jt),ni=ce(function(n,t){if(null==n)return{};if("function"!=typeof t[0])return t=Hn(ht(t),qe),Ur(n,ct(be(n),t));var r=Bt(t[0],t[1],3);return Wr(n,function(n,t,e){return!r(n,t,e)})}),ti=ce(function(n,t){return null==n?{}:"function"==typeof t[0]?Wr(n,Bt(t[0],t[1],3)):Ur(n,ht(t))}),ri=Jt(function(n,t,r){return t=t.toLowerCase(),
+n+(r?t.charAt(0).toUpperCase()+t.slice(1):t)}),ei=Jt(function(n,t,r){return n+(r?"-":"")+t.toLowerCase()}),ui=fr(),oi=fr(true);8!=Iu(Tn+"08")&&(Oe=function(n,t,r){return(r?Ir(n,t,r):null==t)?t=0:t&&(t=+t),n=ke(n),Iu(n,t||(En.test(n)?16:10))});var ii=Jt(function(n,t,r){return n+(r?"_":"")+t.toLowerCase()}),ai=Jt(function(n,t,r){return n+(r?" ":"")+(t.charAt(0).toUpperCase()+t.slice(1))}),fi=ce(function(n,t){try{return n.apply(w,t)}catch(r){return pe(r)?r:new Le(r)}}),ci=ce(function(n,t){return function(r){
+return Or(r,n,t)}}),li=ce(function(n,t){return function(r){return Or(n,r,t)}}),si=Qt(function(n){for(var t=-1,r=n.length,e=Su;++t<r;){var u=n[t];u>e&&(e=u)}return e}),pi=Qt(function(n){for(var t=-1,r=n.length,e=Cu;++t<r;){var u=n[t];u<e&&(e=u)}return e},true);return Ln.prototype=Pn.prototype,zn.prototype=Du(Pn.prototype),zn.prototype.constructor=zn,Bn.prototype=Du(Pn.prototype),Bn.prototype.constructor=Bn,Mn.prototype["delete"]=function(n){return this.has(n)&&delete this.__data__[n]},Mn.prototype.get=function(n){
+return"__proto__"==n?w:this.__data__[n]},Mn.prototype.has=function(n){return"__proto__"!=n&&He.call(this.__data__,n)},Mn.prototype.set=function(n,t){return"__proto__"!=n&&(this.__data__[n]=t),this},Dn.prototype.push=function(n){var t=this.data;typeof n=="string"||he(n)?t.set.add(n):t.hash[n]=true},fe.Cache=Mn,Ln.after=function(n,t){if(typeof t!="function"){if(typeof n!="function")throw new Ke(L);var r=n;n=t,t=r}return n=xu(n=+n)?n:0,function(){return 1>--n?t.apply(this,arguments):void 0}},Ln.ary=function(n,t,r){
+return r&&Ir(n,t,r)&&(t=null),t=n&&null==t?n.length:ju(+t||0,0),vr(n,R,null,null,null,null,t)},Ln.assign=Mo,Ln.at=so,Ln.before=ie,Ln.bind=Eo,Ln.bindAll=ko,Ln.bindKey=Io,Ln.callback=Re,Ln.chain=Xr,Ln.chunk=function(n,t,r){t=(r?Ir(n,t,r):null==t)?1:ju(+t||1,1),r=0;for(var e=n?n.length:0,u=-1,o=Ne(ou(e/t));r<e;)o[++u]=St(n,r,r+=t);return o},Ln.compact=function(n){for(var t=-1,r=n?n.length:0,e=-1,u=[];++t<r;){var o=n[t];o&&(u[++e]=o)}return u},Ln.constant=Se,Ln.countBy=po,Ln.create=function(n,t,r){var e=Du(n);
+
+return r&&Ir(n,t,r)&&(t=null),t?Mu(e,t):e},Ln.curry=Ro,Ln.curryRight=So,Ln.debounce=ae,Ln.defaults=Do,Ln.defer=Co,Ln.delay=To,Ln.difference=to,Ln.drop=Br,Ln.dropRight=Mr,Ln.dropRightWhile=function(n,t,r){return n&&n.length?$t(n,wr(t,r,3),true,true):[]},Ln.dropWhile=function(n,t,r){return n&&n.length?$t(n,wr(t,r,3),true):[]},Ln.fill=function(n,t,r,e){var u=n?n.length:0;if(!u)return[];for(r&&typeof r!="number"&&Ir(n,t,r)&&(r=0,e=u),u=n.length,r=null==r?0:+r||0,0>r&&(r=-r>u?0:u+r),e=e===w||e>u?u:+e||0,0>e&&(e+=u),
+u=r>e?0:e>>>0,r>>>=0;r<u;)n[r++]=t;return n},Ln.filter=ne,Ln.flatten=function(n,t,r){var e=n?n.length:0;return r&&Ir(n,t,r)&&(t=false),e?ht(n,t):[]},Ln.flattenDeep=function(n){return n&&n.length?ht(n,true):[]},Ln.flow=Uo,Ln.flowRight=Wo,Ln.forEach=vo,Ln.forEachRight=go,Ln.forIn=Vo,Ln.forInRight=Yo,Ln.forOwn=Zo,Ln.forOwnRight=Go,Ln.functions=we,Ln.groupBy=yo,Ln.indexBy=mo,Ln.initial=function(n){return Mr(n,1)},Ln.intersection=function(){for(var n=[],t=-1,e=arguments.length,u=[],o=br(),i=o==r,a=[];++t<e;){
+var f=arguments[t];Er(f)&&(n.push(f),u.push(i&&120<=f.length?Gu(t&&f):null))}if(e=n.length,2>e)return a;var i=n[0],c=-1,l=i?i.length:0,s=u[0];n:for(;++c<l;)if(f=i[c],0>(s?qn(s,f):o(a,f,0))){for(t=e;--t;){var p=u[t];if(0>(p?qn(p,f):o(n[t],f,0)))continue n}s&&s.push(f),a.push(f)}return a},Ln.invert=function(n,t,r){r&&Ir(n,t,r)&&(t=null),r=-1;for(var e=Jo(n),u=e.length,o={};++r<u;){var i=e[r],a=n[i];t?He.call(o,a)?o[a].push(i):o[a]=[i]:o[a]=i}return o},Ln.invoke=wo,Ln.keys=Jo,Ln.keysIn=be,Ln.map=re,
+Ln.mapKeys=Xo,Ln.mapValues=Ho,Ln.matches=Te,Ln.matchesProperty=function(n,t){return At(n,at(t,true))},Ln.memoize=fe,Ln.merge=Qo,Ln.method=ci,Ln.methodOf=li,Ln.mixin=Ue,Ln.negate=function(n){if(typeof n!="function")throw new Ke(L);return function(){return!n.apply(this,arguments)}},Ln.omit=ni,Ln.once=function(n){return ie(2,n)},Ln.pairs=function(n){for(var t=-1,r=Jo(n),e=r.length,u=Ne(e);++t<e;){var o=r[t];u[t]=[o,n[o]]}return u},Ln.partial=Fo,Ln.partialRight=No,Ln.partition=bo,Ln.pick=ti,Ln.pluck=function(n,t){
+return re(n,Fe(t))},Ln.property=Fe,Ln.propertyOf=function(n){return function(t){return dt(n,Pr(t),t+"")}},Ln.pull=function(){var n=arguments,t=n[0];if(!t||!t.length)return t;for(var r=0,e=br(),u=n.length;++r<u;)for(var o=0,i=n[r];-1<(o=e(t,i,o));)vu.call(t,o,1);return t},Ln.pullAt=uo,Ln.range=function(n,t,r){r&&Ir(n,t,r)&&(t=r=null),n=+n||0,r=null==r?1:+r||0,null==t?(t=n,n=0):t=+t||0;var e=-1;t=ju(ou((t-n)/(r||1)),0);for(var u=Ne(t);++e<t;)u[e]=n,n+=r;return u},Ln.rearg=$o,Ln.reject=function(n,t,r){
+var e=Lo(n)?Xn:st;return t=wr(t,r,3),e(n,function(n,r,e){return!t(n,r,e)})},Ln.remove=function(n,t,r){var e=[];if(!n||!n.length)return e;var u=-1,o=[],i=n.length;for(t=wr(t,r,3);++u<i;)r=n[u],t(r,u,n)&&(e.push(r),o.push(u));return kt(n,o),e},Ln.rest=Vr,Ln.restParam=ce,Ln.set=function(n,t,r){if(null==n)return n;var e=t+"";t=null!=n[e]||Rr(t,n)?[e]:Pr(t);for(var e=-1,u=t.length,o=u-1,i=n;null!=i&&++e<u;){var a=t[e];he(i)&&(e==o?i[a]=r:null==i[a]&&(i[a]=kr(t[e+1])?[]:{})),i=i[a]}return n},Ln.shuffle=ue,
+Ln.slice=function(n,t,r){var e=n?n.length:0;return e?(r&&typeof r!="number"&&Ir(n,t,r)&&(t=0,r=e),St(n,t,r)):[]},Ln.sortBy=function(n,t,r){if(null==n)return[];r&&Ir(n,t,r)&&(t=null);var e=-1;return t=wr(t,r,3),n=bt(n,function(n,r,u){return{a:t(n,r,u),b:++e,c:n}}),Tt(n,f)},Ln.sortByAll=jo,Ln.sortByOrder=function(n,t,r,e){return null==n?[]:(e&&Ir(t,r,e)&&(r=null),Lo(t)||(t=null==t?[]:[t]),Lo(r)||(r=null==r?[]:[r]),Ut(n,t,r))},Ln.spread=function(n){if(typeof n!="function")throw new Ke(L);return function(t){
+return n.apply(this,t)}},Ln.take=function(n,t,r){return n&&n.length?((r?Ir(n,t,r):null==t)&&(t=1),St(n,0,0>t?0:t)):[]},Ln.takeRight=function(n,t,r){var e=n?n.length:0;return e?((r?Ir(n,t,r):null==t)&&(t=1),t=e-(+t||0),St(n,0>t?0:t)):[]},Ln.takeRightWhile=function(n,t,r){return n&&n.length?$t(n,wr(t,r,3),false,true):[]},Ln.takeWhile=function(n,t,r){return n&&n.length?$t(n,wr(t,r,3)):[]},Ln.tap=function(n,t,r){return t.call(r,n),n},Ln.throttle=function(n,t,r){var e=true,u=true;if(typeof n!="function")throw new Ke(L);
+
+return false===r?e=false:he(r)&&(e="leading"in r?!!r.leading:e,u="trailing"in r?!!r.trailing:u),$n.leading=e,$n.maxWait=+t,$n.trailing=u,ae(n,t,$n)},Ln.thru=Hr,Ln.times=function(n,t,r){if(n=au(n),1>n||!xu(n))return[];var e=-1,u=Ne(Ou(n,Tu));for(t=Bt(t,r,1);++e<n;)e<Tu?u[e]=t(e):t(e);return u},Ln.toArray=function(n){var t=n?Hu(n):0;return Cr(t)?t?Ln.support.unindexedChars&&ye(n)?n.split(""):Kn(n):[]:xe(n)},Ln.toPlainObject=me,Ln.transform=function(n,t,r,e){var u=Lo(n)||de(n);return t=wr(t,e,4),null==r&&(u||he(n)?(e=n.constructor,
+r=u?Lo(n)?new e:[]:Du(zo(e)&&e.prototype)):r={}),(u?Vn:vt)(n,function(n,e,u){return t(r,n,e,u)}),r},Ln.union=ao,Ln.uniq=Yr,Ln.unzip=Zr,Ln.unzipWith=Gr,Ln.values=xe,Ln.valuesIn=function(n){return Nt(n,be(n))},Ln.where=function(n,t){return ne(n,xt(t))},Ln.without=fo,Ln.wrap=function(n,t){return t=null==t?Ce:t,vr(t,k,null,[n],[])},Ln.xor=function(){for(var n=-1,t=arguments.length;++n<t;){var r=arguments[n];if(Er(r))var e=e?ct(e,r).concat(ct(r,e)):r}return e?Ft(e):[]},Ln.zip=co,Ln.zipObject=Jr,Ln.zipWith=lo,
+Ln.backflow=Wo,Ln.collect=re,Ln.compose=Wo,Ln.each=vo,Ln.eachRight=go,Ln.extend=Mo,Ln.iteratee=Re,Ln.methods=we,Ln.object=Jr,Ln.select=ne,Ln.tail=Vr,Ln.unique=Yr,Ue(Ln,Ln),Ln.add=function(n,t){return(+n||0)+(+t||0)},Ln.attempt=fi,Ln.camelCase=ri,Ln.capitalize=function(n){return(n=u(n))&&n.charAt(0).toUpperCase()+n.slice(1)},Ln.clone=function(n,t,r,e){return t&&typeof t!="boolean"&&Ir(n,t,r)?t=false:typeof t=="function"&&(e=r,r=t,t=false),r=typeof r=="function"&&Bt(r,e,1),at(n,t,r)},Ln.cloneDeep=function(n,t,r){
+return t=typeof t=="function"&&Bt(t,r,1),at(n,true,t)},Ln.deburr=Ae,Ln.endsWith=function(n,t,r){n=u(n),t+="";var e=n.length;return r=r===w?e:Ou(0>r?0:+r||0,e),r-=t.length,0<=r&&n.indexOf(t,r)==r},Ln.escape=function(n){return(n=u(n))&&hn.test(n)?n.replace(sn,l):n},Ln.escapeRegExp=je,Ln.every=Qr,Ln.find=ho,Ln.findIndex=ro,Ln.findKey=qo,Ln.findLast=_o,Ln.findLastIndex=eo,Ln.findLastKey=Ko,Ln.findWhere=function(n,t){return ho(n,xt(t))},Ln.first=Dr,Ln.get=function(n,t,r){return n=null==n?w:dt(n,Pr(t),t+""),
+n===w?r:n},Ln.has=function(n,t){if(null==n)return false;var r=He.call(n,t);return r||Rr(t)||(t=Pr(t),n=1==t.length?n:dt(n,St(t,0,-1)),t=Kr(t),r=null!=n&&He.call(n,t)),r||Ln.support.nonEnumStrings&&ye(n)&&kr(t,n.length)},Ln.identity=Ce,Ln.includes=te,Ln.indexOf=qr,Ln.inRange=function(n,t,r){return t=+t||0,"undefined"===typeof r?(r=t,t=0):r=+r||0,n>=Ou(t,r)&&n<ju(t,r)},Ln.isArguments=le,Ln.isArray=Lo,Ln.isBoolean=function(n){return true===n||false===n||h(n)&&nu.call(n)==M},Ln.isDate=function(n){return h(n)&&nu.call(n)==D;
+
+},Ln.isElement=se,Ln.isEmpty=function(n){return null==n?true:Er(n)&&(Lo(n)||ye(n)||le(n)||h(n)&&zo(n.splice))?!n.length:!Jo(n).length},Ln.isEqual=function(n,t,r,e){return r=typeof r=="function"&&Bt(r,e,3),!r&&Tr(n)&&Tr(t)?n===t:(e=r?r(n,t):w,e===w?mt(n,t,r):!!e)},Ln.isError=pe,Ln.isFinite=Po,Ln.isFunction=zo,Ln.isMatch=function(n,t,r,e){var u=Jo(t),o=u.length;if(!o)return true;if(null==n)return false;if(r=typeof r=="function"&&Bt(r,e,3),n=Lr(n),!r&&1==o){var i=u[0];if(e=t[i],Tr(e))return e===n[i]&&(e!==w||i in n);
+
+}for(var i=Ne(o),a=Ne(o);o--;)e=i[o]=t[u[o]],a[o]=Tr(e);return wt(n,u,i,a,r)},Ln.isNaN=function(n){return ve(n)&&n!=+n},Ln.isNative=_e,Ln.isNull=function(n){return null===n},Ln.isNumber=ve,Ln.isObject=he,Ln.isPlainObject=Bo,Ln.isRegExp=ge,Ln.isString=ye,Ln.isTypedArray=de,Ln.isUndefined=function(n){return n===w},Ln.kebabCase=ei,Ln.last=Kr,Ln.lastIndexOf=function(n,t,r){var e=n?n.length:0;if(!e)return-1;var u=e;if(typeof r=="number")u=(0>r?ju(e+r,0):Ou(r||0,e-1))+1;else if(r)return u=Pt(n,t,true)-1,
+n=n[u],(t===t?t===n:n!==n)?u:-1;if(t!==t)return p(n,u,true);for(;u--;)if(n[u]===t)return u;return-1},Ln.max=si,Ln.min=pi,Ln.noConflict=function(){return _._=tu,this},Ln.noop=We,Ln.now=Oo,Ln.pad=function(n,t,r){n=u(n),t=+t;var e=n.length;return e<t&&xu(t)?(e=(t-e)/2,t=au(e),e=ou(e),r=pr("",e,r),r.slice(0,t)+n+r):n},Ln.padLeft=ui,Ln.padRight=oi,Ln.parseInt=Oe,Ln.random=function(n,t,r){r&&Ir(n,t,r)&&(t=r=null);var e=null==n,u=null==t;return null==r&&(u&&typeof n=="boolean"?(r=n,n=1):typeof t=="boolean"&&(r=t,
+u=true)),e&&u&&(t=1,u=false),n=+n||0,u?(t=n,n=0):t=+t||0,r||n%1||t%1?(r=Ru(),Ou(n+r*(t-n+parseFloat("1e-"+((r+"").length-1))),t)):It(n,t)},Ln.reduce=xo,Ln.reduceRight=Ao,Ln.repeat=Ee,Ln.result=function(n,t,r){var e=null==n?w:Lr(n)[t];return e===w&&(null==n||Rr(t,n)||(t=Pr(t),n=1==t.length?n:dt(n,St(t,0,-1)),e=null==n?w:Lr(n)[Kr(t)]),e=e===w?r:e),zo(e)?e.call(n):e},Ln.runInContext=m,Ln.size=function(n){var t=n?Hu(n):0;return Cr(t)?t:Jo(n).length},Ln.snakeCase=ii,Ln.some=oe,Ln.sortedIndex=oo,Ln.sortedLastIndex=io,
+Ln.startCase=ai,Ln.startsWith=function(n,t,r){return n=u(n),r=null==r?0:Ou(0>r?0:+r||0,n.length),n.lastIndexOf(t,r)==r},Ln.sum=function(n,t,r){r&&Ir(n,t,r)&&(t=null);var e=wr(),u=null==t;if(e===it&&u||(u=false,t=e(t,r,3)),u){for(n=Lo(n)?n:$r(n),t=n.length,r=0;t--;)r+=+n[t]||0;n=r}else n=Wt(n,t);return n},Ln.template=function(n,t,r){var e=Ln.templateSettings;r&&Ir(n,t,r)&&(t=r=null),n=u(n),t=et(Mu({},r||t),e,rt),r=et(Mu({},t.imports),e.imports,rt);var o,i,a=Jo(r),f=Nt(r,a),c=0;r=t.interpolate||Rn;var l="__p+='";
+
+r=De((t.escape||Rn).source+"|"+r.source+"|"+(r===gn?jn:Rn).source+"|"+(t.evaluate||Rn).source+"|$","g");var p="sourceURL"in t?"//# sourceURL="+t.sourceURL+"\n":"";if(n.replace(r,function(t,r,e,u,a,f){return e||(e=u),l+=n.slice(c,f).replace(Sn,s),r&&(o=true,l+="'+__e("+r+")+'"),a&&(i=true,l+="';"+a+";\n__p+='"),e&&(l+="'+((__t=("+e+"))==null?'':__t)+'"),c=f+t.length,t}),l+="';",(t=t.variable)||(l="with(obj){"+l+"}"),l=(i?l.replace(an,""):l).replace(fn,"$1").replace(cn,"$1;"),l="function("+(t||"obj")+"){"+(t?"":"obj||(obj={});")+"var __t,__p=''"+(o?",__e=_.escape":"")+(i?",__j=Array.prototype.join;function print(){__p+=__j.call(arguments,'')}":";")+l+"return __p}",
+t=fi(function(){return Pe(a,p+"return "+l).apply(w,f)}),t.source=l,pe(t))throw t;return t},Ln.trim=ke,Ln.trimLeft=function(n,t,r){var e=n;return(n=u(n))?n.slice((r?Ir(e,t,r):null==t)?g(n):i(n,t+"")):n},Ln.trimRight=function(n,t,r){var e=n;return(n=u(n))?(r?Ir(e,t,r):null==t)?n.slice(0,y(n)+1):n.slice(0,a(n,t+"")+1):n},Ln.trunc=function(n,t,r){r&&Ir(n,t,r)&&(t=null);var e=C;if(r=T,null!=t)if(he(t)){var o="separator"in t?t.separator:o,e="length"in t?+t.length||0:e;r="omission"in t?u(t.omission):r}else e=+t||0;
+
+if(n=u(n),e>=n.length)return n;if(e-=r.length,1>e)return r;if(t=n.slice(0,e),null==o)return t+r;if(ge(o)){if(n.slice(e).search(o)){var i,a=n.slice(0,e);for(o.global||(o=De(o.source,(On.exec(o)||"")+"g")),o.lastIndex=0;n=o.exec(a);)i=n.index;t=t.slice(0,null==i?e:i)}}else n.indexOf(o,e)!=e&&(o=t.lastIndexOf(o),-1<o&&(t=t.slice(0,o)));return t+r},Ln.unescape=function(n){return(n=u(n))&&pn.test(n)?n.replace(ln,d):n},Ln.uniqueId=function(n){var t=++Qe;return u(n)+t},Ln.words=Ie,Ln.all=Qr,Ln.any=oe,Ln.contains=te,
+Ln.detect=ho,Ln.foldl=xo,Ln.foldr=Ao,Ln.head=Dr,Ln.include=te,Ln.inject=xo,Ue(Ln,function(){var n={};return vt(Ln,function(t,r){Ln.prototype[r]||(n[r]=t)}),n}(),false),Ln.sample=ee,Ln.prototype.sample=function(n){return this.__chain__||null!=n?this.thru(function(t){return ee(t,n)}):ee(this.value())},Ln.VERSION=b,Vn("bind bindKey curry curryRight partial partialRight".split(" "),function(n){Ln[n].placeholder=Ln}),Vn(["dropWhile","filter","map","takeWhile"],function(n,t){var r=t!=$,e=t==F;Bn.prototype[n]=function(n,u){
+var o=this.__filtered__,i=o&&e?new Bn(this):this.clone();return(i.__iteratees__||(i.__iteratees__=[])).push({done:false,count:0,index:0,iteratee:wr(n,u,1),limit:-1,type:t}),i.__filtered__=o||r,i}}),Vn(["drop","take"],function(n,t){var r=n+"While";Bn.prototype[n]=function(r){var e=this.__filtered__,u=e&&!t?this.dropWhile():this.clone();return r=null==r?1:ju(au(r)||0,0),e?t?u.__takeCount__=Ou(u.__takeCount__,r):Kr(u.__iteratees__).limit=r:(u.__views__||(u.__views__=[])).push({size:r,type:n+(0>u.__dir__?"Right":"")
+}),u},Bn.prototype[n+"Right"]=function(t){return this.reverse()[n](t).reverse()},Bn.prototype[n+"RightWhile"]=function(n,t){return this.reverse()[r](n,t).reverse()}}),Vn(["first","last"],function(n,t){var r="take"+(t?"Right":"");Bn.prototype[n]=function(){return this[r](1).value()[0]}}),Vn(["initial","rest"],function(n,t){var r="drop"+(t?"":"Right");Bn.prototype[n]=function(){return this[r](1)}}),Vn(["pluck","where"],function(n,t){var r=t?"filter":"map",e=t?xt:Fe;Bn.prototype[n]=function(n){return this[r](e(n));
+
+}}),Bn.prototype.compact=function(){return this.filter(Ce)},Bn.prototype.reject=function(n,t){return n=wr(n,t,1),this.filter(function(t){return!n(t)})},Bn.prototype.slice=function(n,t){n=null==n?0:+n||0;var r=this;return 0>n?r=this.takeRight(-n):n&&(r=this.drop(n)),t!==w&&(t=+t||0,r=0>t?r.dropRight(-t):r.take(t-n)),r},Bn.prototype.toArray=function(){return this.drop(0)},vt(Bn.prototype,function(n,t){var r=Ln[t];if(r){var e=/^(?:filter|map|reject)|While$/.test(t),u=/^(?:first|last)$/.test(t);Ln.prototype[t]=function(){
+function t(n){return n=[n],lu.apply(n,o),r.apply(Ln,n)}var o=arguments,i=this.__chain__,a=this.__wrapped__,f=!!this.__actions__.length,c=a instanceof Bn,l=o[0],s=c||Lo(a);return s&&e&&typeof l=="function"&&1!=l.length&&(c=s=false),c=c&&!f,u&&!i?c?n.call(a):r.call(Ln,this.value()):s?(a=n.apply(c?a:new Bn(this),o),u||!f&&!a.__actions__||(a.__actions__||(a.__actions__=[])).push({func:Hr,args:[t],thisArg:Ln}),new zn(a,i)):this.thru(t)}}}),Vn("concat join pop push replace shift sort splice split unshift".split(" "),function(n){
+var t=(/^(?:replace|split)$/.test(n)?Ge:Ve)[n],r=/^(?:push|sort|unshift)$/.test(n)?"tap":"thru",e=/^(?:join|pop|replace|shift)$/.test(n),u=Bu.spliceObjects||!/^(?:pop|shift|splice)$/.test(n)?t:function(){var n=t.apply(this,arguments);return 0===this.length&&delete this[0],n};Ln.prototype[n]=function(){var n=arguments;return e&&!this.__chain__?u.apply(this.value(),n):this[r](function(t){return u.apply(t,n)})}}),vt(Bn.prototype,function(n,t){var r=Ln[t];if(r){var e=r.name;(Lu[e]||(Lu[e]=[])).push({
+name:t,func:r})}}),Lu[sr(null,A).name]=[{name:"wrapper",func:null}],Bn.prototype.clone=function(){var n=this.__actions__,t=this.__iteratees__,r=this.__views__,e=new Bn(this.__wrapped__);return e.__actions__=n?Kn(n):null,e.__dir__=this.__dir__,e.__filtered__=this.__filtered__,e.__iteratees__=t?Kn(t):null,e.__takeCount__=this.__takeCount__,e.__views__=r?Kn(r):null,e},Bn.prototype.reverse=function(){if(this.__filtered__){var n=new Bn(this);n.__dir__=-1,n.__filtered__=true}else n=this.clone(),n.__dir__*=-1;
+
+return n},Bn.prototype.value=function(){var n=this.__wrapped__.value();if(!Lo(n))return Lt(n,this.__actions__);var t,r=this.__dir__,e=0>r;t=n.length;for(var u=this.__views__,o=0,i=-1,a=u?u.length:0;++i<a;){var f=u[i],c=f.size;switch(f.type){case"drop":o+=c;break;case"dropRight":t-=c;break;case"take":t=Ou(t,o+c);break;case"takeRight":o=ju(o,t-c)}}t={start:o,end:t},u=t.start,o=t.end,t=o-u,u=e?o:u-1,o=Ou(t,this.__takeCount__),a=(i=this.__iteratees__)?i.length:0,f=0,c=[];n:for(;t--&&f<o;){for(var u=u+r,l=-1,s=n[u];++l<a;){
+var p=i[l],h=p.iteratee,_=p.type;if(_==F){if(p.done&&(e?u>p.index:u<p.index)&&(p.count=0,p.done=false),p.index=u,!(p.done||(_=p.limit,p.done=-1<_?p.count++>=_:!h(s))))continue n}else if(p=h(s),_==$)s=p;else if(!p){if(_==N)continue n;break n}}c[f++]=s}return c},Ln.prototype.chain=function(){return Xr(this)},Ln.prototype.commit=function(){return new zn(this.value(),this.__chain__)},Ln.prototype.plant=function(n){for(var t,r=this;r instanceof Pn;){var e=zr(r);t?u.__wrapped__=e:t=e;var u=e,r=r.__wrapped__;
+
+}return u.__wrapped__=n,t},Ln.prototype.reverse=function(){var n=this.__wrapped__;return n instanceof Bn?(this.__actions__.length&&(n=new Bn(this)),new zn(n.reverse(),this.__chain__)):this.thru(function(n){return n.reverse()})},Ln.prototype.toString=function(){return this.value()+""},Ln.prototype.run=Ln.prototype.toJSON=Ln.prototype.valueOf=Ln.prototype.value=function(){return Lt(this.__wrapped__,this.__actions__)},Ln.prototype.collect=Ln.prototype.map,Ln.prototype.head=Ln.prototype.first,Ln.prototype.select=Ln.prototype.filter,
+Ln.prototype.tail=Ln.prototype.rest,Ln}var w,b="3.8.0",x=1,A=2,j=4,O=8,E=16,k=32,I=64,R=128,S=256,C=30,T="...",U=150,W=16,F=0,N=1,$=2,L="Expected a function",P="__lodash_placeholder__",z="[object Arguments]",B="[object Array]",M="[object Boolean]",D="[object Date]",q="[object Error]",K="[object Function]",V="[object Number]",Y="[object Object]",Z="[object RegExp]",G="[object String]",J="[object ArrayBuffer]",X="[object Float32Array]",H="[object Float64Array]",Q="[object Int8Array]",nn="[object Int16Array]",tn="[object Int32Array]",rn="[object Uint8Array]",en="[object Uint8ClampedArray]",un="[object Uint16Array]",on="[object Uint32Array]",an=/\b__p\+='';/g,fn=/\b(__p\+=)''\+/g,cn=/(__e\(.*?\)|\b__t\))\+'';/g,ln=/&(?:amp|lt|gt|quot|#39|#96);/g,sn=/[&<>"'`]/g,pn=RegExp(ln.source),hn=RegExp(sn.source),_n=/<%-([\s\S]+?)%>/g,vn=/<%([\s\S]+?)%>/g,gn=/<%=([\s\S]+?)%>/g,yn=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\n\\]|\\.)*?\1)\]/,dn=/^\w*$/,mn=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\n\\]|\\.)*?)\2)\]/g,wn=/[.*+?^${}()|[\]\/\\]/g,bn=RegExp(wn.source),xn=/[\u0300-\u036f\ufe20-\ufe23]/g,An=/\\(\\)?/g,jn=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,On=/\w*$/,En=/^0[xX]/,kn=/^\[object .+?Constructor\]$/,In=/[\xc0-\xd6\xd8-\xde\xdf-\xf6\xf8-\xff]/g,Rn=/($^)/,Sn=/['\n\r\u2028\u2029\\]/g,Cn=RegExp("[A-Z\\xc0-\\xd6\\xd8-\\xde]+(?=[A-Z\\xc0-\\xd6\\xd8-\\xde][a-z\\xdf-\\xf6\\xf8-\\xff]+)|[A-Z\\xc0-\\xd6\\xd8-\\xde]?[a-z\\xdf-\\xf6\\xf8-\\xff]+|[A-Z\\xc0-\\xd6\\xd8-\\xde]+|[0-9]+","g"),Tn=" \t\x0b\f\xa0\ufeff\n\r\u2028\u2029\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000",Un="Array ArrayBuffer Date Error Float32Array Float64Array Function Int8Array Int16Array Int32Array Math Number Object RegExp Set String _ clearTimeout document isFinite parseInt setTimeout TypeError Uint8Array Uint8ClampedArray Uint16Array Uint32Array WeakMap window".split(" "),Wn="constructor hasOwnProperty isPrototypeOf propertyIsEnumerable toLocaleString toString valueOf".split(" "),Fn={};
+
+Fn[X]=Fn[H]=Fn[Q]=Fn[nn]=Fn[tn]=Fn[rn]=Fn[en]=Fn[un]=Fn[on]=true,Fn[z]=Fn[B]=Fn[J]=Fn[M]=Fn[D]=Fn[q]=Fn[K]=Fn["[object Map]"]=Fn[V]=Fn[Y]=Fn[Z]=Fn["[object Set]"]=Fn[G]=Fn["[object WeakMap]"]=false;var Nn={};Nn[z]=Nn[B]=Nn[J]=Nn[M]=Nn[D]=Nn[X]=Nn[H]=Nn[Q]=Nn[nn]=Nn[tn]=Nn[V]=Nn[Y]=Nn[Z]=Nn[G]=Nn[rn]=Nn[en]=Nn[un]=Nn[on]=true,Nn[q]=Nn[K]=Nn["[object Map]"]=Nn["[object Set]"]=Nn["[object WeakMap]"]=false;var $n={leading:false,maxWait:0,trailing:false},Ln={"\xc0":"A","\xc1":"A","\xc2":"A","\xc3":"A","\xc4":"A","\xc5":"A",
+"\xe0":"a","\xe1":"a","\xe2":"a","\xe3":"a","\xe4":"a","\xe5":"a","\xc7":"C","\xe7":"c","\xd0":"D","\xf0":"d","\xc8":"E","\xc9":"E","\xca":"E","\xcb":"E","\xe8":"e","\xe9":"e","\xea":"e","\xeb":"e","\xcc":"I","\xcd":"I","\xce":"I","\xcf":"I","\xec":"i","\xed":"i","\xee":"i","\xef":"i","\xd1":"N","\xf1":"n","\xd2":"O","\xd3":"O","\xd4":"O","\xd5":"O","\xd6":"O","\xd8":"O","\xf2":"o","\xf3":"o","\xf4":"o","\xf5":"o","\xf6":"o","\xf8":"o","\xd9":"U","\xda":"U","\xdb":"U","\xdc":"U","\xf9":"u","\xfa":"u",
+"\xfb":"u","\xfc":"u","\xdd":"Y","\xfd":"y","\xff":"y","\xc6":"Ae","\xe6":"ae","\xde":"Th","\xfe":"th","\xdf":"ss"},Pn={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","`":"&#96;"},zn={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#39;":"'","&#96;":"`"},Bn={"function":true,object:true},Mn={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},Dn=Bn[typeof exports]&&exports&&!exports.nodeType&&exports,qn=Bn[typeof module]&&module&&!module.nodeType&&module,Kn=Bn[typeof self]&&self&&self.Object&&self,Vn=Bn[typeof window]&&window&&window.Object&&window,Yn=qn&&qn.exports===Dn&&Dn,Zn=Dn&&qn&&typeof global=="object"&&global&&global.Object&&global||Vn!==(this&&this.window)&&Vn||Kn||this,Gn=function(){
+try{Object({toString:0}+"")}catch(n){return function(){return false}}return function(n){return typeof n.toString!="function"&&typeof(n+"")=="string"}}(),Jn=m();typeof define=="function"&&typeof define.amd=="object"&&define.amd?(Zn._=Jn, define(function(){return Jn})):Dn&&qn?Yn?(qn.exports=Jn)._=Jn:Dn._=Jn:Zn._=Jn}).call(this);
\ No newline at end of file

From 3b08583342c731958651b25f373dd6b16cd72258 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Sun, 3 May 2015 19:10:10 -0700
Subject: [PATCH 06/13] spacing

---
 public/resources/js/controllers/app-controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
index feb1d8613f..350be7ec82 100644
--- a/public/resources/js/controllers/app-controller.js
+++ b/public/resources/js/controllers/app-controller.js
@@ -4,7 +4,6 @@
 */
 
 angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($scope, $mdDialog, $timeout) {
-
   $scope.showDocsNav = false;
   $scope.showMainNav = false;
   $scope.showMenu = false;
@@ -27,6 +26,7 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($sc
     $scope.showMenu = !$scope.showMenu;
   };
 
+
   /*
   * Prettify Code
   *

From 4210541f2462e740b832a239fc706747c737c4ca Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Sun, 3 May 2015 20:28:21 -0700
Subject: [PATCH 07/13] use one layout, update logic, add prettify to api code
 tags

---
 public/_includes/_next-item.jade                |  4 +---
 public/docs/_layout.jade                        | 13 +++++++++++--
 public/docs/dart/latest/guide/_layout.jade      | 17 -----------------
 public/docs/js/latest/guide/_layout.jade        | 17 -----------------
 .../resources/js/controllers/app-controller.js  | 14 ++++++++++++++
 5 files changed, 26 insertions(+), 39 deletions(-)
 delete mode 100644 public/docs/dart/latest/guide/_layout.jade
 delete mode 100644 public/docs/js/latest/guide/_layout.jade

diff --git a/public/_includes/_next-item.jade b/public/_includes/_next-item.jade
index 8fd337e78a..65cbca6217 100644
--- a/public/_includes/_next-item.jade
+++ b/public/_includes/_next-item.jade
@@ -17,6 +17,4 @@ for page, slug in data
 
     // SET CURRENT PAGE FLAG WHEN YOU PASS IT
     if current.path[4] == slug
-      currentPage = true
-
-
+      currentPage = true
\ No newline at end of file
diff --git a/public/docs/_layout.jade b/public/docs/_layout.jade
index 9d907fe3e6..b533ba9736 100644
--- a/public/docs/_layout.jade
+++ b/public/docs/_layout.jade
@@ -9,8 +9,17 @@ html(lang="en" ng-app="angularIOApp")
     != partial("../_includes/_hero")
     != partial("../_includes/_banner")
 
-    article.l-content-small.grid-fluid.docs-content
-      != yield
+
+    if current.path[3] == 'api'
+      article(class="l-content-small grid-fluid docs-content" ng-non-bindable)
+        != yield
+
+    else
+      article(class="l-content-small grid-fluid docs-content")
+        != yield
+
+        if current.path[3] == 'guide' && current.path[4]
+          != partial("../_includes/_next-item")
 
     != partial("../_includes/_footer")
     != partial("../_includes/_scripts-include")
\ No newline at end of file
diff --git a/public/docs/dart/latest/guide/_layout.jade b/public/docs/dart/latest/guide/_layout.jade
deleted file mode 100644
index ed495fbb37..0000000000
--- a/public/docs/dart/latest/guide/_layout.jade
+++ /dev/null
@@ -1,17 +0,0 @@
-doctype
-html(lang="en" ng-app="angularIOApp")
-  head
-    != partial("../../../../_includes/_head-include")
-
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl")
-    != partial("../../../../_includes/_main-nav")
-    != partial("../../../_includes/sidenav/_primary")
-    != partial("../../../../_includes/_hero")
-    != partial("../../../../_includes/_banner")
-
-    article.l-content-small.grid-fluid.docs-content(ng-non-bindable)
-      != yield
-      != partial("../../../../_includes/_next-item")
-
-    != partial("../../../../_includes/_footer")
-    != partial("../../../../_includes/_scripts-include")
\ No newline at end of file
diff --git a/public/docs/js/latest/guide/_layout.jade b/public/docs/js/latest/guide/_layout.jade
deleted file mode 100644
index 35040681c8..0000000000
--- a/public/docs/js/latest/guide/_layout.jade
+++ /dev/null
@@ -1,17 +0,0 @@
-doctype
-html(lang="en" ng-app="angularIOApp")
-  head
-    != partial("../../../../_includes/_head-include")
-
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl")
-    != partial("../../../../_includes/_main-nav")
-    != partial("../../../_includes/sidenav/_primary")
-    != partial("../../../../_includes/_hero")
-    != partial("../../../../_includes/_banner")
-
-    article.l-content-small.grid-fluid.docs-content
-      != yield
-      != partial("../../../../_includes/_next-item")
-
-    != partial("../../../../_includes/_footer")
-    != partial("../../../../_includes/_scripts-include")
diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
index 350be7ec82..a853855a08 100644
--- a/public/resources/js/controllers/app-controller.js
+++ b/public/resources/js/controllers/app-controller.js
@@ -33,5 +33,19 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($sc
   * Finish Rendereding code directives then prettify code
   */
 
+  // GRAB ALL TAGS NOT USING DIRECTIVES
+  var preTags = angular.element(document.body).find('pre');
+
+  // LOOP THROUGH AND ADD PRETTIFY CLASS
+  _.each(preTags, function(element) {
+    var preTag = angular.element(element);
+
+    // IF NOT FORMATTED, ADD PRETTY PRINT
+    if(!preTag.hasClass('prettyprint')) {
+      preTag.addClass('prettyprint linums');
+    }
+  });
+
+  // TRIGGER PRETTYPRINT AFTER DIGEST LOOP COMPLETE
   $timeout(prettyPrint, 1);
 }]);
\ No newline at end of file

From 0d27464c7aa83b3dfe29760c7b673dc5e2435165 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Sun, 3 May 2015 20:29:54 -0700
Subject: [PATCH 08/13] linenums

---
 public/resources/js/controllers/app-controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
index a853855a08..484f9a4716 100644
--- a/public/resources/js/controllers/app-controller.js
+++ b/public/resources/js/controllers/app-controller.js
@@ -42,7 +42,7 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($sc
 
     // IF NOT FORMATTED, ADD PRETTY PRINT
     if(!preTag.hasClass('prettyprint')) {
-      preTag.addClass('prettyprint linums');
+      preTag.addClass('prettyprint linenums');
     }
   });
 

From a85af9e15e4e70d9fc73812e2f833064ab71e3e4 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Tue, 5 May 2015 09:56:18 -0700
Subject: [PATCH 09/13] Update bio card directive, code cleanup

---
 public/about/index.jade                       |   2 +-
 .../docs/js/latest/guide/displaying-data.jade | 196 +++++++++---------
 .../js/controllers/app-controller.js          |   9 +-
 public/resources/js/directives/bio.js         |  45 ++--
 4 files changed, 122 insertions(+), 130 deletions(-)

diff --git a/public/about/index.jade b/public/about/index.jade
index 35a4c015ac..a32b23b5ae 100644
--- a/public/about/index.jade
+++ b/public/about/index.jade
@@ -19,7 +19,7 @@
   <!-- BIO CARDS -->
   for person, name in bios
     .c3
-      md-card(biocard class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}"  data-name="#{person.name}")
+      md-card(biocard class="bio-card" website="#{person.website}" twitter="#{person.twitter}" pic="#{person.picture}" bio="#{person.bio}"  name="#{person.name}")
         header
           image(src="#{person.picture}" alt="#person.name")
 
diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade
index f5f96ad765..fb0f702764 100644
--- a/public/docs/js/latest/guide/displaying-data.jade
+++ b/public/docs/js/latest/guide/displaying-data.jade
@@ -19,9 +19,10 @@
     h2#section-create-an-entry-point Create an entry point
 
     p Open your favorite editor and create a show-properties.html file with the content:
-    pre.prettyprint.linenums.lang-html
-      code.
-         &lt;display&gt;&lt;/display&gt;
+
+    code-example(language="html" escape="html").
+      <display></display>
+
     p
      | The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application.
      | We'll assume a structure like this for the rest of the examples here and just focus on the parts that
@@ -35,52 +36,48 @@
 
     p To see this working, create another file, <code>show-properties.js</code>, and add the following:
 
-    .code-box
-      pre.prettyprint.linenums.lang-javascript(data-name="es5")
-          code.
-            // ES5
-            function DisplayComponent() {
-              this.myName = "Alice";
-            }
-            DisplayComponent.annotations = [
-              new angular.Component({
-                selector: "display"
-              }),
-              new angular.View({
-                template:
-                   '&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
-                directives: [angular.For, angular.If]
-              })
-            ];
+    code-tabs
+      code-pane(language="javascript" name="ES5" format="linenums" escape="html").
+        // ES5
+        function DisplayComponent() {
+          this.myName = "Alice";
+        }
+        DisplayComponent.annotations = [
+          new angular.Component({
+            selector: "display"
+          }),
+          new angular.View({
+            template:
+               <p>My name: {{ myName }}</p>,
+            directives: [angular.For, angular.If]
+          })
+        ];
 
-      pre.prettyprint.linenums.lang-typescript(data-name="typescript")
-          code.
-              // TypeScript
-              import {Component, View, bootstrap, For} from 'angular2/angular2';
+      code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
+        // TypeScript
+        import {Component, View, bootstrap, For} from 'angular2/angular2';
 
-              @Component({
-               selector: 'display'
-              })
-              @View({
-                template: `
-                 &lt;p&gt;My name: {{ myName }}&lt;/p&gt
-               `,
-               directives: [For]
-              })
-              class DisplayComponent {
-               myName: string;
-               todos: Array&lt;string&gt;;
+        @Component({
+          selector: 'display'
+        })
+        @View({
+          template: `&lt;p&gt;My name: {{ myName }}&lt;/p&gt;`,
+          directives: [For]
+        })
+        class DisplayComponent {
+          myName: string;
+          todos: Array&lt;string&gt;
 
-               constructor() {
-                 this.myName = "Alice";
-               }
-              }
+          constructor() {
+            this.myName = "Alice";
+          }
+        }
     p.
      You've just defined a component that encompases a view and controller for the app. The view
      defines a template:
-    pre.prettyprint.lang-html
-     code.
-       &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
+
+    code-example(language="html" escape="html").
+      <p>My name: {{ myName }}</p>
 
     p.
      Angular will automatically pull the value of <code>myName</code> and insert it into the browser and
@@ -98,16 +95,16 @@
      just one property, myName.
 
     .callout.is-helpful
-        header Note
-        p.
-              While you've used <code>template:</code> to specify an inline view, for larger templates you'd
-              want to move them to a separate file and load them with <code>templateUrl:</code> instead.
+      header Note
+      p.
+        While you've used <code>template:</code> to specify an inline view, for larger templates you'd
+        want to move them to a separate file and load them with <code>templateUrl:</code> instead.
 
     p So you can see Angular dynamically update content, add a line after
 
-        pre.prettyprint.lang-html
-            code.
-                &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
+    code-example(language="html" escape="html").
+      <p>My name: {{ myName }}</p>
+
     p to this:
         pre.prettyprint.lang-html
             code.
@@ -120,67 +117,66 @@
         code.
             setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000);
     p Reload the page in your browser and you'll now see the seconds updating automatically.
+
 .l-main-section
     h2#Create-an-array Create an array property and use For on the view
     p Moving up from a single property, create an array to display as a list.
-    .code-box
-      pre.prettyprint.lang-javascript(data-name="es5")
-          code.
-              //ES5
-              function DisplayComponent() {
-                this.myName = "Alice";
-                this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
-              }
-      pre.prettyprint.lang-typescript(data-name="typescript")
-          code.
-              //Typescript
-              constructor() {
-                this.myName = "Alice";
-                this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
-              }
+
+    code-tabs
+      code-pane(language="javascript" name="ES5" format="linenums" escape="html").
+        //ES5
+        function DisplayComponent() {
+          this.myName = "Alice";
+          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+        }
+      code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
+        //Typescript
+        constructor() {
+          this.myName = "Alice";
+          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+        }
+
     p.
         You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
         with one for each item in the array.
-    .code-box
-      pre.prettyprint.lang-javascript(data-name="es5")
-          code.
-              //ES5
-              template:
-                 &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
-                 &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
-                 &#39;&lt;ul&gt;&#39; +
-                 &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
-                 &#39;{{ name }}&#39; +
-                 &#39;&lt;/li&gt;&#39; +
-                 &#39;&lt;/ul&gt;&#39;,
 
-      pre.prettyprint.lang-typescript(data-name="typescript")
-          code.
-              //Typescript
-              template: `
-                &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
-                &lt;p&gt;Friends:&lt;/p&gt;
-                &lt;ul&gt;
-                   &lt;li *for=&quot;#name of names&quot;&gt;
-                      {{ name }}
-                   &lt;/li&gt;
-                &lt;/ul&gt;
-              `,
+    code-tabs
+      code-pane(language="javascript" name="ES5" format="linenums").
+        //ES5
+        template:
+          &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
+          &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
+          &#39;&lt;ul&gt;&#39; +
+          &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
+          &#39;{{ name }}&#39; +
+          &#39;&lt;/li&gt;&#39; +
+          &#39;&lt;/ul&gt;&#39;,
+      code-pane(language="javascript" name="TypeScript" format="linenums").
+        //Typescript
+        template: `
+          &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
+          &lt;p&gt;Friends:&lt;/p&gt;
+          &lt;ul&gt;
+             &lt;li *for=&quot;#name of names&quot;&gt;
+                {{ name }}
+             &lt;/li&gt;
+          &lt;/ul&gt;
+        `,
+
     p.
         To make this work, you'll also need to add the <code>angular.For</code> directive used by the template so
         that Angular knows to include it:
 
-    .code-box
-      pre.prettyprint.lang-javascript(data-name="es5")
-          code.
-              //ES5
-              directives: [angular.For]
-      pre.prettyprint.lang-typescript(data-name="typescript")
-          code.
-              //Typescript
-              import {Component, View, bootstrap, For} from
-              ...
-                directives: [For]
+    code-tabs
+      code-pane(language="javascript" name="ES5" format="linenums").
+        //ES5
+        directives: [angular.For]
+      code-pane(language="javascript" name="TypeScript" format="linenums").
+        //Typescript
+        import {Component, View, bootstrap, For} from
+        ...
+        directives: [For]
+
     p Reload and you've got your list of friends!
     p.
         Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
index 484f9a4716..1a94ffb121 100644
--- a/public/resources/js/controllers/app-controller.js
+++ b/public/resources/js/controllers/app-controller.js
@@ -9,20 +9,17 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($sc
   $scope.showMenu = false;
 
   // TOGGLE MAIN NAV (TOP) ON MOBILE
-  $scope.toggleDocsMenu = function(event) {
-    event.preventDefault();
+  $scope.toggleDocsMenu = function() {
     $scope.showDocsNav = !$scope.showDocsNav;
   };
 
   // TOGGLE DOCS NAV
-  $scope.toggleMainMenu = function(event) {
-    event.preventDefault();
+  $scope.toggleMainMenu = function() {
     $scope.showMainNav = !$scope.showMainNav;
   };
 
   // TOGGLE DOCS VERSION & LANGUAGE
-  $scope.toggleVersionMenu = function(event) {
-    event.preventDefault();
+  $scope.toggleVersionMenu = function() {
     $scope.showMenu = !$scope.showMenu;
   };
 
diff --git a/public/resources/js/directives/bio.js b/public/resources/js/directives/bio.js
index 5ab54a1d2a..28f5daef19 100644
--- a/public/resources/js/directives/bio.js
+++ b/public/resources/js/directives/bio.js
@@ -3,45 +3,44 @@ angularIO.directive('biocard', function($rootScope, $timeout, $mdDialog) {
     restrict: 'A',
     scope: {},
     link: function (scope, element, attrs) {
-      scope.name = element.attr('data-name');
-      scope.bio = element.attr('data-bio');
-      scope.pic = element.attr('data-pic');
-      scope.twitter = element.attr('data-twitter');
-      scope.website =  element.attr('data-website');
-      scope.$twitter = scope.twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' +  element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
-      scope.$website = scope.website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
+      // SET SCOPE VALUES
+      scope.name = attrs.name;
+      scope.pic = attrs.pic;
+      scope.bio = attrs.bio;
+      scope.twitter = attrs.twitter;
+      scope.website = attrs.website;
 
+      // CLOSE MODAL METHOD
+      scope.closeDialog = function() {
+        $mdDialog.hide();
+      };
+
+      // OPEN BIO WHEN CLICKING ON CARD
       element.on('click', function($event) {
         $mdDialog.show({
           parent: angular.element(document.body),
           targetEvent: $event,
+          scope: scope,        // use parent scope in template
+          preserveScope: true,
           template:
             '<md-dialog class="modal" aria-label="List dialog">' +
             '  <md-content>' +
-            '     <img class="left" src="' + scope.pic + '" />' +
-            '     <h3 class="text-headline">' + scope.name + '</h3>' +
-            '     <div class="modal-social">' + scope.$twitter + scope.$website + '</div>' +
-            '     <p class="text-body">' + scope.bio + '</p>' +
+            '     <img class="left" src="{{pic}}" />' +
+            '     <h3 class="text-headline">{{name}}</h3>' +
+            '     <div class="modal-social">' +
+            '       <a ng-show="twitter" class="button button-subtle button-small" href="https://twitter.com/{{twitter}}" md-button>Twitter</a>' +
+            '       <a ng-show="website" class="button button-subtle button-small" href="{{website}}" md-button>Website</a>' +
+            '     </div>' +
+            '     <p class="text-body">{{bio}}</p>' +
             '  </md-content>' +
             '  <div class="md-actions">' +
             '    <md-button ng-click="closeDialog()">' +
             '      Close Bio' +
             '    </md-button>' +
             '  </div>' +
-            '</md-dialog>',
-          locals: {
-            items: scope.items
-          },
-        controller: DialogController
+            '</md-dialog>'
         });
       });
-
-      function DialogController(scope, $mdDialog, items) {
-        scope.items = items;
-        scope.closeDialog = function() {
-          $mdDialog.hide();
-        };
-      }
     }
   };
 });
\ No newline at end of file

From 799a16c5c51b6d4c9bfab901d07458b4e7320f70 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Mon, 18 May 2015 06:41:26 -0700
Subject: [PATCH 10/13] update to code examples

---
 .../_includes/styleguide/_code-examples.jade  | 31 +++++++++++++------
 .../resources/js/directives/code-example.js   | 12 +++----
 public/resources/js/directives/code-pane.js   |  5 +--
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade
index 0b3ffb3639..c9987f7739 100644
--- a/public/docs/_includes/styleguide/_code-examples.jade
+++ b/public/docs/_includes/styleguide/_code-examples.jade
@@ -3,21 +3,26 @@
     h2 Code Examples
     p Below are some examples of how you can add/customize code examples in a page.
 
+    strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
+    ul
+      li <strong>name</strong> Name displayed in Tab (required for tabs)
+      li <strong>language</strong> javascript, html, etc.
+      li <strong>escape</strong> html (escapes html, woot!)
+      li <strong>format</strong> linenums (or linenums:4 specify starting line)
+
   .showcase-content
     .l-sub-section
       h3 Adding a code example
 
-      code-example(format="linenums").
-        //SOME CODE
-        var name = "Alex Wolfe";
-        alert(name);
-
+      code-example(format="linenums" language="html").
+        code-example(format="linenums" language="javascript").
+          //SOME CODE
     .l-sub-section
       h3 Specify starting line number
 
-      code-example(language="html" format="linenums:4").
-        var title = "This starts on line four";
-
+      code-example(language="javascript" format="linenums:4").
+        code-example(language="html" format="linenums:4").
+          var title = "This starts on line four";
     .l-sub-section
       h3 Specify a language
 
@@ -40,7 +45,7 @@
         <strong>Black</strong>. You can see examples below and
         the class names needed for each type.
 
-      code-example(format="linenums" escape="html").
+      code-example(format="linenums").
         // Pink Background Version
         // class="pnk"
         var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
@@ -68,3 +73,11 @@
         code-pane(language="javascript" format="linenums" name="TypeScript").
           // TypeScript
           var hello = 'blah';
+
+      p To create code tabs simply use the directives below
+      code-example(format="linenums").
+        code-tabs
+          code-pane(format="linenums" name="Tab 1").
+            // TAB 1 CONTENT
+          code-pane(format="linenums" name="Tab 2").
+            // TAB 2 CONTENT
\ No newline at end of file
diff --git a/public/resources/js/directives/code-example.js b/public/resources/js/directives/code-example.js
index 597fa24f55..d279203141 100644
--- a/public/resources/js/directives/code-example.js
+++ b/public/resources/js/directives/code-example.js
@@ -9,9 +9,9 @@ angularIO.directive('codeExample', function() {
   return {
     restrict: 'E',
 
-    compile: function(tElement, tAttrs) {
-      var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
-      var template =  '<pre class="prettyprint {{format}} lang-{{language}}">' +
+    compile: function(tElement, attrs) {
+      var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
+      var template =  '<pre class="prettyprint ' + attrs.format + ' lang-' + attrs.language + '">' +
                       '<code ng-non-bindable>' + html + '</code>' +
                       '</pre>';
 
@@ -19,11 +19,7 @@ angularIO.directive('codeExample', function() {
       tElement.html(template);
 
       // RETURN ELEMENT
-      return function(scope, element, attrs) {
-        // SET SCOPE MANUALLY
-        scope.language = attrs.language;
-        scope.format = attrs.format;
-      };
+      return function(scope, element, attrs) {};
     }
   };
 });
\ No newline at end of file
diff --git a/public/resources/js/directives/code-pane.js b/public/resources/js/directives/code-pane.js
index 32655d09f7..a91117225b 100644
--- a/public/resources/js/directives/code-pane.js
+++ b/public/resources/js/directives/code-pane.js
@@ -15,7 +15,7 @@ angularIO.directive('codePane', function() {
 
     compile: function(tElement, tAttrs) {
       var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
-      var template =  '<pre class="prettyprint {{format}} lang-{{language}}" ng-show="selected">' +
+      var template =  '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '" ng-show="selected">' +
                       '<code ng-non-bindable>' + html + '</code>' +
                       '</pre>';
 
@@ -26,10 +26,7 @@ angularIO.directive('codePane', function() {
 
       // RETURN LINK METHOD
       return function(scope, element, attrs, controller) {
-        // SET SCOPE MANUALLY
-        scope.language = attrs.language;
         scope.name = attrs.name;
-        scope.format = attrs.format;
 
         //ADD PANE TO CONTROLLER
         controller.addPane(scope);

From 8c65545cc83bd7fcc0f69c88bbbbce2862953a4e Mon Sep 17 00:00:00 2001
From: Alex Wolfe <alex@firebase.com>
Date: Tue, 19 May 2015 08:48:26 -0700
Subject: [PATCH 11/13] quick start updated

---
 public/docs/js/latest/quickstart.jade  | 134 ++++++++++++-------------
 public/resources/css/module/_code.scss |   1 +
 2 files changed, 65 insertions(+), 70 deletions(-)

diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index 6bb6aa8725..495572c5cf 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -25,14 +25,14 @@
     TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>.
     To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>.
 
-  pre.prettyprint
+  code-example.
     $ npm install -g tsd
     $ tsd query angular2 --action install
 
   p.
     Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
 
-  pre.prettyprint
+  code-example.
     $ touch app.ts index.html
 
 // STEP 2 - Start the TypeScript compiler ##########################
@@ -45,7 +45,7 @@
     compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
     are loaded, or configure your editor or IDE to do it.
 
-  pre.prettyprint
+  code-example.
     $ npm install -g typescript@^1.5.0-beta
     $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
 
@@ -54,12 +54,12 @@
   h2#section-transpile 3. Import Angular
 
   p Inside of <code>app.ts</code>, import the type definitions from Angular:
-  pre.prettyprint
-    code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
+  code-example.
+    &lt;reference path="typings/angular2/angular2.d.ts" &gt;
 
   p Now your editor should be able to complete the available imports:
-  pre.prettyprint
-    code import {Component, View, bootstrap} from 'angular2/angular2';
+  code-example.
+    import {Component, View, bootstrap} from 'angular2/angular2';
 
   p.
     The above import statement uses ES6 module syntax to import three symbols from the Angular module.
@@ -80,23 +80,22 @@
     which is an ES6 class, and the <strong>decorators</strong> which tell Angular
     how to place the component into the page.
 
-  pre.prettyprint.linenums
-    code.
-      // Annotation section
-      @Component({
-        selector: 'my-app'
-      })
-      @View({
-        template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
-      })
-      // Component controller
-      class MyAppComponent {
-        name: string;
+  code-example(language="javascript" format="linenums").
+    // Annotation section
+    @Component({
+      selector: 'my-app'
+    })
+    @View({
+      template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
+    })
+    // Component controller
+    class MyAppComponent {
+      name: string;
 
-        constructor() {
-          this.name = 'Alice';
-        }
+      constructor() {
+        this.name = 'Alice';
       }
+    }
 
   .l-sub-section
     h3 @Component and @View annotations
@@ -108,14 +107,13 @@
     p.
       The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
 
-    pre.prettyprint.linenums
-      code.
-        @Component({
-          selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
-        })
-        @View({
-          template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
-        })
+    code-example(language="javascript" format="linenums").
+      @Component({
+        selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
+      })
+      @View({
+        template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
+      })
 
     p.
       The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
@@ -128,14 +126,13 @@
       The component controller is the backing of the component's template. This component
       controller uses TypeScript <code>class</code> syntax.
 
-    pre.prettyprint.linenums
-      code.
-        class MyAppComponent {
-          name: string;
-          constructor() {
-            this.name = 'Alice';
-          }
+    code-example(language="javascript" format="linenums").
+      class MyAppComponent {
+        name: string;
+        constructor() {
+          this.name = 'Alice';
         }
+      }
 
     p.
       Templates read from their component controllers. Templates have access to any properties
@@ -158,8 +155,8 @@
     At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function
     to load your new component into its page:
 
-  pre.prettyprint.linenums
-    code bootstrap(MyAppComponent);
+  code-example(language="javaScript").
+    bootstrap(MyAppComponent);
 
 
   p.
@@ -178,22 +175,21 @@
     include the traceur-runtime and the Angular bundle.
     Instantiate the <code>my-app</code> component in the <code>body</code>.
 
-  pre.prettyprint.linenums
-    code.
-      &lt;!-- index.html --&gt;
-      &lt;html&gt;
-        &lt;head&gt;
-          &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
-          &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
-          &lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
-        &lt;/head&gt;
-        &lt;body&gt;
+  code-example(language="html" format="linenums").
+    &lt;!-- index.html --&gt;
+    &lt;html&gt;
+      &lt;head&gt;
+        &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
+        &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
+        &lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
+      &lt;/head&gt;
+      &lt;body&gt;
 
-          &lt;!-- The app component created in app.ts --&gt;
-          &lt;my-app&gt;&lt;/my-app&gt;
+        &lt;!-- The app component created in app.ts --&gt;
+        &lt;my-app&gt;&lt;/my-app&gt;
 
-        &lt;/body&gt;
-      &lt;/html&gt;
+      &lt;/body&gt;
+    &lt;/html&gt;
 
 // STEP 7 - Declare the HTML ##########################
 .l-main-section
@@ -215,22 +211,20 @@
     Add the System.js dependency in the <code>&lt;head&gt;</code> tag, so that
     it looks like:
 
-  pre.prettyprint.linenums
-    code.
-        &lt;head&gt;
-          &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
-          &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
-          &lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
-          &lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
-        &lt;/head&gt;
+  code-example(language="html" format="linenums").
+    &lt;head&gt;
+      &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
+      &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
+      &lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
+      &lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
+    &lt;/head&gt;
 
   p.
     Add the following module-loading code:
 
-  pre.prettyprint.linenums
-    code.
-      &lt;my-app&gt;&lt;/my-app&gt;
-      &lt;script&gt;System.import('app');&lt;/script&gt;
+  code-example(language="html" format="linenums").
+    &lt;my-app&gt;&lt;/my-app&gt;
+    &lt;script&gt;System.import('app');&lt;/script&gt;
 
 
 // STEP 8 - Run a local server ##########################
@@ -247,11 +241,11 @@
     <code><b>sudo</b> npm ...</code>)
     For example:
 
-  pre.prettyprint.code.
-      # From the directory that contains index.html:
-      npm install -g http-server  # Or sudo npm install -g http-server
-      http-server                 # Creates a server at localhost:8080
-      # In a browser, visit localhost:8080/index.html
+  code-example.
+    # From the directory that contains index.html:
+    npm install -g http-server  # Or sudo npm install -g http-server
+    http-server                 # Creates a server at localhost:8080
+    # In a browser, visit localhost:8080/index.html
 
 
 // WHAT'S NEXT... ##########################
diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss
index 063a788e55..19cbf5607c 100644
--- a/public/resources/css/module/_code.scss
+++ b/public/resources/css/module/_code.scss
@@ -50,6 +50,7 @@
   code {
     background: none;
     font-size: 15px;
+    padding: 0px;
   }
 
   ol {

From 363373d405aa3a98c7ac4085e05ceb599b25f7ce Mon Sep 17 00:00:00 2001
From: Alex Wolfe <alex@firebase.com>
Date: Tue, 19 May 2015 08:56:34 -0700
Subject: [PATCH 12/13] style guide update

---
 .../_includes/styleguide/_code-examples.jade    | 17 +++++++++++++++++
 public/resources/css/layout/_layout.scss        |  5 +++++
 2 files changed, 22 insertions(+)

diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade
index c9987f7739..e7b1e31edc 100644
--- a/public/docs/_includes/styleguide/_code-examples.jade
+++ b/public/docs/_includes/styleguide/_code-examples.jade
@@ -11,18 +11,35 @@
       li <strong>format</strong> linenums (or linenums:4 specify starting line)
 
   .showcase-content
+
+    .l-sub-section
+      h3 Inline Code Examples
+
+      p.
+        Inline code example <code ng-non-bindable>{{username}}</code>
+
+      code-example(format="linenums" language="html" escape="html").
+        Inline code example <code ng-non-bindable>{{username}}</code>
+
+      p.
+        Notice the <strong>ng-non-bindable</strong> attribute. This is only
+        needed when using code examples inline <strong>code-tabs and code-example directives
+        automatically do this</strong>.
+
     .l-sub-section
       h3 Adding a code example
 
       code-example(format="linenums" language="html").
         code-example(format="linenums" language="javascript").
           //SOME CODE
+
     .l-sub-section
       h3 Specify starting line number
 
       code-example(language="javascript" format="linenums:4").
         code-example(language="html" format="linenums:4").
           var title = "This starts on line four";
+
     .l-sub-section
       h3 Specify a language
 
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 318808bbb0..02aaa4c104 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -118,6 +118,11 @@
     padding: ($unit * 3) ($unit * 1);
   }
 
+  code {
+    background: $fog;
+    color: $steel;
+  }
+
   &:last-child {
     margin: 0;
   }

From ed597245eeb2aa344d714d07b84e4cd0c8cceb68 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <alex@firebase.com>
Date: Tue, 19 May 2015 09:21:11 -0700
Subject: [PATCH 13/13] update dart guide

---
 .../dart/latest/guide/displaying-data.jade    | 430 +++++++++---------
 .../dart/latest/guide/making-components.jade  |  58 ++-
 public/docs/dart/latest/guide/setup.jade      |  79 ++--
 public/docs/dart/latest/guide/user-input.jade | 229 +++++-----
 4 files changed, 377 insertions(+), 419 deletions(-)

diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade
index 4f3bdb8d70..cfb45fe19c 100644
--- a/public/docs/dart/latest/guide/displaying-data.jade
+++ b/public/docs/dart/latest/guide/displaying-data.jade
@@ -16,48 +16,44 @@
     a <code>web/index.html</code> file, and
     a <code>pubspec.yaml</code> file:
 
-  .code-box
-    pre.prettyprint.lang-dart(data-name="dart")
-      code.
-        // web/main.dart
-        library displaying_data;
+  code-tabs
+    code-pane(language="dart" name="main.dart" format="linenums").
+      // web/main.dart
+      library displaying_data;
 
-        import 'package:angular2/angular2.dart';
-        import 'package:angular2/src/reflection/reflection.dart' show reflector;
-        import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
+      import 'package:angular2/angular2.dart';
+      import 'package:angular2/src/reflection/reflection.dart' show reflector;
+      import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
 
-        part 'show_properties.dart';
+      part 'show_properties.dart';
 
-        main() {
-          reflector.reflectionCapabilities = new ReflectionCapabilities();
-          bootstrap(DisplayComponent);
-        }
-    pre.prettyprint.lang-html(data-name="html")
-      code.
-        &lt;!-- web/index.html --&gt;
-        &lt;!DOCTYPE html&gt;
-        &lt;html&gt;
-          &lt;head&gt;
-            &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
-          &lt;/head&gt;
-          &lt;body&gt;
+      main() {
+        reflector.reflectionCapabilities = new ReflectionCapabilities();
+        bootstrap(DisplayComponent);
+      }
+    code-pane(language="html" name="index.html" format="linenums").
+      &lt;!-- web/index.html --&gt;
+      &lt;!DOCTYPE html&gt;
+      &lt;html&gt;
+        &lt;head&gt;
+          &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
+        &lt;/head&gt;
+        &lt;body&gt;
 
-            &lt;display&gt;&lt;/display&gt;
-
-            &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
-            &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
-          &lt;/body&gt;
-        &lt;/html&gt;
-    pre.prettyprint.lang-yaml(data-name="yaml")
-      code.
-        # pubspec.yaml
-        name: displaying_data
-        description: Dart version of Angular 2 example, Displaying Data
-        version: 0.0.1
-        dependencies:
-          angular2: 2.0.0-alpha.22
-          browser: any
+          &lt;display&gt;&lt;/display&gt;
 
+          &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
+          &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
+        &lt;/body&gt;
+      &lt;/html&gt;
+    code-pane(language="yaml" name="pubspec.yaml" format="linenums").
+      # pubspec.yaml
+      name: displaying_data
+      description: Dart version of Angular 2 example, Displaying Data
+      version: 0.0.1
+      dependencies:
+        angular2: 2.0.0-alpha.22
+        browser: any
   p.
    All of this code should look familiar from the previous page,
    except for the <code>library</code> and <code>part</code> statements
@@ -78,30 +74,28 @@
     named <code>show_properties.dart</code>,
     and add the following:
 
-  pre.prettyprint.lang-dart
-    code.
-      // web/show_properties.dart
-      part of displaying_data;
+  code-example(language="dart" format="linenums").
+    // web/show_properties.dart
+    part of displaying_data;
 
-      @Component(
-        selector: 'display'
-      )
-      @View(
-        template: '''
-      &lt;p>My name: {{ myName }}&lt/p>
-      '''
-      )
-      class DisplayComponent {
-        String myName = 'Alice';
-      }
+    @Component(
+      selector: 'display'
+    )
+    @View(
+      template: '''
+    &lt;p>My name: {{ myName }}&lt/p>
+    '''
+    )
+    class DisplayComponent {
+      String myName = 'Alice';
+    }
 
   p.
     You've just defined a component that encompasses a view and controller for the app. The view
     defines a template:
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
+  code-example(language="html").
+    &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
 
   p.
    Angular will automatically pull the value of <code>myName</code> and
@@ -134,17 +128,15 @@
     Add a second line to the template,
     so you can see Angular dynamically update content:
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;p&gt;Current time: {{ time }}&lt;/p&gt;
+  code-example(language="html").
+    &lt;p&gt;Current time: {{ time }}&lt;/p&gt;
 
   p.
     Then give the <code>DisplayComponent</code> a starting value for time and
     a call to update time
     via <code>setInterval</code>:
 
-  pre.prettyprint.lang-dart
-    code.
+  code-example(language="dart" format="linenums").
       class DisplayComponent {
         String myName = 'Alice';
         String time;
@@ -166,44 +158,41 @@
   h2#Create-an-array Display an iterable using *for
   p Moving up from a single value, create a property that's a list of values.
 
-  pre.prettyprint.lang-dart
-    code.
-      class DisplayComponent {
-        String myName = 'Alice';
-        List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
-      }
+  code-example(language="dart" format="linenums").
+    class DisplayComponent {
+      String myName = 'Alice';
+      List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
+    }
 
   p.
     You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements
     with one for each item in the list.
 
-  pre.prettyprint.lang-dart
-    code.
-      @View(
-        template: '''
-      &lt;p>My name: {{ myName }}&lt;/p>
-      &lt;p>Friends:&lt;/p>
-      &lt;ul>
-         &lt;li *for="#name of friendNames">
-            {{ name }}
-         &lt;/li>
-      &lt;/ul>
-        '''
-        )
+  code-example(language="dart" format="linenums").
+    @View(
+      template: '''
+    &lt;p>My name: {{ myName }}&lt;/p>
+    &lt;p>Friends:&lt;/p>
+    &lt;ul>
+       &lt;li *for="#name of friendNames">
+          {{ name }}
+       &lt;/li>
+    &lt;/ul>
+      '''
+      )
   p.
     To make this work, you'll also need to add the Angular <code>For</code> directive used by
     the template to <code>show_properties.dart</code>, so that Angular knows to include it.
     Add <code>For</code> using the optional <code>directives</code> parameter,
     which contains a list of directives:
 
-  pre.prettyprint.lang-dart
-    code.
-      @View(
-        template: '''
-      // ...HTML...
-        ''',
-        directives: const[For]
-      )
+  code-example(language="dart" format="linenums").
+    @View(
+      template: '''
+    // ...HTML...
+      ''',
+      directives: const[For]
+    )
 
   p Reload and you've got your list of friends!
   p.
@@ -213,11 +202,10 @@
 
   p Let's look at the few lines that do the work again:
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;li *for=&quot;#name of friendNames&quot;&gt;
-         {{ name }}
-      &lt;/li&gt;
+  code-example(language="html" format="linenums").
+    &lt;li *for=&quot;#name of friendNames&quot;&gt;
+       {{ name }}
+    &lt;/li&gt;
 
   p The way to read this is:
   ul
@@ -241,14 +229,13 @@
     Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new
     <code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like:
 
-  pre.prettyprint.lang-dart
-    code.
-      // web/friends_service.dart
-      part of displaying_data;
+  code-example(language="dart" format="linenums").
+    // web/friends_service.dart
+    part of displaying_data;
 
-      class FriendsService {
-        List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
-      }
+    class FriendsService {
+      List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
+    }
 
   .callout.is-helpful
     header Note
@@ -260,29 +247,27 @@
     First add a FriendsService parameter to the constructor.
     Then set <code>friendNames</code> to the names provided by the service.
 
-  pre.prettyprint.lang-dart
-    code.
-      // In web/show_properties.dart
-      class DisplayComponent {
-        String myName = 'Alice';
-        List<String> friendNames;
+  code-example(language="dart" format="linenums").
+    // In web/show_properties.dart
+    class DisplayComponent {
+      String myName = 'Alice';
+      List<String> friendNames;
 
-        DisplayComponent(FriendsService friendsService) {
-          friendNames = friendsService.names;
-        }
+      DisplayComponent(FriendsService friendsService) {
+        friendNames = friendsService.names;
       }
+    }
 
   p.
     Next, make FriendsService available to dependency injection
     by adding an <code>injectables</code> parameter to DisplayComponent's
     <code>@Component</code> annotation:
 
-  pre.prettyprint.lang-dart
-      code.
-        @Component(
-          selector: 'display',
-          injectables: const[FriendsService]
-        )
+  code-example(language="dart" format="linenums").
+    @Component(
+      selector: 'display',
+      injectables: const[FriendsService]
+    )
 
 .l-main-section
   h2#Conditionally-displaying-data-with-If Conditionally display data using *if
@@ -292,17 +277,15 @@
 
   p See it in action by adding a paragraph at the end of your template:
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
+  code-example(language="html").
+    &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
 
   p.
     Also add <code>If</code> to the list of directives,
     so Angular knows to include it:
 
-  pre.prettyprint.lang-dart
-    code.
-      directives: const[For, If]
+  code-example(language="dart").
+    directives: const[For, If]
   p.
     The list current has 5 items, so if you run the app you'll see the message
     congratulating you on your many friends.
@@ -313,131 +296,124 @@
 
   p Here's the final code.
 
-  .code-box
-    pre.prettyprint.lang-dart(data-name="show_properties.dart")
-      code.
-        // web/show_properties.dart
-        part of displaying_data;
+  code-tabs
+    code-pane(language="dart" name="show_properties.dart" format="linenums").
+      // web/show_properties.dart
+      part of displaying_data;
 
-        @Component(
-          selector: 'display',
-          injectables: const[FriendsService]
-        )
-        @View(
-          template: '''
-        &lt;p>My name: {{ myName }}&lt;/p>
-        &lt;p>Friends:&lt;/p>
-        &lt;ul>
-           &lt;li *for="#name of friendNames">
-              {{ name }}
-           &lt;/li>
-        &lt;/ul>
-        ''',
-          directives: const[For]
-        )
-        class DisplayComponent {
-          String myName = 'Alice';
-          List&lt;String> friendNames;
+      @Component(
+        selector: 'display',
+        injectables: const[FriendsService]
+      )
+      @View(
+        template: '''
+      &lt;p>My name: {{ myName }}&lt;/p>
+      &lt;p>Friends:&lt;/p>
+      &lt;ul>
+         &lt;li *for="#name of friendNames">
+            {{ name }}
+         &lt;/li>
+      &lt;/ul>
+      ''',
+        directives: const[For]
+      )
+      class DisplayComponent {
+        String myName = 'Alice';
+        List&lt;String> friendNames;
 
-          DisplayComponent(FriendsService friendsService) {
-            friendNames = friendsService.names;
-          }
+        DisplayComponent(FriendsService friendsService) {
+          friendNames = friendsService.names;
         }
-    pre.prettyprint.lang-dart(data-name="friends_service.dart")
-      code.
-        // web/friends_service.dart
-        part of displaying_data;
+      }
+    code-pane(language="dart" name="friends_service.dart" format="linenums").
+      // web/friends_service.dart
+      part of displaying_data;
 
-        class FriendsService {
-          List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
-        }
-    pre.prettyprint.lang-dart(data-name="main.dart")
-      code.
-        // web/main.dart
-        library displaying_data;
+      class FriendsService {
+        List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
+      }
+    code-pane(language="dart" name="main.dart" format="linenums").
+      // web/main.dart
+      library displaying_data;
 
-        import 'dart:async';
+      import 'dart:async';
 
-        import 'package:angular2/angular2.dart';
-        import 'package:angular2/src/reflection/reflection.dart' show reflector;
-        import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
+      import 'package:angular2/angular2.dart';
+      import 'package:angular2/src/reflection/reflection.dart' show reflector;
+      import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
 
-        part 'show_properties.dart';
-        part 'friends_service.dart';
+      part 'show_properties.dart';
+      part 'friends_service.dart';
 
-        main() {
-          reflector.reflectionCapabilities = new ReflectionCapabilities();
-          bootstrap(DisplayComponent);
-        }
-    pre.prettyprint.lang-html(data-name="html")
-      code.
-        &lt;!-- web/index.html --&gt;
-        &lt;!DOCTYPE html&gt;
-        &lt;html&gt;
-          &lt;head&gt;
-            &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
-          &lt;/head&gt;
-          &lt;body&gt;
+      main() {
+        reflector.reflectionCapabilities = new ReflectionCapabilities();
+        bootstrap(DisplayComponent);
+      }
+    code-pane(language="html" name="index.html" format="linenums").
+      &lt;!-- web/index.html --&gt;
+      &lt;!DOCTYPE html&gt;
+      &lt;html&gt;
+        &lt;head&gt;
+          &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
+        &lt;/head&gt;
+        &lt;body&gt;
 
-            &lt;display&gt;&lt;/display&gt;
+          &lt;display&gt;&lt;/display&gt;
 
-            &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
-            &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
-          &lt;/body&gt;
-        &lt;/html&gt;
-    pre.prettyprint.lang-yaml(data-name="yaml")
-      code.
-        # pubspec.yaml
-        name: displaying_data
-        description: Dart version of Angular 2 example, Displaying Data
-        version: 0.0.1
-        dependencies:
-          angular2: 2.0.0-alpha.22
-          browser: any
+          &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
+          &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
+        &lt;/body&gt;
+      &lt;/html&gt;
+    code-pane(language="yaml" name="pubspec.yaml" format="linenums").
+      # pubspec.yaml
+      name: displaying_data
+      description: Dart version of Angular 2 example, Displaying Data
+      version: 0.0.1
+      dependencies:
+        angular2: 2.0.0-alpha.22
+        browser: any
 .l-main-section
   h2#section-explanations Explanations
 
   .l-sub-section
     h3 Using multiple Dart files in an Angular app
 
-      p.
-        Dart offers a few ways to implement an app in multiple files.
-        In this guide, all the code for each example is in a single library;
-        each Dart file under <code>web</code> is part of that library.
+    p.
+      Dart offers a few ways to implement an app in multiple files.
+      In this guide, all the code for each example is in a single library;
+      each Dart file under <code>web</code> is part of that library.
 
-      p.
-        To let the code in <code>main.dart</code>
-        use the code in <code>show_properties.dart</code>,
-        declare a library in <code>main.dart</code>.
-        Then make <code>show_properties.dart</code> part of that library.
+    p.
+      To let the code in <code>main.dart</code>
+      use the code in <code>show_properties.dart</code>,
+      declare a library in <code>main.dart</code>.
+      Then make <code>show_properties.dart</code> part of that library.
 
-      .code-box
-        pre.prettyprint.lang-dart(data-name="main library file")
-          code.
-            // web/main.dart
-            library displaying_data;
-            // imports...
-            part 'show_properties.dart';
-            // Code goes here...
-        pre.prettyprint.lang-dart(data-name="additional library file")
-          code.
-            // web/show_properties.dart
-            part of displaying_data;
-            // Code goes here...
+    code-tabs
+      code-pane(language="dart" name="main.dart" format="linenums").
+        // web/main.dart
+        library displaying_data;
+        // imports...
+        part 'show_properties.dart';
+        // Code goes here...
+      code-pane(language="dart" name="show_properties.dar" format="linenums").
+        // web/show_properties.dart
+        part of displaying_data;
+        // Code goes here...
 
-      p.
-        Another way to split Dart code is to
-        define multiple libraries in a single package.
-        The additional libraries go under a <code>lib</code> directory
-        parallel to <code>web</code>.
-        <!-- PENDING: show or point to an example -->
+    p.
+      Another way to split Dart code is to
+      define multiple libraries in a single package.
+      The additional libraries go under a <code>lib</code> directory
+      parallel to <code>web</code>.
+      <!-- PENDING: show or point to an example -->
 
-      p.
-        Yet another approach, often used when some of the code is highly reusable,
-        is to split the code into libraries in two or more packages.
+    p.
+      Yet another approach, often used when some of the code is highly reusable,
+      is to split the code into libraries in two or more packages.
 
-      p.
-        For more information on implementing Dart libraries, see
-        <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a>
-        in the
-        <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>.
+    p.
+      For more information on implementing Dart libraries, see
+      <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a>
+      in the
+      <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>.
diff --git a/public/docs/dart/latest/guide/making-components.jade b/public/docs/dart/latest/guide/making-components.jade
index 63418c0f04..aacb4a9697 100644
--- a/public/docs/dart/latest/guide/making-components.jade
+++ b/public/docs/dart/latest/guide/making-components.jade
@@ -10,41 +10,39 @@
     you can create a parent
     component that uses a <code>&lt;child&gt;</code> component like so:
 
-  pre.prettyprint.linenums.lang-dart
-    code.
-      part of making_components;
+  code-example(language="dart" format="linenums").
+    part of making_components;
 
-      @Component(
-        selector: 'parent'
-      )
-      @View(
-        template: '''
-          &lt;h1&gt;{{ message }}&lt;/h1&gt;
-          <span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
-      ''',
-        directives: const[<span class="pnk">ChildComponent</span>]
-      )
-      class ParentComponent {
-        String message = "I'm the parent";
-      }
+    @Component(
+      selector: 'parent'
+    )
+    @View(
+      template: '''
+        &lt;h1&gt;{{ message }}&lt;/h1&gt;
+        <span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
+    ''',
+      directives: const[<span class="pnk">ChildComponent</span>]
+    )
+    class ParentComponent {
+      String message = "I'm the parent";
+    }
 
   p You then just need to write the <code>ChildComponent</code> class to make it work:
 
-  pre.prettyprint.linenums.lang-dart
-    code.
-      part of making_components;
+  code-example(language="dart" format="linenums").
+    part of making_components;
 
-      @Component(
-          selector: 'child'
-      )
-      @View(
-          template: '''
-          &lt;p&gt; {{ message }} &lt;/p&gt;
-      '''
-      )
-      class ChildComponent {
-        String message = "I'm the child";
-      }
+    @Component(
+        selector: 'child'
+    )
+    @View(
+        template: '''
+        &lt;p&gt; {{ message }} &lt;/p&gt;
+    '''
+    )
+    class ChildComponent {
+      String message = "I'm the child";
+    }
 
   //p.
     [TODO: Motivate communication between components with iterator example that passes index to the child]
diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade
index 77fec51e0f..e301e6cad7 100644
--- a/public/docs/dart/latest/guide/setup.jade
+++ b/public/docs/dart/latest/guide/setup.jade
@@ -24,15 +24,14 @@
     To use Angular2 in your app, include angular2 as a dependency in
     your app's <b>pubspec.yaml</b> file. For example:
 
-  pre.prettyprint.lang-yaml
-    code.
-      # pubspec.yaml
-      name: getting_started
-      description: Dart version of Angular 2 example, Getting Started
-      version: 0.0.1
-      dependencies:
-        angular2: 2.0.0-alpha.22
-        browser: any
+  code-example(language="yaml").
+    # pubspec.yaml
+    name: getting_started
+    description: Dart version of Angular 2 example, Getting Started
+    version: 0.0.1
+    dependencies:
+      angular2: 2.0.0-alpha.22
+      browser: any
   p.
     Run <b>pub get</b> to download the packages your app depends on.
     (<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a>
@@ -51,26 +50,25 @@
     and creating a top-level <code>main()</code> function that calls
     Angular's <code>bootstrap()</code> function.
 
-  pre.prettyprint.lang-dart
-    code.
-      // web/main.dart
-      import 'package:angular2/angular2.dart';
-      import 'package:angular2/src/reflection/reflection.dart' show reflector;
-      import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
+  code-example(language="javascript").
+    // web/main.dart
+    import 'package:angular2/angular2.dart';
+    import 'package:angular2/src/reflection/reflection.dart' show reflector;
+    import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
 
-      @Component(
-        selector: 'my-app'
-      )
-      @View(
-        template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
-      )
-      class AppComponent {
-      }
+    @Component(
+      selector: 'my-app'
+    )
+    @View(
+      template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
+    )
+    class AppComponent {
+    }
 
-      main() {
-        reflector.reflectionCapabilities = new ReflectionCapabilities();
-        bootstrap(AppComponent);
-      }
+    main() {
+      reflector.reflectionCapabilities = new ReflectionCapabilities();
+      bootstrap(AppComponent);
+    }
 
 .l-main-section
   h2#section-create-an-entry-point Create an HTML file
@@ -79,20 +77,19 @@
     Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element
     and call <code>main.dart</code>.
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;!-- web/index.html -->
-      &lt;!DOCTYPE html&gt;
-      &lt;html&gt;
-        &lt;head&gt;
-          &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
-        &lt;/head&gt;
-        &lt;body&gt;
-          &lt;my-app&gt;&lt;/my-app&gt;
-          &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
-          &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
-        &lt;/body&gt;
-      &lt;/html&gt
+  code-example(language="html").
+    &lt;!-- web/index.html -->
+    &lt;!DOCTYPE html&gt;
+    &lt;html&gt;
+      &lt;head&gt;
+        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
+      &lt;/head&gt;
+      &lt;body&gt;
+        &lt;my-app&gt;&lt;/my-app&gt;
+        &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
+        &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
+      &lt;/body&gt;
+    &lt;/html&gt
 
 .l-main-section
   h2#section-run-it Run the app!
diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade
index 9fba3e3182..2e3e718810 100644
--- a/public/docs/dart/latest/guide/user-input.jade
+++ b/public/docs/dart/latest/guide/user-input.jade
@@ -5,9 +5,8 @@
   p.
     You can specify the event handler—a method in the component controller—like this:
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;input (keyup)="myControllerMethod()"&gt;
+  code-example(language="html").
+    &lt;input (keyup)="myControllerMethod()"&gt;
   p.
     As in previous examples, you can make element references available to
     other parts of the template as a local
@@ -17,10 +16,9 @@
     <!-- PENDING: make sure we use recommended word separation scheme.
     my-name doesn't work, but my_name does. Would myName work? -->
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;input #myname (keyup)&gt;
-      &lt;p&gt;{{myname.value}}&lt;/p&gt;
+  code-example(language="html").
+    &lt;input #myname (keyup)&gt;
+    &lt;p&gt;{{myname.value}}&lt;/p&gt;
 
   p.text-body(ng-non-bindable).
     In that example, <code>#myname</code> creates a local variable in the template that
@@ -46,16 +44,15 @@
     Then add a method that adds new items
     to the list.
 
-  pre.prettyprint.lang-dart
-    code.
-      class TodoList {
-        List&lt;String&gt; todos =
-          ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
+  code-example(language="dart" format="linenums").
+    class TodoList {
+      List&lt;String&gt; todos =
+        ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
 
-        addTodo(String todo) {
-          todos.add(todo);
-        }
+      addTodo(String todo) {
+        todos.add(todo);
       }
+    }
 
 .callout.is-helpful
   header Production Best Practice
@@ -73,13 +70,12 @@
     Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
     its text to the value.
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;ul&gt;
-         &lt;li *for=&quot;#todo of todos&quot;&gt;
-           {{ todo }}
-         &lt;/li&gt;
-      &lt;/ul&gt;
+  code-example(language="html" format="linenums").
+    &lt;ul&gt;
+       &lt;li *for=&quot;#todo of todos&quot;&gt;
+         {{ todo }}
+       &lt;/li&gt;
+    &lt;/ul&gt;
 
 .l-main-section
   h2#section-add-todos-to-the-list Add todos to the list via button click
@@ -87,18 +83,16 @@
     Now, add a text input and a button for users to add items to the list.  As you saw above, you can create a local
     variable reference in your template with <code>#varname</code>.  Call it <code>#todotext</code> here.
 
-  pre.prettyprint.lang-html
-    code.
-      &lt;input #todotext&gt;
+  code-example(language="html").
+    &lt;input #todotext&gt;
   p.
     Specify the target of the click event binding as your controller's
     <code>addTodo()</code> method and pass
     it the value. Since you created a reference called <code>todotext</code>,
     you can get the value with <code>todotext.value.</code>
 
-  pre.prettyprint.lang-html
-    code.
-        &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
+  code-example(language="html").
+    &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
 
   p.
     To make pressing Enter do something useful,
@@ -107,13 +101,59 @@
     <a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
     so be sure to import that library.
 
-  .code-box
-    pre.prettyprint.lang-dart(data-name="todo_list.dart")
-      code.
-        // In the template:
-        &lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
+  code-tabs
+    code-pane(language="dart" name="todo_list.dart" format="linenums").
+      // In the template:
+      &lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
+
+      // In the component controller class:
+      doneTyping(KeyboardEvent event) {
+        if (event.keyCode == KeyCode.ENTER) {
+          InputElement e = event.target;
+          addTodo(e.value);
+          e.value = null;
+        }
+      }
+    code-pane(language="dart" name="main.dart" format="linenums").
+      library user_input;
+
+      import 'dart:html';
+      ...
+
+.l-main-section
+  h2#section-final-code Final code
+
+  code-tabs
+    code-pane(language="dart" name="todo_list.dart" format="linenums").
+      // web/todo_list.dart
+      part of user_input;
+
+      @Component(
+        selector: 'todo-list'
+      )
+      @View(
+        // Without r before ''' (a raw string), $event breaks Angular.
+        // An alternative to a raw string is to use \$event instead.
+        template: r'''
+          &lt;ul&gt;
+            &lt;li *for=&quot;#todo of todos&quot;&gt;
+              {{ todo }}
+            &lt;/li&gt;
+          &lt;/ul&gt;
+
+          &lt;input #todotext (keyup)="doneTyping($event)"&gt;
+          &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
+         ''',
+           directives: const[For]
+      )
+      class TodoList {
+        List&lt;String&gt; todos =
+          ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
+
+        addTodo(String todo) {
+          todos.add(todo);
+        }
 
-        // In the component controller class:
         doneTyping(KeyboardEvent event) {
           if (event.keyCode == KeyCode.ENTER) {
             InputElement e = event.target;
@@ -121,96 +161,43 @@
             e.value = null;
           }
         }
-    pre.prettyprint.lang-dart(data-name="main.dart")
-      code.
-        library user_input;
+      }
+    code-pane(language="dart" name="main.dart" format="linenums").
+      // web/main.dart
+      library user_input;
 
-        import 'dart:html';
-        ...
+      import 'dart:html';
 
+      import 'package:angular2/angular2.dart';
+      import 'package:angular2/src/reflection/reflection.dart' show reflector;
+      import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
 
-.l-main-section
-  h2#section-final-code Final code
+      part 'todo_list.dart';
 
-  .code-box
-    pre.prettyprint.lang-dart(data-name="todo_list.dart")
-      code.
-        // web/todo_list.dart
-        part of user_input;
+      main() {
+        reflector.reflectionCapabilities = new ReflectionCapabilities();
+        bootstrap(TodoList);
+      }
+    code-pane(language="html" name="index.html" format="linenums").
+      &lt;!-- web/index.html --&gt;
+      &lt;!DOCTYPE html&gt;
+      &lt;html&gt;
+        &lt;head&gt;
+          &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
+        &lt;/head&gt;
+        &lt;body&gt;
 
-        @Component(
-          selector: 'todo-list'
-        )
-        @View(
-          // Without r before ''' (a raw string), $event breaks Angular.
-          // An alternative to a raw string is to use \$event instead.
-          template: r'''
-            &lt;ul&gt;
-              &lt;li *for=&quot;#todo of todos&quot;&gt;
-                {{ todo }}
-              &lt;/li&gt;
-            &lt;/ul&gt;
+          &lt;todo-list&gt;&lt;/todo-list&gt;
 
-            &lt;input #todotext (keyup)="doneTyping($event)"&gt;
-            &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
-           ''',
-             directives: const[For]
-        )
-        class TodoList {
-          List&lt;String&gt; todos =
-            ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
-
-          addTodo(String todo) {
-            todos.add(todo);
-          }
-
-          doneTyping(KeyboardEvent event) {
-            if (event.keyCode == KeyCode.ENTER) {
-              InputElement e = event.target;
-              addTodo(e.value);
-              e.value = null;
-            }
-          }
-        }
-    pre.prettyprint.lang-dart(data-name="main.dart")
-      code.
-        // web/main.dart
-        library user_input;
-
-        import 'dart:html';
-
-        import 'package:angular2/angular2.dart';
-        import 'package:angular2/src/reflection/reflection.dart' show reflector;
-        import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
-
-        part 'todo_list.dart';
-
-        main() {
-          reflector.reflectionCapabilities = new ReflectionCapabilities();
-          bootstrap(TodoList);
-        }
-    pre.prettyprint.lang-html(data-name="html")
-      code.
-        &lt;!-- web/index.html --&gt;
-        &lt;!DOCTYPE html&gt;
-        &lt;html&gt;
-          &lt;head&gt;
-            &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
-          &lt;/head&gt;
-          &lt;body&gt;
-
-            &lt;todo-list&gt;&lt;/todo-list&gt;
-
-            &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
-            &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
-          &lt;/body&gt;
-        &lt;/html&gt;
-    pre.prettyprint.lang-yaml(data-name="yaml")
-      code.
-        # pubspec.yaml
-        name: user_input
-        description: Dart version of Angular 2 example, Responding to User Input
-        version: 0.0.1
-        dependencies:
-          angular2: 2.0.0-alpha.22
-          browser: any
+          &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
+          &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
+        &lt;/body&gt;
+      &lt;/html&gt;
+    code-pane(language="yaml" name="pubspec.yaml" format="linenums").
+      # pubspec.yaml
+      name: user_input
+      description: Dart version of Angular 2 example, Responding to User Input
+      version: 0.0.1
+      dependencies:
+        angular2: 2.0.0-alpha.22
+        browser: any