Address PR comments

angular · Feb 15, 2018 · 5d67fc1 · 5d67fc1
1 parent 4d9e74f
commit 5d67fc1
Show file tree

Hide file tree

Showing 40 changed files with 385 additions and 248 deletions.
diff --git a/src/lib/api/core/base-adapter.spec.ts b/src/lib/api/core/base-adapter.spec.ts
@@ -9,12 +9,12 @@ import {ElementRef} from '@angular/core';
 import {BaseFxDirectiveAdapter} from './base-adapter';
 import {expect} from '../../utils/testing/custom-matchers';
 import {MediaMonitor} from '../../media-query/media-monitor';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 describe('BaseFxDirectiveAdapter class', () => {
   let component;
   beforeEach(() => {
-    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, {} as ElementRef, {} as StyleService); // tslint:disable-line:max-line-length
+    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, {} as ElementRef, {} as StyleUtils); // tslint:disable-line:max-line-length
   });
   describe('cacheInput', () => {
     it('should call _cacheInputArray when source is an array', () => {

diff --git a/src/lib/api/core/base-adapter.ts b/src/lib/api/core/base-adapter.ts
@@ -11,7 +11,7 @@ import {BaseFxDirective} from './base';
 import {ResponsiveActivation} from './responsive-activation';
 import {MediaQuerySubscriber} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 
 /**
@@ -49,7 +49,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
   constructor(protected _baseKey: string,   // non-responsive @Input property name
               protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _styler: StyleService) {
+              protected _styler: StyleUtils) {
     super(_mediaMonitor, _elementRef, _styler);
   }
 

diff --git a/src/lib/api/core/base.ts b/src/lib/api/core/base.ts
@@ -16,8 +16,8 @@ import {
 import {buildLayoutCSS} from '../../utils/layout-validator';
 import {
   StyleDefinition,
-  StyleService,
-} from '../../utils/styling/styler';
+  StyleUtils,
+} from '../../utils/styling/style-utils';
 
 import {ResponsiveActivation, KeyOptions} from '../core/responsive-activation';
 import {MediaMonitor} from '../../media-query/media-monitor';
@@ -63,7 +63,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   constructor(protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _styler: StyleService) {
+              protected _styler: StyleUtils) {
   }
 
   // *********************************************

diff --git a/src/lib/api/ext/class.spec.ts b/src/lib/api/ext/class.spec.ts
@@ -22,7 +22,7 @@ import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-regi
 import {ClassDirective} from './class';
 import {MediaQueriesModule} from '../../media-query/_module';
 import {ServerStylesheet} from '../../utils/styling/server-stylesheet';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 describe('class directive', () => {
   let fixture: ComponentFixture<any>;
@@ -52,7 +52,7 @@ describe('class directive', () => {
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
         {provide: MatchMedia, useClass: MockMatchMedia},
         ServerStylesheet,
-        StyleService,
+        StyleUtils,
       ]
     });
   });

diff --git a/src/lib/api/ext/class.ts b/src/lib/api/ext/class.ts
@@ -27,7 +27,7 @@ import {BaseFxDirectiveAdapter} from '../core/base-adapter';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {RendererAdapter} from '../core/renderer-adapter';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 /** NgClass allowed inputs **/
 export type NgClassType = string | string[] | Set<string> | {[klass: string]: any};
@@ -94,7 +94,7 @@ export class ClassDirective extends BaseFxDirective
               protected _ngEl: ElementRef,
               protected _renderer: Renderer2,
               @Optional() @Self() private _ngClassInstance: NgClass,
-              protected _styler: StyleService) {
+              protected _styler: StyleUtils) {
     super(monitor, _ngEl, _styler);
     this._configureAdapters();
   }

diff --git a/src/lib/api/ext/hide.spec.ts b/src/lib/api/ext/hide.spec.ts
@@ -23,19 +23,19 @@ import {ShowHideDirective} from './show-hide';
 import {MediaQueriesModule} from '../../media-query/_module';
 
 import {ServerStylesheet} from '../../utils/styling/server-stylesheet';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 import {SERVER_TOKEN} from '../../utils/styling/server-token';
 
 describe('hide directive', () => {
   let fixture: ComponentFixture<any>;
   let matchMedia: MockMatchMedia;
-  let styler: StyleService;
+  let styler: StyleUtils;
   let platformId: Object;
   let createTestComponent = (template: string) => {
     fixture = makeCreateTestComponent(() => TestHideComponent)(template);
 
-    inject([MatchMedia, StyleService, PLATFORM_ID],
-      (_matchMedia: MockMatchMedia, _styler: StyleService, _platformId: Object) => {
+    inject([MatchMedia, StyleUtils, PLATFORM_ID],
+      (_matchMedia: MockMatchMedia, _styler: StyleUtils, _platformId: Object) => {
       matchMedia = _matchMedia;
       styler = _styler;
       platformId = _platformId;
@@ -69,7 +69,7 @@ describe('hide directive', () => {
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
         {provide: MatchMedia, useClass: MockMatchMedia},
         ServerStylesheet,
-        StyleService,
+        StyleUtils,
         {provide: SERVER_TOKEN, useValue: true},
       ]
     });

diff --git a/src/lib/api/ext/img-src.spec.ts b/src/lib/api/ext/img-src.spec.ts
@@ -20,7 +20,7 @@ import {expectEl, makeCreateTestComponent, queryFor} from '../../utils/testing/h
 import {expect} from '../../utils/testing/custom-matchers';
 import {_dom as _} from '../../utils/testing/dom-tools';
 import {SERVER_TOKEN} from '../../utils/styling/server-token';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 const SRC_URLS = {
   'xs': [
@@ -54,13 +54,13 @@ describe('img-src directive', () => {
   let fixture: ComponentFixture<any>;
   let matchMedia: MockMatchMedia;
   let platformId: Object;
-  let styler: StyleService;
+  let styler: StyleUtils;
 
   let componentWithTemplate = (template: string) => {
     fixture = makeCreateTestComponent(() => TestSrcComponent)(template);
 
-    inject([MatchMedia, PLATFORM_ID, StyleService],
-        (_matchMedia: MockMatchMedia, _platformId: Object, _styler: StyleService) => {
+    inject([MatchMedia, PLATFORM_ID, StyleUtils],
+        (_matchMedia: MockMatchMedia, _platformId: Object, _styler: StyleUtils) => {
           matchMedia = _matchMedia;
           platformId = _platformId;
           styler = _styler;

diff --git a/src/lib/api/ext/img-src.ts b/src/lib/api/ext/img-src.ts
@@ -19,7 +19,7 @@ import {isPlatformServer} from '@angular/common';
 
 import {BaseFxDirective} from '../core/base';
 import {MediaMonitor} from '../../media-query/media-monitor';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 import {SERVER_TOKEN} from '../../utils/styling/server-token';
 
 /**
@@ -62,7 +62,7 @@ export class ImgSrcDirective extends BaseFxDirective implements OnInit, OnChange
 
   constructor(protected _elRef: ElementRef,
               protected _monitor: MediaMonitor,
-              protected _styler: StyleService,
+              protected _styler: StyleUtils,
               @Inject(PLATFORM_ID) protected _platformId: Object,
               @Optional() @Inject(SERVER_TOKEN) protected _serverModuleLoaded: boolean) {
     super(_monitor, _elRef, _styler);
@@ -108,7 +108,7 @@ export class ImgSrcDirective extends BaseFxDirective implements OnInit, OnChange
     if (this.hasResponsiveKeys) {
       let url = this.activatedValue || this.defaultSrc;
       if (isPlatformServer(this._platformId) && this._serverModuleLoaded) {
-        this._styler.applyStyleToElement(this.nativeElement, 'content', url ? `url(${url})` : '');
+        this._styler.applyStyleToElement(this.nativeElement, {'content': url ? `url(${url})` : ''});
       } else {
         this.nativeElement.setAttribute('src', String(url));
       }

diff --git a/src/lib/api/ext/show-hide.ts b/src/lib/api/ext/show-hide.ts
@@ -25,7 +25,7 @@ import {BaseFxDirective} from '../core/base';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {LayoutDirective} from '../flexbox/layout';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 import {SERVER_TOKEN} from '../../utils/styling/server-token';
 
 const FALSY = ['false', false, 0];
@@ -107,7 +107,7 @@ export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChan
   constructor(monitor: MediaMonitor,
               @Optional() @Self() protected layout: LayoutDirective,
               protected elRef: ElementRef,
-              protected styleUtils: StyleService,
+              protected styleUtils: StyleUtils,
               @Inject(PLATFORM_ID) protected platformId: Object,
               @Optional() @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {
 

diff --git a/src/lib/api/ext/show.spec.ts b/src/lib/api/ext/show.spec.ts
@@ -19,19 +19,19 @@ import {FlexLayoutModule} from '../../module';
 import {customMatchers} from '../../utils/testing/custom-matchers';
 import {makeCreateTestComponent, expectNativeEl} from '../../utils/testing/helpers';
 import {ServerStylesheet} from '../../utils/styling/server-stylesheet';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 import {SERVER_TOKEN} from '../../utils/styling/server-token';
 
 describe('show directive', () => {
   let fixture: ComponentFixture<any>;
   let matchMedia: MockMatchMedia;
-  let styler: StyleService;
+  let styler: StyleUtils;
   let platformId: Object;
   let createTestComponent = (template) => {
     fixture = makeCreateTestComponent(() => TestShowComponent)(template);
 
-    inject([MatchMedia, StyleService, PLATFORM_ID],
-      (_matchMedia: MockMatchMedia, _styler: StyleService, _platformId: Object) => {
+    inject([MatchMedia, StyleUtils, PLATFORM_ID],
+      (_matchMedia: MockMatchMedia, _styler: StyleUtils, _platformId: Object) => {
       matchMedia = _matchMedia;
       styler = _styler;
       platformId = _platformId;
@@ -49,7 +49,7 @@ describe('show directive', () => {
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
         {provide: MatchMedia, useClass: MockMatchMedia},
         ServerStylesheet,
-        StyleService,
+        StyleUtils,
         {provide: SERVER_TOKEN, useValue: true}
       ]
     });

diff --git a/src/lib/api/ext/style.spec.ts b/src/lib/api/ext/style.spec.ts
@@ -23,16 +23,16 @@ import {
   makeCreateTestComponent, expectNativeEl
 } from '../../utils/testing/helpers';
 import {ServerStylesheet} from '../../utils/styling/server-stylesheet';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 describe('style directive', () => {
   let fixture: ComponentFixture<any>;
   let matchMedia: MockMatchMedia;
-  let styler: StyleService;
+  let styler: StyleUtils;
   let createTestComponent = (template) => {
     fixture = makeCreateTestComponent(() => TestStyleComponent)(template);
 
-    inject([MatchMedia, StyleService], (_matchMedia: MockMatchMedia, _styler: StyleService) => {
+    inject([MatchMedia, StyleUtils], (_matchMedia: MockMatchMedia, _styler: StyleUtils) => {
       matchMedia = _matchMedia;
       styler = _styler;
     })();
@@ -49,7 +49,7 @@ describe('style directive', () => {
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
         {provide: MatchMedia, useClass: MockMatchMedia},
         ServerStylesheet,
-        StyleService,
+        StyleUtils,
       ]
     });
   });

diff --git a/src/lib/api/ext/style.ts b/src/lib/api/ext/style.ts
@@ -36,7 +36,7 @@ import {
   ngStyleUtils as _
 } from '../../utils/styling/style-transforms';
 import {RendererAdapter} from '../core/renderer-adapter';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 
 /**
@@ -92,7 +92,7 @@ export class StyleDirective extends BaseFxDirective
               protected _renderer: Renderer2,
               protected _differs: KeyValueDiffers,
               @Optional() @Self() private _ngStyleInstance: NgStyle,
-              protected _styler: StyleService) {
+              protected _styler: StyleUtils) {
 
     super(monitor, _ngEl, _styler);
     this._configureAdapters();

diff --git a/src/lib/api/flexbox/flex-align.ts b/src/lib/api/flexbox/flex-align.ts
@@ -18,7 +18,7 @@ import {
 import {BaseFxDirective} from '../core/base';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 /**
  * 'flex-align' flexbox styling directive
@@ -56,7 +56,7 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha
   /* tslint:enable */
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
-              styleUtils: StyleService) {
+              styleUtils: StyleUtils) {
     super(monitor, elRef, styleUtils);
   }
 

diff --git a/src/lib/api/flexbox/flex-fill.ts b/src/lib/api/flexbox/flex-fill.ts
@@ -9,7 +9,7 @@ import {Directive, ElementRef} from '@angular/core';
 
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {BaseFxDirective} from '../core/base';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 const FLEX_FILL_CSS = {
   'margin': 0,
@@ -32,7 +32,7 @@ const FLEX_FILL_CSS = {
 export class FlexFillDirective extends BaseFxDirective {
   constructor(monitor: MediaMonitor,
               public elRef: ElementRef,
-              styleUtils: StyleService) {
+              styleUtils: StyleUtils) {
     super(monitor, elRef, styleUtils);
     this._applyStyleToElement(FLEX_FILL_CSS);
   }

diff --git a/src/lib/api/flexbox/flex-offset.spec.ts b/src/lib/api/flexbox/flex-offset.spec.ts
@@ -25,20 +25,20 @@ import {
   expectEl,
   expectNativeEl,
 } from '../../utils/testing/helpers';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 import {SERVER_TOKEN} from '../../utils/styling/server-token';
 
 describe('flex-offset directive', () => {
   let fixture: ComponentFixture<any>;
   let fakeDocument: {body: {dir?: string}, documentElement: {dir?: string}};
-  let styler: StyleService;
+  let styler: StyleUtils;
   let platform: Platform;
   let platformId: Object;
   let componentWithTemplate = (template: string) => {
     fixture = makeCreateTestComponent(() => TestFlexComponent)(template);
 
-    inject([StyleService, Platform, PLATFORM_ID],
-      (_styler: StyleService, _platform: Platform, _platformId: Object) => {
+    inject([StyleUtils, Platform, PLATFORM_ID],
+      (_styler: StyleUtils, _platform: Platform, _platformId: Object) => {
       styler = _styler;
       platform = _platform;
       platformId = _platformId;
@@ -57,7 +57,7 @@ describe('flex-offset directive', () => {
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
         {provide: MatchMedia, useClass: MockMatchMedia},
         {provide: DIR_DOCUMENT, useValue: fakeDocument},
-        StyleService,
+        StyleUtils,
         {provide: SERVER_TOKEN, useValue: true}
       ]
     });

diff --git a/src/lib/api/flexbox/flex-offset.ts b/src/lib/api/flexbox/flex-offset.ts
@@ -25,7 +25,7 @@ import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {LayoutDirective} from './layout';
 import {isFlowHorizontal} from '../../utils/layout-validator';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 /**
  * 'flex-offset' flexbox styling directive
@@ -63,7 +63,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
               elRef: ElementRef,
               @Optional() @SkipSelf() protected _container: LayoutDirective,
               private _directionality: Directionality,
-              styleUtils: StyleService) {
+              styleUtils: StyleUtils) {
     super(monitor, elRef, styleUtils);
 
     this._directionWatcher =

diff --git a/src/lib/api/flexbox/flex-order.ts b/src/lib/api/flexbox/flex-order.ts
@@ -18,7 +18,7 @@ import {
 import {BaseFxDirective} from '../core/base';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
-import {StyleService} from '../../utils/styling/styler';
+import {StyleUtils} from '../../utils/styling/style-utils';
 
 /**
  * 'flex-order' flexbox styling directive
@@ -54,7 +54,7 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha
   /* tslint:enable */
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
-              styleUtils: StyleService) {
+              styleUtils: StyleUtils) {
     super(monitor, elRef, styleUtils);
   }