diff --git a/src/lib/input/index.ts b/src/lib/input/index.ts index ddf62e0bc2bb..2ee2fae294cb 100644 --- a/src/lib/input/index.ts +++ b/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,12 +16,14 @@ import {PlatformModule} from '../core/platform/index'; @NgModule({ declarations: [ - MdPlaceholder, - MdInputContainer, + MdErrorDirective, MdHint, - MdTextareaAutosize, + MdInputContainer, MdInputDirective, - MdErrorDirective + MdPlaceholder, + MdPrefix, + MdSuffix, + MdTextareaAutosize, ], imports: [ CommonModule, @@ -27,12 +31,14 @@ import {PlatformModule} from '../core/platform/index'; PlatformModule, ], exports: [ - MdPlaceholder, - MdInputContainer, + MdErrorDirective, MdHint, - MdTextareaAutosize, + MdInputContainer, MdInputDirective, - MdErrorDirective + MdPlaceholder, + MdPrefix, + MdSuffix, + MdTextareaAutosize, ], }) export class MdInputModule { diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html index 33e4292f3c4f..56c748b33162 100644 --- a/src/lib/input/input-container.html +++ b/src/lib/input/input-container.html @@ -1,6 +1,6 @@
-
+
@@ -23,7 +23,7 @@
-
+
diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts index cfff09e68786..1953bd522e17 100644 --- a/src/lib/input/input-container.spec.ts +++ b/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,9 +18,9 @@ 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'; @@ -28,42 +28,43 @@ 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: `
@@ -945,3 +968,14 @@ class MdInputContainerWithFormGroupErrorMessages { name: new FormControl('', Validators.required) }); } + +@Component({ + template: ` + +
Prefix
+ +
Suffix
+
+ ` +}) +class MdInputContainerWithPrefixAndSuffix {} diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts index f1f564d2598f..cb290051aa35 100644 --- a/src/lib/input/input-container.ts +++ b/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; + @ContentChildren(MdPrefix) _prefixChildren: QueryList; + + @ContentChildren(MdSuffix) _suffixChildren: QueryList; + constructor( private _changeDetectorRef: ChangeDetectorRef, @Optional() private _parentForm: NgForm,