Skip to content

Commit 20a1787

Browse files
hanslhansl
committed
feature(md-input): refactor MdInput as an attribute
The goal is to simplify the MdInput interface and allow it to evolve and collaborate with other directives on an <input>. For example, Chips could be a directive on the `<input>` as well. The next steps are going to be adding back MdPlaceholder as such a directive that collaborates with MdInput.
1 parent 0bbb878 commit 20a1787

File tree

7 files changed

+246
-1233
lines changed

7 files changed

+246
-1233
lines changed

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

Lines changed: 145 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -2,175 +2,180 @@
22
<md-toolbar color="primary">Basic</md-toolbar>
33
<md-card-content>
44
<form>
5-
<md-input class="demo-full-width" placeholder="Company (disabled)" disabled value="Google">
6-
</md-input>
5+
<input md-input class="demo-full-width" placeholder="Company (disabled)" disabled value="Google">
6+
7+
<input md-input value="test">
78

89
<table style="width: 100%" cellspacing="0"><tr>
9-
<td><md-input placeholder="First name" style="width: 100%"></md-input></td>
10-
<td><md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input></td>
10+
<td><input md-input placeholder="First name" style="width: 100%"></td>
11+
<td><input md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></td>
1112
</tr></table>
1213
<p>
13-
<md-textarea class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-textarea>
14-
<md-textarea class="demo-full-width" placeholder="Address 2"></md-textarea>
14+
<textarea md-input class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
15+
<textarea md-input class="demo-full-width" placeholder="Address 2"></textarea>
1516
</p>
16-
<table style="width: 100%" cellspacing="0"><tr>
17-
<td><md-input class="demo-full-width" placeholder="City" value="Mountain View"></md-input></td>
18-
<td><md-input class="demo-full-width" placeholder="State" maxLength="2" value="CA"></md-input></td>
19-
<td><md-input #postalCode class="demo-full-width" maxLength="5"
20-
placeholder="Postal Code"
21-
value="94043">
22-
<md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>
23-
</md-input></td>
24-
</tr></table>
17+
<!--<table style="width: 100%" cellspacing="0"><tr>-->
18+
<!--<td><md-input class="demo-full-width" placeholder="City" value="Mountain View"></md-input></td>-->
19+
<!--<td><md-input class="demo-full-width" placeholder="State" maxLength="2" value="CA"></md-input></td>-->
20+
<!--<td><md-input #postalCode class="demo-full-width" maxLength="5"-->
21+
<!--placeholder="Postal Code"-->
22+
<!--value="94043">-->
23+
<!--<md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>-->
24+
<!--</md-input></td>-->
25+
<!--</tr></table>-->
2526
</form>
2627
</md-card-content>
2728
</md-card>
2829

29-
<md-card class="demo-card demo-basic">
30-
<md-toolbar color="primary">Prefix + Suffix</md-toolbar>
31-
<md-card-content>
32-
<md-input placeholder="amount" align="end">
33-
<span md-prefix>$&nbsp;</span>
34-
<span md-suffix>.00</span>
35-
</md-input>
36-
</md-card-content>
37-
</md-card>
30+
<!--<md-card class="demo-card demo-basic">-->
31+
<!--<md-toolbar color="primary">Prefix + Suffix</md-toolbar>-->
32+
<!--<md-card-content>-->
33+
<!--<md-input placeholder="amount" align="end">-->
34+
<!--<span md-prefix>$&nbsp;</span>-->
35+
<!--<span md-suffix>.00</span>-->
36+
<!--</md-input>-->
37+
<!--</md-card-content>-->
38+
<!--</md-card>-->
3839

39-
<md-card class="demo-card demo-basic">
40-
<md-toolbar color="primary">Divider Colors</md-toolbar>
41-
<md-card-content>
42-
<h4>Input</h4>
43-
<md-input dividerColor="primary" placeholder="Default Color" value="example"></md-input>
44-
<md-input dividerColor="accent" placeholder="Accent Color" value="example"></md-input>
45-
<md-input dividerColor="warn" placeholder="Warn Color" value="example"></md-input>
40+
<!--<md-card class="demo-card demo-basic">-->
41+
<!--<md-toolbar color="primary">Divider Colors</md-toolbar>-->
42+
<!--<md-card-content>-->
43+
<!--<h4>Input</h4>-->
44+
<!--<md-input dividerColor="primary" placeholder="Default Color" value="example"></md-input>-->
45+
<!--<md-input dividerColor="accent" placeholder="Accent Color" value="example"></md-input>-->
46+
<!--<md-input dividerColor="warn" placeholder="Warn Color" value="example"></md-input>-->
4647

47-
<h4>Textarea</h4>
48-
<md-textarea dividerColor="primary" placeholder="Default Color" value="example"></md-textarea>
49-
<md-textarea dividerColor="accent" placeholder="Accent Color" value="example"></md-textarea>
50-
<md-textarea dividerColor="warn" placeholder="Warn Color" value="example"></md-textarea>
48+
<!--<h4>Textarea</h4>-->
49+
<!--<md-textarea dividerColor="primary" placeholder="Default Color" value="example"></md-textarea>-->
50+
<!--<md-textarea dividerColor="accent" placeholder="Accent Color" value="example"></md-textarea>-->
51+
<!--<md-textarea dividerColor="warn" placeholder="Warn Color" value="example"></md-textarea>-->
5152

52-
</md-card-content>
53-
</md-card>
53+
<!--</md-card-content>-->
54+
<!--</md-card>-->
5455

55-
<md-card class="demo-card demo-basic">
56-
<md-toolbar color="primary">Hints</md-toolbar>
57-
<md-card-content>
58-
<h4>Input</h4>
59-
<p>
60-
<md-input placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
61-
value="Hello world. How are you?"
62-
#characterCountHintExample>
63-
<md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
64-
</md-input>
65-
</p>
56+
<!--<md-card class="demo-card demo-basic">-->
57+
<!--<md-toolbar color="primary">Hints</md-toolbar>-->
58+
<!--<md-card-content>-->
59+
<!--<h4>Input</h4>-->
60+
<!--<p>-->
61+
<!--<md-input placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"-->
62+
<!--value="Hello world. How are you?"-->
63+
<!--#characterCountHintExample>-->
64+
<!--<md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>-->
65+
<!--</md-input>-->
66+
<!--</p>-->
6667

67-
<h4>Textarea</h4>
68-
<p>
69-
<md-textarea placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
70-
value="Hello world. How are you?"
71-
#characterCountHintExample>
72-
<md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
73-
</md-textarea>
74-
</p>
75-
</md-card-content>
76-
</md-card>
68+
<!--<h4>Textarea</h4>-->
69+
<!--<p>-->
70+
<!--<md-textarea placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"-->
71+
<!--value="Hello world. How are you?"-->
72+
<!--#characterCountHintExample>-->
73+
<!--<md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>-->
74+
<!--</md-textarea>-->
75+
<!--</p>-->
76+
<!--</md-card-content>-->
77+
<!--</md-card>-->
7778

7879
<md-card class="demo-card">
7980
<md-card-title>
80-
Hello <md-input [(ngModel)]="name" type="text" placeholder="First name"></md-input>,
81+
Hello <input md-input [(ngModel)]="name" type="text" placeholder="First name">,
8182
how are you?
8283
</md-card-title>
8384
<md-card-content>
8485
<p>
85-
<md-input disabled placeholder="Disabled field" value="Value"></md-input>
86-
<md-input required placeholder="Required field"></md-input>
87-
</p>
88-
<p>
89-
<md-input placeholder="100% width placeholder" style="width: 100%"></md-input>
90-
</p>
91-
<p>
92-
<md-input placeholder="Character count (100 max)" maxLength="100" style="width: 100%"
93-
#input>
94-
<md-hint align="end">{{input.characterCount}} / 100</md-hint>
95-
</md-input>
96-
</p>
97-
<p>
98-
<md-input placeholder="Show Hint Label" style="width: 100%"
99-
hintLabel="Hint label"></md-input>
86+
<input md-input disabled placeholder="Disabled field" value="Value">
87+
<input md-input required placeholder="Required field">
10088
</p>
89+
<!--<p>-->
90+
<!--<md-input placeholder="100% width placeholder" style="width: 100%"></md-input>-->
91+
<!--</p>-->
92+
<!--<p>-->
93+
<!--<md-input placeholder="Character count (100 max)" maxLength="100" style="width: 100%"-->
94+
<!--#input>-->
95+
<!--<md-hint align="end">{{input.characterCount}} / 100</md-hint>-->
96+
<!--</md-input>-->
97+
<!--</p>-->
98+
<!--<p>-->
99+
<!--<md-input placeholder="Show Hint Label" style="width: 100%"-->
100+
<!--hintLabel="Hint label"></md-input>-->
101+
<!--</p>-->
101102

102-
<p>
103-
<md-input>
104-
<md-placeholder>
105-
I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
106-
</md-placeholder>
107-
<md-hint>
108-
I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels
109-
</md-hint>
110-
</md-input>
111-
</p>
112-
<p>
113-
<md-input placeholder="Show Hint Label With Character Count" style="width: 100%"
114-
hintLabel="Hint label" characterCounter></md-input>
115-
</p>
116-
<p>
117-
<md-checkbox [(ngModel)]="dividerColor">Check to change the divider color:</md-checkbox>
118-
<md-input [dividerColor]="dividerColor ? 'primary' : 'accent'"
119-
[placeholder]="dividerColor ? 'Primary color' : 'Accent color'"></md-input>
120-
</p>
121-
<p>
122-
<md-checkbox [(ngModel)]="requiredField"> Check to make required:</md-checkbox>
123-
<md-input [required]="requiredField"
124-
[placeholder]="requiredField ? 'Required field' : 'Not required field'"></md-input>
125-
</p>
126-
<p>
127-
<md-checkbox [(ngModel)]="floatingLabel"> Check to make floating label:</md-checkbox>
128-
<md-input [floatingPlaceholder]="floatingLabel"
129-
[placeholder]="floatingLabel ? 'Floating label' : 'Not floating label'"></md-input>
130-
</p>
103+
<!--<p>-->
104+
<!--<md-input>-->
105+
<!--<md-placeholder>-->
106+
<!--I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder-->
107+
<!--</md-placeholder>-->
108+
<!--<md-hint>-->
109+
<!--I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels-->
110+
<!--</md-hint>-->
111+
<!--</md-input>-->
112+
<!--</p>-->
113+
<!--<p>-->
114+
<!--<md-input placeholder="Show Hint Label With Character Count" style="width: 100%"-->
115+
<!--hintLabel="Hint label" characterCounter></md-input>-->
116+
<!--</p>-->
117+
<!--<p>-->
118+
<!--<md-checkbox [(ngModel)]="dividerColor">Check to change the divider color:</md-checkbox>-->
119+
<!--<md-input [dividerColor]="dividerColor ? 'primary' : 'accent'"-->
120+
<!--[placeholder]="dividerColor ? 'Primary color' : 'Accent color'"></md-input>-->
121+
<!--</p>-->
122+
<!--<p>-->
123+
<!--<md-checkbox [(ngModel)]="requiredField"> Check to make required:</md-checkbox>-->
124+
<!--<md-input [required]="requiredField"-->
125+
<!--[placeholder]="requiredField ? 'Required field' : 'Not required field'"></md-input>-->
126+
<!--</p>-->
127+
<!--<p>-->
128+
<!--<md-checkbox [(ngModel)]="floatingLabel"> Check to make floating label:</md-checkbox>-->
129+
<!--<md-input [floatingPlaceholder]="floatingLabel"-->
130+
<!--[placeholder]="floatingLabel ? 'Floating label' : 'Not floating label'"></md-input>-->
131+
<!--</p>-->
131132

132133
<p>
133-
<md-input placeholder="Prefixed" value="example">
134-
<div md-prefix>Example:&nbsp;</div>
135-
</md-input>
136-
<md-input placeholder="Suffixed" value="123" align="end">
137-
<span md-suffix>.00 €</span>
138-
</md-input>
134+
<input md-input style="margin: 32px" placeholder="Prefixed" value="example" [mdPrefix]="prefix">
135+
<input md-input placeholder="Suffixed" value="123" align="end" [mdSuffix]="suffix">
136+
137+
<template #prefix><div>Example:&nbsp;</div></template>
138+
<template #suffix><span>.00 €</span></template>
139139
<br/>
140+
141+
<input md-input placeholder="Prefixed" value="example" [mdPrefix]="'Example: '">
142+
<input md-input placeholder="Suffixed" value="123" align="end" mdSuffix=".00 $">
143+
<br/>
144+
140145
Both:
141-
<md-input #email placeholder="Email Address" value="angular-core" align="end">
142-
<span md-prefix><md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>&nbsp;</span>
143-
<span md-suffix class="demo-transform" [class.primary]="email.focused">&nbsp;@gmail.com</span>
144-
</md-input>
145-
</p>
146+
<input md-input #email placeholder="Email Address" value="angular-core" align="end" [mdPrefix]="bothPrefix" [mdSuffix]="bothSuffix">
146147

147-
<p>
148-
Empty: <md-input></md-input>
149-
<label>Label: <md-input></md-input></label>
148+
<template #bothPrefix><span><md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>&nbsp;</span></template>
149+
<template #bothSuffix><span class="demo-transform" [class.primary]="email.focused">&nbsp;@gmail.com</span></template>
150150
</p>
151+
152+
<!--<p>-->
153+
<!--Empty: <md-input></md-input>-->
154+
<!--<label>Label: <md-input></md-input></label>-->
155+
<!--</p>-->
151156
</md-card-content>
152157
</md-card>
153158

154-
<md-card class="demo-card">
155-
<table width="100%">
156-
<thead>
157-
<td>Table</td>
158-
<td colspan="3">
159-
<button (click)="addABunch(5)">Add 5</button>
160-
<button (click)="addABunch(10)">Add 10</button>
161-
<button (click)="addABunch(100)">Add 100</button>
162-
<button (click)="addABunch(1000)">Add 1000</button>
163-
</td>
164-
</thead>
165-
<tr *ngFor="let item of items; let i = index">
166-
<td>{{i+1}}</td>
167-
<td>
168-
<md-input type="number" placeholder="value" aria-label="hello" [(ngModel)]="items[i].value"></md-input>
169-
</td>
170-
<td>
171-
<input type="number" [(ngModel)]="items[i].value">
172-
</td>
173-
<td>{{item.value}}</td>
174-
</tr>
175-
</table>
176-
</md-card>
159+
<!--<md-card class="demo-card">-->
160+
<!--<table width="100%">-->
161+
<!--<thead>-->
162+
<!--<td>Table</td>-->
163+
<!--<td colspan="3">-->
164+
<!--<button (click)="addABunch(5)">Add 5</button>-->
165+
<!--<button (click)="addABunch(10)">Add 10</button>-->
166+
<!--<button (click)="addABunch(100)">Add 100</button>-->
167+
<!--<button (click)="addABunch(1000)">Add 1000</button>-->
168+
<!--</td>-->
169+
<!--</thead>-->
170+
<!--<tr *ngFor="let item of items; let i = index">-->
171+
<!--<td>{{i+1}}</td>-->
172+
<!--<td>-->
173+
<!--<md-input type="number" placeholder="value" aria-label="hello" [(ngModel)]="items[i].value"></md-input>-->
174+
<!--</td>-->
175+
<!--<td>-->
176+
<!--<input type="number" [(ngModel)]="items[i].value">-->
177+
<!--</td>-->
178+
<!--<td>{{item.value}}</td>-->
179+
<!--</tr>-->
180+
<!--</table>-->
181+
<!--</md-card>-->

‎src/lib/core/projection/projection.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export class DomProjection {
4747
* Note: without `<ng-content></ng-content>` the projection will project an empty element.
4848
*/
4949
project(ref: ElementRef, host: DomProjectionHost): void {
50+
console.log(ref, host.ref);
5051
const projectedEl = ref.nativeElement;
5152
const hostEl = host.ref.nativeElement;
5253
const childNodes = projectedEl.childNodes;

‎src/lib/input/_input-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
}
4040

4141
// See md-input-placeholder-floating mixin in input.scss
42-
md-input input:-webkit-autofill + .md-input-placeholder, .md-input-placeholder.md-float.md-focused {
42+
.md-input-wrapper input:-webkit-autofill + .md-input-placeholder, .md-input-placeholder.md-float.md-focused {
4343

4444
.md-placeholder-required {
4545
color: $input-required-placeholder-color;

0 commit comments

Comments
 (0)