Merge pull request #69 from kreuzwerker/feature/68_update_dependencies

#68 update Angular Material, ng-dynamic-forms

package.json

@@ -78,14 +78,15 @@
     "@angular-redux/router": "^6.2.0",
     "@angular-redux/store": "^6.2.1",
     "@angular/animations": "^4.4.6",
+    "@angular/cdk": "2.0.0-beta.12",
     "@angular/common": "^4.4.6",
     "@angular/compiler": "^4.4.6",
     "@angular/compiler-cli": "^4.4.6",
     "@angular/core": "^4.4.6",
     "@angular/flex-layout": "^2.0.0-beta.8",
     "@angular/forms": "^4.4.6",
     "@angular/http": "^4.4.6",
-    "@angular/material": "2.0.0-beta.3",
+    "@angular/material": "2.0.0-beta.12",
     "@angular/platform-browser": "^4.4.6",
     "@angular/platform-browser-dynamic": "^4.4.6",
     "@angular/platform-server": "^4.4.6",
@@ -94,8 +95,8 @@
     "@angularclass/hmr": "1.2.2",
     "@angularclass/hmr-loader": "3.0.2",
     "@angularclass/idle-preload": "^1.0.4",
-    "@ng2-dynamic-forms/core": "^1.4.9",
-    "@ng2-dynamic-forms/ui-material": "^1.4.9",
+    "@ng-dynamic-forms/core": "1.4.34",
+    "@ng-dynamic-forms/ui-material": "1.4.34",
     "@ngrx/core": "1.2.0",
     "@ngrx/effects": "2.0.3",
     "@ngrx/router-store": "1.2.6",

src/app/_components.scss

@@ -68,11 +68,11 @@ span.label {
     text-align: center;
   }
 
-  md-icon {
+  mat-icon {
     color: white;
   }
 
-  md-icon.box-icon {
+  mat-icon.box-icon {
     border-radius: 50%;
     height: 50px;
     width: 50px;
@@ -155,7 +155,7 @@ button.toggle-active {
   line-height: 12px;
   padding: 4px 8px;
 
-  &:not(.mat-icon-button) {
+  &:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
     border-radius: 10px!important;
   }
 

src/app/_layout.scss

@@ -23,7 +23,7 @@ div.layout {
   flex:1;
 }
 
-.full-width, .full-width > md-input-container {
+.full-width, .full-width:not(.select) > mat-form-field {
   width: 100%;
 }
 
@@ -52,7 +52,7 @@ div.border-left {
 */
 
 form.single-column {
-  .mat-input-container {
+  .mat-form-field {
     width:100%;
   }
 }

src/app/app.component.html

@@ -1,8 +1,8 @@
 <div id="app" class="full-height">
-  <md-toolbar *ngIf="showToolbar()" color="primary" id="app-toolbar">
+  <mat-toolbar *ngIf="showToolbar()" color="primary" id="app-toolbar">
     <dkt-main-nav fxFlex></dkt-main-nav>
     <dkt-account></dkt-account>
-  </md-toolbar>
+  </mat-toolbar>
 
   <div id="app-body" class="full-height">
     <router-outlet (activate)="activateEvent($event)" (deactivate)="deactivateEvent($event)"></router-outlet>

src/app/app.component.scss

@@ -3,7 +3,7 @@ https://github.com/jtangelder/sass-loader/issues/211 */
 @import './variables';
 
 // using Modernizer CSS classes to detect if browser supports the W3C Touch Events API
-:host-context(.mod-touchevents) [md-button]:hover::after, [md-icon-button]:hover::after {
+:host-context(.mod-touchevents) [mat-button]:hover::after, [mat-icon-button]:hover::after {
     content: none;
 }
 

src/app/app.component.spec.ts

@@ -3,7 +3,7 @@ import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { MaterialModule } from '@angular/material';
+import { DktMaterialModule } from './dkt-material.module';
 
 import { AppComponent } from './app.component';
 import { DashboardComponent } from './features/dashboard.component';
@@ -17,7 +17,7 @@ describe('App Component', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        MaterialModule.forRoot(),
+        DktMaterialModule,
         ReactiveFormsModule,
         RouterTestingModule.withRoutes(routes),
         StoreDevToolsModule

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation, OnInit, OnDestroy, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UserLoginService, CognitoUtil } from './core/services';
-import { MdIconRegistry, MdSnackBar, MdSnackBarConfig } from '@angular/material';
+import { MatIconRegistry, MatSnackBar, MatSnackBarConfig } from '@angular/material';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
@@ -18,25 +18,25 @@ export class AppComponent implements OnInit, OnDestroy {
   constructor(
     public route: ActivatedRoute,
     public router: Router,
-    private mdIconRegistry: MdIconRegistry,
+    private matIconRegistry: MatIconRegistry,
     private sanitizer: DomSanitizer,
     private ngZone: NgZone,
-    public snackBar: MdSnackBar
+    public snackBar: MatSnackBar
   ) {
     // Register custom DKT icons
-    mdIconRegistry.addSvgIcon(
+    matIconRegistry.addSvgIcon(
       'flow',
       sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/flow.svg')
     );
-    mdIconRegistry.addSvgIcon(
+    matIconRegistry.addSvgIcon(
       'sort_asc',
       sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/sort_asc.svg')
     );
-    mdIconRegistry.addSvgIcon(
+    matIconRegistry.addSvgIcon(
       'sort_desc',
       sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/sort_desc.svg')
     );
-    mdIconRegistry.addSvgIcon(
+    matIconRegistry.addSvgIcon(
       'aws',
       sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/aws.svg')
     );
@@ -51,7 +51,7 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   showMessage(message: string, type: string = 'info') {
-    let config = new MdSnackBarConfig();
+    let config = new MatSnackBarConfig();
     config.duration = 2000;
     config.extraClasses = [type];
     this.snackBar.open(message, 'OK', config);

src/app/app.imports.ts

@@ -1,10 +1,10 @@
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DynamicFormsCoreModule } from '@ng2-dynamic-forms/core';
-import { DynamicFormsMaterialUIModule } from '@ng2-dynamic-forms/ui-material';
+import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
+import { DynamicFormsMaterialUIModule } from '@ng-dynamic-forms/ui-material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { IdlePreload, IdlePreloadModule } from '@angularclass/idle-preload';
-import { MaterialModule } from '@angular/material';
+import { DktMaterialModule } from './dkt-material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { EffectsModule } from '@ngrx/effects';
@@ -44,7 +44,7 @@ if (ENV === 'development' && !AOT &&
 export const APP_IMPORTS = [
   BrowserAnimationsModule,
   EffectsModule.run(UserEffects),
-  MaterialModule,
+  DktMaterialModule,
   FlexLayoutModule,
   FormsModule,
   BrowserAnimationsModule,

src/app/core/components/account/account.component.html

@@ -1,20 +1,20 @@
-<md-menu #userMenu="mdMenu" yPosition="below">
-  <button md-menu-item (click)="signOut()">
-    <md-icon>exit_to_app</md-icon>
+<mat-menu #userMenu="matMenu" yPosition="below">
+  <button mat-menu-item (click)="signOut()">
+    <mat-icon>exit_to_app</mat-icon>
     <span>Log out</span>
   </button>
-  <button md-menu-item (click)="goTo('api-info')">
-    <md-icon>info</md-icon>
+  <button mat-menu-item (click)="goTo('api-info')">
+    <mat-icon>info</mat-icon>
     <span>API info</span>
   </button>
-</md-menu>
+</mat-menu>
 
-<button md-button [mdMenuTriggerFor]="userMenu">
+<button mat-button [matMenuTriggerFor]="userMenu">
   <img *ngIf="getAvatar(); else userAvatar" class="avatar" [src]="getAvatar()" alt="">
   <ng-template #userAvatar>
-    <md-icon>account_circle</md-icon>
+    <mat-icon class="account">account_circle</mat-icon>
   </ng-template>
 
   <span class="username" fxHide.xs>{{getUsername()}}</span>
-  <md-icon>keyboard_arrow_down</md-icon>
+  <mat-icon>keyboard_arrow_down</mat-icon>
 </button>

src/app/core/components/account/account.component.scss

@@ -1,3 +1,3 @@
-md-icon[aria-label="account_circle"] {
+mat-icon.account {
   margin-right: 0.3rem;
 }

src/app/core/components/confirm-sign-up/confirm-sign-up.component.html

@@ -1,12 +1,12 @@
 <p class="instructions">Please check your e-mail and enter your registration code.</p>
 
 <form #confirmSignUpForm="ngForm" class="single-column">
-  <md-input-container>
-    <input mdInput placeholder="Code" type="text" [(ngModel)]="registrationCode.code" name="code" ngModel #code="ngModel" required>
-    <md-hint *ngIf="code.dirty && code.errors?.required">Registration code is required</md-hint>
-  </md-input-container>
+  <mat-form-field>
+    <input matInput placeholder="Code" type="text" [(ngModel)]="registrationCode.code" name="code" ngModel #code="ngModel" required>
+    <mat-hint *ngIf="code.dirty && code.errors?.required">Registration code is required</mat-hint>
+  </mat-form-field>
 
-  <button md-button class="full-width margin-top" type="submit" [disabled]="confirmSignUpForm.invalid || busy" (click)="onConfirmSignUp(confirmSignUpForm)" md-raised-button color="primary">
+  <button mat-button class="full-width margin-top" type="submit" [disabled]="confirmSignUpForm.invalid || busy" (click)="onConfirmSignUp(confirmSignUpForm)" mat-raised-button color="primary">
     {{busy ? 'Verifying...' : 'Confirm sign up'}}
   </button>
 </form>

src/app/core/components/forgot-password/forgot-password.component.html

@@ -1,17 +1,17 @@
 <p class="instructions">Please enter the verification code below, along with the new password you would like to use.</p>
 
 <form #updatePasswordForm="ngForm" (ngSubmit)="onUpdatePassword(updatePasswordForm)" class="single-column">
-  <md-input-container>
-    <input mdInput placeholder="Verification code" type="text" [(ngModel)]="formData.verificationCode" name="verificationCode" ngModel #verificationCode="ngModel" required>
-    <md-hint *ngIf="verificationCode.dirty && verificationCode.errors?.required">Verification code is required</md-hint>
-  </md-input-container>
+  <mat-form-field>
+    <input matInput placeholder="Verification code" type="text" [(ngModel)]="formData.verificationCode" name="verificationCode" ngModel #verificationCode="ngModel" required>
+    <mat-hint *ngIf="verificationCode.dirty && verificationCode.errors?.required">Verification code is required</mat-hint>
+  </mat-form-field>
 
-  <md-input-container>
-    <input mdInput placeholder="New password" type="password" [(ngModel)]="formData.password" name="password" ngModel #password="ngModel" required>
-    <md-hint *ngIf="password.dirty && password.errors?.required">Password is required</md-hint>
-  </md-input-container>
+  <mat-form-field>
+    <input matInput placeholder="New password" type="password" [(ngModel)]="formData.password" name="password" ngModel #password="ngModel" required>
+    <mat-hint *ngIf="password.dirty && password.errors?.required">Password is required</mat-hint>
+  </mat-form-field>
 
-  <button md-button class="full-width margin-top" type="submit" [disabled]="updatePasswordForm.invalid || busy" md-raised-button color="primary">
+  <button mat-button class="full-width margin-top" type="submit" [disabled]="updatePasswordForm.invalid || busy" mat-raised-button color="primary">
     {{busy ? 'Changing password...' : 'Change password'}}
   </button>
 </form>

src/app/core/components/google-signin/google-signin.component.html

@@ -1,4 +1,4 @@
-<button md-raised-button color="primary" id="googleSignInBtn" class="full-width">
-  <md-icon svgIcon="google"></md-icon>
+<button mat-raised-button color="primary" id="googleSignInBtn" class="full-width">
+  <mat-icon svgIcon="google"></mat-icon>
   {{action}} with Google
 </button>

src/app/core/components/google-signin/google-signin.component.scss

@@ -1,5 +1,5 @@
 #googleSignInBtn {
-  md-icon {
+  mat-icon {
     width: 20px;
     height: 20px;
     line-height: 20px;

src/app/core/components/google-signin/google-signin.component.ts

@@ -1,6 +1,6 @@
 import { Component, NgZone, Input, AfterViewInit } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MdIconRegistry } from '@angular/material';
+import { MatIconRegistry } from '@angular/material';
 import { Router } from '@angular/router';
 import { googleSignInConfig } from './../../config';
 import { LoginUiState, UserLoginService } from './../../services';
@@ -18,12 +18,12 @@ export class GoogleSigninComponent implements AfterViewInit {
   constructor(
     public router: Router,
     public zone: NgZone,
-    private mdIconRegistry: MdIconRegistry,
+    private matIconRegistry: MatIconRegistry,
     private sanitizer: DomSanitizer,
     private loginUi: LoginUiState
   ) {
     // Register "google" icon
-    mdIconRegistry.addSvgIcon(
+    matIconRegistry.addSvgIcon(
       'google',
       sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/google.svg')
     );

src/app/core/components/loading-indicator/loading-indicator.component.html

@@ -1,4 +1,4 @@
 <div class="loading-indicator" [class.center]="center" fxLayout="row" fxLayoutAlign="start center">
-  <md-spinner></md-spinner>
+  <mat-spinner class="margin-right"></mat-spinner>
   <span>{{text}}</span>
 </div>

src/app/core/components/loading-indicator/loading-indicator.component.scss

@@ -6,12 +6,6 @@
     transform: translateX(-50%);
   }
 
-  md-spinner {
-    display: inline-block;
-    width: 20px!important;
-    height: 20px!important;
-  }
-
   span {
     margin-left:0.5rem;
     color: #BDBDBD;

src/app/core/components/login/login.component.html

@@ -1,6 +1,6 @@
 <div id="login" class="full-height" fxLayout="column" fxLayoutAlign="center center">
-  <md-card class="centered">
-    <md-card-content>
+  <mat-card class="centered">
+    <mat-card-content>
       <div class="logo"></div>
 
       <h2>{{ui.title}}</h2>
@@ -17,6 +17,6 @@ <h2>{{ui.title}}</h2>
       </div>
 
       <router-outlet></router-outlet>
-    </md-card-content>
-  </md-card>
+    </mat-card-content>
+  </mat-card>
 </div>

src/app/core/components/login/login.component.scss

@@ -12,7 +12,7 @@ $text-color: #666;
   height:100%;
   animation: FadeIn 0.3s;
 
-  md-card {
+  mat-card {
     max-width: $width;
     padding: $padding;
   }

src/app/core/components/main-nav/main-nav.component.html

@@ -1,10 +1,10 @@
 <div class="main-nav" fxLayout="row" fxLayoutAlign="center center">
   <a routerLink="/flows" [routerLinkActive]="['active']" fxLayout="row" fxLayoutAlign="start center">
-    <md-icon svgIcon="flow"></md-icon>
+    <mat-icon svgIcon="flow"></mat-icon>
     flows
   </a>
   <a routerLink="/tasks" [routerLinkActive]="['active']" fxLayout="row" fxLayoutAlign="start center">
-    <md-icon>assignment</md-icon>
+    <mat-icon>assignment</mat-icon>
     tasks
   </a>
 </div>

src/app/core/components/main-nav/main-nav.component.scss

@@ -35,7 +35,7 @@ https://github.com/jtangelder/sass-loader/issues/211 */
       color:white;
     }
 
-    md-icon {
+    mat-icon {
       margin-right:5px;
     }
   }

src/app/core/components/render/render.component.html

@@ -1,8 +1,8 @@
 <div class="render">
   <div class="data">
     <div class="html" *ngIf="type == types.HTML" fxLayout="column" fxLayoutAlign="center center">
-      <button md-raised-button color="primary" (click)="showPopup()">
-        <md-icon>search</md-icon>
+      <button mat-raised-button color="primary" (click)="showPopup()">
+        <mat-icon>search</mat-icon>
         View result
       </button>
       <p class="info">Please make sure to <b>allow popups</b>.</p>