Merge branch 'release/v1.0.0-beta.8-1'

Teradata · Oct 6, 2017 · 3780494 · 3780494
2 parents 086b70a + 6fc6d36
commit 3780494
Show file tree

Hide file tree

Showing 48 changed files with 255 additions and 251 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,26 @@
+<a name="1.0.0-beta.8-1"></a>
+# [1.0.0-beta.8-1](https://github.com/Teradata/covalent/tree/v1.0.0-beta.8-1) (2017-10-06)
+
+Small patch release to support `@angular/material@1.0.0-beta.12`
+
+#### Material Breaking Changes
+
+The most important breaking change with this latest material release is that `mat-select` will need to be inside a `mat-form-field` if you want the placeholder and underline.
+
+This does give an advantage that now `matInput` and `mat-select` will follow the same API's around hints, errors, prefix, suffix and placeholders.
+
+Read more in the @angular/material` [changelog](https://github.com/angular/material2/blob/master/CHANGELOG.md#200-beta12-marble-mustache-2017-10-05)
+
+#### Highlights
+
+- `@angular/material@1.0.0-beta.12` support
+
+## Features
+* **material:** upgrade to material@beta.12 [f728be364e05cb032102c8f79a611bc1d52d8ec6](https://github.com/Teradata/covalent/commit/f728be364e05cb032102c8f79a611bc1d52d8ec6)), closes [#913](https://github.com/Teradata/covalent/issues/913)
+
+
 <a name="1.0.0-beta.8"></a>
-# [1.0.0-beta.8 Free Fallin](https://github.com/Teradata/covalent/tree/v1.0.0-beta.8) (2017-08-05)
+# [1.0.0-beta.8 Free Fallin](https://github.com/Teradata/covalent/tree/v1.0.0-beta.8) (2017-10-05)
 
 The main focus of this release is support for `@angular/material@1.0.0-beta.11` and rename all `md` references from our selectors and inputs to `mat` for future support since the `md` prefixes are gonna be removed on `@angular/material`'s following release.
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "covalent",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.8-1",
   "private": true,
   "description": "Teradata UI Platform built on Angular Material",
   "keywords": [
@@ -61,13 +61,13 @@
   ],
   "dependencies": {
     "@angular/animations": "^4.4.3",
-    "@angular/cdk": "^2.0.0-beta.11",
+    "@angular/cdk": "^2.0.0-beta.12",
     "@angular/common": "^4.4.3",
     "@angular/compiler": "^4.4.3",
     "@angular/core": "^4.4.3",
     "@angular/forms": "^4.4.3",
     "@angular/http": "^4.4.3",
-    "@angular/material": "^2.0.0-beta.11",
+    "@angular/material": "^2.0.0-beta.12",
     "@angular/platform-browser": "^4.4.3",
     "@angular/platform-browser-dynamic": "^4.4.3",
     "@angular/platform-server": "^4.4.3",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -13,7 +13,7 @@ import { TemplatesComponent } from './components/templates/templates.component';
 import { appRoutes, appRoutingProviders } from './app.routes';
 
 import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatMenuModule, MatTabsModule,
-         MatToolbarModule, MatGridListModule, MatTooltipModule, MATERIAL_COMPATIBILITY_MODE } from '@angular/material';
+         MatToolbarModule, MatGridListModule, MatTooltipModule } from '@angular/material';
 
 import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentNotificationsModule, CovalentMenuModule,
          CovalentMediaModule } from '../platform/core';
@@ -79,7 +79,6 @@ import { getSelectedLanguage, createTranslateLoader } from './utilities/translat
       provide: LOCALE_ID, useFactory: getSelectedLanguage, deps: [TranslateService],
     },
     SelectivePreloadingStrategyService,
-    {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
   ], // additional providers needed for this module
   entryComponents: [ ],
   bootstrap: [ DocsAppComponent ],

diff --git a/src/app/components/components/code-editor/code-editor.component.html b/src/app/components/components/code-editor/code-editor.component.html
@@ -28,20 +28,24 @@
   <mat-card-actions>
     <div layout="row" layout-align="start center" class="pad-sm">
       <span flex="none" hide-xs class="push-right md-body-1">Editor Language</span>
-      <mat-select floatPlaceholder="never" [(ngModel)]="editorLanguage" (change)="changeLanguage()" placeholder="Editor Language">
-        <mat-option value="sql">SQL</mat-option>
-        <mat-option value="javascript">JavaScript</mat-option>
-        <mat-option value="html">HTML</mat-option>
-      </mat-select>
+      <mat-form-field floatPlaceholder="never">
+        <mat-select [(ngModel)]="editorLanguage" (change)="changeLanguage()" placeholder="Editor Language">
+          <mat-option value="sql">SQL</mat-option>
+          <mat-option value="javascript">JavaScript</mat-option>
+          <mat-option value="html">HTML</mat-option>
+        </mat-select>
+      </mat-form-field>
     </div>
     <mat-divider></mat-divider>
     <div layout="row" layout-align="start center" class="pad-sm">
       <span flex="none" hide-xs class="push-right md-body-1">Editor Theme</span>
-      <mat-select floatPlaceholder="never" [(ngModel)]="editorTheme" (change)="changeTheme()" placeholder="Editor Theme">
-        <mat-option value="vs">Light</mat-option>
-        <mat-option value="vs-dark">Dark</mat-option>
-        <mat-option value="hc-black">High Contrast</mat-option>
-      </mat-select>
+      <mat-form-field floatPlaceholder="never">
+        <mat-select [(ngModel)]="editorTheme" (change)="changeTheme()" placeholder="Editor Theme">
+          <mat-option value="vs">Light</mat-option>
+          <mat-option value="vs-dark">Dark</mat-option>
+          <mat-option value="hc-black">High Contrast</mat-option>
+        </mat-select>
+      </mat-form-field>
     </div>
   </mat-card-actions>
 </mat-card>

diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.html b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
@@ -21,7 +21,7 @@
           </div>
         </mat-card-title>
         <mat-divider></mat-divider>
-        <div [tdToggle]="!showDynamicCode">
+        <div [@tdCollapse]="!showDynamicCode">
           <td-highlight language="json" [content]="dynamicElements | json"></td-highlight>
         </div>
         <div class="pad">
@@ -55,11 +55,13 @@
       <mat-divider></mat-divider>
       <form #addForm="ngForm">
         <div layout="row" layout-align="start center" class="pad-sm">
-          <mat-select class="pad-right" placeholder="Select element type" floatPlaceholder="never" [(ngModel)]="type" name="type" required>
-            <mat-option *ngFor="let option of elementOptions" [value]="option">
-              {{ option }}
-            </mat-option>
-          </mat-select>
+          <mat-form-field class="pad-right" floatPlaceholder="never">
+            <mat-select placeholder="Select element type" [(ngModel)]="type" name="type" required>
+              <mat-option *ngFor="let option of elementOptions" [value]="option">
+                {{ option }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
           <button matTooltip="Add this element" mat-mini-fab color="accent" [disabled]="!addForm.valid" (click)="addElement()">
             <mat-icon>add</mat-icon>
           </button>

diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.ts b/src/app/components/components/dynamic-forms/dynamic-forms.component.ts
@@ -1,5 +1,6 @@
 import { Component, HostBinding } from '@angular/core';
 import { AbstractControl, Validators } from '@angular/forms';
+import { TdCollapseAnimation } from '@covalent/core';
 import { slideInDownAnimation } from '../../../app.animations';
 
 import {
@@ -14,7 +15,10 @@ import {
   selector: 'dynamic-forms-demo',
   styleUrls: ['./dynamic-forms.component.scss'],
   templateUrl: './dynamic-forms.component.html',
-  animations: [slideInDownAnimation],
+  animations: [
+    slideInDownAnimation,
+    TdCollapseAnimation(),
+  ],
 })
 export class DynamicFormsDemoComponent {
 

diff --git a/src/app/components/components/ngx-translate/ngx-translate.component.html b/src/app/components/components/ngx-translate/ngx-translate.component.html
@@ -107,14 +107,16 @@ <h3 translate>DEMO_BASIC.DIRECTIVE_MESSAGE</h3>
     <mat-tab-group mat-stretch-tabs>
       <mat-tab [label]="'DEMO_TAB' | translate">
         <div layout="row" layout-align="start center" layout-padding>
-          <mat-select [placeholder]="'DEMO_ONE.SELECT.PLACEHOLDER' | translate"
-                      [matTooltip]="'DEMO_ONE.SELECT.TOOLTIP' | translate"
-                      [(ngModel)]="valueCountForPlural" flex="40">
-            <mat-option [value]="0">0</mat-option>
-            <mat-option [value]="1">1</mat-option>
-            <mat-option [value]="4">4</mat-option>
-            <mat-option [value]="10">10</mat-option>
-          </mat-select>
+          <mat-form-field flex="40">
+            <mat-select [placeholder]="'DEMO_ONE.SELECT.PLACEHOLDER' | translate"
+                        [matTooltip]="'DEMO_ONE.SELECT.TOOLTIP' | translate"
+                        [(ngModel)]="valueCountForPlural" flex>
+              <mat-option [value]="0">0</mat-option>
+              <mat-option [value]="1">1</mat-option>
+              <mat-option [value]="4">4</mat-option>
+              <mat-option [value]="10">10</mat-option>
+            </mat-select>
+          </mat-form-field>
           <span flex="5"></span>
           <div [ngPlural]="valueCountForPlural">
             <ng-template ngPluralCase="=undefined">{{ 'DEMO_ONE.COUNT.NONE' | translate }}</ng-template>
@@ -128,14 +130,16 @@ <h3 translate>DEMO_BASIC.DIRECTIVE_MESSAGE</h3>
         <td-highlight lang="html">
           <![CDATA[
             <div layout="row" layout-align="start center" layout-padding>
-              <mat-select [placeholder]="'DEMO_ONE.SELECT.PLACEHOLDER' | translate"
-                          [matTooltip]="'DEMO_ONE.SELECT.TOOLTIP' | translate"
-                          [(ngModel)]="valueCountForPlural" flex="40">
-                <mat-option [value]="0">0</mat-option>
-                <mat-option [value]="1">1</mat-option>
-                <mat-option [value]="4">4</mat-option>
-                <mat-option [value]="10">10</mat-option>
-              </mat-select>
+              <mat-form-field flex="40">
+                <mat-select [placeholder]="'DEMO_ONE.SELECT.PLACEHOLDER' | translate"
+                            [matTooltip]="'DEMO_ONE.SELECT.TOOLTIP' | translate"
+                            [(ngModel)]="valueCountForPlural" flex>
+                  <mat-option [value]="0">0</mat-option>
+                  <mat-option [value]="1">1</mat-option>
+                  <mat-option [value]="4">4</mat-option>
+                  <mat-option [value]="10">10</mat-option>
+                </mat-select>
+              </mat-form-field>
               <span flex="5"></span>
               <div [ngPlural]="valueCountForPlural">
                 <ng-template ngPluralCase="=undefined">{ { 'DEMO_ONE.COUNT.NONE' | translate } }</ng-template>

diff --git a/src/app/components/components/virtual-scroll/virtual-scroll.component.html b/src/app/components/components/virtual-scroll/virtual-scroll.component.html
@@ -13,7 +13,7 @@
   </mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
-    <div [tdToggle]="!toggleDemoCode">
+    <div [@tdCollapse]="!toggleDemoCode">
       <mat-tab-group mat-stretch-tabs dynamicHeight>
         <mat-tab>
           <ng-template matTabLabel>HTML</ng-template>

diff --git a/src/app/components/components/virtual-scroll/virtual-scroll.component.ts b/src/app/components/components/virtual-scroll/virtual-scroll.component.ts
@@ -1,12 +1,16 @@
 import { Component, OnInit, HostBinding, ChangeDetectionStrategy } from '@angular/core';
 
+import { TdCollapseAnimation } from '@covalent/core';
 import { slideInDownAnimation } from '../../../app.animations';
 
 @Component({
   selector: 'virtual-scroll-demo',
   styleUrls: ['./virtual-scroll.component.scss'],
   templateUrl: './virtual-scroll.component.html',
-  animations: [slideInDownAnimation],
+  animations: [
+    slideInDownAnimation,
+    TdCollapseAnimation(),
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VirtualScrollDemoComponent implements OnInit {

diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html
@@ -71,7 +71,7 @@ <h3>Solution</h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example1">
+          <div [@tdCollapse]="example1">
             <!-- View Source -->
             <div>
               <mat-tab-group mat-stretch-tabs dynamicHeight>
@@ -146,7 +146,7 @@ <h3>Solution</h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example2">
+          <div [@tdCollapse]="example2">
             <!-- View Source -->
             <div>
               <mat-tab-group mat-stretch-tabs dynamicHeight>
@@ -203,7 +203,7 @@ <h3>Solution</h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example3">
+          <div [@tdCollapse]="example3">
             <!-- View Source -->
             <div>
               <td-highlight lang="html">

diff --git a/src/app/components/design-patterns/alerts/alerts.component.ts b/src/app/components/design-patterns/alerts/alerts.component.ts
@@ -3,14 +3,18 @@ import { Component, HostBinding } from '@angular/core';
 import { slideInDownAnimation } from '../../../app.animations';
 
 import { TdDialogService } from '../../../../platform/core';
+import { TdCollapseAnimation } from '@covalent/core';
 
 import { MatSnackBar } from '@angular/material';
 
 @Component({
   selector: 'design-patterns-alerts',
   styleUrls: ['./alerts.component.scss'],
   templateUrl: './alerts.component.html',
-  animations: [slideInDownAnimation],
+  animations: [
+    slideInDownAnimation,
+    TdCollapseAnimation(),
+  ],
 })
 export class AlertsComponent {
 

diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html
@@ -75,7 +75,7 @@ <h3>Solution</h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example1">
+          <div [@tdCollapse]="example1">
             <div>
                   <td-highlight lang="html">
                       <![CDATA[
@@ -131,7 +131,7 @@ <h3>Solution</h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example2">
+          <div [@tdCollapse]="example2">
             <div>
               <td-highlight lang="html">
                   <![CDATA[
@@ -232,7 +232,7 @@ <h3>Solution</h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example3">
+          <div [@tdCollapse]="example3">
             <div>
               <td-highlight lang="html">
                   <![CDATA[
@@ -346,7 +346,7 @@ <h4 matLine>Wed, July 4, 2016 09:11 AM</h4>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example4">
+          <div [@tdCollapse]="example4">
             <div>
               <td-highlight lang="html">
                   <![CDATA[
@@ -444,7 +444,7 @@ <h3 matLine> Item {{i}} </h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example5">
+          <div [@tdCollapse]="example5">
             <div>
               <td-highlight lang="html">
                 <![CDATA[

diff --git a/src/app/components/design-patterns/cards/cards.component.ts b/src/app/components/design-patterns/cards/cards.component.ts
@@ -1,12 +1,16 @@
 import { Component, HostBinding } from '@angular/core';
 
+import { TdCollapseAnimation } from '@covalent/core';
 import { slideInDownAnimation } from '../../../app.animations';
 
 @Component({
   selector: 'design-patterns-cards',
   styleUrls: ['./cards.component.scss'],
   templateUrl: './cards.component.html',
-  animations: [slideInDownAnimation],
+  animations: [
+    slideInDownAnimation,
+    TdCollapseAnimation(),
+  ],
 })
 export class CardsComponent {
 

diff --git a/src/app/components/design-patterns/management-list/management-list.component.html b/src/app/components/design-patterns/management-list/management-list.component.html
@@ -90,7 +90,7 @@ <h3>Solution</h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example1">
+          <div [@tdCollapse]="example1">
             <div>
               <mat-tab-group mat-stretch-tabs dynamicHeight>
                 <mat-tab>

diff --git a/src/app/components/design-patterns/management-list/management-list.component.scss b/src/app/components/design-patterns/management-list/management-list.component.scss
@@ -1,7 +0,0 @@
-mat-select { 
-  & /deep/ {
-    .mat-select-underline {
-      display: none;
-    }
-  }
-}

diff --git a/src/app/components/design-patterns/management-list/management-list.component.ts b/src/app/components/design-patterns/management-list/management-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
 
+import { TdCollapseAnimation } from '@covalent/core';
 import { slideInDownAnimation } from '../../../app.animations';
 
 export enum OrderBy {
@@ -15,7 +16,10 @@ export interface IHeaders {
   selector: 'design-patterns-management-list',
   styleUrls: ['./management-list.component.scss'],
   templateUrl: './management-list.component.html',
-  animations: [slideInDownAnimation],
+  animations: [
+    slideInDownAnimation,
+    TdCollapseAnimation(),
+  ],
 })
 export class ManagementListComponent implements OnInit {
 

diff --git a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html
@@ -55,7 +55,7 @@ <h3>Solution</h3>
               </button>
             </div>
           </mat-card-subtitle>
-          <div [tdToggle]="example1">
+          <div [@tdCollapse]="example1">
             <div>
               <mat-tab-group mat-stretch-tabs dynamicHeight>
                   <mat-tab>

diff --git a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss
@@ -3,9 +3,11 @@
     position: static;
     width: 100%;
     height: 500px;
-    mat-sidenav {
+    .td-layout-sidenav {
       transform: translate3d(0,0,0) !important;
       visibility: visible !important;
+      height: 100%;
+      position: relative;
     }
   }
 }