chore(): upgrade to material/[email protected] (#847)

* chore(): upgrade to material/[email protected] * chore(): update rollup script with cdk dependencies * fix(): fix breaking changes from cdk imports and interface modifications in material * feat(): rename mat-sidenav- classes to mat-drawer- and replace align input with position input * fix(steps): fix demo to start in vertical mode * chore(): rename md-line with mdLine * chore(): rename md-tab-label to mdTabLabel * chore(): rename md-card-avatar to mdCardAvatar * chore(): rename md-input-container to md-form-field and its classes * chore(): rename md-ripple to mdRipple * chore(): rename md-list-icon and md-list-avatar to mdListIcon and mdListAvatar * chore(): bump to [email protected] since its a requirement for angular/material now * chore(): update platform package.json's with bumps * fix(chips): md-basic-chip behaves diff now so click on chip was not working * fix(data-table): fix color of pseudo checkboxes in data-table * chore(paging): set fixed 30px in input since it has 200px by default in the paging demo * fix(paging): fix padding on md-selects used in td-paging-bar * chore(dynamic-forms): use flex row to stetch inputs/textareas * chore(dynamic-forms): update slider label using new classes * fix(layout-docs): workaround for now since MdSidenav has issues when opening sometimes at the beggining possible issue would be angular/components#6743 * feat(chips): make demo be OnPush change detection * docs(paging): updated 'md-input-container' to 'md-form-field'
Teradata · Sep 1, 2017 · d53ef53 · d53ef53
1 parent 28fde0a
commit d53ef53
Show file tree

Hide file tree

Showing 130 changed files with 845 additions and 779 deletions.
diff --git a/package.json b/package.json
@@ -60,18 +60,18 @@
     "ie 11"
   ],
   "dependencies": {
-    "@angular/animations": "^4.2.0",
-    "@angular/cdk": "2.0.0-beta.8",
-    "@angular/common": "^4.2.0",
-    "@angular/compiler": "^4.2.0",
-    "@angular/core": "^4.2.0",
-    "@angular/forms": "^4.2.0",
-    "@angular/http": "^4.2.0",
-    "@angular/material": "2.0.0-beta.8",
-    "@angular/platform-browser": "^4.2.0",
-    "@angular/platform-browser-dynamic": "^4.2.0",
-    "@angular/platform-server": "^4.2.0",
-    "@angular/router": "^4.2.0",
+    "@angular/animations": "^4.3.0",
+    "@angular/cdk": "^2.0.0-beta.10",
+    "@angular/common": "^4.3.0",
+    "@angular/compiler": "^4.3.0",
+    "@angular/core": "^4.3.0",
+    "@angular/forms": "^4.3.0",
+    "@angular/http": "^4.3.0",
+    "@angular/material": "^2.0.0-beta.10",
+    "@angular/platform-browser": "^4.3.0",
+    "@angular/platform-browser-dynamic": "^4.3.0",
+    "@angular/platform-server": "^4.3.0",
+    "@angular/router": "^4.3.0",
     "@covalent/code-editor": "^1.0.0-beta.1",
     "@covalent/text-editor": "^1.0.0-alpha.4",
     "@ngx-translate/core": "7.0.0",
@@ -90,7 +90,7 @@
   },
   "devDependencies": {
     "@angular/cli": "1.2.7",
-    "@angular/compiler-cli": "^4.2.0",
+    "@angular/compiler-cli": "^4.3.0",
     "@types/fs-extra": "^4.0.0",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "2.5.38",

diff --git a/scripts/rollup.js b/scripts/rollup.js
@@ -35,6 +35,13 @@ gulp.task('rollup-code', '', function() {
     '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
     '@angular/material': 'ng.material',
     '@angular/cdk': 'ng.cdk',
+    '@angular/cdk/overlay': 'ng.cdk.overlay',
+    '@angular/cdk/portal': 'ng.cdk.portal',
+    '@angular/cdk/keycodes': 'ng.cdk.keycodes',
+    '@angular/cdk/bidi': 'ng.cdk.bidi',
+    '@angular/cdk/coercion': 'ng.cdk.coercion',
+    '@angular/cdk/rxjs': 'ng.cdk.rxjs',
+    '@angular/cdk/scrolling': 'ng.cdk.scrolling',
 
     // Rxjs dependencies
     'rxjs/Subject': 'Rx',

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -9,15 +9,15 @@
           [routerLink]="['/']"
           [routerLinkActive]="['active']"
           [routerLinkActiveOptions]="{exact:true}">
-          <md-icon md-list-icon>home</md-icon>
+          <md-icon mdListIcon>home</md-icon>
           Home
       </a>
       <a *ngFor="let item of routes" 
           md-list-item
           (click)="!media.query('gt-md') && layout.close()"
           [routerLink]="[item.route]"
           [routerLinkActive]="['active']">
-          <md-icon md-list-icon>{{item.icon}}</md-icon>
+          <md-icon mdListIcon>{{item.icon}}</md-icon>
           {{item.title}}
       </a>
     </md-nav-list>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { Dir } from '@angular/cdk';
+import { Dir } from '@angular/cdk/bidi';
 import { MdIconRegistry } from '@angular/material';
 import { TdMediaService } from '@covalent/core';
 import { TranslateService } from '@ngx-translate/core';
@@ -88,8 +88,11 @@ export class DocsAppComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.media.broadcast();
-    this._changeDetectorRef.detectChanges();
+    // broadcast to all listener observables when loading the page
+    setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining
+      this.media.broadcast();
+      this._changeDetectorRef.detectChanges();
+    });
   }
 
 }
diff --git a/src/app/components/components/animations/animations.component.html b/src/app/components/components/animations/animations.component.html
@@ -111,22 +111,22 @@ <h3>Demo 2:</h3>
       <h2>API:</h2>
       <md-list>
         <md-list-item>
-          <h3 md-line>anchor?: string</h3>
-          <p md-line> The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdRotate'.</p>
+          <h3 mdLine>anchor?: string</h3>
+          <p mdLine> The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdRotate'.</p>
         </md-list-item>
         <md-divider></md-divider>
         <md-list-item>
-          <h3 md-line>duration?: number</h3>
-          <p md-line> Duration the animation will run in miliseconds. Defaults to 250 ms. </p>
+          <h3 mdLine>duration?: number</h3>
+          <p mdLine> Duration the animation will run in miliseconds. Defaults to 250 ms. </p>
         </md-list-item>
         <md-divider></md-divider>
         <md-list-item>
-          <h3 md-line>degrees?: number</h3>
-          <p md-line> Degrees of rotation the dom object will animation. A negative value will cause the animation to initially rotate counter-clockwise. Defaults to 180 degrees. </p>
+          <h3 mdLine>degrees?: number</h3>
+          <p mdLine> Degrees of rotation the dom object will animation. A negative value will cause the animation to initially rotate counter-clockwise. Defaults to 180 degrees. </p>
         </md-list-item>
         <md-list-item>
-          <h3 md-line>ease?: string</h3>
-          <p md-line>String representing timing of animation 'duration delay easing' EX: '2s 300ms ease-in', duration=2000, delay=300, easing=ease-in. Defaults to ease-out.
+          <h3 mdLine>ease?: string</h3>
+          <p mdLine>String representing timing of animation 'duration delay easing' EX: '2s 300ms ease-in', duration=2000, delay=300, easing=ease-in. Defaults to ease-out.
           </p>
         </md-list-item>
         <md-divider></md-divider>

diff --git a/src/app/components/components/charts/charts.component.html b/src/app/components/components/charts/charts.component.html
@@ -134,8 +134,8 @@ <h3>Properties:</h3>
     <md-list>
       <ng-template let-attr let-last="attr" ngFor [ngForOf]="chartsAttr">
         <a md-list-item layout-align="row">
-          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
-          <p md-line> {{attr.description}} </p>
+          <h3 mdLine> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p mdLine> {{attr.description}} </p>
         </a>
         <md-divider *ngIf="!last"></md-divider>
       </ng-template>
@@ -208,8 +208,8 @@ <h3>Properties:</h3>
       <md-list>
         <ng-template let-attr let-last="attr" ngFor [ngForOf]="axisAttrs">
           <a md-list-item layout-align="row">
-            <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
-            <p md-line> {{attr.description}} </p>
+            <h3 mdLine> {{attr.name}}: <span>{{attr.type}}</span></h3>
+            <p mdLine> {{attr.description}} </p>
           </a>
           <md-divider *ngIf="!last"></md-divider>
         </ng-template>
@@ -238,8 +238,8 @@ <h3>Properties:</h3>
     <md-list>
       <ng-template let-attr let-last="attr" ngFor [ngForOf]="barChartAttrs">
         <a md-list-item layout-align="row">
-          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
-          <p md-line> {{attr.description}} </p>
+          <h3 mdLine> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p mdLine> {{attr.description}} </p>
         </a>
         <md-divider *ngIf="!last"></md-divider>
       </ng-template>
@@ -294,8 +294,8 @@ <h3>Properties:</h3>
     <md-list>
       <ng-template let-attr let-last="attr" ngFor [ngForOf]="lineChartAttrs">
         <a md-list-item layout-align="row">
-          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
-          <p md-line> {{attr.description}} </p>
+          <h3 mdLine> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p mdLine> {{attr.description}} </p>
         </a>
         <md-divider *ngIf="!last"></md-divider>
       </ng-template>
@@ -382,8 +382,8 @@ <h3>Properties:</h3>
     <md-list>
       <ng-template let-attr let-last="attr" ngFor [ngForOf]="areaChartAttrs">
         <a md-list-item layout-align="row">
-          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
-          <p md-line> {{attr.description}} </p>
+          <h3 mdLine> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p mdLine> {{attr.description}} </p>
         </a>
         <md-divider *ngIf="!last"></md-divider>
       </ng-template>

diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
@@ -4,7 +4,7 @@
   <md-divider></md-divider>
   <md-tab-group md-stretch-tabs dynamicHeight>
     <md-tab>
-      <ng-template md-tab-label>Demo</ng-template>
+      <ng-template mdTabLabel>Demo</ng-template>
       <div class="push">
         <div class="md-body-1">Type and select a preset option or press enter:</div>
         <td-chips [chipAddition]="chipAddition"
@@ -19,7 +19,7 @@
       </div>
     </md-tab>
     <md-tab>
-      <ng-template md-tab-label>Code</ng-template>
+      <ng-template mdTabLabel>Code</ng-template>
       <md-card-content>
         <p>HTML:</p>
         <td-highlight lang="html">
@@ -109,7 +109,7 @@
   <md-divider></md-divider>
   <md-tab-group md-stretch-tabs dynamicHeight>
     <md-tab>
-      <ng-template md-tab-label>Demo</ng-template>
+      <ng-template mdTabLabel>Demo</ng-template>
       <div class="push">
         <div class="md-body-1">Type and select a preset option or press enter:</div>
         <td-chips color="accent"
@@ -130,7 +130,7 @@
       </div>
     </md-tab>
     <md-tab>
-      <ng-template md-tab-label>Code</ng-template>
+      <ng-template mdTabLabel>Code</ng-template>
       <md-card-content>
         <p>HTML:</p>
         <td-highlight lang="html">
@@ -196,7 +196,7 @@
   <md-divider></md-divider>
   <md-tab-group md-stretch-tabs dynamicHeight>
     <md-tab>
-      <ng-template md-tab-label>Demo</ng-template>
+      <ng-template mdTabLabel>Demo</ng-template>
       <div class="push">
         <div class="md-body-1">Type and see how it will load items async:</div>
         <td-chips [items]="filteredAsync"
@@ -213,7 +213,7 @@
       </div>
     </md-tab>
     <md-tab>
-      <ng-template md-tab-label>Code</ng-template>
+      <ng-template mdTabLabel>Code</ng-template>
       <md-card-content>
         <p>HTML:</p>
         <td-highlight lang="html">
@@ -283,7 +283,7 @@
   <md-divider></md-divider>
   <md-tab-group md-stretch-tabs dynamicHeight>
     <md-tab>
-      <ng-template md-tab-label>Demo</ng-template>
+      <ng-template mdTabLabel>Demo</ng-template>
       <div class="push">
         <div class="md-body-1">Type and select option or enter custom text and press enter:</div>
         <td-chips [items]="filteredStackedStrings"
@@ -298,7 +298,7 @@
       </div>
     </md-tab>
     <md-tab>
-      <ng-template md-tab-label>Code</ng-template>
+      <ng-template mdTabLabel>Code</ng-template>
       <md-card-content>
         <p>HTML:</p>
         <td-highlight lang="html">
@@ -357,14 +357,14 @@
   <md-divider></md-divider>
   <md-tab-group md-stretch-tabs dynamicHeight>
     <md-tab>
-      <ng-template md-tab-label>Demo</ng-template>
+      <ng-template mdTabLabel>Demo</ng-template>
       <div class="push">
         <div class="md-body-1">Type any test and press enter:</div>
         <td-chips color="warn" placeholder="Enter any string"></td-chips>
       </div>
     </md-tab>
     <md-tab>
-      <ng-template md-tab-label>Code</ng-template>
+      <ng-template mdTabLabel>Code</ng-template>
       <md-card-content>
         <p>HTML:</p>
         <td-highlight lang="html">
@@ -390,7 +390,7 @@
   <md-divider></md-divider>
   <md-tab-group md-stretch-tabs dynamicHeight>
     <md-tab>
-      <ng-template md-tab-label>Demo</ng-template>
+      <ng-template mdTabLabel>Demo</ng-template>
       <div class="push">
         <div class="md-body-1">Type and select a preset option or press enter:</div>
         <td-chips [items]="filteredStrings"
@@ -412,7 +412,7 @@
       </md-card-content>
     </md-tab>
     <md-tab>
-      <ng-template md-tab-label>Code</ng-template>
+      <ng-template mdTabLabel>Code</ng-template>
       <md-card-content>
         <p>HTML:</p>
         <td-highlight lang="html">

diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
+import { Component, HostBinding, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
 import { slideInDownAnimation } from '../../../app.animations';
 
@@ -8,6 +8,7 @@ import { MdChip} from '@angular/material';
   selector: 'chips-demo',
   styleUrls: ['./chips.component.scss'],
   templateUrl: './chips.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [slideInDownAnimation],
 })
 export class ChipsDemoComponent implements OnInit {
@@ -64,25 +65,31 @@ export class ChipsDemoComponent implements OnInit {
     return new Date().toISOString().split('T')[1].split('.')[0];
   }
 
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
   ngOnInit(): void {
     this.filterStrings('');
     this.filterObjects('');
   }
 
   handleChipBlur(value: any): void {
     this.events.push(this.logTime + ': Blur Event received from ' + value);
+    this._changeDetectorRef.markForCheck();
   }
 
   handleChipFocus(value: any): void {
     this.events.push(this.logTime + ': Focus Event received from ' + value);
+    this._changeDetectorRef.markForCheck();
   }
 
   handleAdd(value: any): void {
     this.events.push(this.logTime + ': Add Event received from ' + value);
+    this._changeDetectorRef.markForCheck();
   }
 
   handleRemove(value: any): void {
     this.events.push(this.logTime + ': Remove Event received from ' + value);
+    this._changeDetectorRef.markForCheck();
   }
 
   filterStrings(value: string): void {
@@ -121,6 +128,7 @@ export class ChipsDemoComponent implements OnInit {
           return this.asyncModel ? this.asyncModel.indexOf(filteredItem) < 0 : true;
         });
         this.filteringAsync = false;
+        this._changeDetectorRef.markForCheck();
       }, 2000);
     }
   }

diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
@@ -16,9 +16,9 @@ <h3 md-subheader>Core Components</h3>
           [routerLinkActive]="['active']" 
           [routerLinkActiveOptions]="{exact:true}"
           [tdLayoutNavListClose]="!media.query('gt-sm')">
-        <md-icon md-list-avatar>{{item.icon}}</md-icon>
-        <h3 md-line> {{item.title}} </h3>
-        <p md-line> {{item.description}} </p>
+        <md-icon mdListAvatar>{{item.icon}}</md-icon>
+        <h3 mdLine> {{item.title}} </h3>
+        <p mdLine> {{item.description}} </p>
       </a>
       <md-divider *ngIf="!last" md-inset></md-divider>
     </ng-template>
@@ -29,19 +29,19 @@ <h3 md-subheader>Optional Components</h3>
           [routerLinkActive]="['active']" 
           [routerLinkActiveOptions]="{exact:true}"
           [tdLayoutNavListClose]="!media.query('gt-sm')">
-        <md-icon md-list-avatar>{{item.icon}}</md-icon>
-        <h3 md-line> {{item.title}} </h3>
-        <p md-line> {{item.description}} </p>
+        <md-icon mdListAvatar>{{item.icon}}</md-icon>
+        <h3 mdLine> {{item.title}} </h3>
+        <p mdLine> {{item.description}} </p>
       </a>
       <md-divider *ngIf="!last" md-inset></md-divider>
     </ng-template>
     <h3 md-subheader>External Components</h3>
     <a md-list-item 
         href="https://material.angular.io/components"
         target="_blank">
-      <md-icon md-list-avatar>layers</md-icon>
-      <h3 md-line> Angular Material </h3>
-      <p md-line> Material Design components </p>
+      <md-icon mdListAvatar>layers</md-icon>
+      <h3 mdLine> Angular Material </h3>
+      <p mdLine> Material Design components </p>
       <md-icon mdTooltip="External docs" class="text-md tc-grey-600">launch</md-icon>
     </a>
     <md-divider md-inset></md-divider>
@@ -51,9 +51,9 @@ <h3 md-line> Angular Material </h3>
           [routerLinkActive]="['active']"
           [routerLinkActiveOptions]="{exact:true}"
           [tdLayoutNavListClose]="!media.query('gt-sm')">
-        <md-icon md-list-avatar>{{item.icon}}</md-icon>
-        <h3 md-line> {{item.title}} </h3>
-        <p md-line> {{item.description}} </p>
+        <md-icon mdListAvatar>{{item.icon}}</md-icon>
+        <h3 mdLine> {{item.title}} </h3>
+        <p mdLine> {{item.description}} </p>
       </a>
       <md-divider *ngIf="!last" md-inset></md-divider>
     </ng-template>