feat(): upgrade to [email protected]. (closes #393) (#429)

* chore(): upgrade to [email protected] * feat(): replace `template` with `ng-template` * chore(): update typescript dependency * feat(): replace OpaqueToken with InjectionToken * feat(): import BrowserAnimationsModule where needed * feat(animations): import animation classes from @angular/animations * chore(flex-layout): update to rc.1 for [email protected] support * chore(): upgrade to @angular@4.0.0-rc.4 * feat(): remove Renderer infavor of Renderer2 * chore(): upgrade to rc6 * chore(): remove BrowserAnimationsModule from individual modules * feat(): change boolean state in animations * chore(): upgrade to 4.0.0 * fix(): correct dependency for flex-layout * chore(): update node engine support * feat(toggle): support tdToggle for ng4 * feat(fade): support tdFade in ng4 * fix(): unit tests for expansion and json-formatter * feat(): fix steps unit test * fix(): unit tests for loading * fix(): unit tests for dynamic-forms * chore(build): update rollup process with animations
Teradata · Mar 26, 2017 · aef44f8 · aef44f8
1 parent 5166ecb
commit aef44f8
Show file tree

Hide file tree

Showing 71 changed files with 656 additions and 683 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "finish-release": "bash scripts/finish-release"
   },
   "engines": {
-    "node": ">4.4 < 7",
+    "node": ">6.9",
     "npm": ">3"
   },
   "repository": {
@@ -54,31 +54,32 @@
     "Ilsun Park <[email protected]>"
   ],
   "dependencies": {
-    "@angular/common": "^2.4.5",
-    "@angular/compiler": "^2.4.5",
-    "@angular/core": "^2.4.5",
-    "@angular/forms": "^2.4.5",
-    "@angular/flex-layout": "2.0.0-beta.5",
-    "@angular/http": "^2.4.5",
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/flex-layout": "2.0.0-rc.1",
+    "@angular/http": "^4.0.0",
     "@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",
-    "@angular/router": "^3.4.5",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/platform-server": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "@swimlane/ngx-charts": "4.3.0",
     "@ngx-translate/core": "6.0.0",
     "@ngx-translate/http-loader": "0.0.3",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "highlight.js": "9.10.0",
-    "rxjs": "^5.1.0",
+    "rxjs": "^5.2.0",
     "showdown": "1.6.4",
-    "zone.js": "^0.7.6",
+    "zone.js": "^0.8.5",
     "d3": "^4.4.0",
     "web-animations-js": "2.2.2"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.4.5",
+    "@angular/compiler-cli": "^4.0.0",
     "@angular/cli": "1.0.0",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "2.5.38",
@@ -115,6 +116,6 @@
     "semver": "5.2.0",
     "ts-node": "~2.0.0",
     "tslint": "^4.5.1",
-    "typescript": "2.1.5"
+    "typescript": "^2.1.6"
   }
 }
diff --git a/scripts/rollup.js b/scripts/rollup.js
@@ -20,12 +20,15 @@ gulp.task('rollup-code', '', function() {
 
   const globals = {
     // Angular dependencies
+    '@angular/animations': 'ng.animations',
+    '@angular/animations/browser': 'ng.animations.browser',
     '@angular/core': 'ng.core',
     '@angular/common': 'ng.common',
     '@angular/forms': 'ng.forms',
     '@angular/http': 'ng.http',
     '@angular/router': 'ng.router',
     '@angular/platform-browser': 'ng.platformBrowser',
+    '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
     '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
     '@angular/material': 'ng.material',
     '@angular/flex-layout': 'ng.flexLayout',

diff --git a/src/app/app.animations.ts b/src/app/app.animations.ts
@@ -1,7 +1,7 @@
-import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
+import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';
 
 // Component transition animations
-export const fadeAnimation: AnimationEntryMetadata =
+export const fadeAnimation: AnimationTriggerMetadata =
   trigger('routeAnimation', [
     state('*',
       style({
@@ -20,7 +20,7 @@ export const fadeAnimation: AnimationEntryMetadata =
       })),
     ]),
   ]);
-export const slideInLeftAnimation: AnimationEntryMetadata =
+export const slideInLeftAnimation: AnimationTriggerMetadata =
   trigger('routeAnimation', [
     state('*',
       style({
@@ -42,7 +42,7 @@ export const slideInLeftAnimation: AnimationEntryMetadata =
       })),
     ]),
   ]);
-export const slideInDownAnimation: AnimationEntryMetadata =
+export const slideInDownAnimation: AnimationTriggerMetadata =
   trigger('routeAnimation', [
     state('*',
       style({

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Http, HttpModule, JsonpModule } from '@angular/http';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
 
 import { DocsAppComponent } from './app.component';
@@ -28,6 +29,7 @@ import { getSelectedLanguage, createTranslateLoader } from './utilities/translat
     HomeComponent,
   ], // directives, components, and pipes owned by this NgModule
   imports: [
+    BrowserAnimationsModule,
     CommonModule,
     FormsModule,
     BrowserModule,

diff --git a/src/app/components/components/charts/charts.component.html b/src/app/components/components/charts/charts.component.html
@@ -132,13 +132,13 @@ <h2><code><![CDATA[<td-charts>]]></code></h2>
     <h3>Properties:</h3>
     <p>This component has {{chartsAttr.length}} properties:</p>
     <md-list>
-      <template let-attr let-last="attr" ngFor [ngForOf]="chartsAttr">
+      <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>
         </a>
         <md-divider *ngIf="!last"></md-divider>
-      </template>
+      </ng-template>
     </md-list>
     <h3>Example:</h3>
     <p>HTML</p>
@@ -206,13 +206,13 @@ <h2><code><![CDATA[<td-axis-x>]]></code></h2>
      <h3>Properties:</h3>
       <p>This component has {{axisAttrs.length}} properties:</p>
       <md-list>
-        <template let-attr let-last="attr" ngFor [ngForOf]="axisAttrs">
+        <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>
           </a>
           <md-divider *ngIf="!last"></md-divider>
-        </template>
+        </ng-template>
       </md-list>
     <p>Use above propeties as attributes with <code><![CDATA[<td-axis-x>]]></code>, <code><![CDATA[<td-axis-y-left>]]></code>, or <code><![CDATA[<td-axis-y-right>]]></code> elements</p>
     <h3>Example:</h3>
@@ -236,13 +236,13 @@ <h2><code><![CDATA[<td-chart-bar>]]></code></h2>
     <h3>Properties:</h3>
     <p>This component has {{barChartAttrs.length}} properties:</p>
     <md-list>
-      <template let-attr let-last="attr" ngFor [ngForOf]="barChartAttrs">
+      <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>
         </a>
         <md-divider *ngIf="!last"></md-divider>
-      </template>
+      </ng-template>
     </md-list>
     <p>Use above propeties as attributes with <code><![CDATA[<td-chart-bar>]]></code> element</p>
     <h3>Example:</h3>
@@ -292,13 +292,13 @@ <h2><code><![CDATA[<td-chart-line>]]></code></h2>
     <h3>Properties:</h3>
     <p>This component has {{lineChartAttrs.length}} properties:</p>
     <md-list>
-      <template let-attr let-last="attr" ngFor [ngForOf]="lineChartAttrs">
+      <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>
         </a>
         <md-divider *ngIf="!last"></md-divider>
-      </template>
+      </ng-template>
     </md-list>
     <p>Use above propeties as attributes with <code><![CDATA[<td-chart-line>]]></code> element </p>
     <h3>Example:</h3>
@@ -380,13 +380,13 @@ <h2><code><![CDATA[<td-chart-area>]]></code></h2>
     <h3>Properties:</h3>
     <p>This component has {{areaChartAttrs.length}} properties:</p>
     <md-list>
-      <template let-attr let-last="attr" ngFor [ngForOf]="areaChartAttrs">
+      <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>
         </a>
         <md-divider *ngIf="!last"></md-divider>
-      </template>
+      </ng-template>
     </md-list>
     <p>Use above propeties as attributes with <code><![CDATA[<td-chart-line>]]></code> element </p>
     <h3>Example:</h3>

diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
@@ -6,11 +6,11 @@
     <h3 class="md-title">Basic Demo</h3>
     <md-tab-group md-stretch-tabs>
       <md-tab>
-        <template md-tab-label>Demo</template>
+        <ng-template md-tab-label>Demo</ng-template>
         <td-chips placeholder="Enter any string"></td-chips>
       </md-tab>
       <md-tab>
-        <template md-tab-label>Code</template>
+        <ng-template md-tab-label>Code</ng-template>
         <p>HTML:</p>
         <td-highlight lang="html">
           <![CDATA[
@@ -34,11 +34,11 @@ <h3 class="md-title">Basic Demo</h3>
     <h3 class="md-title">Autocomplete Demo</h3>
     <md-tab-group md-stretch-tabs>
       <md-tab>
-        <template md-tab-label>Demo</template>
+        <ng-template md-tab-label>Demo</ng-template>
         <td-chips [items]="items" placeholder="Enter any string"></td-chips>
       </md-tab>
       <md-tab>
-        <template md-tab-label>Code</template>
+        <ng-template md-tab-label>Code</ng-template>
         <p>HTML:</p>
         <td-highlight lang="html">
           <![CDATA[
@@ -76,11 +76,11 @@ <h3 class="md-title">Autocomplete Demo</h3>
     <h3 class="md-title">Autocomplete and requireMatch Demo</h3>
     <md-tab-group md-stretch-tabs>
       <md-tab>
-        <template md-tab-label>Demo</template>
+        <ng-template md-tab-label>Demo</ng-template>
         <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
       </md-tab>
       <md-tab>
-        <template md-tab-label>Code</template>
+        <ng-template md-tab-label>Code</ng-template>
         <p>HTML:</p>
         <td-highlight lang="html">
           <![CDATA[
@@ -136,13 +136,13 @@ <h2><code><![CDATA[<td-chips>]]></code></h2>
     <h3>Properties:</h3>
     <p>The <code><![CDATA[<td-chips>]]></code> component has {{chipsAttrs.length}} properties:</p>
     <md-list>
-      <template let-attr let-last="attr" ngFor [ngForOf]="chipsAttrs">
+      <ng-template let-attr let-last="attr" ngFor [ngForOf]="chipsAttrs">
         <a md-list-item layout-align="row">
           <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
           <p md-line> {{attr.description}} </p>
         </a>
         <md-divider *ngIf="!last"></md-divider>
-      </template>
+      </ng-template>
     </md-list>
     <h3>Example:</h3>
     <p>HTML:</p>

diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
@@ -7,7 +7,7 @@
                     [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">
   <md-nav-list td-sidenav-content>
     <h3 md-subheader>Core Components</h3>
-    <template let-item let-last="last" ngFor [ngForOf]="items">
+    <ng-template let-item let-last="last" ngFor [ngForOf]="items">
       <a md-list-item 
           [routerLink]="[item.route]" 
           [routerLinkActive]="['active']" 
@@ -18,9 +18,9 @@ <h3 md-line> {{item.title}} </h3>
         <p md-line> {{item.description}} </p>
       </a>
       <md-divider *ngIf="!last" md-inset></md-divider>
-    </template>
+    </ng-template>
     <h3 md-subheader>Optional Components</h3>
-    <template let-item let-last="last" ngFor [ngForOf]="optional">
+    <ng-template let-item let-last="last" ngFor [ngForOf]="optional">
       <a md-list-item 
           [routerLink]="[item.route]" 
           [routerLinkActive]="['active']" 
@@ -31,9 +31,9 @@ <h3 md-line> {{item.title}} </h3>
         <p md-line> {{item.description}} </p>
       </a>
       <md-divider *ngIf="!last" md-inset></md-divider>
-    </template>
+    </ng-template>
     <h3 md-subheader>External Components</h3>
-    <template let-item let-last="last" ngFor [ngForOf]="external">
+    <ng-template let-item let-last="last" ngFor [ngForOf]="external">
       <a md-list-item 
           [routerLink]="[item.route]" 
           [routerLinkActive]="['active']" 
@@ -44,7 +44,7 @@ <h3 md-line> {{item.title}} </h3>
         <p md-line> {{item.description}} </p>
       </a>
       <md-divider *ngIf="!last" md-inset></md-divider>
-    </template>
+    </ng-template>
   </md-nav-list>
   <div td-toolbar-content layout="row" layout-align="center center" flex>
     <span>Covalent Components &amp; Addons</span>

diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, AfterViewInit, ElementRef, Inject, Renderer } from '@angular/core';
+import { Component, HostBinding, AfterViewInit, ElementRef, Inject, Renderer2 } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
 import { TdMediaService } from '@covalent/core';
 
@@ -137,7 +137,7 @@ export class ComponentsComponent implements AfterViewInit {
   }];
 
   constructor(public media: TdMediaService,
-              private _renderer: Renderer,
+              private _renderer: Renderer2,
               @Inject(DOCUMENT) private _document: any) {}
 
   ngAfterViewInit(): void {
@@ -146,6 +146,6 @@ export class ComponentsComponent implements AfterViewInit {
   }
 
   changeDir(dir: string): void {
-    this._renderer.setElementAttribute(this._document.querySelector('html'), 'dir', dir);
+    this._renderer.setAttribute(this._document.querySelector('html'), 'dir', dir);
   }
 }