feat(angular2): update to beta 11

- reformat code and optimize imports - carefully manage setTimeout/clearTimeout calls due to zone.js nit-picky exceptions being thrown - use >= to be even more generous about which peer deps to install. can revisit if this causes more errors - work around errors on canary by not using *ngIf or *ngFor in Dynamic component loader cases.
justindujardin · Mar 20, 2016 · 603ba25 · 603ba25
1 parent fe2c8ab
commit 603ba25
Show file tree

Hide file tree

Showing 117 changed files with 874 additions and 740 deletions.
diff --git a/examples/all.ts b/examples/all.ts
@@ -1,21 +1,20 @@
 // TODO(jd): auto generate import/exports for examples during the grunt site-meta task.
 
 
-import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
-
-import CardBasicUsage from './components/card/basic_usage';
-import CardInlineActions from './components/card/inline_actions';
-import ButtonBasicUsage from './components/button/basic_usage';
-import CardActionButtons from './components/card/action_buttons';
-import DialogBasicUsage from './components/dialog/basic_usage';
-import ToolbarBasicUsage from './components/toolbar/basic_usage';
-import ToolbarScrollShrink from './components/toolbar/scroll_shrink';
-import ProgressLinearBasicUsage from './components/progress_linear/basic_usage';
-import ProgressCircularBasicUsage from './components/progress_circular/basic_usage';
-import RadioBasicUsage from './components/radio/basic_usage';
-import SwitchBasicUsage from './components/switch/basic_usage';
-import TabsDynamicHeight from './components/tabs/dynamic_height';
-import TabsDynamicTabs from './components/tabs/dynamic_tabs';
+import {CONST_EXPR, Type} from "angular2/src/facade/lang";
+import CardBasicUsage from "./components/card/basic_usage";
+import CardInlineActions from "./components/card/inline_actions";
+import ButtonBasicUsage from "./components/button/basic_usage";
+import CardActionButtons from "./components/card/action_buttons";
+import DialogBasicUsage from "./components/dialog/basic_usage";
+import ToolbarBasicUsage from "./components/toolbar/basic_usage";
+import ToolbarScrollShrink from "./components/toolbar/scroll_shrink";
+import ProgressLinearBasicUsage from "./components/progress_linear/basic_usage";
+import ProgressCircularBasicUsage from "./components/progress_circular/basic_usage";
+import RadioBasicUsage from "./components/radio/basic_usage";
+import SwitchBasicUsage from "./components/switch/basic_usage";
+import TabsDynamicHeight from "./components/tabs/dynamic_height";
+import TabsDynamicTabs from "./components/tabs/dynamic_tabs";
 import CheckboxBasicUsage from "./components/checkbox/basic_usage";
 import CheckboxSyncing from "./components/checkbox/syncing";
 import ListBasicUsage from "./components/list/basic_usage";

diff --git a/examples/app.scss b/examples/app.scss
@@ -16,13 +16,13 @@ demos-app {
   .app-menu {
     border-right: 1px solid md-color($md-foreground, divider);
     md-list-item {
-      font-size:$subheader-font-size;
-      font-weight:$subheader-font-weight;
+      font-size: $subheader-font-size;
+      font-weight: $subheader-font-weight;
       cursor: pointer;
       will-change: color;
       transition: color $swift-ease-in-duration $swift-ease-in-timing-function;
       &.md-active {
-        color: md-color($md-primary,500);
+        color: md-color($md-primary, 500);
       }
     }
     md-toolbar {

diff --git a/examples/app.ts b/examples/app.ts
@@ -1,4 +1,4 @@
-import {Component, View, enableProdMode, bind, Input, OnDestroy, ApplicationRef} from "angular2/core";
+import {Component, enableProdMode, bind, Input, OnDestroy, ApplicationRef} from "angular2/core";
 import {bootstrap} from "angular2/platform/browser";
 import {
   ROUTER_PROVIDERS,
@@ -24,11 +24,11 @@ import {Media} from "ng2-material/core/util/media";
  * Describe an example that can be dynamically loaded.
  */
 export interface IExampleData {
-  template:string;
-  source:string;
-  styles:string;
-  component:string;
-  name:string;
+  template: string;
+  source: string;
+  styles: string;
+  component: string;
+  name: string;
 }
 
 @RouteConfig([
@@ -91,7 +91,7 @@ export class DemosApp implements OnDestroy {
     this._sidenav.show('menu');
   }
 
-  navigate(to:any) {
+  navigate(to: any) {
     this.router.navigate(to);
   }
 

diff --git a/examples/components/button/basic_usage.html b/examples/components/button/basic_usage.html
@@ -1,4 +1,3 @@
-
 <md-content>
 
   <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
@@ -18,37 +17,37 @@
   </section>
 
   <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
-      <button md-fab class="md-fab" aria-label="Eat cake">
-          <i md-icon>cake</i>
-      </button>
+    <button md-fab class="md-fab" aria-label="Eat cake">
+      <i md-icon>cake</i>
+    </button>
 
-      <button md-fab class="md-primary" aria-label="Use Android">
-        <i md-icon>android</i>
-      </button>
+    <button md-fab class="md-primary" aria-label="Use Android">
+      <i md-icon>android</i>
+    </button>
 
-      <button md-fab disabled="true" aria-label="Comment">
-          <i md-icon>comment</i>
-      </button>
+    <button md-fab disabled="true" aria-label="Comment">
+      <i md-icon>comment</i>
+    </button>
 
-      <button md-fab class="md-primary md-hue-2" aria-label="Profile">
-          <i md-icon>people</i>
-      </button>
+    <button md-fab class="md-primary md-hue-2" aria-label="Profile">
+      <i md-icon>people</i>
+    </button>
 
-      <button md-fab class="md-mini" aria-label="Eat cake">
-          <i md-icon>cake</i>
-      </button>
+    <button md-fab class="md-mini" aria-label="Eat cake">
+      <i md-icon>cake</i>
+    </button>
 
-      <button md-fab class="md-mini md-primary" aria-label="Use Android">
-        <i md-icon>android</i>
-      </button>
+    <button md-fab class="md-mini md-primary" aria-label="Use Android">
+      <i md-icon>android</i>
+    </button>
     <div class="label">FAB</div>
   </section>
 
   <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
-      <a md-button [href]="googleUrl" target="_blank">Default Link</a>
-      <a md-button class="md-primary" [href]="googleUrl" target="_blank">Primary Link</a>
+    <a md-button [href]="googleUrl" target="_blank">Default Link</a>
+    <a md-button class="md-primary" [href]="googleUrl" target="_blank">Primary Link</a>
 
-      <button md-button>Default Button</button>
+    <button md-button>Default Button</button>
     <div class="label">Link vs. Button</div>
   </section>
 
@@ -71,11 +70,11 @@
       <i md-icon>more_vert</i>
     </button>
     <a md-button href="http://google.com"
-               title="Launch Google.com in new window"
-               target="_blank"
-               disabled="true"
-               aria-label="Google.com"
-               class="md-icon-button launch" >
+       title="Launch Google.com in new window"
+       target="_blank"
+       disabled="true"
+       aria-label="Google.com"
+       class="md-icon-button launch">
       <i md-icon>launch</i>
     </a>
     <div class="label">Icon Button</div>

diff --git a/examples/components/button/basic_usage.ts b/examples/components/button/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 
 @Component({

diff --git a/examples/components/card/action_buttons.scss b/examples/components/card/action_buttons.scss
@@ -1,6 +1,7 @@
 [md-button] [md-icon] {
-  color: rgba(0,0,0,0.8);
+  color: rgba(0, 0, 0, 0.8);
 }
+
 md-card-content {
   p {
     margin-bottom: 15px;

diff --git a/examples/components/card/action_buttons.ts b/examples/components/card/action_buttons.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 @Component({
   selector: 'card-action-buttons',

diff --git a/examples/components/card/basic_usage.scss b/examples/components/card/basic_usage.scss
@@ -2,6 +2,7 @@
 .card-media {
   background-color: #999999;
 }
+
 [md-button] [md-icon] {
-  color: rgba(0,0,0,0.8);
+  color: rgba(0, 0, 0, 0.8);
 }
diff --git a/examples/components/card/basic_usage.ts b/examples/components/card/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 @Component({
   selector: 'card-basic-usage',

diff --git a/examples/components/card/inline_actions.scss b/examples/components/card/inline_actions.scss
@@ -1,3 +1,3 @@
 [md-button] [md-icon] {
-  color: rgba(0,0,0,0.8);
+  color: rgba(0, 0, 0, 0.8);
 }
diff --git a/examples/components/card/inline_actions.ts b/examples/components/card/inline_actions.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 @Component({
   selector: 'card-inline-actions',

diff --git a/examples/components/checkbox/basic_usage.scss b/examples/components/checkbox/basic_usage.scss
@@ -1,23 +1,29 @@
 div.flex-xs {
-  min-height:40px;
+  min-height: 40px;
 
 }
+
 .checkboxDemo1 div {
   clear: both;
 }
+
 .checkboxDemo1 md-checkbox {
   float: left;
 }
+
 p {
   padding-left: 8px;
 }
+
 fieldset.standard {
   border-style: solid;
   border-width: 1px;
 }
+
 legend {
   color: #3F51B5;
 }
+
 legend code {
   color: #3F51B5;
   font-weight: normal;

diff --git a/examples/components/checkbox/basic_usage.ts b/examples/components/checkbox/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 @Component({
   selector: 'checkbox-basic-usage',

diff --git a/examples/components/checkbox/syncing.ts b/examples/components/checkbox/syncing.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 @Component({
   selector: 'checkbox-syncing',

diff --git a/examples/components/dialog/basic_usage.html b/examples/components/dialog/basic_usage.html
@@ -15,8 +15,9 @@
       Custom Dialog
     </button>
     <div hide-gt-sm layout="row" layout-align="center center" flex="100">
-        <md-checkbox [(checked)]="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
-      </div>
+      <md-checkbox [(checked)]="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen
+      </md-checkbox>
+    </div>
     <button md-raised-button disabled class="md-primary" (click)="showTabDialog($event)" flex="auto">
       Tab Dialog
     </button>

diff --git a/examples/components/dialog/basic_usage.ts b/examples/components/dialog/basic_usage.ts
@@ -1,7 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES,MdDialog} from 'ng2-material/all';
-import {ElementRef} from "angular2/core";
-import {Input} from "angular2/core";
+import {Component, ElementRef} from "angular2/core";
+import {MATERIAL_DIRECTIVES, MdDialog} from "ng2-material/all";
 import {DOM} from "angular2/src/platform/dom/dom_adapter";
 import {MdDialogConfig, MdDialogBasic, MdDialogRef} from "ng2-material/components/dialog/dialog";
 import {Media} from "../../../ng2-material/core/util/media";

diff --git a/examples/components/input/basic_usage.scss b/examples/components/input/basic_usage.scss
@@ -6,7 +6,7 @@
   width: 256px;
   height: 256px;
   font-size: 256px;
-  color: md-color($md-primary,900,0.6);
+  color: md-color($md-primary, 900, 0.6);
 }
 
 md-toolbar[md-hero] {

diff --git a/examples/components/input/basic_usage.ts b/examples/components/input/basic_usage.ts
@@ -1,6 +1,6 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
-import {FORM_DIRECTIVES, Validators} from 'angular2/common';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
+import {FORM_DIRECTIVES} from "angular2/common";
 
 @Component({
   selector: 'input-basic-usage',

diff --git a/examples/components/input/form_builder.ts b/examples/components/input/form_builder.ts
@@ -1,6 +1,12 @@
-import {View, Component} from 'angular2/core';
-import {MdPatternValidator, MdMinValueValidator, MdNumberRequiredValidator, MdMaxValueValidator, MATERIAL_DIRECTIVES} from 'ng2-material/all';
-import {FORM_DIRECTIVES, Validators, FormBuilder, ControlGroup} from 'angular2/common';
+import {Component} from "angular2/core";
+import {
+  MdPatternValidator,
+  MdMinValueValidator,
+  MdNumberRequiredValidator,
+  MdMaxValueValidator,
+  MATERIAL_DIRECTIVES
+} from "ng2-material/all";
+import {FORM_DIRECTIVES, Validators, FormBuilder, ControlGroup} from "angular2/common";
 
 @Component({
   selector: 'input-form-builder',
@@ -16,6 +22,7 @@ export default class InputFormBuilder {
     description: 'Nuclear Missile Defense System',
     rate: 500
   };
+
   constructor(fb: FormBuilder) {
     this.projectForm = fb.group({
       'clientName': ['', Validators.required],

diff --git a/examples/components/list/basic_usage.ts b/examples/components/list/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 let imagePath = 'public/images/avatars/avatar11.svg';
 

diff --git a/examples/components/progress_circular/basic_usage.html b/examples/components/progress_circular/basic_usage.html
@@ -2,15 +2,15 @@
   <h2 class="md-title">Determinate</h2>
 
   <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They
-     give users a quick sense of how long an operation will take.</p>
+    give users a quick sense of how long an operation will take.</p>
   <div layout="row" layout-sm="column" layout-align="space-around">
     <md-progress-circular mode="determinate" [value]="determinateValue"></md-progress-circular>
   </div>
 
   <h2 class="md-title">Indeterminate</h2>
 
   <p>For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to
-     expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
+    expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
   <div layout="row" layout-sm="column" layout-align="space-around">
     <md-progress-circular mode="indeterminate"></md-progress-circular>
   </div>

diff --git a/examples/components/progress_circular/basic_usage.ts b/examples/components/progress_circular/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 @Component({
   selector: 'progress-circular-basic-usage',
@@ -8,9 +8,9 @@ import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
   directives: [MATERIAL_DIRECTIVES]
 })
 export default class ProgressCircularBasicUsage {
-  public determinateValue:number = 30;
-  public deactivated:boolean = false;
-  public mode:string;
+  public determinateValue: number = 30;
+  public deactivated: boolean = false;
+  public mode: string;
 
   constructor() {
     // Iterate every 100ms, non-stop

diff --git a/examples/components/progress_linear/basic_usage.ts b/examples/components/progress_linear/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 @Component({
   selector: 'progress-linear-basic-usage',

diff --git a/examples/components/radio/basic_usage.ts b/examples/components/radio/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 
 // TODO (jdd):