Skip to content

Commit 86aad59

Browse files
vanessanschmittjelbourn
vanessanschmitt
authored and
jelbourn
committed
feat(material-experimental/chips): MDC chip APIs match existing APIs (#16145)
1 parent d511fbe commit 86aad59

26 files changed

+2865
-294
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
},
3636
"version": "8.0.1",
3737
"requiredAngularVersion": "^8.0.0 || ^9.0.0-0",
38-
"requiredMDCVersion": "^1.1.0",
38+
"requiredMDCVersion": "^2.3.1",
3939
"dependencies": {
4040
"@angular/animations": "^8.0.1",
4141
"@angular/common": "^8.0.1",
@@ -46,7 +46,7 @@
4646
"@angular/platform-browser": "^8.0.1",
4747
"@webcomponents/custom-elements": "^1.1.0",
4848
"core-js": "^2.6.1",
49-
"material-components-web": "^1.1.0",
49+
"material-components-web": "^2.3.1",
5050
"rxjs": "^6.4.0",
5151
"systemjs": "0.19.43",
5252
"tsickle": "^0.35.0",

‎src/dev-app/mdc-chips/mdc-chips-demo-module.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,31 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
import {CommonModule} from '@angular/common';
910
import {NgModule} from '@angular/core';
11+
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
12+
import {MatButtonModule} from '@angular/material/button';
13+
import {MatCardModule} from '@angular/material/card';
14+
import {MatCheckboxModule} from '@angular/material/checkbox';
15+
import {MatFormFieldModule} from '@angular/material/form-field';
16+
import {MatToolbarModule} from '@angular/material/toolbar';
1017
import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
18+
import {MatIconModule} from '@angular/material/icon';
1119
import {RouterModule} from '@angular/router';
1220
import {MdcChipsDemo} from './mdc-chips-demo';
1321

1422
@NgModule({
1523
imports: [
24+
CommonModule,
25+
FormsModule,
26+
MatButtonModule,
27+
MatCardModule,
28+
MatCheckboxModule,
1629
MatChipsModule,
30+
MatFormFieldModule,
31+
MatIconModule,
32+
MatToolbarModule,
33+
ReactiveFormsModule,
1734
RouterModule.forChild([{path: '', component: MdcChipsDemo}]),
1835
],
1936
declarations: [MdcChipsDemo],

‎src/dev-app/mdc-chips/mdc-chips-demo.html

Lines changed: 219 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,219 @@
1-
<!-- TODO: copy in demo template from existing mat-chip demo. -->
2-
Not yet implemented.
1+
<div class="demo-chips">
2+
<mat-card>
3+
<mat-toolbar color="primary">Static Chips</mat-toolbar>
4+
5+
<mat-card-content>
6+
<h4>Simple</h4>
7+
8+
<mat-chip-set>
9+
<mat-chip>Chip 1</mat-chip>
10+
<mat-chip>Chip 2</mat-chip>
11+
<mat-chip disabled>Chip 3</mat-chip>
12+
</mat-chip-set>
13+
14+
<h4>Unstyled</h4>
15+
16+
<mat-chip-set>
17+
<mat-basic-chip>Basic Chip 1</mat-basic-chip>
18+
<mat-basic-chip>Basic Chip 2</mat-basic-chip>
19+
<mat-basic-chip>Basic Chip 3</mat-basic-chip>
20+
</mat-chip-set>
21+
22+
<h4>With avatar, icons, and color</h4>
23+
24+
<mat-chip-set>
25+
<mat-chip disabled>
26+
<mat-icon matChipAvatar>home</mat-icon>
27+
Home
28+
<mat-icon matChipRemove>cancel</mat-icon>
29+
</mat-chip>
30+
31+
<mat-chip highlighted="true" color="accent">
32+
<mat-chip-avatar>P</mat-chip-avatar>
33+
Portel
34+
<mat-icon matChipRemove>cancel</mat-icon>
35+
</mat-chip>
36+
37+
<mat-chip>
38+
<mat-chip-avatar>M</mat-chip-avatar>
39+
Molly
40+
</mat-chip>
41+
42+
<mat-chip>
43+
Koby
44+
<mat-icon matChipRemove>cancel</mat-icon>
45+
</mat-chip>
46+
47+
<mat-chip>
48+
Razzle
49+
</mat-chip>
50+
51+
<mat-chip>
52+
<img src="https://material.angularjs.org/material2_assets/ngconf/Mal.png" matChipAvatar>
53+
Mal
54+
</mat-chip>
55+
56+
<mat-chip highlighted="true" color="warn">
57+
<img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
58+
Husi
59+
<mat-icon matChipRemove>cancel</mat-icon>
60+
</mat-chip>
61+
62+
<mat-chip>
63+
Good
64+
<mat-icon matChipTrailingIcon>star</mat-icon>
65+
</mat-chip>
66+
67+
<mat-chip>
68+
Bad
69+
<mat-icon matChipTrailingIcon>star_border</mat-icon>
70+
</mat-chip>
71+
72+
</mat-chip-set>
73+
74+
<h4>With Events</h4>
75+
76+
<mat-chip-set>
77+
<mat-chip highlighted="true" color="warn" *ngIf="visible"
78+
(destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
79+
With Events
80+
<mat-icon matChipRemove>cancel</mat-icon>
81+
</mat-chip>
82+
</mat-chip-set>
83+
<div>{{message}}</div>
84+
85+
</mat-card-content>
86+
</mat-card>
87+
88+
<mat-card>
89+
<mat-toolbar color="primary">Selectable Chips</mat-toolbar>
90+
91+
<mat-card-content>
92+
<button mat-button (click)="disabledListboxes = !disabledListboxes">
93+
{{disabledListboxes ? "Enable" : "Disable"}}
94+
</button>
95+
96+
<h4>Single selection</h4>
97+
98+
<mat-chip-listbox multiple="false" [disabled]="disabledListboxes">
99+
<mat-chip-option>Extra Small</mat-chip-option>
100+
<mat-chip-option>Small</mat-chip-option>
101+
<mat-chip-option>Medium</mat-chip-option>
102+
<mat-chip-option>Large</mat-chip-option>
103+
</mat-chip-listbox>
104+
105+
<h4>Multi selection</h4>
106+
107+
<mat-chip-listbox multiple="true" [disabled]="disabledListboxes">
108+
<mat-chip-option selected="true">Open Now</mat-chip-option>
109+
<mat-chip-option>Takes Reservations</mat-chip-option>
110+
<mat-chip-option selected="true">Pet Friendly</mat-chip-option>
111+
<mat-chip-option>Good for Brunch</mat-chip-option>
112+
</mat-chip-listbox>
113+
114+
</mat-card-content>
115+
</mat-card>
116+
117+
<mat-card>
118+
<mat-toolbar color="primary">Input Chips</mat-toolbar>
119+
120+
<mat-card-content>
121+
<p>
122+
The <code>&lt;mat-chip-grid&gt;</code> component pairs with the <code>matChipInputFor</code> directive
123+
to convert user input text into chips.
124+
They can be used inside a <code>&lt;mat-form-field&gt;</code>.
125+
</p>
126+
127+
<button mat-button (click)="disableInputs = !disableInputs">
128+
{{disableInputs ? "Enable" : "Disable"}}
129+
</button>
130+
131+
<h4>Input is last child of chip grid</h4>
132+
133+
<mat-form-field class="demo-has-chip-list">
134+
<mat-chip-grid #chipGrid1 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
135+
<mat-chip-row *ngFor="let person of people"
136+
(removed)="remove(person)">
137+
{{person.name}}
138+
<mat-icon matChipRemove>cancel</mat-icon>
139+
</mat-chip-row>
140+
<input [disabled]="disableInputs"
141+
placeholder="New Contributor..."
142+
[matChipInputFor]="chipGrid1"
143+
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
144+
[matChipInputAddOnBlur]="addOnBlur"
145+
(matChipInputTokenEnd)="add($event)" />
146+
</mat-chip-grid>
147+
</mat-form-field>
148+
149+
<h4>Input is next sibling child of chip grid</h4>
150+
151+
<mat-form-field>
152+
<mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
153+
<mat-chip-row *ngFor="let person of people" (removed)="remove(person)">
154+
{{person.name}}
155+
<mat-icon matChipRemove>cancel</mat-icon>
156+
</mat-chip-row>
157+
</mat-chip-grid>
158+
<input placeholder="New Contributor..."
159+
[matChipInputFor]="chipGrid2"
160+
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
161+
[matChipInputAddOnBlur]="addOnBlur"
162+
(matChipInputTokenEnd)="add($event)" />
163+
</mat-form-field>
164+
165+
<p>
166+
The example above has overridden the <code>[separatorKeys]</code> input to allow for
167+
<code>ENTER</code>, <code>COMMA</code> and <code>SEMICOLON</code> keys.
168+
</p>
169+
170+
<h4>Options</h4>
171+
<p>
172+
<mat-checkbox name="addOnBlur" [(ngModel)]="addOnBlur">Add on Blur</mat-checkbox>
173+
</p>
174+
175+
</mat-card-content>
176+
</mat-card>
177+
178+
<mat-card>
179+
<mat-toolbar color="primary">Miscellaneous</mat-toolbar>
180+
<mat-card-content>
181+
<h4>Stacked</h4>
182+
183+
<p>
184+
You can also stack the chips if you want them on top of each other.
185+
</p>
186+
187+
<mat-chip-set class="mat-mdc-chip-set-stacked" aria-orientation="vertical">
188+
<mat-chip *ngFor="let aColor of availableColors" highlighted="true"
189+
[color]="aColor.color">
190+
{{aColor.name}}
191+
</mat-chip>
192+
</mat-chip-set>
193+
194+
<h4>NgModel with multi selection</h4>
195+
196+
<mat-chip-listbox [multiple]="true" [(ngModel)]="selectedColors">
197+
<mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
198+
[value]="aColor.name">
199+
{{aColor.name}}
200+
</mat-chip-option>
201+
</mat-chip-listbox>
202+
203+
The selected colors are
204+
<span *ngFor="let color of selectedColors; let isLast=last">
205+
{{color}}{{isLast ? '' : ', '}}</span>.
206+
207+
<h4>NgModel with single selection</h4>
208+
209+
<mat-chip-listbox [(ngModel)]="selectedColor">
210+
<mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
211+
[value]="aColor.name">
212+
{{aColor.name}}
213+
</mat-chip-option>
214+
</mat-chip-listbox>
215+
216+
The selected color is {{selectedColor}}.
217+
</mat-card-content>
218+
</mat-card>
219+
</div>

‎src/dev-app/mdc-chips/mdc-chips-demo.scss

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,31 @@
1-
// TODO: copy in demo styles from existing mat-chips demo.
1+
.demo-chips {
2+
.mat-mdc-chip-set-stacked {
3+
display: block;
4+
max-width: 200px;
5+
}
6+
7+
.mat-card {
8+
padding: 0;
9+
margin: 16px;
10+
11+
& .mat-toolbar {
12+
margin: 0;
13+
}
14+
15+
& .mat-card-content {
16+
padding: 24px;
17+
}
18+
}
19+
20+
mat-basic-chip {
21+
margin: auto 10px;
22+
}
23+
24+
mat-chip-grid input {
25+
width: 150px;
26+
}
27+
}
28+
29+
.demo-has-chip-list {
30+
width: 100%;
31+
}

‎src/dev-app/mdc-chips/mdc-chips-demo.ts

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,19 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
import {COMMA, ENTER} from '@angular/cdk/keycodes';
910
import {Component} from '@angular/core';
11+
import {ThemePalette} from '@angular/material/core';
12+
import {MatChipInputEvent} from '@angular/material-experimental/mdc-chips';
13+
14+
export interface Person {
15+
name: string;
16+
}
17+
18+
export interface DemoColor {
19+
name: string;
20+
color: ThemePalette;
21+
}
1022

1123
@Component({
1224
moduleId: module.id,
@@ -15,4 +27,65 @@ import {Component} from '@angular/core';
1527
styleUrls: ['mdc-chips-demo.css'],
1628
})
1729
export class MdcChipsDemo {
30+
visible = true;
31+
selectable = true;
32+
removable = true;
33+
addOnBlur = true;
34+
disabledListboxes = false;
35+
disableInputs = false;
36+
message = '';
37+
38+
// Enter, comma, semi-colon
39+
separatorKeysCodes = [ENTER, COMMA, 186];
40+
41+
selectedPeople = null;
42+
43+
people: Person[] = [
44+
{name: 'Kara'},
45+
{name: 'Jeremy'},
46+
{name: 'Topher'},
47+
{name: 'Elad'},
48+
{name: 'Kristiyan'},
49+
{name: 'Paul'}
50+
];
51+
52+
availableColors: DemoColor[] = [
53+
{name: 'none', color: undefined},
54+
{name: 'Primary', color: 'primary'},
55+
{name: 'Accent', color: 'accent'},
56+
{name: 'Warn', color: 'warn'}
57+
];
58+
59+
displayMessage(message: string): void {
60+
this.message = message;
61+
}
62+
63+
add(event: MatChipInputEvent): void {
64+
const {input, value} = event;
65+
66+
// Add our person
67+
if ((value || '').trim()) {
68+
this.people.push({ name: value.trim() });
69+
}
70+
71+
// Reset the input value
72+
if (input) {
73+
input.value = '';
74+
}
75+
}
76+
77+
remove(person: Person): void {
78+
const index = this.people.indexOf(person);
79+
80+
if (index >= 0) {
81+
this.people.splice(index, 1);
82+
}
83+
}
84+
85+
toggleVisible(): void {
86+
this.visible = false;
87+
}
88+
89+
selectedColors: string[] = ['Primary', 'Warn'];
90+
selectedColor = 'Accent';
1891
}

‎src/material-examples/example-module.ts

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)