fix(input): don't add empty prefix & suffix wrappers

Author: mmalerba

src/lib/input/index.ts

@@ -1,10 +1,12 @@
-import {NgModule, ModuleWithProviders} from '@angular/core';
+import {ModuleWithProviders, NgModule} from '@angular/core';
 import {
-  MdPlaceholder,
-  MdInputContainer,
+  MdErrorDirective,
   MdHint,
+  MdInputContainer,
   MdInputDirective,
-  MdErrorDirective,
+  MdPlaceholder,
+  MdPrefix,
+  MdSuffix
 } from './input-container';
 import {MdTextareaAutosize} from './autosize';
 import {CommonModule} from '@angular/common';
@@ -14,25 +16,29 @@ import {PlatformModule} from '../core/platform/index';
 
 @NgModule({
   declarations: [
-    MdPlaceholder,
-    MdInputContainer,
+    MdErrorDirective,
     MdHint,
-    MdTextareaAutosize,
+    MdInputContainer,
     MdInputDirective,
-    MdErrorDirective
+    MdPlaceholder,
+    MdPrefix,
+    MdSuffix,
+    MdTextareaAutosize,
   ],
   imports: [
     CommonModule,
     FormsModule,
     PlatformModule,
   ],
   exports: [
-    MdPlaceholder,
-    MdInputContainer,
+    MdErrorDirective,
     MdHint,
-    MdTextareaAutosize,
+    MdInputContainer,
     MdInputDirective,
-    MdErrorDirective
+    MdPlaceholder,
+    MdPrefix,
+    MdSuffix,
+    MdTextareaAutosize,
   ],
 })
 export class MdInputModule {

src/lib/input/input-container.html

@@ -1,6 +1,6 @@
 <div class="mat-input-wrapper">
   <div class="mat-input-table">
-    <div class="mat-input-prefix">
+    <div class="mat-input-prefix" *ngIf="_prefixChildren.length">
       <!-- TODO(andrewseguin): remove [md-prefix] -->
       <ng-content select="[mdPrefix], [matPrefix], [md-prefix]"></ng-content>
     </div>
@@ -23,7 +23,7 @@
       </span>
     </div>
 
-    <div class="mat-input-suffix">
+    <div class="mat-input-suffix" *ngIf="_suffixChildren.length">
       <!-- TODO(andrewseguin): remove [md-suffix] -->
       <ng-content select="[mdSuffix], [matSuffix], [md-suffix]"></ng-content>
     </div>

src/lib/input/input-container.ts

@@ -1,30 +1,24 @@
 import {
-  AfterViewInit,
   AfterContentInit,
+  AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ContentChild,
   ContentChildren,
   Directive,
   ElementRef,
+  EventEmitter,
   Input,
   Optional,
   Output,
-  EventEmitter,
+  QueryList,
   Renderer,
-  ChangeDetectorRef,
-  ViewEncapsulation,
   Self,
-  QueryList,
+  ViewEncapsulation
 } from '@angular/core';
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
+import {animate, state, style, transition, trigger} from '@angular/animations';
 import {coerceBooleanProperty} from '../core';
-import {NgControl, NgForm, FormGroupDirective} from '@angular/forms';
+import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {getSupportedInputTypes} from '../core/platform/features';
 import {
   MdInputContainerDuplicatedHintError,
@@ -90,6 +84,20 @@ export class MdHint {
 })
 export class MdErrorDirective { }
 
+/** The input prefix. */
+@Directive({
+  selector: '[mdPrefix], [matPrefix], [md-prefix]'
+})
+export class MdPrefix {}
+
+
+/** The input suffix. */
+@Directive({
+  selector: '[mdSuffix], [matSuffix], [md-suffix]'
+})
+export class MdSuffix {}
+
+
 /** The input directive, used to mark the input that `MdInputContainer` is wrapping. */
 @Directive({
   selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`,
@@ -327,6 +335,10 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit {
 
   @ContentChildren(MdHint) _hintChildren: QueryList<MdHint>;
 
+  @ContentChildren(MdPrefix) _prefixChildren: QueryList<MdPrefix>;
+
+  @ContentChildren(MdSuffix) _suffixChildren: QueryList<MdSuffix>;
+
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     @Optional() private _parentForm: NgForm,