Skip to content

Commit ca2046b

Browse files
mmalerbammalerba
authored
feat(input): create md-input-container to eventually replace md-input (#2052)
* created md-input-wrapper and removed useless inputs * added demo * remove ControlValueAccessor and start migrating input * finished converting most input attrs * typescript fixed, css needs work * removed duplicate directives. * fix scss * set up demo area * Fix disabled state * fixed some small bugs and converted more of demo * demo card #1 converted * finished converting demo * subscribe to ngModel changes * updated other demos to use new input * undo accidental changes to other inputs * working through tests * fixed all tests * fixed lint issues * fix firefox type=date issue * try removing ie11 checks, see if we need them * added md-input back to baseline demo * started md-input directive * more refactoring * fixed demos, tests still broken * remove useless imports * fix tests * fix tests for ff & ie * move input feature detection into service * addressed some comments * s/input-wrapper/input-container * s/NgModel/NgControl * remove FeatureDetector * s/MdPlatformModule/PlatformModule * Remove some problematic privates and add mat- versions of everything * fix import
1 parent 7b3a059 commit ca2046b

27 files changed

+1215
-79
lines changed

‎src/demo-app/baseline/baseline-demo.html

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@
1010
| Text 3 |
1111
<md-radio-button value="option_3">Radio 3</md-radio-button>
1212
| Text 4 |
13-
<md-input>Label</md-input>
13+
<md-input placeholder="Input"></md-input>
14+
| Text 5 |
15+
<md-input-container>
16+
<input md-input placeholder="Input">
17+
</md-input-container>
1418
| Text After
1519
</md-card-content>
1620
</md-card>
@@ -28,7 +32,11 @@ <h1>
2832
| Text 3 |
2933
<md-radio-button value="option_3">Radio 3</md-radio-button>
3034
| Text 4 |
31-
<md-input>Label</md-input>
35+
<md-input placeholder="Input"></md-input>
36+
| Text 5 |
37+
<md-input-container>
38+
<input md-input placeholder="Input">
39+
</md-input-container>
3240
| Text After
3341
</h1>
3442
</md-card-content>

‎src/demo-app/demo-app-module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tab
3737
import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-demo';
3838
import {PlatformDemo} from './platform/platform-demo';
3939
import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
40+
import {InputContainerDemo} from './input/input-container-demo';
4041

4142
@NgModule({
4243
imports: [
@@ -62,6 +63,7 @@ import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
6263
Home,
6364
IconDemo,
6465
InputDemo,
66+
InputContainerDemo,
6567
JazzDialog,
6668
ListDemo,
6769
LiveAnnouncerDemo,

‎src/demo-app/demo-app/demo-app.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export class DemoApp {
3131
{name: 'Grid List', route: 'grid-list'},
3232
{name: 'Icon', route: 'icon'},
3333
{name: 'Input', route: 'input'},
34+
{name: 'Input Container', route: 'input-container'},
3435
{name: 'List', route: 'list'},
3536
{name: 'Menu', route: 'menu'},
3637
{name: 'Live Announcer', route: 'live-announcer'},

‎src/demo-app/demo-app/routes.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {ProjectionDemo} from '../projection/projection-demo';
3232
import {TABS_DEMO_ROUTES} from '../tabs/routes';
3333
import {PlatformDemo} from '../platform/platform-demo';
3434
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
35+
import {InputContainerDemo} from '../input/input-container-demo';
3536

3637
export const DEMO_APP_ROUTES: Routes = [
3738
{path: '', component: Home},
@@ -51,6 +52,7 @@ export const DEMO_APP_ROUTES: Routes = [
5152
{path: 'overlay', component: OverlayDemo},
5253
{path: 'checkbox', component: CheckboxDemo},
5354
{path: 'input', component: InputDemo},
55+
{path: 'input-container', component: InputContainerDemo},
5456
{path: 'toolbar', component: ToolbarDemo},
5557
{path: 'icon', component: IconDemo},
5658
{path: 'list', component: ListDemo},

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

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<md-card class="demo-card demo-basic">
2+
<md-toolbar color="primary">Basic</md-toolbar>
3+
<md-card-content>
4+
<form>
5+
<md-input-container class="demo-full-width">
6+
<input md-input placeholder="Company (disabled)" disabled value="Google">
7+
</md-input-container>
8+
9+
<table style="width: 100%" cellspacing="0"><tr>
10+
<td>
11+
<md-input-container style="width: 100%">
12+
<input md-input placeholder="First name">
13+
</md-input-container>
14+
</td>
15+
<td>
16+
<md-input-container style="width: 100%">
17+
<input md-input placeholder="Long Last Name That Will Be Truncated">
18+
</md-input-container>
19+
</td>
20+
</tr></table>
21+
<p>
22+
<md-input-container class="demo-full-width">
23+
<textarea md-input placeholder="Address">1600 Amphitheatre Pkway</textarea>
24+
</md-input-container>
25+
<md-input-container class="demo-full-width">
26+
<textarea md-input placeholder="Address 2"></textarea>
27+
</md-input-container>
28+
</p>
29+
<table style="width: 100%" cellspacing="0"><tr>
30+
<td>
31+
<md-input-container class="demo-full-width">
32+
<input md-input placeholder="City" value="Mountain View">
33+
</md-input-container>
34+
</td>
35+
<td>
36+
<md-input-container class="demo-full-width">
37+
<input md-input placeholder="State" maxLength="2" value="CA">
38+
</md-input-container>
39+
</td>
40+
<td>
41+
<md-input-container class="demo-full-width">
42+
<input md-input #postalCode maxLength="5" placeholder="Postal Code" value="94043">
43+
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
44+
</md-input-container>
45+
</td>
46+
</tr></table>
47+
</form>
48+
</md-card-content>
49+
</md-card>
50+
51+
<md-card class="demo-card demo-basic">
52+
<md-toolbar color="primary">Prefix + Suffix</md-toolbar>
53+
<md-card-content>
54+
<md-input-container align="end">
55+
<input md-input placeholder="amount">
56+
<span md-prefix>$&nbsp;</span>
57+
<span md-suffix>.00</span>
58+
</md-input-container>
59+
</md-card-content>
60+
</md-card>
61+
62+
<md-card class="demo-card demo-basic">
63+
<md-toolbar color="primary">Divider Colors</md-toolbar>
64+
<md-card-content>
65+
<h4>Input</h4>
66+
<md-input-container dividerColor="primary" >
67+
<input md-input placeholder="Default Color" value="example">
68+
</md-input-container>
69+
<md-input-container dividerColor="accent">
70+
<input md-input placeholder="Accent Color" value="example">
71+
</md-input-container>
72+
<md-input-container dividerColor="warn">
73+
<input md-input placeholder="Warn Color" value="example">
74+
</md-input-container>
75+
76+
<h4>Textarea</h4>
77+
<md-input-container dividerColor="primary">
78+
<textarea md-input placeholder="Default Color">example</textarea>
79+
</md-input-container>
80+
<md-input-container dividerColor="accent">
81+
<textarea md-input placeholder="Accent Color">example</textarea>
82+
</md-input-container>
83+
<md-input-container dividerColor="warn">
84+
<textarea md-input placeholder="Warn Color">example</textarea>
85+
</md-input-container>
86+
</md-card-content>
87+
</md-card>
88+
89+
<md-card class="demo-card demo-basic">
90+
<md-toolbar color="primary">Hints</md-toolbar>
91+
<md-card-content>
92+
<h4>Input</h4>
93+
<p>
94+
<md-input-container class="demo-full-width">
95+
<input md-input
96+
#characterCountInputHintExample
97+
placeholder="Character count (100 max)"
98+
maxLength="100"
99+
value="Hello world. How are you?">
100+
<md-hint align="end">{{characterCountInputHintExample.value.length}} / 100</md-hint>
101+
</md-input-container>
102+
</p>
103+
104+
<h4>Textarea</h4>
105+
<p>
106+
<md-input-container class="demo-full-width">
107+
<textarea md-input
108+
#characterCountTextareaHintExample
109+
placeholder="Character count (100 max)"
110+
maxLength="100">Hello world. How are you?</textarea>
111+
<md-hint align="end">{{characterCountTextareaHintExample.value.length}} / 100</md-hint>
112+
</md-input-container>
113+
</p>
114+
</md-card-content>
115+
</md-card>
116+
117+
<md-card class="demo-card demo-basic">
118+
<md-toolbar color="primary">
119+
Hello&nbsp;
120+
<md-input-container dividerColor="accent">
121+
<input md-input [(ngModel)]="name" type="text" placeholder="First name">
122+
</md-input-container>,
123+
how are you?
124+
</md-toolbar>
125+
<md-card-content>
126+
<p>
127+
<md-input-container>
128+
<input md-input disabled placeholder="Disabled field" value="Value">
129+
</md-input-container>
130+
<md-input-container>
131+
<input md-input required placeholder="Required field">
132+
</md-input-container>
133+
</p>
134+
<p>
135+
<md-input-container style="width: 100%">
136+
<input md-input placeholder="100% width placeholder">
137+
</md-input-container>
138+
</p>
139+
<p>
140+
<md-input-container style="width: 100%">
141+
<input md-input #input placeholder="Character count (100 max)" maxLength="100">
142+
<md-hint align="end">{{input.value.length}} / 100</md-hint>
143+
</md-input-container>
144+
</p>
145+
<p>
146+
<md-input-container hintLabel="Hint label" style="width: 100%">
147+
<input md-input placeholder="Show Hint Label">
148+
</md-input-container>
149+
</p>
150+
151+
<p>
152+
<md-input-container>
153+
<input md-input>
154+
<md-placeholder>
155+
I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
156+
</md-placeholder>
157+
<md-hint>
158+
I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels
159+
</md-hint>
160+
</md-input-container>
161+
</p>
162+
<p>
163+
<md-input-container hintLabel="Hint label" style="width: 100%">
164+
<input md-input #hintLabelWithCharCount placeholder="Show Hint Label With Character Count">
165+
<md-hint align="end">{{hintLabelWithCharCount.value.length}}</md-hint>
166+
</md-input-container>
167+
</p>
168+
<p>
169+
<md-checkbox [(ngModel)]="dividerColor">Check to change the divider color:</md-checkbox>
170+
<md-input-container [dividerColor]="dividerColor ? 'primary' : 'accent'">
171+
<input md-input [placeholder]="dividerColor ? 'Primary color' : 'Accent color'">
172+
</md-input-container>
173+
</p>
174+
<p>
175+
<md-checkbox [(ngModel)]="requiredField"> Check to make required:</md-checkbox>
176+
<md-input-container>
177+
<input md-input
178+
[required]="requiredField"
179+
[placeholder]="requiredField ? 'Required field' : 'Not required field'">
180+
</md-input-container>
181+
</p>
182+
<p>
183+
<md-checkbox [(ngModel)]="floatingLabel"> Check to make floating label:</md-checkbox>
184+
<md-input-container [floatingPlaceholder]="floatingLabel">
185+
<input md-input [placeholder]="floatingLabel ? 'Floating label' : 'Not floating label'">
186+
</md-input-container>
187+
</p>
188+
189+
<p>
190+
<md-input-container>
191+
<input md-input placeholder="Prefixed" value="example">
192+
<div md-prefix>Example:&nbsp;</div>
193+
</md-input-container>
194+
<md-input-container align="end">
195+
<input md-input placeholder="Suffixed" value="123">
196+
<span md-suffix>.00 €</span>
197+
</md-input-container>
198+
<br/>
199+
Both:
200+
<md-input-container align="end">
201+
<input md-input #email placeholder="Email Address" value="angular-core">
202+
<span md-prefix>
203+
<md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>
204+
&nbsp;
205+
</span>
206+
<span md-suffix class="demo-transform" [class.primary]="email.focused">
207+
&nbsp;@gmail.com
208+
</span>
209+
</md-input-container>
210+
</p>
211+
212+
<p>
213+
Empty: <md-input-container><input md-input></md-input-container>
214+
<label>Label: <md-input-container><input md-input></md-input-container></label>
215+
</p>
216+
</md-card-content>
217+
</md-card>
218+
219+
<md-card class="demo-card demo-basic">
220+
<md-toolbar color="primary">Number Inputs</md-toolbar>
221+
<md-card-content>
222+
<table width="100%">
223+
<thead>
224+
<td>Table</td>
225+
<td colspan="3">
226+
<button (click)="addABunch(5)">Add 5</button>
227+
<button (click)="addABunch(10)">Add 10</button>
228+
<button (click)="addABunch(100)">Add 100</button>
229+
<button (click)="addABunch(1000)">Add 1000</button>
230+
</td>
231+
</thead>
232+
<tr *ngFor="let item of items; let i = index">
233+
<td>{{i+1}}</td>
234+
<td>
235+
<md-input-container>
236+
<input md-input
237+
type="number"
238+
placeholder="value"
239+
aria-label="hello"
240+
[(ngModel)]="items[i].value">
241+
</md-input-container>
242+
</td>
243+
<td>
244+
<input type="number" [(ngModel)]="items[i].value">
245+
</td>
246+
<td>{{item.value}}</td>
247+
</tr>
248+
</table>
249+
</md-card-content>
250+
</md-card>
251+
252+
253+
<md-card class="demo-card demo-basic">
254+
<md-toolbar color="primary">Textarea Autosize</md-toolbar>
255+
<md-card-content>
256+
<textarea md-autosize class="demo-textarea"></textarea>
257+
<div>
258+
<md-input-container>
259+
<textarea md-input
260+
md-autosize
261+
placeholder="Autosized textarea"></textarea>
262+
</md-input-container>
263+
</div>
264+
</md-card-content>
265+
</md-card>

‎src/demo-app/input/input-container-demo.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
let max = 5;
5+
6+
@Component({
7+
moduleId: module.id,
8+
selector: 'input-container-demo',
9+
templateUrl: 'input-container-demo.html',
10+
styleUrls: ['input-demo.css'],
11+
})
12+
export class InputContainerDemo {
13+
dividerColor: boolean;
14+
requiredField: boolean;
15+
floatingLabel: boolean;
16+
name: string;
17+
items: any[] = [
18+
{ value: 10 },
19+
{ value: 20 },
20+
{ value: 30 },
21+
{ value: 40 },
22+
{ value: 50 },
23+
];
24+
rows = 8;
25+
26+
addABunch(n: number) {
27+
for (let x = 0; x < n; x++) {
28+
this.items.push({ value: ++max });
29+
}
30+
}
31+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<p>Is Android: {{ platform.ANDROID }}</p>
2+
<p>Is iOS: {{ platform.IOS }}</p>
3+
<p>Is Firefox: {{ platform.FIREFOX }}</p>
4+
<p>Is Blink: {{ platform.BLINK }}</p>
5+
<p>Is Webkit: {{ platform.WEBKIT }}</p>
6+
<p>Is Trident: {{ platform.TRIDENT }}</p>
7+
<p>Is Edge: {{ platform.EDGE }}</p>
8+
9+
<p>
10+
Supported input types:
11+
<span *ngFor="let type of supportedInputTypes">{{ type }}, </span>
12+
</p>

0 commit comments

Comments
 (0)