feature(material): Upgrade to latest material. (#305)

feature(material): Upgrade to latest material. (closes #346)
Teradata · Feb 23, 2017 · 717d309 · 717d309
1 parent c91d3cd
commit 717d309
Show file tree

Hide file tree

Showing 102 changed files with 1,161 additions and 945 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "@angular/forms": "^2.4.5",
     "@angular/flex-layout": "2.0.0-beta.5",
     "@angular/http": "^2.4.5",
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.2",
     "@angular/platform-browser": "^2.4.5",
     "@angular/platform-browser-dynamic": "^2.4.5",
     "@angular/platform-server": "^2.4.5",

diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html
@@ -9,7 +9,7 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
     <md-tab-group md-stretch-tabs>
       <md-tab>
         <template md-tab-label>Demo</template>
-          <div class="md-table-container">
+          <div class="mat-table-container">
           <table td-data-table>
             <th td-data-table-column>
               <md-icon>comment</md-icon>
@@ -22,7 +22,7 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
             </th>
             <tr td-data-table-row *ngFor="let row of basicData">
               <td td-data-table-cell (click)="openPrompt(row, 'comments')">
-                <button md-button [class.md-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
+                <button md-button [class.mat-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
               </td>
               <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
                 {{column.format ? column.format(row[column.name]) : row[column.name]}}
@@ -48,7 +48,7 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
               </th>
               <tr td-data-table-row *ngFor="let row of basicData">
                 <td td-data-table-cell (click)="openPrompt(row, 'comments')">
-                  <button md-button [class.md-accent]="!row['comments']">{ {row['comments'] || 'Add Comment'}}</button>
+                  <button md-button [class.mat-accent]="!row['comments']">{ {row['comments'] || 'Add Comment'}}</button>
                 </td>
                 <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
                   { {column.format ? column.format(row[column.name]) : row[column.name]}}
@@ -207,7 +207,7 @@ <h4 class="md-subhead">Paging Bar / Search Box / Sortable components</h4>
     <md-tab-group md-stretch-tabs>
       <md-tab>
         <template md-tab-label>Demo</template>
-        <div layout="row" layout-align="start center" class="pad-left-sm pad-right-sm" [class.md-selected-title]="selectedRows.length && selectable">
+        <div layout="row" layout-align="start center" class="pad-left-sm pad-right-sm" [class.mat-selected-title]="selectedRows.length && selectable">
           <span *ngIf="!searchBox.searchVisible" class="push-left-sm">
             <span *ngIf="(selectable && !selectedRows.length) || !selectable" class="md-title">Title here</span>
             <span *ngIf="selectedRows.length && selectable" class="md-body-1">{{selectedRows.length}} item(s) selected</span>

diff --git a/src/app/components/components/data-table/data-table.component.scss b/src/app/components/components/data-table/data-table.component.scss
@@ -1,4 +1,4 @@
-.md-table-container {
+.mat-table-container {
   display: block;
   max-width: 100%;
   overflow-x: auto;

diff --git a/src/app/components/components/directives/directives.component.html b/src/app/components/components/directives/directives.component.html
@@ -23,14 +23,14 @@
     <p>Try entering white spaces before or after a word this input:</p>
     <div layout="row">
       <md-input-container flex>
-        <input md-input tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
+        <input mdInput tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
       </md-input-container>
     </div>
     <p>Usage:</p>
     <td-highlight lang="html">
         <![CDATA[
           <md-input-container>
-            <input md-input tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
+            <input mdInput tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
           </md-input-container>
         ]]>
     </td-highlight>
@@ -119,7 +119,7 @@
     <p>Example enter lower than 5 or higher than 10:</p>
     <div layout="row">
       <md-input-container flex="20">
-        <input md-input placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
+        <input mdInput placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
       </md-input-container>
     </div>
     <p>Errors:</p>
@@ -128,7 +128,7 @@
     <td-highlight lang="html">
         <![CDATA[
           <md-input-container>
-            <input md-input placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
+            <input mdInput placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
           </md-input-container>
         ]]>
     </td-highlight>

diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.ts b/src/app/components/components/dynamic-forms/dynamic-forms.component.ts
@@ -62,7 +62,7 @@ export class DynamicFormsDemoComponent {
 
   numberElements: ITdDynamicElementConfig[] = [{
     name: 'number',
-    label: 'Number (coming soon)',
+    label: 'Number',
     type: TdDynamicType.Number,
     required: true,
     min: 18,

diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.html b/src/app/components/components/expansion-panel/expansion-panel.component.html
@@ -26,10 +26,10 @@ <h4 md-line>Headquarters</h4>
         </td-expansion-summary>
         <form class="md-padding" layout="column">
           <md-input-container flex>
-            <input md-input placeholder="Company (disabled)" disabled value="Google"/>
+            <input mdInput placeholder="Company (disabled)" disabled value="Google"/>
           </md-input-container>
           <md-input-container flex>
-            <textarea md-input placeholder="Description" rows="4"></textarea>
+            <textarea mdInput placeholder="Description" rows="4"></textarea>
           </md-input-container>
         </form>
         <md-divider></md-divider>

diff --git a/src/app/components/components/file-input/file-input.component.html b/src/app/components/components/file-input/file-input.component.html
@@ -15,7 +15,7 @@
                               (keyup.delete)="fileInput.clear()"
                               (keyup.backspace)="fileInput.clear()"
                               flex>
-            <input md-input
+            <input mdInput
                    placeholder="select or drop files"
                    [value]="files?.length ? (files?.length + ' files') : files?.name"
                    [disabled]="disabled"
@@ -53,7 +53,7 @@
                                   (keyup.delete)="fileInput.clear()"
                                   (keyup.backspace)="fileInput.clear()"
                                   flex>
-                <input md-input
+                <input mdInput
                       placeholder="select or drop files"
                       [value]="files?.length ? (files?.length + ' files') : files?.name"
                       [disabled]="disabled"

diff --git a/src/app/components/components/loading/loading.component.html b/src/app/components/components/loading/loading.component.html
@@ -11,10 +11,10 @@ <h4 class="md-subhead">with indetederminate [tdLoadingMode], circular [tdLoading
         <div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
           <div layout="column" flex>
             <md-input-container flex>
-              <input md-input placeholder="Name"/>
+              <input mdInput placeholder="Name"/>
             </md-input-container>
             <md-input-container flex>
-              <textarea md-input placeholder="Description" rows="4"></textarea>
+              <textarea mdInput placeholder="Description" rows="4"></textarea>
             </md-input-container>
           </div>
         </div>
@@ -30,10 +30,10 @@ <h4 class="md-subhead">with indetederminate [tdLoadingMode], circular [tdLoading
             <div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
               <div layout="column" flex>
                 <md-input-container flex>
-                  <input md-input placeholder="Name"/>
+                  <input mdInput placeholder="Name"/>
                 </md-input-container>
                 <md-input-container flex>
-                  <textarea md-input placeholder="Description" rows="4"></textarea>
+                  <textarea mdInput placeholder="Description" rows="4"></textarea>
                 </md-input-container>
               </div>
             </div>
@@ -81,14 +81,14 @@ <h4 class="md-subhead">with determinate [tdLoadingMode], linear [tdLoadingType],
         <template tdLoading="replaceTemplateSyntax" tdLoadingMode="determinate" tdLoadingType="linear" tdLoadingStrategy="replace" tdLoadingColor="warn">
           <div layout="column" flex>
             <md-input-container flex>
-              <input md-input placeholder="Name"/>
+              <input mdInput placeholder="Name"/>
             </md-input-container>
             <md-select placeholder="Select">
               <md-option>Demo 1</md-option>
               <md-option>Demo 2</md-option>
             </md-select>
             <md-input-container flex>
-              <textarea md-input placeholder="Description" rows="4"></textarea>
+              <textarea mdInput placeholder="Description" rows="4"></textarea>
             </md-input-container>
           </div>
         </template>
@@ -104,14 +104,14 @@ <h4 class="md-subhead">with determinate [tdLoadingMode], linear [tdLoadingType],
             <template tdLoading="replaceTemplateSyntax" tdLoadingMode="determinate" tdLoadingType="linear" tdLoadingStrategy="replace" tdLoadingColor="warn">
               <div layout="column" flex>
                 <md-input-container flex>
-                  <input md-input placeholder="Name"/>
+                  <input mdInput placeholder="Name"/>
                 </md-input-container>
                 <md-select placeholder="Select">
                   <md-option>Demo 1</md-option>
                   <md-option>Demo 2</md-option>
                 </md-select>
                 <md-input-container flex>
-                  <textarea md-input placeholder="Description" rows="4"></textarea>
+                  <textarea mdInput placeholder="Description" rows="4"></textarea>
                 </md-input-container>
               </div>
             </template>

diff --git a/src/app/components/components/material-components/material-components.component.html b/src/app/components/components/material-components/material-components.component.html
@@ -334,38 +334,38 @@ <h3>Icons with Buttons</h3>
     <form>
       <div layout="row" layout-margin>
         <md-input-container flex>
-          <input md-input placeholder="Company (disabled)" disabled value="Google">
+          <input mdInput placeholder="Company (disabled)" disabled value="Google">
         </md-input-container>
       </div>
       <div layout="row" layout-margin>
         <md-input-container flex>
-          <input md-input placeholder="First name">
+          <input mdInput placeholder="First name">
         </md-input-container>
         <md-input-container flex>
-          <input md-input placeholder="Long Last Name That Will Be Truncated">
+          <input mdInput placeholder="Long Last Name That Will Be Truncated">
         </md-input-container>
       </div>
 
       <div layout="row" layout-margin>
         <md-input-container flex>
-          <textarea md-input placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
+          <textarea mdInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
         </md-input-container>
       </div>
       <div layout="row" layout-margin>
         <md-input-container flex>
-          <textarea md-input placeholder="Address 2"></textarea>
+          <textarea mdInput placeholder="Address 2"></textarea>
         </md-input-container>
       </div>
 
       <div layout="row" layout-margin>
         <md-input-container flex>
-          <input md-input placeholder="City">
+          <input mdInput placeholder="City">
         </md-input-container>
         <md-input-container flex>
-          <input md-input placeholder="State">
+          <input mdInput placeholder="State">
         </md-input-container>
         <md-input-container flex>
-          <input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+          <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
           <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
         </md-input-container>
       </div>
@@ -378,38 +378,38 @@ <h3>Icons with Buttons</h3>
       <form>
         <div layout="row" layout-margin>
           <md-input-container flex>
-            <input md-input placeholder="Company (disabled)" disabled value="Google">
+            <input mdInput placeholder="Company (disabled)" disabled value="Google">
           </md-input-container>
         </div>
         <div layout="row" layout-margin>
           <md-input-container flex>
-            <input md-input placeholder="First name">
+            <input mdInput placeholder="First name">
           </md-input-container>
           <md-input-container flex>
-            <input md-input placeholder="Long Last Name That Will Be Truncated">
+            <input mdInput placeholder="Long Last Name That Will Be Truncated">
           </md-input-container>
         </div>
 
         <div layout="row" layout-margin>
           <md-input-container flex>
-            <textarea md-input placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
+            <textarea mdInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
           </md-input-container>
         </div>
         <div layout="row" layout-margin>
           <md-input-container flex>
-            <textarea md-input placeholder="Address 2"></textarea>
+            <textarea mdInput placeholder="Address 2"></textarea>
           </md-input-container>
         </div>
 
         <div layout="row" layout-margin>
           <md-input-container flex>
-            <input md-input placeholder="City">
+            <input mdInput placeholder="City">
           </md-input-container>
           <md-input-container flex>
-            <input md-input placeholder="State">
+            <input mdInput placeholder="State">
           </md-input-container>
           <md-input-container flex>
-            <input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+            <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
             <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
           </md-input-container>
         </div>
@@ -1307,15 +1307,15 @@ <h3 md-line>{ { dog.name } }</h3>
   <md-card-content>
     <button md-raised-button
         md-ripple
-        [mdRippleBackgroundColor]="'rgba(30, 136, 229, 0.2)'">
+        [mdRippleColor]="'rgba(30, 136, 229, 0.2)'">
       Click me
     </button>
     <md-divider class="push-top push-bottom"></md-divider>
     <td-highlight lang="html">
       <![CDATA[
         <button md-raised-button
             md-ripple
-            [mdRippleBackgroundColor]="'rgba(30, 136, 229, 0.2)'">
+            [mdRippleColor]="'rgba(30, 136, 229, 0.2)'">
           Click me
         </button>
         ]]>
@@ -1326,7 +1326,7 @@ <h3 md-line>{ { dog.name } }</h3>
   <md-card-title>Slider</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <md-slider min="1" max="5" thumbLabel tickInterval="1"></md-slider>
+    <md-slider color="accent" min="1" max="5" thumbLabel tickInterval="1"></md-slider>
     <md-slider step="5" thumbLabel tickInterval="5"></md-slider>
     <md-slider thumbLabel tick-interval="auto"></md-slider>
     <md-divider class="push-top push-bottom"></md-divider>
@@ -1465,6 +1465,59 @@ <h3 md-dialog-title>Simple Dialog</h3>
       </td-highlight>
   </md-card-content>
 </md-card>
+<md-card>
+  <md-card-title>Autocomplete</md-card-title>
+  <md-divider></md-divider>
+  <md-card-content>
+    <div layout="row">
+      <md-input-container flex="50">
+        <input mdInput placeholder="State" [mdAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel"
+          (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
+      </md-input-container>
+    </div>
+
+    <div class="push-top">
+      <button md-button (click)="modelDir.reset()">RESET</button>
+      <button md-button (click)="currentState='California'">SET VALUE</button>
+      <button md-button (click)="tdDisabled=!tdDisabled">
+        TOGGLE DISABLED
+      </button>
+    </div>
+
+    <md-autocomplete #tdAuto="mdAutocomplete">
+      <md-option *ngFor="let state of tdStates" [value]="state.name">
+        <span>{{ state.name }}</span>
+        <span class="demo-secondary-text"> ({{state.code}}) </span>
+      </md-option>
+    </md-autocomplete>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <td-highlight lang="html">
+      <![CDATA[
+        <div layout="row">
+          <md-input-container flex="50">
+            <input mdInput placeholder="State" [mdAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel"
+              (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
+          </md-input-container>
+        </div>
+
+        <div class="push-top">
+          <button md-button (click)="modelDir.reset()">RESET</button>
+          <button md-button (click)="currentState='California'">SET VALUE</button>
+          <button md-button (click)="tdDisabled=!tdDisabled">
+            TOGGLE DISABLED
+          </button>
+        </div>
+
+        <md-autocomplete #tdAuto="mdAutocomplete">
+          <md-option *ngFor="let state of tdStates" [value]="state.name">
+            <span>{ { state.name } }</span>
+            <span class="demo-secondary-text"> ({ {state.code} }) </span>
+          </md-option>
+        </md-autocomplete>
+        ]]>
+      </td-highlight>
+  </md-card-content>
+</md-card>
 <md-card>
   <md-card-title>Chips</md-card-title>
   <md-divider></md-divider>
@@ -1480,7 +1533,7 @@ <h3 class="md-title">Chips (with colors)</h3>
     <md-divider class="push-top push-bottom"></md-divider>
     <h3 class="md-title">Chip Stacked (with colors)</h3>
     <div layout-gt-xs="row">
-      <md-chip-list flex-gt-xs="50" class="md-chip-list-stacked">
+      <md-chip-list flex-gt-xs="50" class="mat-chip-list-stacked">
         <md-chip *ngFor="let chip of chips"
             [selected]="chip.selected"
             color="{{chip.color}}">