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

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.spec.ts

@@ -1,13 +1,13 @@
-import {async, TestBed, inject, ComponentFixture} from '@angular/core/testing';
+import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
 import {
- FormsModule,
- ReactiveFormsModule,
  FormControl,
- NgForm,
- Validators,
- FormGroupDirective,
  FormGroup,
+ FormGroupDirective,
+ FormsModule,
+ NgForm,
+ ReactiveFormsModule,
+ Validators
 } from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -18,52 +18,53 @@ import {PlatformModule} from '../core/platform/index';
 import {wrappedErrorMessage} from '../core/testing/wrapped-error-message';
 import {dispatchFakeEvent} from '../core/testing/dispatch-events';
 import {
+ MdInputContainerDuplicatedHintError,
  MdInputContainerMissingMdInputError,
- MdInputContainerPlaceholderConflictError,
- MdInputContainerDuplicatedHintError
+ MdInputContainerPlaceholderConflictError
 } from './input-container-errors';
 
 
 describe('MdInputContainer', function () {
  beforeEach(async(() => {
  TestBed.configureTestingModule({
  imports: [
- MdInputModule.forRoot(),
- PlatformModule.forRoot(),
  FormsModule,
+ MdInputModule,
+ NoopAnimationsModule,
+ PlatformModule,
  ReactiveFormsModule,
- NoopAnimationsModule
  ],
  declarations: [
- MdInputContainerPlaceholderRequiredTestComponent,
- MdInputContainerPlaceholderElementTestComponent,
- MdInputContainerPlaceholderAttrTestComponent,
+ MdInputContainerBaseTestController,
+ MdInputContainerDateTestController,
  MdInputContainerHintLabel2TestController,
  MdInputContainerHintLabelTestController,
- MdInputContainerInvalidTypeTestController,
- MdInputContainerInvalidPlaceholderTestController,
  MdInputContainerInvalidHint2TestController,
  MdInputContainerInvalidHintTestController,
-MdInputContainerBaseTestController,
-MdInputContainerWithId,
-MdInputContainerDateTestController,
-MdInputContainerTextTestController,
-MdInputContainerPasswordTestController,
+MdInputContainerInvalidPlaceholderTestController,
+MdInputContainerInvalidTypeTestController,
+MdInputContainerMissingMdInputTestController,
+MdInputContainerMultipleHintMixedTestController,
+MdInputContainerMultipleHintTestController,
  MdInputContainerNumberTestController,
- MdInputContainerZeroTestController,
- MdTextareaWithBindings,
+ MdInputContainerPasswordTestController,
+ MdInputContainerPlaceholderAttrTestComponent,
+ MdInputContainerPlaceholderElementTestComponent,
+ MdInputContainerPlaceholderRequiredTestComponent,
+ MdInputContainerTextTestController,
  MdInputContainerWithDisabled,
+ MdInputContainerWithDynamicPlaceholder,
+ MdInputContainerWithFormControl,
+ MdInputContainerWithFormErrorMessages,
+ MdInputContainerWithFormGroupErrorMessages,
+ MdInputContainerWithId,
+ MdInputContainerWithPrefixAndSuffix,
  MdInputContainerWithRequired,
+ MdInputContainerWithStaticPlaceholder,
  MdInputContainerWithType,
  MdInputContainerWithValueBinding,
- MdInputContainerWithFormControl,
- MdInputContainerWithStaticPlaceholder,
- MdInputContainerMissingMdInputTestController,
- MdInputContainerMultipleHintTestController,
- MdInputContainerMultipleHintMixedTestController,
- MdInputContainerWithDynamicPlaceholder,
- MdInputContainerWithFormErrorMessages,
- MdInputContainerWithFormGroupErrorMessages
+ MdInputContainerZeroTestController,
+ MdTextareaWithBindings,
  ],
  });
 
@@ -685,6 +686,29 @@ describe('MdInputContainer', function () {
 
  });
 
+ it('should not have prefix and suffix elements when none are specified', () => {
+ let fixture = TestBed.createComponent(MdInputContainerWithId);
+ fixture.detectChanges();
+
+ let prefixEl = fixture.debugElement.query(By.css('.mat-input-prefix'));
+ let suffixEl = fixture.debugElement.query(By.css('.mat-input-suffix'));
+
+ expect(prefixEl).toBeNull();
+ expect(suffixEl).toBeNull();
+ });
+
+ it('should add prefix and suffix elements when specified', () => {
+ let fixture = TestBed.createComponent(MdInputContainerWithPrefixAndSuffix);
+ fixture.detectChanges();
+
+ let prefixEl = fixture.debugElement.query(By.css('.mat-input-prefix'));
+ let suffixEl = fixture.debugElement.query(By.css('.mat-input-suffix'));
+
+ expect(prefixEl).not.toBeNull();
+ expect(suffixEl).not.toBeNull();
+ expect(prefixEl.nativeElement.innerText.trim()).toEqual('Prefix');
+ expect(suffixEl.nativeElement.innerText.trim()).toEqual('Suffix');
+ });
 });
 
 @Component({
@@ -927,7 +951,6 @@ class MdInputContainerWithFormErrorMessages {
  renderError = true;
 }
 
-
 @Component({
  template: `
  <form [formGroup]="formGroup" novalidate>
@@ -945,3 +968,14 @@ class MdInputContainerWithFormGroupErrorMessages {
  name: new FormControl('', Validators.required)
  });
 }
+
+@Component({
+ template: `
+ <md-input-container>
+ <div mdPrefix>Prefix</div>
+ <input mdInput>
+ <div mdSuffix>Suffix</div>
+ </md-input-container>
+ `
+})
+class MdInputContainerWithPrefixAndSuffix {}

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,