update(demo): replace deprecated 'md-' prefixes

Fixes angular#456.
Defmetalhead · Oct 21, 2017 · e3b2035 · e3b2035
1 parent 481c2d1
commit e3b2035
Show file tree

Hide file tree

Showing 34 changed files with 287 additions and 287 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,11 +40,11 @@
   },
   "devDependencies": {
     "@angular/animations": "^4.4.3",
+    "@angular/cdk": "^2.0.0-beta.12",
     "@angular/compiler-cli": "^4.4.3",
     "@angular/forms": "^4.4.3",
     "@angular/http": "^4.4.3",
-    "@angular/material": "^2.0.0-beta.11",
-    "@angular/cdk": "^2.0.0-beta.11",
+    "@angular/material": "^2.0.0-beta.12",
     "@angular/platform-browser-dynamic": "^4.4.3",
     "@angular/platform-server": "^4.4.3",
     "@angular/router": "^4.4.3",

diff --git a/src/demo-app/app/demo-app/demo-app.ts b/src/demo-app/app/demo-app/demo-app.ts
@@ -10,13 +10,13 @@ import {Component, ViewEncapsulation} from '@angular/core';
            fxLayoutGap="20px"
            style="height:40px; min-height:40px;">
         <h2>Layout Demos: </h2>
-        <button md-raised-button color="primary" [routerLink]="['']">
+        <button mat-raised-button color="primary" [routerLink]="['']">
           Static
         </button>
-        <button md-raised-button color="primary" [routerLink]="['responsive']"> Responsive
+        <button mat-raised-button color="primary" [routerLink]="['responsive']"> Responsive
         </button>
-        <button md-raised-button color="primary" [routerLink]="['issues']"> Github</button>
-        <button md-raised-button color="primary" [routerLink]="['stackoverflow']"> StackOverflow
+        <button mat-raised-button color="primary" [routerLink]="['issues']"> Github</button>
+        <button mat-raised-button color="primary" [routerLink]="['stackoverflow']"> StackOverflow
         </button>
       </div>
       <div fxFlex fxLayout="column"

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts
@@ -4,11 +4,11 @@ import {Component} from '@angular/core';
   moduleId: module.id,
   selector: 'demo-responsive-flex-directive',
   template: `
-    <md-card class="card-demo">
-      <md-card-title>Responsive Flex Directives</md-card-title>
-      <md-card-subtitle>Use the show hide APIs to responsively show or hide elements:
-      </md-card-subtitle>
-      <md-card-content>
+    <mat-card class="card-demo">
+      <mat-card-title>Responsive Flex Directives</mat-card-title>
+      <mat-card-subtitle>Use the show hide APIs to responsively show or hide elements:
+      </mat-card-subtitle>
+      <mat-card-content>
         <div class="containerX">
           <div fxLayout="row" class="coloredContainerX box">
             <div fxFlex.gt-sm="67" fxFlex="33"> flex 33% on mobile, <br>and 66% on gt-sm devices.
@@ -17,11 +17,11 @@ import {Component} from '@angular/core';
             </div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-footer style="width:95%">
+      </mat-card-content>
+      <mat-card-footer style="width:95%">
         <media-query-status></media-query-status>
-      </md-card-footer>
-    </md-card>
+      </mat-card-footer>
+    </mat-card>
   `
 })
 export class DemoResponsiveFlexDirectives {

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts
@@ -4,12 +4,12 @@ import {Component} from '@angular/core';
   moduleId: module.id,
   selector: 'demo-responsive-flex-order',
   template: `
-    <md-card class="card-demo">
-      <md-card-title>Responsive Flex Ordering</md-card-title>
-      <md-card-subtitle>Add the flex-order directive to a layout child to set its order position
+    <mat-card class="card-demo">
+      <mat-card-title>Responsive Flex Ordering</mat-card-title>
+      <mat-card-subtitle>Add the flex-order directive to a layout child to set its order position
         within the layout container:
-      </md-card-subtitle>
-      <md-card-content>
+      </mat-card-subtitle>
+      <mat-card-content>
         <div class="containerX">
           <div fxLayout="row" class="coloredContainerX box">
             <div fxFlex fxFlexOrder="-1">
@@ -28,11 +28,11 @@ import {Component} from '@angular/core';
             </div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-footer style="width:95%">
+      </mat-card-content>
+      <mat-card-footer style="width:95%">
         <media-query-status></media-query-status>
-      </md-card-footer>
-    </md-card>
+      </mat-card-footer>
+    </mat-card>
   `
 })
 export class DemoResponsiveFlexOrder {

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveLayoutDirections.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveLayoutDirections.demo.ts
@@ -4,23 +4,23 @@ import {Component} from '@angular/core';
   moduleId: module.id,
   selector: 'demo-responsive-layout-direction',
   template: `
-    <md-card class="card-demo">
-      <md-card-title>Responsive Layout Directions</md-card-title>
-      <md-card-subtitle>Layout direction changes to 'column' for 'xs' or 'sm' viewport sizes:
-      </md-card-subtitle>
-      <md-card-content>
+    <mat-card class="card-demo">
+      <mat-card-title>Responsive Layout Directions</mat-card-title>
+      <mat-card-subtitle>Layout direction changes to 'column' for 'xs' or 'sm' viewport sizes:
+      </mat-card-subtitle>
+      <mat-card-content>
         <div class="containerX">
           <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlex
                class="coloredContainerX box">
             <div fxFlex> I'm above on mobile, and to the left on larger devices.</div>
             <div fxFlex> I'm below on mobile, and to the right on larger devices.</div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-footer style="width:95%">
+      </mat-card-content>
+      <mat-card-footer style="width:95%">
         <media-query-status></media-query-status>
-      </md-card-footer>
-    </md-card>
+      </mat-card-footer>
+    </mat-card>
   `
 })
 export class DemoResponsiveLayoutDirection {

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts
@@ -8,12 +8,12 @@ import {ObservableMedia} from '@angular/flex-layout';
   moduleId: module.id,
   selector: 'demo-responsive-row-column',
   template: `
-    <md-card class="card-demo">
-      <md-card-title>Multiple Responsive Columns</md-card-title>
-      <md-card-subtitle>Simple row with nested layout containers. Note: the 1st column is
+    <mat-card class="card-demo">
+      <mat-card-title>Multiple Responsive Columns</mat-card-title>
+      <mat-card-subtitle>Simple row with nested layout containers. Note: the 1st column is
         responsive.
-      </md-card-subtitle>
-      <md-card-content>
+      </mat-card-subtitle>
+      <mat-card-content>
         <div class="containerX">
 
           <div class="colorNested box" fxLayout="row" *ngIf="isVisible">
@@ -36,16 +36,16 @@ import {ObservableMedia} from '@angular/flex-layout';
             </div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-footer style="width:95%">
+      </mat-card-content>
+      <mat-card-footer style="width:95%">
         <div fxLayout="row" class="hint" fxLayoutAlign="space-around">
           <div>&lt;div fxLayout="{{ firstCol }}" fxFlex="50%" fxFlex.gt-sm="25%" fxHide.md &gt;
           </div>
           <div fxFlex></div>
           <div>&lt;div fxLayout="{{ secondCol }}" fxFlex &gt;</div>
         </div>
-      </md-card-footer>
-    </md-card>
+      </mat-card-footer>
+    </mat-card>
   `
 })
 export class DemoResponsiveRows implements OnDestroy {

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveShowHide.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveShowHide.demo.ts
@@ -4,11 +4,11 @@ import {Component} from '@angular/core';
   moduleId: module.id,
   selector: 'demo-responsive-show-hide',
   template: `
-    <md-card class="card-demo">
-      <md-card-title>Show & Hide Directives</md-card-title>
-      <md-card-subtitle>Use the show hide APIs to responsively show or hide elements:
-      </md-card-subtitle>
-      <md-card-content>
+    <mat-card class="card-demo">
+      <mat-card-title>Show & Hide Directives</mat-card-title>
+      <mat-card-subtitle>Use the show hide APIs to responsively show or hide elements:
+      </mat-card-subtitle>
+      <mat-card-content>
         <div class="containerX">
           <div fxLayout="row" class="coloredContainerX box">
             <div fxFlex fxHide="false" fxHide.gt-sm> Shown on small device size.<br> Hidden on gt-sm
@@ -24,11 +24,11 @@ import {Component} from '@angular/core';
             </div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-footer style="width:95%">
+      </mat-card-content>
+      <mat-card-footer style="width:95%">
         <media-query-status></media-query-status>
-      </md-card-footer>
-    </md-card>
+      </mat-card-footer>
+    </mat-card>
   `
 })
 export class DemoResponsiveShowHide {

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts
@@ -5,13 +5,13 @@ import {Component} from '@angular/core';
   selector: 'demo-responsive-style',
   template: `
 
-    <md-card class="card-demo" >
-      <md-card-title>Responsive Style</md-card-title>
-      <md-card-subtitle>
+    <mat-card class="card-demo" >
+      <mat-card-title>Responsive Style</mat-card-title>
+      <mat-card-subtitle>
         Use the fxClass and fxStyle APIs to responsively apply styles to elements:
-      </md-card-subtitle>
+      </mat-card-subtitle>
 
-      <md-card-content>
+      <mat-card-content>
         <div class="containerX">
           <div fxLayout="row" fxFlex class="coloredContainerX box">
             <div
@@ -23,18 +23,18 @@ import {Component} from '@angular/core';
               [ngClass.lg]="['fxClass-lg', 'fxClass-lg2']">
               Sample Text #1
               <br/>
-              <md-checkbox
+              <mat-checkbox
                 [(ngModel)]="hasStyle"
                 fxShow="false"
                 [fxShow.sm]="true"
                 [fxShow.md]="true">
                 Use Responsive Styles
-              </md-checkbox>
+              </mat-checkbox>
             </div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-content>
+      </mat-card-content>
+      <mat-card-content>
         <pre>
         &lt;div
           fxFlex
@@ -45,9 +45,9 @@ import {Component} from '@angular/core';
           [ngClass.lg]="['fxClass-lg', 'fxClass-lg2']"&gt;
         &lt;/div&gt;
         </pre>
-      </md-card-content>
+      </mat-card-content>
 
-      <md-card-content>
+      <mat-card-content>
         <div class="containerX">
           <div fxLayout="row"
                fxFlex
@@ -62,8 +62,8 @@ import {Component} from '@angular/core';
             </div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-content>
+      </mat-card-content>
+      <mat-card-content>
         <pre>
         &lt;div
           style="font-style: italic"
@@ -73,13 +73,13 @@ import {Component} from '@angular/core';
           [ngStyle.lg]="styleLgExp"&gt;
         &lt;/div&gt;
         </pre>
-      </md-card-content>
+      </mat-card-content>
 
 
-      <md-card-footer style="width:95%">
+      <mat-card-footer style="width:95%">
         <media-query-status></media-query-status>
-      </md-card-footer>
-    </md-card>
+      </mat-card-footer>
+    </mat-card>
   `
 })
 export class DemoResponsiveStyle  {

diff --git a/src/demo-app/app/docs-layout/FlexAlignSelf.demo.ts b/src/demo-app/app/docs-layout/FlexAlignSelf.demo.ts
@@ -8,12 +8,12 @@ import {Component} from '@angular/core';
     'layoutAlignment.demo.css',
   ],
   template: `
-    <md-card class="card-demo">
-      <md-card-title>Flex with Align-Self</md-card-title>
-      <md-card-subtitle>Click on 'target' to explore how 'flex-align' can change the alignment for a
-        single element only.
-      </md-card-subtitle>
-      <md-card-content>
+    <mat-card class="card-demo">
+      <mat-card-title>Flex with Align-Self</mat-card-title>
+      <mat-card-subtitle>Click on 'target' to explore how 'flex-align' can change the alignment
+        for a single element only.
+      </mat-card-subtitle>
+      <mat-card-content>
         <div class="containerX">
           <div class="box" style="height:200px;">
             <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="5px"
@@ -28,13 +28,13 @@ import {Component} from '@angular/core';
             </div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-footer style="width:95%;">
+      </mat-card-content>
+      <mat-card-footer style="width:95%;">
         <div class="hint">
           &lt;div fxFlexAlign="{{ alignTo }}"&gt;
         </div>
-      </md-card-footer>
-    </md-card>
+      </mat-card-footer>
+    </mat-card>
   `
 })
 export class DemoFlexAlignSelf {

diff --git a/src/demo-app/app/docs-layout/flexOffetValues.demo.ts b/src/demo-app/app/docs-layout/flexOffetValues.demo.ts
@@ -4,21 +4,21 @@ import {Component} from '@angular/core';
   moduleId: module.id,
   selector: 'demo-flex-offset-values',
   template: `
-    <md-card class="card-demo">
-      <md-card-title>Flex Offset Values</md-card-title>
-      <md-card-subtitle>Explore impact of values for the 'flex-offset' API:</md-card-subtitle>
-      <md-card-content>
+    <mat-card class="card-demo">
+      <mat-card-title>Flex Offset Values</mat-card-title>
+      <mat-card-subtitle>Explore impact of values for the 'flex-offset' API:</mat-card-subtitle>
+      <mat-card-content>
         <div class="containerX">
           <div fxLayout="row" class="colored box nopad">
             <div fxFlex="66" fxFlexOffset="15"> [fxFlex="66"] [fxFlexOffset="15"]</div>
             <div fxFlex> [fxFlex]</div>
           </div>
         </div>
-      </md-card-content>
-      <md-card-footer>
+      </mat-card-content>
+      <mat-card-footer>
         <div class="hint">&lt;div fxLayout="row" &gt;</div>
-      </md-card-footer>
-    </md-card>
+      </mat-card-footer>
+    </mat-card>
   `
 })
 export class DemoFlexOffsetValues {