comments, round 1

Author: hansl

src/demo-app/input/input-demo.html

@@ -12,7 +12,7 @@
       </tr></table>
       <p>
         <textarea md-textarea class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
-        <textarea md-textarea class="demo-full-width" placeholder="Address 2"></textarea>
+        <textarea md-textarea md-autosize class="demo-full-width" placeholder="Address 2"></textarea>
       </p>
     </form>
   </md-card-content>

src/lib/input/autosize.spec.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {MdInputModule} from './input';
+import {MdInputModule} from './index';
 import {MdTextareaAutosize} from './autosize';
 
 

src/lib/input/index.ts

@@ -3,6 +3,7 @@ import {ModuleWithProviders, NgModule} from '@angular/core';
 
 import {ProjectionModule, PortalModule} from '../core';
 
+import {MdTextareaAutosize} from './autosize';
 import {MdInput} from './input';
 import {MdPlaceholder, MdPlaceholderContent} from './placeholder';
 
@@ -12,9 +13,9 @@ export * from './placeholder';
 
 
 @NgModule({
-  declarations: [MdPlaceholderContent, MdPlaceholder, MdInput],
+  declarations: [MdPlaceholderContent, MdPlaceholder, MdInput, MdTextareaAutosize],
   imports: [PortalModule, ProjectionModule, CommonModule],
-  exports: [MdPlaceholder, MdInput],
+  exports: [MdPlaceholder, MdInput, MdTextareaAutosize],
   entryComponents: [MdPlaceholderContent]
 })
 export class MdInputModule {

src/lib/input/input.html

@@ -1,8 +1,8 @@
 <div (click)="focus()"
-     [class]="_cssClass"
+     class="md-input-wrapper"
+     [ngClass]="_cssClass"
      [attr.style]="_safeCssStyle"
-     [class.md-end]="align == 'end'"
-     [class.md-input-wrapper]="true">
+     [class.md-end]="align == 'end'">
   <div class="md-input-table">
     <div class="md-input-prefix"><template [ngTemplateOutlet]="_prefixTemplate()"></template></div>
     <template #prefix>{{mdPrefix}}</template>

src/lib/input/input.scss

@@ -57,7 +57,7 @@ $md-input-underline-disabled-background-image:
 }
 
 // The Input element proper.
-input[md-input], textarea[md-textarea] {
+.md-input-element {
   // Font needs to be inherited, because by default <input> has a system font.
   font: inherit;
 

src/lib/input/input.spec.ts

@@ -55,7 +55,8 @@ describe('MdInput', function () {
     fixture.detectChanges();
 
     let el = fixture.debugElement.query(By.directive(MdInput)).nativeElement;
-    expect(el.getAttribute('class')).toBeNull();
+    // We set the input element's class.
+    expect(el.getAttribute('class')).toBe('md-input-element');
     expect(el.getAttribute('style')).toBeNull();
   }));
 

src/lib/input/input.ts

@@ -1,13 +1,14 @@
 import {
   Component,
+  ElementRef,
   HostBinding,
+  HostListener,
   Input,
-  ViewChild,
-  ElementRef,
   OnInit,
+  TemplateRef,
+  ViewChild,
   ViewEncapsulation,
-  HostListener,
-  TemplateRef, forwardRef,
+  forwardRef,
 } from '@angular/core';
 import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
 import {
@@ -16,8 +17,7 @@ import {
   MdError,
   coerceBooleanProperty
 } from '../core';
-import {MdTextareaAutosize} from './autosize';
-import {MD_PLACEHOLDER_HOST_TOKEN, MdPlaceholderHost} from './placeholder';
+import {MD_PLACEHOLDER_HOST, MdPlaceholderHost} from './placeholder';
 import {PortalHost} from '../core/portal/portal';
 import {PortalHostDirective} from '../core/portal/portal-directives';
 
@@ -47,7 +47,7 @@ const MD_INPUT_INVALID_INPUT_TYPE = [
   styleUrls: ['input.css'],
   encapsulation: ViewEncapsulation.None,
   providers: [
-    { provide: MD_PLACEHOLDER_HOST_TOKEN, useExisting: forwardRef(() => MdInput) }
+    { provide: MD_PLACEHOLDER_HOST, useExisting: forwardRef(() => MdInput) }
   ],
   host: {
     // This is to remove the properties of the `input md-input` itself. We still want to use them
@@ -70,7 +70,7 @@ export class MdInput implements OnInit, MdPlaceholderHost {
   get _safeCssStyle(): SafeStyle {
     return this._dom.bypassSecurityTrustStyle(this._cssStyle || '');
   }
-  @HostBinding('attr.class') get _attrClass(): any { return null; }
+  @HostBinding('attr.class') get _attrClass(): any { return 'md-input-element'; }
   @HostBinding('attr.style') get _attrStyle(): any { return null; }
 
   @Input('type') _type: string;
@@ -138,18 +138,3 @@ export class MdInput implements OnInit, MdPlaceholderHost {
     this._ref.nativeElement.focus();
   }
 }
-
-
-@NgModule({
-  declarations: [MdPlaceholder, MdInput, MdHint, MdTextareaAutosize],
-  imports: [CommonModule, FormsModule],
-  exports: [MdPlaceholder, MdInput, MdHint, MdTextareaAutosize],
-})
-export class MdInputModule {
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: MdInputModule,
-      providers: []
-    };
-  }
-}

src/lib/input/placeholder.html

@@ -4,9 +4,9 @@
        [class.md-focused]="placeholder?._focused"
        [class.md-float]="placeholder?._floatingPlaceholder"
        [class.md-accent]="placeholder?.dividerColor == 'accent'"
-       [class.md-warn]="placeholder?.dividerColor == 'warn'">
-  <template [ngTemplateOutlet]="_template()"></template>
-  <span class="md-placeholder-required" *ngIf="placeholder?._required">*</span>
-</label>
+       [class.md-warn]="placeholder?.dividerColor == 'warn'"
+  ><template [ngTemplateOutlet]="_template()"></template
+  ><span class="md-placeholder-required" *ngIf="placeholder?._required"> *</span
+></label>
 
 <template #stringTemplate>{{content}}</template>

src/lib/input/placeholder.spec.ts

@@ -4,11 +4,10 @@ import {
 } from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {By} from '@angular/platform-browser';
 import {MdInputModule} from './index';
 import {ProjectionModule} from '../core/projection/projection';
 
-fdescribe('MdPlaceholder', function () {
+describe('MdPlaceholder', function () {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdInputModule.forRoot(), FormsModule, ProjectionModule.forRoot()],
@@ -29,11 +28,11 @@ fdescribe('MdPlaceholder', function () {
     let el: HTMLElement = fixture.nativeElement;
     let labelEl: HTMLLabelElement = el.querySelector('label');
     expect(labelEl).not.toBeNull();
-    expect(labelEl.innerText).toEqual('string placeholder');
+    expect(labelEl.textContent).toEqual('string placeholder');
 
     instance.required = true;
     fixture.detectChanges();
-    expect(labelEl.innerText).toEqual('string placeholder *');
+    expect(labelEl.textContent).toEqual('string placeholder *');
   });
 
   it('works with template placeholder', () => {
@@ -44,11 +43,13 @@ fdescribe('MdPlaceholder', function () {
     let el: HTMLElement = fixture.nativeElement;
     let labelEl: HTMLLabelElement = el.querySelector('label');
     expect(labelEl).not.toBeNull();
-    expect(labelEl.innerText).toEqual('template placeholder');
+    expect(labelEl.textContent).toEqual('template placeholder');
+    expect(labelEl.querySelector('b')).not.toBeNull();
+    expect(labelEl.querySelector('b').textContent).toEqual('placeholder');
 
     instance.required = true;
     fixture.detectChanges();
-    expect(labelEl.innerText).toEqual('template placeholder *');
+    expect(labelEl.textContent).toEqual('template placeholder *');
   });
 });
 
@@ -59,7 +60,7 @@ class MdPlaceholderStringTestController {
 
 @Component({template: `
   <input md-input [required]="required" [placeholder]="p">
-  <template #p>template placeholder</template>
+  <template #p>template <b>placeholder</b></template>
 `})
 class MdPlaceholderTemplateTestController {
   required: boolean = false;

src/lib/input/placeholder.ts

@@ -1,18 +1,31 @@
 import {
+  Component,
+  ComponentRef,
   Directive,
+  HostBinding,
+  HostListener,
   Inject,
   Input,
   OpaqueToken,
-  TemplateRef, Component, ViewContainerRef, ComponentRef, HostBinding, ViewChild, HostListener,
-  AfterContentInit, ReflectiveInjector, Injector,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
 } from '@angular/core';
 import {PortalHost} from '../core';
 import {ComponentPortal} from '../core/portal/portal';
 import {coerceBooleanProperty} from '../core/coersion/boolean-property';
 
 
-export const MD_PLACEHOLDER_HOST_TOKEN  = new OpaqueToken('mdPlaceholderHost');
+/**
+ * A token to provide the host interface that MdPlaceholder will use to inject itself in
+ * the View tree. If this token isn't on the host of the directive, an error will be thrown.
+ * @type {OpaqueToken}
+ */
+export const MD_PLACEHOLDER_HOST  = new OpaqueToken('mdPlaceholderHost');
 
+/**
+ * Interface for components that want to host an MdPlaceholder directive.
+ */
 export interface MdPlaceholderHost {
   placeholderPortalHost: PortalHost;
   readonly dividerColor: string;
@@ -68,7 +81,7 @@ export class MdPlaceholder  {
   _required: boolean = false;
   _floatingPlaceholder: boolean = true;
 
-  constructor(@Inject(MD_PLACEHOLDER_HOST_TOKEN) public _host: MdPlaceholderHost,
+  constructor(@Inject(MD_PLACEHOLDER_HOST) public _host: MdPlaceholderHost,
               private _vcr: ViewContainerRef) {}
 
   ngOnInit() {