fix(fxStyle): enable raw input caching (#173)

* update `BaseFxDirectiveAdapter::cacheIput()` to support cacheRaw options
* fix failing style.spec.ts tests

Author: ThomasBurleson

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

@@ -1,47 +1,78 @@
-/**
- * Adapted BaseFxDirective abtract class version so it can be used via composition.
- *
- * @see BaseFxDirective
- */
 import {BaseFxDirective} from './base';
 import {ResponsiveActivation} from './../responsive/responsive-activation';
 import {MediaQuerySubscriber} from '../../media-query/media-change';
 
+/**
+ * Adapter to the BaseFxDirective abstract class so it can be used via composition.
+ * @see BaseFxDirective
+ */
 export class BaseFxDirectiveAdapter extends BaseFxDirective {
   get inputMap() {
     return this._inputMap;
   }
 
+  /**
+   * @see BaseFxDirective._mqActivation
+   */
+  get mqActivation(): ResponsiveActivation {
+    return this._mqActivation;
+  }
+  /**
+   * @see BaseFxDirective._queryInput
+   */
+  queryInput(key) {
+    return this._queryInput(key);
+  }
+
   /**
    *  Save the property value.
    */
-  cacheInput(key?: string, source?: any) {
-    if (Array.isArray(source)) {
+  cacheInput(key?: string, source?: any, cacheRaw = false) {
+    if ( cacheRaw ) {
+      this._cacheInputRaw(key, source);
+    } else if (Array.isArray(source)) {
       this._cacheInputArray(key, source);
     } else if (typeof source === 'object') {
       this._cacheInputObject(key, source);
     } else if (typeof source === 'string') {
       this._cacheInputString(key, source);
     } else {
-      throw new Error('Invalid class value provided');
+      throw new Error('Invalid class value provided. Did you want to cache the raw value?');
     }
   }
 
-  _cacheInputRaw(key?: string, source?: any) {
+  /**
+   * @see BaseFxDirective._listenForMediaQueryChanges
+   */
+  listenForMediaQueryChanges(key: string,
+                             defaultValue: any,
+                             onMediaQueryChange: MediaQuerySubscriber): ResponsiveActivation {
+    return this._listenForMediaQueryChanges(key, defaultValue, onMediaQueryChange);
+  }
+
+  // ************************************************************
+  // Protected Methods
+  // ************************************************************
+
+  /**
+   * No implicit transforms of the source.
+   * Required when caching values expected later for KeyValueDiffers
+   */
+  protected _cacheInputRaw(key?: string, source?: any) {
     this._inputMap[key] = source;
   }
 
   /**
    *  Save the property value for Array values.
    */
-  _cacheInputArray(key?: string, source?: boolean[]) {
+  protected _cacheInputArray(key?: string, source?: boolean[]) {
     this._inputMap[key] = source.join(' ');
   }
 
   /**
    *  Save the property value for key/value pair values.
    */
-  _cacheInputObject(key?: string, source?: {[key: string]: boolean}) {
+  protected _cacheInputObject(key?: string, source?: {[key: string]: boolean}) {
     let classes = [];
     for (let prop in source) {
       if (!!source[prop]) {
@@ -54,30 +85,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
   /**
    *  Save the property value for string values.
    */
-  _cacheInputString(key?: string, source?: string) {
+  protected _cacheInputString(key?: string, source?: string) {
     this._inputMap[key] = source;
   }
-
-  /**
-   * @see BaseFxDirective._listenForMediaQueryChanges
-   */
-  listenForMediaQueryChanges(key: string,
-                             defaultValue: any,
-                             onMediaQueryChange: MediaQuerySubscriber): ResponsiveActivation {
-    return this._listenForMediaQueryChanges(key, defaultValue, onMediaQueryChange);
-  }
-
-  /**
-   * @see BaseFxDirective._queryInput
-   */
-  queryInput(key) {
-    return this._queryInput(key);
-  }
-
-  /**
-   * @see BaseFxDirective._mqActivation
-   */
-  get mqActivation(): ResponsiveActivation {
-    return this._mqActivation;
-  }
 }

src/lib/flexbox/api/style.ts

@@ -47,47 +47,47 @@ export class StyleDirective extends NgStyle implements OnInit, OnChanges, OnDest
 
   @Input('style.xs')
   set styleXs(val: NgStyleType) {
-    this._base._cacheInputRaw('styleXs', val as string);
+    this._base.cacheInput('styleXs', val, true);
   }
 
   @Input('style.gt-xs')
   set styleGtXs(val: NgStyleType) {
-    this._base._cacheInputRaw('styleGtXs', val);
+    this._base.cacheInput('styleGtXs', val, true);
   };
 
   @Input('style.sm')
   set styleSm(val: NgStyleType) {
-    this._base._cacheInputRaw('styleSm', val);
+    this._base.cacheInput('styleSm', val, true);
   };
 
   @Input('style.gt-sm')
   set styleGtSm(val: NgStyleType) {
-    this._base._cacheInputRaw('styleGtSm', val);
+    this._base.cacheInput('styleGtSm', val, true);
   };
 
   @Input('style.md')
   set styleMd(val: NgStyleType) {
-    this._base._cacheInputRaw('styleMd', val);
+    this._base.cacheInput('styleMd', val, true);
   };
 
   @Input('style.gt-md')
   set styleGtMd(val: NgStyleType) {
-    this._base._cacheInputRaw('styleGtMd', val);
+    this._base.cacheInput('styleGtMd', val, true);
   };
 
   @Input('style.lg')
   set styleLg(val: NgStyleType) {
-    this._base._cacheInputRaw('styleLg', val);
+    this._base.cacheInput('styleLg', val, true);
   };
 
   @Input('style.gt-lg')
   set styleGtLg(val: NgStyleType) {
-    this._base._cacheInputRaw('styleGtLg', val);
+    this._base.cacheInput('styleGtLg', val, true);
   };
 
   @Input('style.xl')
   set styleXl(val: NgStyleType) {
-    this._base._cacheInputRaw('styleXl', val);
+    this._base.cacheInput('styleXl', val, true);
   };
 
   /**