fix(api, class): fix valid ngClass usages

package.json

@@ -9,28 +9,28 @@
     "url": "git+https://github.com/angular/flex-layout.git"
   },
   "scripts": {
-    "demo:bundle": "./scripts/closure-compiler/build-devapp-bundle.sh",
+    "demo:bundle:closure": "./scripts/closure-compiler/build-devapp-bundle.sh",
     "demo:serve": "gulp serve:devapp",
     "demo:stage": "gulp stage-deploy:devapp",
     "docs:build": "gulp docs",
     "docs:build:api": "gulp api-docs",
     "lib:build": "gulp :publish:build-releases",
+    "lib:build:aot": "gulp ci:aot",
     "lib:lint": "gulp lint",
     "lib:test": "gulp test",
     "universal:build": "gulp universal:build",
-    "universal:prerender": "gulp ci:prerender"
+    "universal:ci:prerender": "gulp ci:prerender"
   },
   "version": "2.0.0-beta.9",
   "license": "MIT",
   "engines": {
     "node": ">= 5.4.1 <= 8"
   },
   "dependencies": {
-    "@angular/cdk": "2.0.0-beta.10",
-    "@angular/common": "~4.3.6",
-    "@angular/compiler": "~4.3.6",
-    "@angular/core": "~4.3.6",
-    "@angular/platform-browser": "~4.3.6",
+    "@angular/common": "^4.4.3",
+    "@angular/compiler": "^4.4.3",
+    "@angular/core": "^4.4.3",
+    "@angular/platform-browser": "^4.4.3",
     "core-js": "^2.4.1",
     "rxjs": "^5.4.2",
     "systemjs": "0.19.43",
@@ -39,15 +39,16 @@
     "zone.js": "^0.8.12"
   },
   "devDependencies": {
-    "@angular/animations": "~4.3.6",
-    "@angular/compiler-cli": "~4.3.6",
-    "@angular/forms": "~4.3.6",
-    "@angular/http": "~4.3.6",
-    "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser-dynamic": "~4.3.6",
-    "@angular/platform-server": "~4.3.6",
-    "@angular/router": "~4.3.6",
-    "@angular/tsc-wrapped": "~4.3.6",
+    "@angular/animations": "^4.4.3",
+    "@angular/compiler-cli": "^4.4.3",
+    "@angular/forms": "^4.4.3",
+    "@angular/http": "^4.4.3",
+    "@angular/material": "^2.0.0-beta.11",
+    "@angular/cdk": "^2.0.0-beta.11",
+    "@angular/platform-browser-dynamic": "^4.4.3",
+    "@angular/platform-server": "^4.4.3",
+    "@angular/router": "^4.4.3",
+    "@angular/tsc-wrapped": "^4.4.3",
     "@google-cloud/storage": "^1.1.1",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^3.0.1",
@@ -80,7 +81,7 @@
     "gulp-conventional-changelog": "^1.1.3",
     "gulp-dom": "^0.9.17",
     "gulp-flatten": "^0.3.1",
-    "gulp-highlight-files": "^0.0.4",
+    "gulp-highlight-files": "^0.0.5",
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
@@ -103,13 +104,14 @@
     "karma-sourcemap-loader": "^0.3.7",
     "madge": "^1.6.0",
     "magic-string": "^0.21.3",
-    "merge2": "^1.0.3",
+    "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "prompt-sync": "^4.1.5",
     "protractor": "^5.1.2",
     "request": "^2.81.0",
     "resolve-bin": "^0.4.0",
     "rollup": "^0.41.6",
+    "rollup-plugin-alias": "^1.3.1",
     "rollup-plugin-node-resolve": "^3.0.0",
     "run-sequence": "^1.2.2",
     "selenium-webdriver": "^3.4.0",
@@ -119,7 +121,7 @@
     "tsconfig-paths": "^2.2.0",
     "tslint": "^5.7.0",
     "tsutils": "^2.6.0",
-    "typescript": "~2.2.1",
+    "typescript": "~2.4.2",
     "uglify-js": "^2.8.14"
   }
 }

scripts/ci/travis-env.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+if [[ -z "${TRAVIS}" ]]; then
+  echo "This script can only setup the environment inside of Travis builds"
+  exit 0
+fi
+
+# If FIREBASE_ACCESS_TOKEN not set yet, export the FIREBASE_ACCESS_TOKEN using the JWT token that Travis generated and exported for SAUCE_ACCESS_KEY.
+# This is a workaround for travis-ci/travis-ci#7223
+# WARNING: FIREBASE_ACCESS_TOKEN should NOT be printed
+export FIREBASE_ACCESS_TOKEN=${FIREBASE_ACCESS_TOKEN:-$SAUCE_ACCESS_KEY}
+
+# - we overwrite the value set by Travis JWT addon here to work around travis-ci/travis-ci#7223 for FIREBASE_ACCESS_TOKEN
+export SAUCE_ACCESS_KEY=9b988f434ff8-fbca-8aa4-4ae3-35442987

scripts/ci/travis-testing.sh

@@ -41,8 +41,9 @@ elif is_unit; then
   $(npm bin)/gulp ci:test
 elif is_prerender; then
   $(npm bin)/gulp ci:prerender
-elif is_closure_compiler; then
-  ./scripts/closure-compiler/build-devapp-bundle.sh
+# Temporarily disabled due to Material Beta.11 package restructures
+#elif is_closure_compiler; then
+#  ./scripts/closure-compiler/build-devapp-bundle.sh
 fi
 
 teardown_tunnel

scripts/closure-compiler/build-devapp-bundle.sh

@@ -16,9 +16,6 @@ $(npm bin)/gulp flex-layout:build-release:clean
 $(npm bin)/gulp :build:devapp:assets :build:devapp:scss
 $(npm bin)/tsc -p src/demo-app/tsconfig-build.json --target ES2015 --module ES2015
 
-# Re-compile RxJS sources into ES2015. Otherwise closure compiler can't parse it properly.
-$(npm bin)/ngc -p scripts/closure-compiler/tsconfig-rxjs.json
-
 # Create a list of all RxJS source files.
 rxjsSourceFiles=$(find node_modules/rxjs/ -name '*.js');
 

src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts

@@ -83,8 +83,8 @@ import {Component} from '@angular/core';
   `
 })
 export class DemoResponsiveStyle  {
-  public hasStyle: boolean = false;
-  public styleLgExp = {
+  hasStyle: boolean = false;
+  styleLgExp = {
     'font-size': '40px',
     color: 'lightgreen'
   };

src/demo-app/app/docs-layout/FlexAlignSelf.demo.ts

@@ -38,7 +38,7 @@ import {Component} from '@angular/core';
   `
 })
 export class DemoFlexAlignSelf {
-  public alignTo = 'center';
+  alignTo = 'center';
 
   toggleAlignment() {
     let j = ALIGN_OPTIONS.indexOf(this.alignTo);

src/demo-app/app/docs-layout/layoutAlignment.demo.ts

@@ -7,7 +7,7 @@ import {Component} from '@angular/core';
   templateUrl: 'layoutAlignment.demo.html'
 })
 export class DemoLayoutAlignment {
-  public options = {
+  options = {
     direction :  'row',
     mainAxis  : 'space-around',
     crossAxis :  'center'

src/demo-app/app/docs-layout/layoutFill.demo.ts

@@ -26,9 +26,9 @@ import {Component} from '@angular/core';
   `
 })
 export class DemoLayoutFill {
-  public direction = 'row';
-  public mainAxis = 'space-around';
-  public crossAxis = 'center';
+  direction = 'row';
+  mainAxis = 'space-around';
+  crossAxis = 'center';
 
   layoutAlign() {
     return `${this.mainAxis} ${this.crossAxis}`;

src/demo-app/app/github-issues/issue.181.demo.ts

@@ -31,7 +31,7 @@ import {Component} from '@angular/core';
   `
 })
 export class DemoIssue181 {
-  public direction = 'column';
+  direction = 'column';
 
   pivot() {
     this.direction = (this.direction === 'row') ? 'column' : 'row';

src/demo-app/app/shared/media-query-status.ts

@@ -29,12 +29,12 @@ import {Observable} from 'rxjs/Observable';
   ]
 })
 export class MediaQueryStatus {
-  public change$: Observable<MediaChange> = this.media$.asObservable();
+  change$: Observable<MediaChange> = this.media$.asObservable();
 
   constructor(private media$: ObservableMedia) {
   }
 
-  public buildMQInfo(change: MediaChange): string {
+  buildMQInfo(change: MediaChange): string {
     if (change.mediaQuery.indexOf('orientation') > -1) {
       return '';
     }

src/demo-app/app/stack-overflow/mozHolyGrail.demo.ts

@@ -45,7 +45,7 @@ import {Component} from '@angular/core';
   `
 })
 export class DemoMozHolyGrail {
-  public direction = 'row';
+  direction = 'row';
 
   toggleDirection() {
     this.direction = (this.direction === 'column') ? 'row' : 'column';

src/demo-app/assets/demo-app.css

@@ -50,15 +50,18 @@ div.coloredContainerX > div:nth-child(2), div.colorNested > div > div:nth-child(
   background-color: #3949ab;
 }
 
-div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3), div.colorNested > div > div:nth-child(3), div.box3 {
+div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3),
+div.colorNested > div > div:nth-child(3), div.box3 {
   background-color: #9c27b0;
 }
 
-div.coloredContainerX > div:nth-child(4), div.coloredChildren > div:nth-child(4), div.colorNested > div > div:nth-child(4) {
+div.coloredContainerX > div:nth-child(4), div.coloredChildren > div:nth-child(4),
+div.colorNested > div > div:nth-child(4) {
   background-color: #b08752;
 }
 
-div.coloredContainerX > div:nth-child(5), div.coloredChildren > div:nth-child(5), div.colorNested > div > div:nth-child(5) {
+div.coloredContainerX > div:nth-child(5), div.coloredChildren > div:nth-child(5),
+div.colorNested > div > div:nth-child(5) {
   background-color: #5ca6b0;
 }
 

src/demo-app/system-config.ts

@@ -40,6 +40,7 @@ System.config({
     '@angular/cdk/portal': 'node:@angular/cdk/bundles/cdk-portal.umd.js',
     '@angular/cdk/rxjs': 'node:@angular/cdk/bundles/cdk-rxjs.umd.js',
     '@angular/cdk/scrolling': 'node:@angular/cdk/bundles/cdk-scrolling.umd.js',
+    '@angular/cdk/stepper': 'node:@angular/cdk/bundles/cdk-stepper.umd.js',
     '@angular/cdk/table': 'node:@angular/cdk/bundles/cdk-table.umd.js',
     '@angular/cdk/testing': 'node:@angular/cdk/bundles/cdk-testing.umd.js'
 

src/lib/api/core/base-adapter.ts

@@ -56,7 +56,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
     * Does this directive have 1 or more responsive keys defined
     * Note: we exclude the 'baseKey' key (which is NOT considered responsive)
     */
-  public hasResponsiveAPI() {
+  hasResponsiveAPI() {
    return super.hasResponsiveAPI(this._baseKey);
   }
 

src/lib/api/core/base.ts

@@ -233,7 +233,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    * Does this directive have 1 or more responsive keys defined
    * Note: we exclude the 'baseKey' key (which is NOT considered responsive)
    */
-  public hasResponsiveAPI(baseKey: string) {
+  hasResponsiveAPI(baseKey: string) {
     const totalKeys = Object.keys(this._inputMap).length;
     const baseValue = this._inputMap[baseKey];
     return (totalKeys - (!!baseValue ? 1 : 0)) > 0;

src/lib/api/core/renderer-adapter.ts

@@ -1,3 +1,10 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 import {Renderer2, RendererStyleFlags2} from '@angular/core';
 
 /**

src/lib/api/core/responsive-activation.ts

@@ -97,7 +97,7 @@ export class ResponsiveActivation {
   /**
    * Fast validator for presence of attribute on the host element
    */
-  public hasKeyValue(key) {
+  hasKeyValue(key) {
     let value = this._options.inputKeys[key];
     return typeof value !== 'undefined';
   }

src/lib/api/ext/class.spec.ts

@@ -9,8 +9,10 @@ import {Component, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ComponentFixture, TestBed, async, inject} from '@angular/core/testing';
 
-import {customMatchers} from '../../utils/testing/custom-matchers';
-import {makeCreateTestComponent, expectNativeEl} from '../../utils/testing/helpers';
+import {customMatchers, expect} from '../../utils/testing/custom-matchers';
+import {makeCreateTestComponent, expectNativeEl, queryFor} from '../../utils/testing/helpers';
+
+import {MdButtonModule} from '@angular/material';
 
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
 import {MatchMedia} from '../../media-query/match-media';
@@ -37,7 +39,11 @@ describe('class directive', () => {
 
     // Configure testbed to prepare services
     TestBed.configureTestingModule({
-      imports: [CommonModule, MediaQueriesModule],
+      imports: [
+        MdButtonModule,
+        CommonModule,
+        MediaQueriesModule
+      ],
       declarations: [TestClassComponent, ClassDirective],
       providers: [
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
@@ -72,8 +78,9 @@ describe('class directive', () => {
       expectNativeEl(fixture).not.toHaveCssClass('class2');
 
       // the CSS classes listed in the string (space delimited) are added,
+      // See https://angular.io/api/common/NgClass
       matchMedia.activate('xs');
-      expectNativeEl(fixture).not.toHaveCssClass('class0');
+      expectNativeEl(fixture).toHaveCssClass('class0');
       expectNativeEl(fixture).toHaveCssClass('what');
       expectNativeEl(fixture).toHaveCssClass('class2');
 
@@ -140,8 +147,8 @@ describe('class directive', () => {
     expectNativeEl(fixture).toHaveCssClass('xs-class');
 
     matchMedia.activate('lg');
-    expectNativeEl(fixture).toHaveCssClass('existing-class');
     expectNativeEl(fixture).not.toHaveCssClass('xs-class');
+    expectNativeEl(fixture).toHaveCssClass('existing-class');
   });
 
   it('should keep existing ngClass selector', () => {
@@ -204,6 +211,32 @@ describe('class directive', () => {
     expectNativeEl(fixture).toHaveCssClass('xs-1');
     expectNativeEl(fixture).toHaveCssClass('xs-2');
   });
+
+  it('should work with material buttons', () => {
+    createTestComponent(`
+          <button md-raised-button
+                  color="primary"
+                  type="submit"
+                  [ngClass]="{'btn-xs':formButtonXs}">
+              Save
+          </button>
+      `);
+
+    fixture.detectChanges();
+    let button = queryFor(fixture, '[md-raised-button]')[0].nativeElement;
+
+    expect(button).toHaveCssClass('mat-raised-button');
+    expect(button).toHaveCssClass('btn-xs');
+    expect(button).toHaveCssClass('mat-primary');
+
+    fixture.componentInstance.formButtonXs = false;
+    fixture.detectChanges();
+    button = queryFor(fixture, '[md-raised-button]')[0].nativeElement;
+
+    expect(button).toHaveCssClass('mat-raised-button');
+    expect(button).not.toHaveCssClass('btn-xs');
+    expect(button).toHaveCssClass('mat-primary');
+  });
 });
 
 // *****************************************************************
@@ -218,6 +251,7 @@ export class TestClassComponent implements OnInit {
   hasXs1: boolean;
   hasXs2: boolean;
   hasXs3: boolean;
+  formButtonXs = true;
 
   constructor(private _: ObservableMedia) {
   }