update(flexbox): refactor fxStyle and fxClass code

*  refactor code to `base-adapter.ts`

Author: ThomasBurleson

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

@@ -207,20 +207,20 @@ md-card-content pre {
   color: blue!important;
 }
 .fxClass-sm {
-  font-size: 12px;
+  font-size: 20px;
   color: lightblue!important;
 }
 .fxClass-md {
-  font-size: 14px;
+  font-size: 30px;
   color: orange!important;
 }
 .fxClass-md2 {
   font-weight: bold;
 }
 .fxClass-lg {
-  font-size: 16px;
+  font-size: 40px;
   color: lightgreen!important;
 }
 .fxClass-lg2 {
-  font-style: normal;
+  text-shadow: #5c5c5c;
 }

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

@@ -3,12 +3,12 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'demos-docs-layout',
     template: `
-      <demo-responsive-style  class="small-demo">  </demo-responsive-style>
       <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-style  class="small-demo">  </demo-responsive-style>
     `
 })
 export class DemosResponsiveLayout { }

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

@@ -15,7 +15,7 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
     <md-card class="card-demo" >
       <md-card-title>Responsive Style</md-card-title>
       <md-card-subtitle>
-        Use the class and style APIs to responsively apply styles to elements:
+        Use the fxClass and fxStyle APIs to responsively apply styles to elements:
       </md-card-subtitle>
 
       <md-card-content>
@@ -87,7 +87,7 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
     </md-card>
   `
 })
-export class DemoResponsiveStyle implements OnInit, OnDestroy {
+export class DemoResponsiveStyle implements OnDestroy {
   private _watcher: Subscription;
   public activeMediaQuery = "";
   public activeMediaQueryAlias = "";
@@ -97,21 +97,14 @@ export class DemoResponsiveStyle implements OnInit, OnDestroy {
     color: 'lightgreen'
   };
 
-  constructor( @Inject(ObservableMedia) private _media$) { }
-
-  ngOnInit() {
-    this._watcher = this.watchMQChanges();
+  constructor( private _media$:ObservableMedia ) {
+    this._watcher = this._media$.subscribe((change: MediaChange) => {
+      this.activeMediaQuery = change ? `'${change.mqAlias}' = ${change.mediaQuery} )` : "";
+      this.activeMediaQueryAlias = change.mqAlias;
+    });
   }
 
   ngOnDestroy() {
     this._watcher.unsubscribe();
   }
-
-  watchMQChanges() {
-    return this._media$.subscribe((change: MediaChange) => {
-      let value = change ? `'${change.mqAlias}' = ${change.mediaQuery} )` : "";
-      this.activeMediaQuery = value;
-      this.activeMediaQueryAlias = change.mqAlias;
-    });
-  }
 }

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

@@ -6,24 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {
-  Component, OnInit, Inject, ElementRef
+  Component, OnInit
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {CommonModule} from '@angular/common';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { MockMatchMedia } from '../../media-query/mock/mock-match-media';
-import { MatchMedia } from '../../media-query/match-media';
-import { ObservableMedia } from '../../media-query/observable-media-service';
-import { BreakPointsProvider } from '../../media-query/breakpoints/break-points';
-import { BreakPointRegistry } from '../../media-query/breakpoints/break-point-registry';
-import { BaseFxDirectiveAdapter } from './class';
+import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
+import {MatchMedia} from '../../media-query/match-media';
+import {ObservableMedia} from '../../media-query/observable-media-service';
+import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
+import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 
-import { customMatchers, expect } from '../../utils/testing/custom-matchers';
+import {customMatchers} from '../../utils/testing/custom-matchers';
 import {
   makeCreateTestComponent, expectNativeEl
 } from '../../utils/testing/helpers';
-import { ClassDirective } from './class';
-import { MediaQueriesModule } from '../../media-query/_module';
+import {ClassDirective} from './class';
+import {MediaQueriesModule} from '../../media-query/_module';
 
 describe('class directive', () => {
   let fixture: ComponentFixture<any>;
@@ -42,7 +41,7 @@ describe('class directive', () => {
       declarations: [TestClassComponent, ClassDirective],
       providers: [
         BreakPointRegistry, BreakPointsProvider,
-        { provide: MatchMedia, useClass: MockMatchMedia }
+        {provide: MatchMedia, useClass: MockMatchMedia}
       ]
     });
   });
@@ -54,17 +53,17 @@ describe('class directive', () => {
   });
 
   ['xs', 'sm', 'md', 'lg']
-    .forEach(mq => {
-      const selector = `class-${mq}`;
-      it(`should apply '${selector}' with '${mq}' media query`, () => {
-        fixture = createTestComponent(`
+      .forEach(mq => {
+        const selector = `class-${mq}`;
+        it(`should apply '${selector}' with '${mq}' media query`, () => {
+          fixture = createTestComponent(`
               <div class.${mq}="${selector}">
               </div>
           `);
-        activateMediaQuery(mq, true);
-        expectNativeEl(fixture).toHaveCssClass(selector);
+          activateMediaQuery(mq, true);
+          expectNativeEl(fixture).toHaveCssClass(selector);
+        });
       });
-    });
 
   it('should keep existing class selector', () => {
     fixture = createTestComponent(`
@@ -96,11 +95,11 @@ describe('class directive', () => {
                 </div>
             `);
     activateMediaQuery('xs', true);
-    expectNativeEl(fixture, { hasXs1: true, hasXs2: false }).toHaveCssClass('xs-1');
-    expectNativeEl(fixture, { hasXs1: true, hasXs2: false }).not.toHaveCssClass('xs-2');
+    expectNativeEl(fixture, {hasXs1: true, hasXs2: false}).toHaveCssClass('xs-1');
+    expectNativeEl(fixture, {hasXs1: true, hasXs2: false}).not.toHaveCssClass('xs-2');
 
-    expectNativeEl(fixture, { hasXs1: false, hasXs2: true }).toHaveCssClass('xs-2');
-    expectNativeEl(fixture, { hasXs1: false, hasXs2: true }).not.toHaveCssClass('xs-1');
+    expectNativeEl(fixture, {hasXs1: false, hasXs2: true}).toHaveCssClass('xs-2');
+    expectNativeEl(fixture, {hasXs1: false, hasXs2: true}).not.toHaveCssClass('xs-1');
   });
 
   it('should work with ngClass array notation', () => {
@@ -114,42 +113,6 @@ describe('class directive', () => {
   });
 });
 
-export class MockElementRef extends ElementRef {
-  constructor() {
-    const nEl = document.createElement('DIV');
-    super(nEl);
-    this.nativeElement = nEl;
-  }
-}
-
-describe('BaseFxDirectiveAdapter class', () => {
-  let component;
-  beforeEach(() => {
-    component = new BaseFxDirectiveAdapter(null, new MockElementRef(), null);
-  });
-  describe('cacheInput', () => {
-    it('should call _cacheInputArray when source is an array', () => {
-      spyOn(component, '_cacheInputArray');
-      component.cacheInput('key', []);
-      expect(component._cacheInputArray).toHaveBeenCalled();
-    });
-    it('should call _cacheInputObject when source is an object', () => {
-      spyOn(component, '_cacheInputObject');
-      component.cacheInput('key', {});
-      expect(component._cacheInputObject).toHaveBeenCalled();
-    });
-    it('should call _cacheInputString when source is a string', () => {
-      spyOn(component, '_cacheInputString');
-      component.cacheInput('key', '');
-      expect(component._cacheInputString).toHaveBeenCalled();
-    });
-    it('should throw when source is not an object, array or string', () => {
-      expect(component.cacheInput.bind(null, true)).toThrow();
-    });
-  });
-
-});
-
 // *****************************************************************
 // Template Component
 // *****************************************************************
@@ -162,7 +125,7 @@ export class TestClassComponent implements OnInit {
   hasXs1: boolean;
   hasXs2: boolean;
 
-  constructor( @Inject(ObservableMedia) private media) {
+  constructor(private media: ObservableMedia) {
   }
 
   ngOnInit() {

src/lib/flexbox/api/class.ts

@@ -17,16 +17,15 @@ import {
   IterableDiffers,
   KeyValueDiffers
 } from '@angular/core';
-import { NgClass } from '@angular/common';
+import {NgClass} from '@angular/common';
 
-import { BreakPointRegistry } from './../../media-query/breakpoints/break-point-registry';
-import { ResponsiveActivation } from './../responsive/responsive-activation';
-import { BaseFxDirective } from './base';
-import { MediaChange } from '../../media-query/media-change';
-import { MediaMonitor } from '../../media-query/media-monitor';
+import {BaseFxDirectiveAdapter} from './base-adapter';
+import {BreakPointRegistry} from './../../media-query/breakpoints/break-point-registry';
+import {MediaChange} from '../../media-query/media-change';
+import {MediaMonitor} from '../../media-query/media-monitor';
 
 /** NgClass allowed inputs **/
-export type NgClassType = string | string[] | Set<string> | { [klass: string]: any };
+export type NgClassType = string | string[] | Set<string> | {[klass: string]: any};
 
 /**
  * Directive to add responsive support for ngClass.
@@ -91,15 +90,11 @@ export class ClassDirective extends NgClass implements OnInit, OnChanges, OnDest
     this._base.cacheInput('classXl', val);
   };
 
-  private _base: BaseFxDirectiveAdapter;
-
   constructor(private monitor: MediaMonitor,
-    private _bpRegistry: BreakPointRegistry,
-    _iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers,
-    _ngEl: ElementRef, _renderer: Renderer) {
-
+              private _bpRegistry: BreakPointRegistry,
+              _iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers,
+              _ngEl: ElementRef, _renderer: Renderer) {
     super(_iterableDiffers, _keyValueDiffers, _ngEl, _renderer);
-
     this._base = new BaseFxDirectiveAdapter(monitor, _ngEl, _renderer);
   }
 
@@ -133,85 +128,14 @@ export class ClassDirective extends NgClass implements OnInit, OnChanges, OnDest
     if (this._base.mqActivation) {
       clazz = this._base.mqActivation.activatedInput;
     }
-
+    // Delegate subsequent activity to the NgClass logic
     this.ngClass = clazz;
   }
-}
-
-/**
- * Adapted BaseFxDirective abtract class version so it can be used via composition.
- *
- * @see BaseFxDirective
- */
-import { MediaQuerySubscriber } from '../../media-query/media-change';
-
-export class BaseFxDirectiveAdapter extends BaseFxDirective {
-  get inputMap() {
-    return this._inputMap;
-  }
-
-  /**
-   *  Save the property value.
-   */
-  cacheInput(key?: string, source?: any) {
-    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');
-    }
-  }
-
-  /**
-   *  Save the property value for Array values.
-   */
-  _cacheInputArray(key?: string, source?: boolean[]) {
-    this._inputMap[key] = source.join(' ');
-  }
 
   /**
-   *  Save the property value for key/value pair values.
+   * Special adapter to cross-cut responsive behaviors
+   * into the ClassDirective
    */
-  _cacheInputObject(key?: string, source?: { [key: string]: boolean }) {
-    let classes = [];
-    for (let prop in source) {
-      if (!!source[prop]) {
-        classes.push(prop);
-      }
-    }
-    this._inputMap[key] = classes.join(' ');
-  }
-
-  /**
-   *  Save the property value for string values.
-   */
-  _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;
-  }
+  private _base: BaseFxDirectiveAdapter;
 }
+