fix(ngClass,ngStyle): support proper API usages and ChangeDetectionStrategy.OnPush strategies (#228)

* fix(ngClass):  properly differentiate between `ngClass` and `class` api usages
  *  `class.<xxx>` are destructive overrides (as seen in `NgClass::klass`)
  *  `ngClass.<xxx>` use iterables to merge/enable/disable 0...n classes
* fix(ngClass,ngStyle): support ChangeDetectionStrategy.OnPush
  * Add support for both **OnPush** change detection strategies and for @input changes.
* fix class lt-<xx> selectors

>  @see https://plnkr.co/edit/jCICQ1GXFnzFqFTFlXwh?p=preview

fixes #206, fixes #215.

Author: ThomasBurleson

src/lib/flexbox/api/base-adapter.spec.ts

@@ -20,7 +20,7 @@ export class MockElementRef extends ElementRef {
 describe('BaseFxDirectiveAdapter class', () => {
   let component;
   beforeEach(() => {
-    component = new BaseFxDirectiveAdapter(null, new MockElementRef(), null);
+    component = new BaseFxDirectiveAdapter(null, null, new MockElementRef(), null);
   });
   describe('cacheInput', () => {
     it('should call _cacheInputArray when source is an array', () => {

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

@@ -1,12 +1,36 @@
+/**
+ * @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 {ElementRef, Renderer} from '@angular/core';
+
 import {BaseFxDirective} from './base';
 import {ResponsiveActivation} from './../responsive/responsive-activation';
 import {MediaQuerySubscriber} from '../../media-query/media-change';
+import {MediaMonitor} from '../../media-query/media-monitor';
+
 
 /**
  * Adapter to the BaseFxDirective abstract class so it can be used via composition.
  * @see BaseFxDirective
  */
 export class BaseFxDirectiveAdapter extends BaseFxDirective {
+
+  /**
+   * Accessor to determine which @Input property is "active"
+   * e.g. which property value will be used.
+   */
+  get activeKey() {
+    let mqa = this._mqActivation;
+    let key = mqa ? mqa.activatedInputKey : this._baseKey;
+    // Note: ClassDirective::SimpleChanges uses 'klazz' instead of 'class' as a key
+    return (key === 'class') ? 'klazz' : key;
+  }
+
+  /** Hash map of all @Input keys/values defined/used */
   get inputMap() {
     return this._inputMap;
   }
@@ -18,11 +42,22 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
     return this._mqActivation;
   }
 
+  /**
+   * BaseFxDirectiveAdapter constructor
+   */
+  constructor(protected _baseKey: string,   // non-responsive @Input property name
+              protected _mediaMonitor: MediaMonitor,
+              protected _elementRef: ElementRef,
+              protected _renderer: Renderer ) {
+    super(_mediaMonitor, _elementRef, _renderer);
+  }
+
+
   /**
    * @see BaseFxDirective._queryInput
    */
   queryInput(key) {
-    return this._queryInput(key);
+    return key ? this._queryInput(key) : undefined;
   }
 
   /**

src/lib/flexbox/api/base.ts

@@ -22,20 +22,10 @@ export type StyleDefinition = string|{[property: string]: string|number};
 
 /** Abstract base class for the Layout API styling directives. */
 export abstract class BaseFxDirective implements OnDestroy {
-  /**
-   * Original dom Elements CSS display style
-   */
-  protected _display;
 
-  /**
-   * MediaQuery Activation Tracker
-   */
-  protected _mqActivation: ResponsiveActivation;
-
-  /**
-   *  Dictionary of input keys with associated values
-   */
-  protected _inputMap = {};
+  get hasMediaQueryListener() {
+    return !!this._mqActivation;
+  }
 
   /**
    *
@@ -46,6 +36,7 @@ export abstract class BaseFxDirective implements OnDestroy {
     this._display = this._getDisplayStyle();
   }
 
+
   // *********************************************
   // Accessor Methods
   // *********************************************
@@ -172,12 +163,15 @@ export abstract class BaseFxDirective implements OnDestroy {
   protected _listenForMediaQueryChanges(key: string,
                                         defaultValue: any,
                                         onMediaQueryChange: MediaQuerySubscriber): ResponsiveActivation { // tslint:disable-line:max-line-length
-    let keyOptions = new KeyOptions(key, defaultValue, this._inputMap);
-    return this._mqActivation = new ResponsiveActivation(
-        keyOptions,
-        this._mediaMonitor,
-        (change) => onMediaQueryChange.call(this, change)
-    );
+    if ( !this._mqActivation ) {
+      let keyOptions = new KeyOptions(key, defaultValue, this._inputMap);
+      this._mqActivation = new ResponsiveActivation(
+          keyOptions,
+          this._mediaMonitor,
+          (change) => onMediaQueryChange(change)
+      );
+    }
+    return this._mqActivation;
   }
 
   /**
@@ -201,4 +195,16 @@ export abstract class BaseFxDirective implements OnDestroy {
     return this._mqActivation.hasKeyValue(key);
   }
 
+  /** Original dom Elements CSS display style */
+  protected _display;
+
+  /**
+   * MediaQuery Activation Tracker
+   */
+  protected _mqActivation: ResponsiveActivation;
+
+  /**
+   *  Dictionary of input keys with associated values
+   */
+  protected _inputMap = {};
 }