move input feature detection into service

Author: mmalerba

src/demo-app/platform/platform-demo.html

@@ -0,0 +1,12 @@
+<p>Is Android: {{ platform.ANDROID }}</p>
+<p>Is iOS: {{ platform.IOS }}</p>
+<p>Is Firefox: {{ platform.FIREFOX }}</p>
+<p>Is Blink: {{ platform.BLINK }}</p>
+<p>Is Webkit: {{ platform.WEBKIT }}</p>
+<p>Is Trident: {{ platform.TRIDENT }}</p>
+<p>Is Edge: {{ platform.EDGE }}</p>
+
+<p>
+  Supported input types:
+  <span *ngFor="let type of feature.supportedInputTypes">{{ type }}, </span>
+</p>

src/demo-app/platform/platform-demo.ts

@@ -1,17 +1,12 @@
 import {Component} from '@angular/core';
-import {MdPlatform} from '@angular/material';
+import {MdFeatureDetector, MdPlatform} from '@angular/material';
+
 
 @Component({
-  template: `
-    <p>Is Android: {{ platform.ANDROID }}</p>
-    <p>Is iOS: {{ platform.IOS }}</p>
-    <p>Is Firefox: {{ platform.FIREFOX }}</p>
-    <p>Is Blink: {{ platform.BLINK }}</p>
-    <p>Is Webkit: {{ platform.WEBKIT }}</p>
-    <p>Is Trident: {{ platform.TRIDENT }}</p>
-    <p>Is Edge: {{ platform.EDGE }}</p>
-  `
+  moduleId: module.id,
+  selector: 'platform-demo',
+  templateUrl: 'platform-demo.html',
 })
 export class PlatformDemo {
-  constructor(public platform: MdPlatform) {}
+  constructor(public feature: MdFeatureDetector, public platform: MdPlatform) {}
 }

src/lib/core/a11y/index.ts

@@ -3,12 +3,12 @@ import {FocusTrap} from './focus-trap';
 import {MdLiveAnnouncer} from './live-announcer';
 import {InteractivityChecker} from './interactivity-checker';
 import {CommonModule} from '@angular/common';
-import {PlatformModule} from '../platform/platform';
+import {MdPlatformModule} from '../platform/index';
 
 export const A11Y_PROVIDERS = [MdLiveAnnouncer, InteractivityChecker];
 
 @NgModule({
-  imports: [CommonModule, PlatformModule],
+  imports: [CommonModule, MdPlatformModule],
   declarations: [FocusTrap],
   exports: [FocusTrap],
 })

src/lib/core/core.ts

@@ -31,6 +31,7 @@ export * from './projection/projection';
 
 // Platform
 export * from './platform/platform';
+export * from './platform/feature-detector';
 
 // Overlay
 export {Overlay, OVERLAY_PROVIDERS} from './overlay/overlay';

src/lib/core/platform/feature-detector.ts

@@ -0,0 +1,41 @@
+import {Injectable} from '@angular/core';
+
+
+@Injectable()
+export class MdFeatureDetector {
+  /** @returns {Set<string>} the input types supported by this browser. */
+  get supportedInputTypes(): Set<string> {
+    if (!this._supportedInputTypes) {
+      let featureTestInput = document.createElement('input');
+      this._supportedInputTypes = new Set([
+        'button',
+        'checkbox',
+        'color',
+        'date',
+        'datetime-local',
+        'email',
+        'file',
+        'hidden',
+        'image',
+        'month',
+        'number',
+        'password',
+        'radio',
+        'range',
+        'reset',
+        'search',
+        'submit',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week',
+      ].filter(value => {
+        featureTestInput.setAttribute('type', value);
+        return featureTestInput.type === value;
+      }));
+    }
+    return this._supportedInputTypes;
+  }
+  private _supportedInputTypes: Set<string>;
+}

src/lib/core/platform/index.ts

@@ -0,0 +1,14 @@
+import {NgModule, ModuleWithProviders} from '@angular/core';
+import {MdPlatform} from './platform';
+import {MdFeatureDetector} from './feature-detector';
+
+
+@NgModule({})
+export class MdPlatformModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: MdPlatformModule,
+      providers: [MdFeatureDetector, MdPlatform],
+    };
+  }
+}

src/lib/core/platform/platform.ts

@@ -1,4 +1,4 @@
-import {Injectable, NgModule, ModuleWithProviders} from '@angular/core';
+import {Injectable} from '@angular/core';
 
 declare const window: any;
 
@@ -12,7 +12,6 @@ const hasV8BreakIterator = (window.Intl && (window.Intl as any).v8BreakIterator)
  */
 @Injectable()
 export class MdPlatform {
-
   /** Layout Engines */
   EDGE = /(edge)/i.test(navigator.userAgent);
   TRIDENT = /(msie|trident)/i.test(navigator.userAgent);
@@ -35,15 +34,4 @@ export class MdPlatform {
 
   // Trident on mobile adds the android platform to the userAgent to trick detections.
   ANDROID = /android/i.test(navigator.userAgent) && !this.TRIDENT;
-
-}
-
-@NgModule({})
-export class PlatformModule {
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: PlatformModule,
-      providers: [MdPlatform],
-    };
-  }
 }

src/lib/input/input-wrapper.spec.ts

@@ -1,18 +1,22 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {async, TestBed, ComponentFixture, inject} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {MdInputModule} from './input';
 import {MdInputWrapper} from './input-wrapper';
 import {MdPlatform} from '../core/platform/platform';
+import {MdPlatformModule} from '../core/platform/index';
 
 
 describe('MdInputWrapper', function () {
-  let platform: MdPlatform = new MdPlatform();
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdInputModule.forRoot(), FormsModule, ReactiveFormsModule],
+      imports: [
+        MdInputModule.forRoot(),
+        MdPlatformModule.forRoot(),
+        FormsModule,
+        ReactiveFormsModule
+      ],
       declarations: [
         MdInputWrapperPlaceholderRequiredTestComponent,
         MdInputWrapperPlaceholderElementTestComponent,
@@ -47,28 +51,30 @@ describe('MdInputWrapper', function () {
         .toBe(true, 'Expected MdInputWrapper to default to having floating placeholders turned on');
   });
 
-  it('should not be treated as empty if type is date', () => {
-    if (!(platform.TRIDENT || platform.FIREFOX)) {
-      let fixture = TestBed.createComponent(MdInputWrapperDateTestController);
-      fixture.detectChanges();
+  it('should not be treated as empty if type is date',
+      inject([MdPlatform], (platform: MdPlatform) => {
+        if (!(platform.TRIDENT || platform.FIREFOX)) {
+          let fixture = TestBed.createComponent(MdInputWrapperDateTestController);
+          fixture.detectChanges();
 
-      let el = fixture.debugElement.query(By.css('label')).nativeElement;
-      expect(el).not.toBeNull();
-      expect(el.classList.contains('md-empty')).toBe(false);
-    }
-  });
+          let el = fixture.debugElement.query(By.css('label')).nativeElement;
+          expect(el).not.toBeNull();
+          expect(el.classList.contains('md-empty')).toBe(false);
+        }
+      }));
 
   // Firefox and IE don't support type="date" and fallback to type="text".
-  it('should be treated as empty if type is date on Firefox and IE', () => {
-    if (platform.TRIDENT || platform.FIREFOX) {
-      let fixture = TestBed.createComponent(MdInputWrapperDateTestController);
-      fixture.detectChanges();
-
-      let el = fixture.debugElement.query(By.css('label')).nativeElement;
-      expect(el).not.toBeNull();
-      expect(el.classList.contains('md-empty')).toBe(true);
-    }
-  });
+  it('should be treated as empty if type is date on Firefox and IE',
+      inject([MdPlatform], (platform: MdPlatform) => {
+        if (platform.TRIDENT || platform.FIREFOX) {
+          let fixture = TestBed.createComponent(MdInputWrapperDateTestController);
+          fixture.detectChanges();
+
+          let el = fixture.debugElement.query(By.css('label')).nativeElement;
+          expect(el).not.toBeNull();
+          expect(el.classList.contains('md-empty')).toBe(true);
+        }
+      }));
 
   it('should treat text input type as empty at init', () => {
     let fixture = TestBed.createComponent(MdInputWrapperTextTestController);

src/lib/input/input-wrapper.ts

@@ -14,6 +14,7 @@ import {
 } from '@angular/core';
 import {MdError, coerceBooleanProperty} from '../core';
 import {NgModel} from '@angular/forms';
+import {MdFeatureDetector} from '../core/platform/feature-detector';
 
 
 // Invalid input type. Using one of these will throw an MdInputWrapperUnsupportedTypeError.
@@ -31,22 +32,6 @@ const MD_INPUT_INVALID_TYPES = [
 ];
 
 
-const MD_INPUT_NEVER_EMPTY_TYPES = (() => {
-  let featureTestInput = document.createElement('input');
-  return [
-    'date',
-    'datetime',
-    'datetime-local',
-    'month',
-    'time',
-    'week'
-  ].filter(value => {
-    featureTestInput.setAttribute('type', value);
-    return featureTestInput.type === value;
-  });
-})();
-
-
 let nextUniqueId = 0;
 
 
@@ -152,7 +137,18 @@ export class MdInputDirective implements AfterContentInit {
   private get _uid() { return this._cachedUid = this._cachedUid || `md-input-${nextUniqueId++}`; }
   private _cachedUid: string;
 
-  constructor(private _elementRef: ElementRef, @Optional() private _ngModel: NgModel) {
+  private _neverEmptyInputTypes = [
+    'date',
+    'datetime',
+    'datetime-local',
+    'month',
+    'time',
+    'week'
+  ].filter(t => this._featureDetector.supportedInputTypes.has(t));
+
+  constructor(private _featureDetector: MdFeatureDetector,
+              private _elementRef: ElementRef,
+              @Optional() private _ngModel: NgModel) {
     // Force setter to be called in case id was not specified.
     this.id = this.id;
 
@@ -177,7 +173,7 @@ export class MdInputDirective implements AfterContentInit {
     }
   }
 
-  private _isNeverEmpty() { return MD_INPUT_NEVER_EMPTY_TYPES.indexOf(this._type) != -1; }
+  private _isNeverEmpty() { return this._neverEmptyInputTypes.indexOf(this._type) != -1; }
 
   private _onFocus() { this.focused = true; }
 

src/lib/module.ts

@@ -32,7 +32,7 @@ import {MdToolbarModule} from './toolbar/index';
 import {MdTooltipModule} from './tooltip/index';
 import {MdMenuModule} from './menu/index';
 import {MdDialogModule} from './dialog/index';
-import {PlatformModule} from './core/platform/platform';
+import {MdPlatformModule} from './core/platform/index';
 
 
 const MATERIAL_MODULES = [
@@ -63,7 +63,7 @@ const MATERIAL_MODULES = [
   PortalModule,
   RtlModule,
   A11yModule,
-  PlatformModule,
+  MdPlatformModule,
   ProjectionModule,
   DefaultStyleCompatibilityModeModule,
 ];
@@ -99,7 +99,7 @@ const MATERIAL_MODULES = [
     MdSlideToggleModule.forRoot(),
     MdSnackBarModule.forRoot(),
     MdTooltipModule.forRoot(),
-    PlatformModule.forRoot(),
+    MdPlatformModule.forRoot(),
     OverlayModule.forRoot(),
     DefaultStyleCompatibilityModeModule.forRoot(),
   ],

src/lib/sidenav/sidenav.spec.ts

@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdSidenav, MdSidenavModule, MdSidenavToggleResult} from './sidenav';
 import {A11yModule} from '../core/a11y/index';
-import {PlatformModule} from '../core/platform/platform';
+import {MdPlatformModule} from '../core/platform/index';
 
 
 function endSidenavTransition(fixture: ComponentFixture<any>) {
@@ -19,7 +19,7 @@ function endSidenavTransition(fixture: ComponentFixture<any>) {
 describe('MdSidenav', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()],
+      imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), MdPlatformModule.forRoot()],
       declarations: [
         BasicTestApp,
         SidenavLayoutTwoSidenavTestApp,