Skip to content

Commit da9b2a8

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 da9b2a8

File tree

7 files changed

+129
-1248
lines changed

7 files changed

+129
-1248
lines changed

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

Lines changed: 22 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -2,175 +2,50 @@
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>
2517
</form>
2618
</md-card-content>
2719
</md-card>
2820

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>
38-
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>
46-
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>
51-
52-
</md-card-content>
53-
</md-card>
54-
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>
66-
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>
77-
7821
<md-card class="demo-card">
7922
<md-card-title>
80-
Hello <md-input [(ngModel)]="name" type="text" placeholder="First name"></md-input>,
23+
Hello <input md-input [(ngModel)]="name" type="text" placeholder="First name">,
8124
how are you?
8225
</md-card-title>
8326
<md-card-content>
8427
<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>
28+
<input md-input disabled placeholder="Disabled field" value="Value">
29+
<input md-input required placeholder="Required field">
10030
</p>
10131

10232
<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>
33+
<input md-input style="margin: 32px" placeholder="Prefixed" value="example" [mdPrefix]="prefix">
34+
<input md-input placeholder="Suffixed" value="123" align="end" [mdSuffix]="suffix">
13135

132-
<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>
36+
<template #prefix><div>Example:&nbsp;</div></template>
37+
<template #suffix><span>.00 €</span></template>
38+
<br/>
39+
40+
<input md-input placeholder="Prefixed" value="example" [mdPrefix]="'Example: '">
41+
<input md-input placeholder="Suffixed" value="123" align="end" mdSuffix=".00 $">
13942
<br/>
43+
14044
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>
45+
<input md-input #email placeholder="Email Address" value="angular-core" align="end" [mdPrefix]="bothPrefix" [mdSuffix]="bothSuffix">
14646

147-
<p>
148-
Empty: <md-input></md-input>
149-
<label>Label: <md-input></md-input></label>
47+
<template #bothPrefix><span><md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>&nbsp;</span></template>
48+
<template #bothSuffix><span class="demo-transform" [class.primary]="email.focused">&nbsp;@gmail.com</span></template>
15049
</p>
15150
</md-card-content>
15251
</md-card>
153-
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>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, ViewChild, ElementRef, OnInit, Input} from '@angular/core';
2-
import {MdProjectionHostDirective, MdProjectionService} from '@angular/material';
2+
import {DomProjectionHost, DomProjection} from '@angular/material';
33

44

55
@Component({
@@ -18,10 +18,10 @@ import {MdProjectionHostDirective, MdProjectionService} from '@angular/material'
1818
`]
1919
})
2020
export class ProjectionTestComponent implements OnInit {
21-
@ViewChild(MdProjectionHostDirective) _host: MdProjectionHostDirective;
21+
@ViewChild(DomProjectionHost) _host: DomProjectionHost;
2222
@Input('class') cssClass: any;
2323

24-
constructor(private _projection: MdProjectionService, private _ref: ElementRef) {}
24+
constructor(private _projection: DomProjection, private _ref: ElementRef) {}
2525

2626
ngOnInit() {
2727
this._projection.project(this._ref, this._host);

‎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;

‎src/lib/input/input.html

Lines changed: 10 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,18 @@
1-
<div class="md-input-wrapper">
1+
<div (click)="focus()"
2+
[class]="_cssClass"
3+
[attr.style]="_safeCssStyle"
4+
[class.md-end]="align == 'end'"
5+
[class.md-input-wrapper]="true">
26
<div class="md-input-table">
3-
<div class="md-input-prefix"><ng-content select="[md-prefix]"></ng-content></div>
7+
<div class="md-input-prefix"><template [ngTemplateOutlet]="_prefixTemplate()"></template></div>
8+
<template #prefix>{{mdPrefix}}</template>
49

510
<div class="md-input-infix">
6-
<input #input
7-
*ngIf="_elementType === 'input'"
8-
class="md-input-element"
9-
[class.md-end]="align == 'end'"
10-
[attr.aria-label]="ariaLabel"
11-
[attr.aria-labelledby]="ariaLabelledBy"
12-
[attr.aria-disabled]="ariaDisabled"
13-
[attr.aria-required]="ariaRequired"
14-
[attr.aria-invalid]="ariaInvalid"
15-
[attr.autocomplete]="autocomplete"
16-
[attr.autocorrect]="autocorrect"
17-
[attr.autocapitalize]="autocapitalize"
18-
[autofocus]="autofocus"
19-
[disabled]="disabled"
20-
[id]="inputId"
21-
[attr.list]="list"
22-
[attr.max]="max"
23-
[attr.maxlength]="maxlength"
24-
[attr.min]="min"
25-
[attr.minlength]="minlength"
26-
[readonly]="readonly"
27-
[required]="required"
28-
[spellcheck]="spellcheck"
29-
[attr.step]="step"
30-
[attr.tabindex]="tabindex"
31-
[type]="type"
32-
[attr.name]="name"
33-
(focus)="_handleFocus($event)"
34-
(blur)="_handleBlur($event)"
35-
[(ngModel)]="value"
36-
(change)="_handleChange($event)">
37-
38-
<textarea
39-
#input
40-
*ngIf="_elementType === 'textarea'"
41-
class="md-input-element md-input-element-textarea"
42-
[class.md-end]="align == 'end'"
43-
[attr.aria-label]="ariaLabel"
44-
[attr.aria-labelledby]="ariaLabelledBy"
45-
[attr.aria-disabled]="ariaDisabled"
46-
[attr.aria-required]="ariaRequired"
47-
[attr.aria-invalid]="ariaInvalid"
48-
[attr.autocomplete]="autocomplete"
49-
[attr.autocapitalize]="autocapitalize"
50-
[attr.cols]="cols"
51-
[attr.rows]="rows"
52-
[attr.wrap]="wrap"
53-
[autofocus]="autofocus"
54-
[disabled]="disabled"
55-
[id]="inputId"
56-
[attr.maxlength]="maxlength"
57-
[attr.minlength]="minlength"
58-
[readonly]="readonly"
59-
[required]="required"
60-
[spellcheck]="spellcheck"
61-
[attr.tabindex]="tabindex"
62-
[attr.name]="name"
63-
(focus)="_handleFocus($event)"
64-
(blur)="_handleBlur($event)"
65-
[(ngModel)]="value"
66-
(change)="_handleChange($event)"></textarea>
67-
68-
69-
<label class="md-input-placeholder"
70-
[attr.for]="inputId"
71-
[class.md-empty]="empty"
72-
[class.md-focused]="focused"
73-
[class.md-float]="floatingPlaceholder"
74-
[class.md-accent]="dividerColor == 'accent'"
75-
[class.md-warn]="dividerColor == 'warn'"
76-
*ngIf="_hasPlaceholder()">
77-
<ng-content select="md-placeholder"></ng-content>
78-
{{placeholder}}
79-
<span class="md-placeholder-required" *ngIf="required">*</span>
80-
</label>
11+
<dom-projection-host></dom-projection-host>
8112
</div>
8213

83-
<div class="md-input-suffix"><ng-content select="[md-suffix]"></ng-content></div>
14+
<div class="md-input-suffix"><template [ngTemplateOutlet]="_suffixTemplate()"></template></div>
15+
<template #suffix>{{mdSuffix}}</template>
8416
</div>
8517

8618
<div class="md-input-underline"

‎src/lib/input/input.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ $md-input-underline-disabled-background-image:
1515
width: 100% / $md-input-floating-placeholder-scale-factor;
1616
}
1717

18-
md-input, md-textarea {
18+
.md-input-wrapper {
1919
display: inline-block;
2020
position: relative;
2121
font-family: $md-font-family;
@@ -55,7 +55,7 @@ md-input, md-textarea {
5555
}
5656

5757
// The Input element proper.
58-
.md-input-element {
58+
input[md-input], textarea[md-input] {
5959
// Font needs to be inherited, because by default <input> has a system font.
6060
font: inherit;
6161

@@ -71,7 +71,7 @@ md-input, md-textarea {
7171
padding: 0;
7272
width: 100%;
7373

74-
&.md-end {
74+
.md-end & {
7575
text-align: right;
7676

7777
[dir='rtl'] & {

0 commit comments

Comments
 (0)