Merge branch 'release/v1.0.0-beta.5'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covalent",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "private": true,
   "description": "Teradata UI Platform built on Angular Material",
   "keywords": [
@@ -15,7 +15,7 @@
     "postinstall": "webdriver-manager update",
     "reinstall": "rm -rf node_modules tmp deploy dist && npm i",
     "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
-    "test": "ng test --code-coverage --single-run",
+    "test": "ng test --code-coverage --single-run --sourcemap=false",
     "coverage-win": "start chrome ./coverage/index.html",
     "coverage-mac": "open -a \"Google Chrome\" coverage/index.html",
     "coveralls": "cat ./coverage/lcov.info | node ./node_modules/coveralls/bin/coveralls.js",
@@ -55,33 +55,33 @@
     "Steven Ov <[email protected]>"
   ],
   "dependencies": {
-    "@angular/animations": "^4.1.0",
-    "@angular/common": "^4.1.0",
-    "@angular/compiler": "^4.1.0",
-    "@angular/core": "^4.1.0",
-    "@angular/forms": "^4.1.0",
-    "@angular/http": "^4.1.0",
-    "@angular/material": "2.0.0-beta.5",
-    "@angular/platform-browser": "^4.1.0",
-    "@angular/platform-browser-dynamic": "^4.1.0",
-    "@angular/platform-server": "^4.1.0",
-    "@angular/router": "^4.1.0",
-    "@ngx-translate/core": "6.0.0",
-    "@ngx-translate/http-loader": "0.0.3",
-    "@swimlane/ngx-charts": "5.0.0",
+    "@angular/animations": "^4.2.0",
+    "@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.6",
+    "@angular/platform-browser": "^4.2.0",
+    "@angular/platform-browser-dynamic": "^4.2.0",
+    "@angular/platform-server": "^4.2.0",
+    "@angular/router": "^4.2.0",
+    "@ngx-translate/core": "7.0.0",
+    "@ngx-translate/http-loader": "0.1.0",
+    "@swimlane/ngx-charts": "5.3.1",
     "core-js": "^2.4.1",
     "d3": "^4.4.0",
     "hammerjs": "^2.0.8",
     "highlight.js": "9.11.0",
     "rxjs": "^5.2.0",
     "showdown": "1.6.4",
-    "web-animations-js": "2.2.2",
-    "zone.js": "^0.8.6"
+    "web-animations-js": "2.2.5",
+    "zone.js": "^0.8.12"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.3",
-    "@angular/compiler-cli": "^4.1.0",
-    "@angular/language-service": "^4.1.0",
+    "@angular/cli": "1.1.1",
+    "@angular/compiler-cli": "^4.2.0",
+    "@angular/language-service": "^4.2.0",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
@@ -117,6 +117,6 @@
     "semver": "5.2.0",
     "ts-node": "~2.0.0",
     "tslint": "^5.2.0",
-    "typescript": "^2.3.1"
+    "typescript": "^2.3.2"
   }
 }

src/app/app.component.html

@@ -1,7 +1,25 @@
-<td-layout #layout>
-  <td-navigation-drawer sidenavTitle="Covalent" logo="assets:teradata" navigationRoute="/">
-    <md-nav-list>
-      <a *ngFor="let item of routes" md-list-item (click)="layout.close()" [routerLink]="[item.route]"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
+<td-layout #layout
+            [dir]="dir"
+            [mode]="(media.registerQuery('gt-md') | async) ? 'side' : 'over'"
+            [sidenavWidth]="(media.registerQuery('gt-md') | async) ? '257px' : '320px'">
+  <td-navigation-drawer sidenavTitle="Covalent" logo="assets:teradata" navigationRoute="/" flex color="primary">
+    <md-nav-list flex>
+      <a md-list-item
+          (click)="!media.query('gt-md') && layout.close()"
+          [routerLink]="['/']"
+          [routerLinkActive]="['active']"
+          [routerLinkActiveOptions]="{exact:true}">
+          <md-icon md-list-icon>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>
+          {{item.title}}
+      </a>
     </md-nav-list>
   </td-navigation-drawer>
   <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,43 +1,48 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MdIconRegistry } from '@angular/material';
-
+import { MdIconRegistry, Dir } from '@angular/material';
+import { TdMediaService } from '@covalent/core';
 import { TranslateService } from '@ngx-translate/core';
 
 import { getSelectedLanguage } from './utilities/translate';
+import { getDirection } from './utilities/direction';
 
 @Component({
   selector: 'docs-covalent',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class DocsAppComponent {
+export class DocsAppComponent implements AfterViewInit {
 
   routes: Object[] = [{
-      icon: 'home',
-      route: '.',
-      title: 'Home',
-    }, {
       icon: 'library_books',
       route: 'docs',
       title: 'Documentation',
     }, {
-      icon: 'color_lens',
-      route: 'style-guide',
-      title: 'Style Guide',
+      icon: 'picture_in_picture',
+      route: 'components',
+      title: 'Components & Addons',
     }, {
       icon: 'view_quilt',
       route: 'layouts',
       title: 'Layouts',
     }, {
-      icon: 'picture_in_picture',
-      route: 'components',
-      title: 'Components & Addons',
+      icon: 'color_lens',
+      route: 'style-guide',
+      title: 'Style Guide',
+    }, {
+      icon: 'view_carousel',
+      route: 'templates',
+      title: 'Templates',
     },
   ];
 
+  dir: string;
+
   constructor(private _iconRegistry: MdIconRegistry,
               private _domSanitizer: DomSanitizer,
+              private _changeDetectorRef: ChangeDetectorRef,
+              public media: TdMediaService,
               translateService: TranslateService) {
     // Set fallback language
     translateService.setDefaultLang('en');
@@ -54,6 +59,16 @@ export class DocsAppComponent {
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/github.svg'));
     this._iconRegistry.addSvgIconInNamespace('assets', 'covalent',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/covalent.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'covalent-stroke',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/covalent-stroke.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'covalent-outline',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/covalent-outline.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'angular',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/angular.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'angular-outline',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/angular-outline.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'material-outline',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/material-outline.svg'));
     this._iconRegistry.addSvgIconInNamespace('assets', 'teradata-ux',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/teradata-ux.svg'));
     this._iconRegistry.addSvgIconInNamespace('assets', 'appcenter',
@@ -62,5 +77,14 @@ export class DocsAppComponent {
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/listener.svg'));
     this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/querygrid.svg'));
+
+    // set direction
+    this.dir = getDirection();
   }
+
+  ngAfterViewInit(): void {
+    this.media.broadcast();
+    this._changeDetectorRef.detectChanges();
+  }
+
 }

src/app/app.module.ts

@@ -8,23 +8,29 @@ import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-transla
 
 import { DocsAppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
+import { TemplatesComponent } from './components/templates/templates.component';
 import { appRoutes, appRoutingProviders } from './app.routes';
 
-import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdCoreModule, MdMenuModule } from '@angular/material';
+import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdCoreModule, MdMenuModule, MdTabsModule,
+         MdToolbarModule, MdGridListModule, MdTooltipModule } from '@angular/material';
 
-import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentNotificationsModule, CovalentMenuModule } from '../platform/core';
+import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentNotificationsModule, CovalentMenuModule,
+         CovalentMediaModule } from '../platform/core';
 import { CovalentHighlightModule } from '../platform/highlight';
 import { CovalentHttpModule } from '../platform/http';
 import { CovalentMarkdownModule } from '../platform/markdown';
 import { CovalentDynamicFormsModule } from '../platform/dynamic-forms';
 
-import { GitHubService } from './services';
+import { ToolbarModule } from './components/toolbar/toolbar.module';
+
+import { GitHubService, InternalDocsService, SelectivePreloadingStrategyService } from './services';
 import { getSelectedLanguage, createTranslateLoader } from './utilities/translate';
 
 @NgModule({
   declarations: [
     DocsAppComponent,
     HomeComponent,
+    TemplatesComponent,
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     BrowserAnimationsModule,
@@ -40,15 +46,21 @@ import { getSelectedLanguage, createTranslateLoader } from './utilities/translat
     MdIconModule,
     MdCardModule,
     MdMenuModule,
+    MdTabsModule,
+    MdToolbarModule,
+    MdGridListModule,
+    MdTooltipModule,
     /** Covalent Modules */
     CovalentLayoutModule,
     CovalentExpansionPanelModule,
     CovalentNotificationsModule,
     CovalentMenuModule,
+    CovalentMediaModule,
     CovalentHttpModule.forRoot(),
     CovalentHighlightModule,
     CovalentMarkdownModule,
     CovalentDynamicFormsModule,
+    ToolbarModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -60,10 +72,12 @@ import { getSelectedLanguage, createTranslateLoader } from './utilities/translat
   ], // modules needed to run this module
   providers: [
     appRoutingProviders,
-    GitHubService, {
+    GitHubService,
+    InternalDocsService, {
       // Configure LOCALE_ID depending on the language set in browser
       provide: LOCALE_ID, useFactory: getSelectedLanguage, deps: [TranslateService],
     },
+    SelectivePreloadingStrategyService,
   ], // additional providers needed for this module
   entryComponents: [ ],
   bootstrap: [ DocsAppComponent ],

src/app/app.routes.ts

@@ -1,23 +1,37 @@
 import { Routes, RouterModule } from '@angular/router';
 
 import { HomeComponent } from './components/home/home.component';
+import { TemplatesComponent } from './components/templates/templates.component';
+import { SelectivePreloadingStrategyService } from './services';
 
 const routes: Routes = [{
     component: HomeComponent,
     path: '',
   }, {
-    path: '', loadChildren: './components/docs/docs.module#DocsModule',
+    component: TemplatesComponent,
+    path: 'templates',
   }, {
-    path: '', loadChildren: './components/style-guide/style-guide.module#StyleGuideModule',
+    // preload: true loads the module immediately
+    path: '', data: { preload: false, }, loadChildren: './components/docs/docs.module#DocsModule',
   }, {
-    path: '', loadChildren: './components/layouts/layouts.module#LayoutsModule',
+    // preload: true loads the module immediately
+    path: '', data: { preload: false, }, loadChildren: './components/style-guide/style-guide.module#StyleGuideModule',
   }, {
-    path: '', loadChildren: './components/components/components.module#ComponentsModule',
+    // preload: true loads the module immediately
+    path: '', data: { preload: false, }, loadChildren: './components/layouts/layouts.module#LayoutsModule',
+  }, {
+    // preload: true loads the module immediately
+    path: '', data: { preload: true, }, loadChildren: './components/components/components.module#ComponentsModule',
+  }, {
+    path: '**', redirectTo: '/',
   },
 ];
 
 export const appRoutingProviders: any[] = [
 
 ];
 
-export const appRoutes: any = RouterModule.forRoot(routes, { useHash: true });
+export const appRoutes: any = RouterModule.forRoot(routes, {
+  useHash: true,
+  preloadingStrategy: SelectivePreloadingStrategyService,
+});