fix(api, class, style): remove deprecated selectors

* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```

Author: ThomasBurleson

package.json

@@ -9,19 +9,16 @@
     "url": "git+https://github.com/angular/flex-layout.git"
   },
   "scripts": {
-    "api": "gulp api-docs",
-    "build": "gulp :publish:build-releases",
-    "closure": "./scripts/closure-compiler/build-devapp-bundle.sh",
-    "demo-app": "gulp serve:devapp",
-    "docs": "gulp docs",
-    "deploy": "gulp deploy:devapp",
-    "stage": "gulp stage-deploy:devapp",
-    "stylelint": "gulp lint",
-    "test": "gulp test",
-    "tslint": "gulp lint",
-    "webdriver-manager": "webdriver-manager",
-    "universal": "gulp universal:build",
-    "universal:test": "gulp ci:prerender"
+    "demo:bundle": "./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:lint": "gulp lint",
+    "lib:test": "gulp test",
+    "universal:build": "gulp universal:build",
+    "universal:prerender": "gulp ci:prerender"
   },
   "version": "2.0.0-beta.9",
   "license": "MIT",

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

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Script that bundles the dev-app using the Google Closure compiler.
-# This is script is used to verify closure-compatibility of all Material components.
+# This is script is used to verify closure-compatibility of all Flex-Layout components.
 
 set -e -o pipefail
 

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

@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
     selector: 'demos-docs-layout',
     template: `
       <demo-responsive-layout-direction  class='small-demo'>  </demo-responsive-layout-direction>
-      <demo-responsive-row-column class='small-demo'>  </demo-responsive-row-column>
-      <demo-responsive-flex-directive  class='small-demo'>  </demo-responsive-flex-directive>
-      <demo-responsive-flex-order  class='small-demo'>  </demo-responsive-flex-order>
-      <demo-responsive-show-hide  class='small-demo'>  </demo-responsive-show-hide>
+      <!--<demo-responsive-row-column class='small-demo'>  </demo-responsive-row-column>-->
+      <!--<demo-responsive-flex-directive  class='small-demo'>  </demo-responsive-flex-directive>-->
+      <!--<demo-responsive-flex-order  class='small-demo'>  </demo-responsive-flex-order>-->
+      <!--<demo-responsive-show-hide  class='small-demo'>  </demo-responsive-show-hide>-->
       <demo-responsive-style  class='small-demo'>  </demo-responsive-style>
     `
 })

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

@@ -1,4 +1,4 @@
-import {Component, OnDestroy} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 
 import {MediaChange} from '@angular/flex-layout';
@@ -28,20 +28,24 @@ import {ObservableMedia} from '@angular/flex-layout';
     }`
   ]
 })
-export class MediaQueryStatus implements OnDestroy {
+export class MediaQueryStatus implements OnDestroy, OnInit {
   private _watcher: Subscription;
   activeMediaQuery: string;
 
-  constructor(media$: ObservableMedia) {
-    this.watchMediaQueries(media$);
+  constructor(private media$: ObservableMedia) {
+
+  }
+
+  ngOnInit() {
+    this.watchMediaQueries();
   }
 
   ngOnDestroy() {
     this._watcher.unsubscribe();
   }
 
-  private watchMediaQueries(media$: ObservableMedia) {
-    this._watcher = media$.subscribe((change: MediaChange) => {
+  private watchMediaQueries() {
+    this._watcher = this.media$.subscribe((change: MediaChange) => {
       if (change.mediaQuery.indexOf('orientation') > -1) { return; }
       let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
       this.activeMediaQuery = value;

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

@@ -19,6 +19,16 @@ import {MediaMonitor} from '../../media-query/media-monitor';
  */
 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() {
+    const totalKeys = Object.keys(this._inputMap).length;
+    const baseValue = this._inputMap[this._baseKey];
+    return  (totalKeys - (!!baseValue ? 1 : 0)) > 0;
+  }
+
   /**
    * Accessor to determine which @Input property is "active"
    * e.g. which property value will be used.
@@ -127,13 +137,4 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
     this._inputMap[key] = source;
   }
 
-  /**
-   * Does this directive have 1 or more responsive keys defined
-   * Note: we exclude the 'baseKey' key (which is NOT considered responsive)
-   */
-  public get usesResponsiveAPI() {
-    const totalKeys = Object.keys(this._inputMap).length;
-    const baseValue = this._inputMap[this._baseKey];
-    return  (totalKeys - (!!baseValue ? 1 : 0)) > 0;
-  }
 }

src/lib/api/core/base.ts

@@ -16,7 +16,7 @@ import {
   lookupStyle,
   lookupInlineStyle,
   applyStyleToElement,
-  applyStyleToElements
+  applyStyleToElements, lookupAttributeValue
 } from '../../utils/style-utils';
 
 import {ResponsiveActivation, KeyOptions} from '../core/responsive-activation';
@@ -25,7 +25,6 @@ import {MediaQuerySubscriber} from '../../media-query/media-change';
 
 /** Abstract base class for the Layout API styling directives. */
 export abstract class BaseFxDirective implements OnDestroy, OnChanges {
-
   get hasMediaQueryListener() {
     return !!this._mqActivation;
   }
@@ -137,6 +136,14 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
     return lookupStyle(source || this.nativeElement, 'display');
   }
 
+  /**
+   * Quick accessor to raw attribute value on the target DOM element
+   */
+  protected _getAttributeValue(attribute: string,
+                               source: HTMLElement = this.nativeElement): string {
+    return lookupAttributeValue(source || this.nativeElement, attribute);
+  }
+
   /**
    * Determine the DOM element's Flexbox flow (flex-direction).
    *
@@ -222,6 +229,17 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
     return buffer;
   }
 
+  /**
+   * 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) {
+    const totalKeys = Object.keys(this._inputMap).length;
+    const baseValue = this._inputMap[baseKey];
+    return (totalKeys - (!!baseValue ? 1 : 0)) > 0;
+  }
+
+
   /**
    * Fast validator for presence of attribute on the host element
    */

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

@@ -47,7 +47,7 @@ describe('class directive', () => {
   });
 
   ['xs', 'sm', 'md', 'lg'].forEach(mq => {
-    const selector = `class-${mq}`;
+    const selector = `ngClass-${mq}`;
 
     it(`should apply '${selector}' with '${mq}' media query`, () => {
       createTestComponent(`<div ngClass.${mq}="${selector}"></div>`);
@@ -64,7 +64,7 @@ describe('class directive', () => {
     expectNativeEl(fixture).toHaveCssClass('class2');
   });
 
-  it('should override base `class` values with responsive values', () => {
+  it('should override base `class` values with responsive ngClass string', () => {
       createTestComponent(`<div class="class0" ngClass.xs="what class2"></div>`);
 
       expectNativeEl(fixture).toHaveCssClass('class0');
@@ -73,7 +73,7 @@ describe('class directive', () => {
 
       // the CSS classes listed in the string (space delimited) are added,
       matchMedia.activate('xs');
-      expectNativeEl(fixture).toHaveCssClass('class0');
+      expectNativeEl(fixture).not.toHaveCssClass('class0');
       expectNativeEl(fixture).toHaveCssClass('what');
       expectNativeEl(fixture).toHaveCssClass('class2');
 
@@ -83,7 +83,7 @@ describe('class directive', () => {
       expectNativeEl(fixture).not.toHaveCssClass('class2');
     });
 
-  it('should override base `class` values with responsive values', () => {
+  it('should override base `class` values with responsive ngClass map', () => {
       createTestComponent(`
         <div class="class0" [ngClass.xs]="{'what':true, 'class2':true, 'class0':false}"></div>
       `);
@@ -527,7 +527,7 @@ describe('binding to CSS class list', () => {
           detectChangesAndExpectClassName(`init foo`);
         }));
 
-     it('should co-operate with the class attribute and class.name binding', async(() => {
+     it('should co-operate with the class attribute and ngClass.name binding', async(() => {
           const template =
               '<div class="init foo" [ngClass]="objExpr" [class.baz]="condition"></div>';
           fixture = createTestComponent(template);