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/responsiveStyle.demo.ts

@@ -17,10 +17,10 @@ import {Component} from '@angular/core';
             <div
               fxFlex
               class="fxClass-all"
-              class.xs="fxClass-xs"
-              [class.sm]="{'fxClass-sm': hasStyle}"
-              [class.md]="{'fxClass-md': hasStyle, 'fxClass-md2': hasStyle}"
-              [class.lg]="['fxClass-lg', 'fxClass-lg2']">
+              ngClass.xs="fxClass-xs"
+              [ngClass.sm]="{'fxClass-sm': hasStyle}"
+              [ngClass.md]="{'fxClass-md': hasStyle, 'fxClass-md2': hasStyle}"
+              [ngClass.lg]="['fxClass-lg', 'fxClass-lg2']">
               Sample Text #1
               <br/>
               <md-checkbox
@@ -39,10 +39,10 @@ import {Component} from '@angular/core';
         &lt;div
           fxFlex
           class="fxClass-all"
-          class.xs="fxClass-xs"
-          [class.sm]="&#123;'fxClass-sm': hasStyle&#125;"
-          [class.md]="&#123;'fxClass-md': hasStyle, 'fxClass-md2': hasStyle&#125;"
-          [class.lg]="['fxClass-lg', 'fxClass-lg2']"&gt;
+          ngClass.xs="fxClass-xs"
+          [ngClass.sm]="&#123;'fxClass-sm': hasStyle&#125;"
+          [ngClass.md]="&#123;'fxClass-md': hasStyle, 'fxClass-md2': hasStyle&#125;"
+          [ngClass.lg]="['fxClass-lg', 'fxClass-lg2']"&gt;
         &lt;/div&gt;
         </pre>
       </md-card-content>
@@ -54,10 +54,10 @@ import {Component} from '@angular/core';
                class="coloredContainerX box">
             <div fxFlex
               style="font-style: italic"
-              [style.xs]="{'font-size.px': 10, 'background-color': '#ddd', color: 'blue'}"
-              [style.sm]="{'font-size.px': 20, 'background-color': 'grey', color: '#482b00'}"
-              [style.md]="{'font-size.px': 30, 'background-color': 'black', color: 'orange'}"
-              [style.lg]="styleLgExp">
+              [ngStyle.xs]="{'font-size.px': 10, 'background-color': '#ddd', color: 'blue'}"
+              [ngStyle.sm]="{'font-size.px': 20, 'background-color': 'grey', color: '#482b00'}"
+              [ngStyle.md]="{'font-size.px': 30, 'background-color': 'black', color: 'orange'}"
+              [ngStyle.lg]="styleLgExp">
                 Sample Text #2
             </div>
           </div>
@@ -67,10 +67,10 @@ import {Component} from '@angular/core';
         <pre>
         &lt;div
           style="font-style: italic"
-          [style.xs]="&#123;'font-size.px': 10, color: 'blue'&#125;"
-          [style.sm]="&#123;'font-size.px': 20, color: 'lightblue'&#125;"
-          [style.md]="&#123;'font-size.px': 30, color: 'orange'&#125;"
-          [style.lg]="styleLgExp"&gt;
+          [ngStyle.xs]="&#123;'font-size.px': 10, color: 'blue'&#125;"
+          [ngStyle.sm]="&#123;'font-size.px': 20, color: 'lightblue'&#125;"
+          [ngStyle.md]="&#123;'font-size.px': 30, color: 'orange'&#125;"
+          [ngStyle.lg]="styleLgExp"&gt;
         &lt;/div&gt;
         </pre>
       </md-card-content>

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

@@ -18,11 +18,11 @@ import {Component} from '@angular/core';
             <div class="box1"
                  fxFlexFill
                  style="font-size:12px; color:black; text-align:left;"
-                 [style.sm]="{'font-size': '16px', color: '#a63db8', 'text-align': 'center'}"
+                 [ngStyle.sm]="{'font-size': '16px', color: '#a63db8', 'text-align': 'center'}"
                  ngStyle.md="font-size: 24px; color : #0000ff; text-align: right;">
               &lt;div fxFlexFill <br/>
               &nbsp;&nbsp;&nbsp;&nbsp;style="font-size:10px; color:black; text-align:'left';"<br/>
-              &nbsp;&nbsp;&nbsp;&nbsp;[style.sm]="&#123;'font-size':'16px', color:#a63db8,
+              &nbsp;&nbsp;&nbsp;&nbsp;[ngStyle.sm]="&#123;'font-size':'16px', color:#a63db8,
               text-align:'center' &#125;"<br/>
               &nbsp;&nbsp;&nbsp;&nbsp;ngStyle.md="font-size:24px; color:#00f;"
               text-align:'right'&gt;<br/>

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);